标签：
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
<b>粗体</b>
<p>hello,world!</p>
</br>换行
<p>定义段落</p>
<b>第一行</b>
<b>第二行</b></br>
<b >第三行</b><br/>
<font size=20 color=blue>字体变化/颜色</font>
<!---注释-->
<b><font size=10>©</font>2015博客园</b>
</br><a href=‘http://www.qq.com‘>腾讯首页</a>
<br/><a href=‘d:\‘><font color=green>本地</font></a>
<a href=‘http://www.qq.com‘target=‘_blank‘>打开新窗口1</a>
<a href=‘http://www.qq.com‘target=‘_self‘>替换当前页面</a>
<a href="mailto:869710179@qq.com">我的邮箱</a>
</br><a href=‘a.jpg‘ target=‘_blank‘><img src=‘a.jpg‘ height=30 width=30>图片</img></a>
<img src=‘a.jpg‘ height=30 width=30 border=10>边框图片1</img>
<img src=‘a.jpg‘ height=30 width=30 alt=100>边框图片2</img>
<!--表格属性:bordercolor=‘red‘ cellcaligh=5 cellspacing=10(空隙大小,表示2个列，行间距离) cellpadding=10(填充的大小，各行各列中内容) bgcolor=‘yellow‘ --->
td列 tr行
<br>表格tab
<table border=5 bordercolor=‘red‘ bgcolor=‘yellow‘ align="center" width=500px>
<tr align="center"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr align="center"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr align="center"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</body>
</html>
例子:
<html>
<head>
<title>表格练习与合并表格</title>
</head>
colspan=3合并列
rowspan=3合并行
<body>
<table align=‘center‘ cellspacing=0 height=180 border=1 bordercolor=#E674EA align="center" width=400>
<tr><td align=‘center‘ colspan=3>星期一菜谱</tr>
<tr><td align=‘center‘rowspan=2>蔬菜</td><td align=‘center‘>青菜茄子</td><td align=‘center‘>花椒土豆</td></tr>
<tr><td align=‘center‘>小葱豆腐</td><td align=‘center‘>炒白菜</td></tr>
<tr><td align=‘center‘rowspan=2>荤菜</td><td align=‘center‘>鱼香肉丝</td><td align=‘center‘>小虾</td></tr>
<tr><td align=‘center‘>火锅<img src=‘b.png‘ width=70,height=60></img></td><td align=‘center‘>小吃</td></tr>
</table>
</body>
</html>
效果大致实现了
<html>
<head>
<title>表格练习2</title>
</head>
<body>
<table border=1 width=400px align=‘center‘>
<tr><td align=‘center‘>项目</td><td colspan=5 align=‘center‘>上课</td><td colspan=2 align=‘center‘>休息</td></tr>
<tr><td align=‘center‘>星期</td><td align=‘center‘>星期1</td><td align=‘center‘>星期2</td><td align=‘center‘>星期3</td><td align=‘center‘>星期4</td><td align=‘center‘>星期5</td><td align=‘center‘>星期6</td><td align=‘center‘>星期7</td></tr>
<tr><td rowspan=4 align=‘center‘>上午</td><td align=‘center‘>语言</td><td align=‘center‘>英文</td><td align=‘center‘>英文</td><td align=‘center‘>物理</td><td>计算机</td><td>计算机</td><td rowspan=4>上午</td></tr>
<tr><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr>
<tr><td>化学</td><td>语文</td><td>体育</td><td>计算机</td><td>英文</td><td>计算机</td></tr>
<tr><td>政治</td><td>英文</td><td>体育</td><td>历史</td><td>地理</td><td>计算机</td></tr>
<tr><td rowspan=2>下午</td><td>语言</td><td>英文</td><td>英文</td><td>物理</td><td>计算机</td><td>数学</td><td rowspan=2>下午</td></tr>
<tr><<td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr>
</table>
</body>
</html>
1、文件在当前目录
Page2.html访问Page2Image.jpg
<img src=”./Page2Image.jpg”>或者<img src=”Page2Image. jpg”>
2、文件在上一层目录
Page1.html访问Image下的Image.jpg
<img src=”../Image/Image.jpg”>
Page2.html访问Image下的Image.jpg
<img src=”../../Image/Image.jpg”>
3、文件在下一层目录
Page1.html访问Site2文件夹下的Page2Image.jpg
<img src=” ./Site2/Image.jpg”><img src=” Site2/Image.jpg”>
4、根目录表示法,任何页面访问Image下的Image.jpg图片
<img src=”/Image/Image.jpg”>
<html>
<head>
<title>无序列表 有序列表 框架</title>
</head>
<body>
<b>无序列表</b>
<ul>
<li>网络游戏</li>
<li>单机游戏</li>
<b>其他符号</b>
</ul>
<ul type=‘circle‘>
<li>网络游戏</li>
<li>单机游戏</li>
<b>其他符号</b>
</ul>
<ul type=‘square‘>
<li>网络游戏</li>
<li>单机游戏</li>
<b>其他符号</b>
</ul>
</br>
<b>有序列表</b>
<ol>
<li>星期</li>
<li> 1</li>
</ol>
<ol type=‘i‘>
<li>星期</li>
<li> 1</li>
</ol>
<b>定制列表</b>
<ol start=5>
<li>星期1</ul>
</ol>
<br/>
<b>frame框架标记</b>
语法
<framaeset cols="按照列百分比分隔" rows=‘按照行百分比分隔‘.>
<frame 属性../>
</framaeset>
</body>
</html>
frmae
aa.html文件
<html>
<head>
<title>fram1</title>
</head>
<body bgcolor=‘yellow‘>
<b>刘德华</b>
</br>
<b>周杰伦</b>
</body>
</html>
bb.html文件
<html>
<head>
<title>fram2</title>
</head>
<b>歌词</b>
</body>
</html>
all.html文件
<frameset cols=‘20%,*‘ frameborder=‘0‘ >
<frame src=‘aa.html‘ noresize />
<frame src=‘bb.html‘/>
</frameset>
注意：如果使用frame时，不需要用body存在
frame例子
yy1.html
<html>
<head>
<title>音乐1</title>
</head>
<body bgcolor=‘silent‘>
<b><a href=‘yy2.html‘ target=‘new0‘ target=‘_self‘>小苹果0</a></b></br>
<b><a href=‘yy3.html‘ target=‘new0‘ target=‘_self‘>小苹果1</a></b></br>
<b><a href=‘#‘>小苹果2</a></b></br>
</body>
</html>
yy2.html
<html>
<head>
<title>音乐2</title>
</head>
<body bgcolor=‘yellow‘>
歌曲1。。。。。。
</body>
</html>
yy3.html
<html>
<head>
<title>音乐3</title>
</head>
<body bgcolor=‘bule‘>
歌曲2。。、。。。。。
</body>
</html>
allyy.html
<frameset cols=‘20%,*‘ frameborder=0>
<frame src=‘yy1.html‘ noresize/>
<frame src=‘yy2.html‘ name=‘new0‘/>
<frame src=‘yy3.html‘ name=‘new0‘/>
</frame>
</frameset>
form
<html>
<head><title>表单</title></head>
<body>
form语法
<form action=‘url‘ method=‘提示方法‘(get/post)，默认是‘get‘>
</form>
</br>例子
<h1>登录界面</h1>
<form action=‘ok.html‘ method=‘post‘>
用户名:<input type=‘text‘ name=‘username‘/></br>
密 码:<input type=‘password‘ name=‘pwd‘/></br>
<input type=‘submit‘ value=‘登录‘/>
<input type=‘reset‘ value=‘重置‘/》
</form>
</br>
<form action=‘ok.html‘ method=‘post‘>
用户名:<input type=‘text‘ name=‘username‘/></br>
密 码:<input type=‘password‘ name=‘pwd‘/></br>
<input type=‘image‘ src=‘aa.jpg‘/>
<input type=‘reset‘ value=‘重置‘/>
</form>
</body>
</html>
<!---------type =‘text ,password,hidden checked redio submit reset‘--- get会显示密码 ,post不会显示密码>
ok.html
<html>
<head><title>提示</title></head>
<body>
<b>Ok和</b>
</body>
</html>
form表单例子
<html>
<head><title>表单</title></head>
<body>
form语法
<form action=‘url‘ method=‘提示方法‘(get/post)，默认是‘get‘>
</form>
</br>例子
<h1>登录界面</h1>
<form action=‘ok.html‘ method=‘post‘>
用户名:<input type=‘text‘ name=‘username‘/></br>
密 码:<input type=‘password‘ name=‘pwd‘/></br>
<input type=‘submit‘ value=‘登录‘/>
<input type=‘reset‘ value=‘重置‘/>
<br/>
<input type=‘checkbox‘ name=‘sg‘ value=‘苹果‘ checked=‘checked‘>苹果<br/>
<input type=‘checkbox‘ name=‘sg‘ value=‘西瓜‘ >西瓜<br/>
男生<input type=‘radio‘ checked=‘checked‘ name=‘sex‘ value=‘男生‘><br/>
女生<input type=‘radio‘ name=‘sex‘ ><br/>
隐藏form
<input type=‘hidden‘ value=‘123‘ name=‘sql‘/>
下拉
<br/>请选择你的服务器
<select name =‘biradd‘>
<option value=‘zhyq‘>杭州一区</opetion>
<option value=‘zheq‘>杭州二区</opetion>
<option value=‘zhsq‘>杭州三区</opetion>
</select>
<br/>
<select name =‘biradd‘>
<option value=‘zhyq‘>---请选择你的服务器-----</opetion>
<option value=‘zhyq‘>杭州一区</opetion>
<option value=‘zheq‘>杭州二区</opetion>
<option value=‘zhsq‘>杭州三区</opetion>
</select>
</br>
文本域
<textarea cols=30 rows=10>请输入需要的内容</textarea>
<br/>
<input type=‘file‘ name=‘myfile‘/>请选择文件
</form>
</body>
</html>
<html>
<head>
<title>文字</title>
</head>
<body >
<h1>标题</h1>
<font face=‘华文彩云‘ style=‘font-size:150px‘>标题</font></br>
<b><u><i>测试</i></u></b>
<blockquote>缩进</blockquote></br>
<blink>不缩进</blink>
</br>图片<img src=‘b.png‘ alt=‘png‘ width=100px />
<select name =‘biradd‘ size=3 multiple>
<option value=‘zhyq‘>---请选择你的服务器-----</opetion>
<option value=‘zhyq‘>杭州一区</opetion>
<option value=‘zheq‘>杭州二区</opetion>
<option value=‘zhsq‘>杭州三区</opetion>
</select><br>
<textarea cols=30 rows=10 wrap=off ></textarea></br>
<table border=1>
<tr><th>1号</th><th>2号</th></tr>
<tr><td>1</td><td>2</td><</tr>
</table>
<table border=1 width=100px height=100px>
<tr><th valign=‘top‘>1号</th><th>2号</th></tr>
<tr><td valign=‘top‘>1</td><td>2</td><</tr>
</table>
</br>移动的文本
</br>
<marquee>移动的文本</marquee>
<marquee direction=‘right‘ scrolldelay=500 scrollamount=100>right的文本</marquee>
<marquee bihavior=‘scroll‘>right1的文本</marquee>
<marquee bihavior=‘slide‘>right2的文本</marquee>
<marquee bihavior=‘altrnate‘>right3的文本</marquee>
<br/>播放
<embed src=‘E:\\aa.mp4‘ /></br>
<embed src=‘a.gif‘ dynsrc=‘e:\\aa.mp4‘ start=‘mouseover‘ loop=2 url=‘‘ />
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/mhxy13867806343/p/4347884.html
