HTML 常用标签及示例

阅读：评论：0

HTML 常用标签及示例

一、基础标签：

<html>	定义 HTML 文档。
<title>	定义文档的标题。
<body>	定义文档的主体。
<h1> to <h6>	定义 HTML 标题。
<p>	定义段落。
<br>	定义简单的折行。
<hr>	定义水平线。
<!--...-->	定义注释。

例：

代码：

<html>
<head>
<span style="white-space:pre">	</span><title>HTML页面</title>
</head><body>
<span style="white-space:pre">	</span><h1>标题一</h1>
<span style="white-space:pre">	</span><h2>标题二</h2><span style="white-space:pre">	</span><h3>标题三</h3>
<span style="white-space:pre">	</span><p> body元素的内容会显示在浏览器中。</p>
<span style="white-space:pre">	</span><p> title元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>

结果：

二、表单：

<form>	定义供用户输入的 HTML 表单。
<input>	定义输入控件。
<textarea>	定义多行的文本输入控件。
<button>	定义按钮。
<select>	定义选择列表（下拉列表）。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<label>	定义 input 元素的标注。
<fieldset>	定义围绕表单中元素的边框。
<legend>	定义 fieldset 元素的标题。

例：

代码：

<html>
<head><title>HTML页面</title>
</head><body><form name="form1" action="#" method="post"><fieldset><legend>个人信息</legend>姓名：<input type="text" name="username"><br /><br />密码:<input type="password" name="password"><br /><br />性别：<input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female">女 <br /><br />爱好:<input type="checkbox" name="basketball">篮球<input type="checkbox" name="singing">唱歌<input type="checkbox" name="running">跑步<input type="checkbox" name="play_games">打游戏<br /><br />车：<select name="cars"><option>Ferrari</option><option>Lamborghini</option><option>Aston Martin</option><option>Bentley</option></select><br /><br />简介:<textarea rows="10" cols="30">个人简介</textarea><br /><br /><input type="button" name="submit" value="提交"><br /></fieldset></form>
</body>
</html>

注释：

action ：规定当提交表单时向何处发送表单数据，#代表发送的url地址。method：规定用于发送 form-data 的 HTTP 方法。有get和 post两种方法。

<br /> 表示换行。 表示一个空格。

结果：

三、表格：

<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格中的表头单元格。
<tr>	定义表格中的行。
<td>	定义表格中的单元。
<thead>	定义表格中的表头内容。
<tbody>	定义表格中的主体内容。
<tfoot>	定义表格中的表注内容（脚注）。
<col>	定义表格中一个或多个列的属性值。
<colgroup>	定义表格中供格式化的列组。

例：

代码：

<html>
<head><title>HTML页面</title>
</head><body><form name="form1" action="#" method="post"><table border="1"><caption>成绩列表</caption><tr><th>姓名</th><th>语文</th><th>数学</th></tr><tr><td>小明</td><td>85</td><td>90</td></tr><tr><td>小刚</td><td>90</td><td>95</td></tr><tr><td>小陈</td><td>90</td><td>90</td></tr>  </table><table border="1" cellspacing="0"><caption>标题</caption><tr><th>姓名</th><th>语文</th><th>数学</th></tr><tr><td>小明总分</td><td colspan="2" align="center">175</td></tr><tr><td>小刚</td><td rowspan="2">180</td><td>90</td>	   </tr><tr><td>小陈</td><td>90</td></tr></table></form>
</body>
</html>

注释：cellspacing：规定空格间的空白。rowspan=“2”表示行占两行。colspan=“2”表示列占两列。

结果：

四、列表：

<ul>	定义无序列表。
<ol>	定义有序列表。
<li>	定义列表的项目。

<dl>	定义定义列表。
<dt>	定义定义列表中的项目。
<dd>	定义定义列表中项目的描述。
<menu>	定义命令的菜单/列表。
<menuitem>	定义用户可以从弹出菜单调用的命令/菜单项目。

例：

代码：

<html><body><h4>无序列表：</h4>
<ul><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul>
<ul type="circle"><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul><h4>有序列表</h4>
<ol><li>咖啡</li><li>牛奶</li><li>茶</li>
</ol><ol start="10"><li>咖啡</li><li>牛奶</li><li>茶</li>
</ol></body>
</html>

结果：

五、框架：

<frame>	定义框架集的窗口或框架。
<frameset>	定义框架集。
<noframes>	定义针对不支持框架的用户的替代内容。
<iframe>	定义内联框架。