您的位置：首页 > Web前端 > HTML

HTML 常用标签及示例

2016-09-19 18:26 387 查看

一、基础标签：

<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>
e83c
;
</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>定义内联框架。

六、链接：

<a>定义锚。
<link>定义文档与外部资源的关系。
例：

<a href="http://www.w3school.com.cn">W3School</a>

七、图像：

<img>定义图像。
<map>定义图像映射。
<area>定义图像地图内部的区域。
例：

<img src="img/1.jpg"  alt="图片" />
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航