HTML 常用标签及示例

来源：互联网发布：网络主播收入来源编辑：程序博客网时间：2024/06/06 02:18

一、基础标签：

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

六、链接：

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

例：

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

七、图像：

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

例：

1 0