HTML常用标签（代码＋样例）持续更新

建议可查阅文档：

1.W3C：https://www.w3school.com.cn/

2.MDN:https://developer.mozilla.org/zh-CN/

1.html骨架标签

代码：

<html>                        /*根标签*/<head>                      /*文档的头部，注意其中必须设置title*/<title>练习中</title>     /*网页的标题*/</head><body>                     /*文档主体，基本内容都写在这里*/菜鸡在练习中！</body>
</html>

样例：

HTML标签关系：

1.嵌套关系

  <head><title>练习中</title></head>

也称为父子级关系，<head>为父级，<title>为子级

2.并列关系

<head></head>
<body></body>

<head>和<body>即为并列关系，也称兄弟关系

2.<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

<!DOCTYPE html> 指的是HTML5的标准，写在最顶端

3.<html lang="en">

<html lang="en">指的是English，页面语言为英语

<html lang="zh-CN">指的是中文

4.<meta charset="UTF-8">

UTF-8是目前最常用的字符集编码方式，基本包含全世界所有国家要用到的字符

其他常用字符集:1.GB2312 简体中文

2.BIG5 繁体中文

3.GBK GB2312的扩展，加入对繁体中文的支持

5.标题标签h

<h1>~<h6>,共有6个等级，<h1>一级标题最大，文字依次变小，块级元素，效果如下图

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>早上好</h1><h2>早上好</h2><h3>早上好</h3><h4>早上好</h4><h5>早上好</h5><h6>早上好</h6>
</body>
</html>

样例：

6.段落标签p

<p> </p>:段落与段落之间会自动换行

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>全书虚实互补、虚实相生。以实笔写生，以虚笔写死。这样一来，“生”的部分写得充实而丰厚，杨绛一家的音容笑貌、性格特征、人生历程历历在目。那些实实在在的故事，那些生动有趣的细节，给读者留下了不可磨灭的印象。以“梦”的形式描写女儿和丈夫最后的岁月，以虚笔写死，也许一方面是由于那一段是作者不愿去回忆的、让人撕心裂肺的岁月，她还没从伤痛中走出来，不愿再重复亲人所受的痛苦和折磨。所以，作者以“梦”的形式，滤去不堪回首的往事和细节。另一方面，从内容和形式的结合来看，死亡本是虚幻缥缈的东西，很难用文字把握，用此种形式描写死亡，更易揭示其真实面貌。从这个角度来看，以虚笔写死，也许本身就是内容表达的需要。</p><p>此外，作者在书中运用现代派手法以求意识流动的自由和主观感受的真实，但情感的表法依然是节制含蓄的。杨绛通过情景交融营造梦境的邈远迷离，分载过于深重的死别的悲情，把丰富复杂的情感寓于景中，通过意象比喻、象征、暗示，尽显古典文化的韵味。梦开始，杨绛虚构了客栈、小船和古栈道，对应于现实中的家、医院和两地间的路途。</p>烟雾迷蒙、杨柳成行、杂树丛生、野草滋蔓的场景描写，暗示通向死亡的荒凉、迷离，是作者内心伤感悲凉之情的外射和物化。
</body>
</html>

样例：

7.水平线标签hr

<hr />:在页面中显示一条水平线

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>全书虚实互补、虚实相生。以实笔写生，以虚笔写死。这样一来，“生”的部分写得充实而丰厚，杨绛一家的音容笑貌、性格特征、人生历程历历在目。那些实实在在的故事，那些生动有趣的细节，给读者留下了不可磨灭的印象。以“梦”的形式描写女儿和丈夫最后的岁月，以虚笔写死，也许一方面是由于那一段是作者不愿去回忆的、让人撕心裂肺的岁月，她还没从伤痛中走出来，不愿再重复亲人所受的痛苦和折磨。所以，作者以“梦”的形式，滤去不堪回首的往事和细节。另一方面，从内容和形式的结合来看，死亡本是虚幻缥缈的东西，很难用文字把握，用此种形式描写死亡，更易揭示其真实面貌。从这个角度来看，以虚笔写死，也许本身就是内容表达的需要。</p><hr /><p>此外，作者在书中运用现代派手法以求意识流动的自由和主观感受的真实，但情感的表法依然是节制含蓄的。杨绛通过情景交融营造梦境的邈远迷离，分载过于深重的死别的悲情，把丰富复杂的情感寓于景中，通过意象比喻、象征、暗示，尽显古典文化的韵味。梦开始，杨绛虚构了客栈、小船和古栈道，对应于现实中的家、医院和两地间的路途。</p>烟雾迷蒙、杨柳成行、杂树丛生、野草滋蔓的场景描写，暗示通向死亡的荒凉、迷离，是作者内心伤感悲凉之情的外射和物化。
</body>
</html>

样例：

8.换行标签br

<br />:某段文字需要强制换行显示时使用

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>全书虚实互补、虚实相生。<br />以实笔写生，以虚笔写死。这样一来，“生”的部分写得充实而丰厚，杨绛一家的音容笑貌、性格特征、人生历程历历在目。那些实实在在的故事，那些生动有趣的细节，给读者留下了不可磨灭的印象。以“梦”的形式描写女儿和丈夫最后的岁月，以虚笔写死，也许一方面是由于那一段是作者不愿去回忆的、让人撕心裂肺的岁月，她还没从伤痛中走出来，不愿再重复亲人所受的痛苦和折磨。所以，作者以“梦”的形式，滤去不堪回首的往事和细节。另一方面，从内容和形式的结合来看，死亡本是虚幻缥缈的东西，很难用文字把握，用此种形式描写死亡，更易揭示其真实面貌。从这个角度来看，以虚笔写死，也许本身就是内容表达的需要。</p><hr /><p>此外，作者在书中运用现代派手法以求意识流动的自由和主观感受的真实，但情感的表法依然是节制含蓄的。杨绛通过情景交融营造梦境的邈远迷离，分载过于深重的死别的悲情，把丰富复杂的情感寓于景中，通过意象比喻、象征、暗示，尽显古典文化的韵味。梦开始，杨绛虚构了客栈、小船和古栈道，对应于现实中的家、医院和两地间的路途。</p>烟雾迷蒙、杨柳成行、杂树丛生、野草滋蔓的场景描写，暗示通向死亡的荒凉、迷离，是作者内心伤感悲凉之情的外射和物化。
</body>
</html>

样例：

9.div标签和span标签

div和span是没有语义的，只是网页布局的2个盒子

<div></div>:是块级元素，即每一个div独占一行，html中代码布局使用最多标签为div，可以通过css设置宽高等一些大小的样式

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>.color-1 {background-color: aquamarine;}.color-2 {background-color: blue;}
</style>
</head>
<body><div class="color-1">今天很热</div><div class="color-2">今天很冷</div>
</body>
</html>

样例：

<span></span>:是行内元素，不能通过css设置具体的宽高等样式，建议只有文本就应该用span

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><span>这一停，钱瑗就再没有能够重新拿起笔。</span><span>我们仨</span>
</body>
</html>

样例：

10.<b>定义粗体字,粗体标签

<b></b>：使文本加粗,本身不具备HTML语义

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>据该书编辑董秀玉回忆，该书的最初设想，是一家三口各写一部分，钱瑗写父母，杨女士写父女俩，钱先生写他眼中的母女俩。到<b>1996</b>年10月，患病的钱瑗已经非常衰弱，她请求妈妈，把《我们仨》的题目让给她写，她要把和父母一起生活的点点滴滴写下来。躺在病床上，钱瑗在护士的帮助下断续写了5篇，最后都不能进食了，还在写。杨绛见重病的女儿写得实在艰难，劝她停一停。这一停，钱瑗就再没有能够重新拿起笔。
</body>
</html>

样例：（注意红线划出位置）

11.<strong>定义粗体字,是加重语气标签

<strong></strong>：使文本加粗,HTML语义为强调，表示语气上的强调、加重，推荐使用

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>据该书编辑董秀玉回忆，该书的最初设想，是一家三口各写一部分，钱瑗写父母，杨女士写父女俩，钱先生写他眼中的母女俩。到<b>1996</b>年<strong>10</strong>月，患病的钱瑗已经非常衰弱，她请求妈妈，把《我们仨》的题目让给她写，她要把和父母一起生活的点点滴滴写下来。躺在病床上，钱瑗在护士的帮助下断续写了5篇，最后都不能进食了，还在写。杨绛见重病的女儿写得实在艰难，劝她停一停。这一停，钱瑗就再没有能够重新拿起笔。
</body>
</html>

样例：（注意红线划出位置）

12.<i>和<em>标签

类似于b和strong；i是斜体；em是强调，推荐使用em

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><em>据该书编辑董秀玉回忆，该书的最初设想，</em>是一家三口各写一部分，钱瑗写父母，杨女士写父女俩，<i>钱先生写他眼中的母女俩。到1996年10月，患病的钱瑗已经非常衰弱，</i>她请求妈妈，把《我们仨》的题目让给她写，她要把和父母一起生活的点点滴滴写下来。躺在病床上，钱瑗在护士的帮助下断续写了5篇，最后都不能进食了，还在写。杨绛见重病的女儿写得实在艰难，劝她停一停。这一停，钱瑗就再没有能够重新拿起笔。
</body>
</html>

样例：（注意红线划出位置）

13.<s>和<del>标签

类似于b和strong；加删除线，del表示强调，推荐使用del

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><em>据该书编辑董秀玉回忆，该书的最初设想，</em>是一家三口各写一部分，钱瑗写父母，杨女士写父女俩，<i>钱先生写他眼中的母女俩。到1996年10月，患病的钱瑗已经非常衰弱，</i>她请求妈妈，把《我们仨》的题目让给她写，她要把和父母一起生活的点点滴滴写下来。躺在病床上，钱瑗在护士的帮助下断续写了5篇，最后都不能进食了，还在写。杨绛见<s>重病的女儿写得实在艰难，</s>劝她停一停。<del>这一停，钱瑗就再没有能够重新拿起笔。</del>
</body>
</html>

样例：（注意红线划出位置）

14.<u>和<ins>标签

类似于b和strong；加下划线，ins表示强调，推荐使用ins

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><em>据该书编辑董秀玉回忆，该书的最初设想，</em>是一家三口各写一部分，钱瑗写父母，杨女士写父女俩，<i>钱先生写他眼中的母女俩。到1996年10月，患病的钱瑗已经非常衰弱，</i><u>她请求妈妈，</u>把《我们仨》的题目让给她写，她要把和父母一起生活的点点滴滴写下来。<ins>躺在病床上，</ins>钱瑗在护士的帮助下断续写了5篇，最后都不能进食了，还在写。杨绛见<s>重病的女儿写得实在艰难，</s>劝她停一停。<del>这一停，钱瑗就再没有能够重新拿起笔。</del>
</body>
</html>

样例：（注意红线划出位置）

15.<img>图像标签

在网页中想显示图像时需要使用图像标签

语法：<img src="图像url" />

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="timg.gif" />
</body>
</html>

样例：

其他属性：

alt：替换文本，即图像因其他问题不能加载时，显示alt内的替换文字

title：鼠标放在图片上时，显示的文字

width:宽度

height:高度，宽和高一般只设置一个即可

border:给图片加边框

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="timg.gif" title="帅哥" width="100" border="5" alt="图片不存在"/>
</body>
</html>

样例：

16.<a>链接标签

语法格式：<a href="跳转的目标" target="目标窗口弹出的方式">文本或图像</a>

基本属性：

href:必须属性，用于指定链接的url地址

target:有两种取值，self和blank（默认为self），blank为在新窗口中打开

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h4>图片链接</h4><a href="https://www.baidu.com/" target="_blank"><img src="timg.gif" /></a>
</body>
</html>

样例：

（点击这张图片后）

（因设置为_blank,所以打开新窗口并成功跳转至百度）

17.注释标签

语法规范: (记住快捷键即可：ctrl+/ 按两次可以取消注释)，注释内容不会再页面中显示，自己注释做笔记时使用，建议写在内容上方

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--写啥都不会显示！！！--><h1>注释标签</h1>
</body>
</html>

样例：

18.<base>标签

概念：统一地指定当前网页中所有的超链接(a标签)需要如何打开

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><base target="_blank"/>
</head>
<body><a href="https://www.baidu.com/">baidu</a><a href="https://www.qq.com/">qq</a><a href="https://www.amap.com/">amap</a>
</body>
</html>

样例：

（点击amap后）

（因base中设置为_blank,所以打开新窗口并成功跳转至高德地图，点击baidu和qq同理，擅用base可以优化代码）

19.<pre>标签（不常用）

概念：pre 元素中的文本通常会保留空格和换行符

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><base target="_blank"/>
</head>
<body><pre>helloworldJune</pre>
</body>
</html>

样例：

20.特殊符号

以下三个最常用

空格符： 

< 小于号：<

> 大于号 : >

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><base target="_blank"/>
</head>
<body>你好&nbsp;&nbsp;西虹市首富<br />&lt;你们好&gt;
</body>
</html>

样例：

21.<table>表格标签

语法格式：

<table> 表格

<tr> 行标签

<td> </td> 单元格，需放在行中（tabledata）

</tr>

<table>

基本属性：

border 表格边框（默认border="0",无边框）

width 设置表格宽度

height 设置表格高度

align 设置表格在网页中水平对齐的方式（left默认、center、right）

cellspacing 设置单元格与单元格边框之间的空白间距

cellpadding 设置单元格内容与单元格边框之间的空白间距

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>0610</title>
</head>
<body><table border="1" width="500" height="300" align="center" cellspacing="20" cellpadding="20"><!-- 第一行 --><tr><td>工资条</td><td>第一年</td><td>第二年</td></tr><!-- 第二行 --><tr><td>小李</td><td>3500</td><td>5000</td></tr><!-- 第三行 --><tr><td>小红</td><td>3000</td><td>5000</td></tr><!-- 第四行 --><tr><td>小丽丽丽</td><td>3000</td><td>5000</td></tr></table>
</body>
</html>

样例：

22.<th>表头单元格标签

定义表格的表头
代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>0610</title>
</head>
<body><table border="1" width="500" height="300" align="center" cellspacing="20" cellpadding="20"><!-- 第一行 --><tr><th>工资条</th><th>第一年</th><th>第二年</th></tr><!-- 第二行 --><tr><td>小李</td><td>3500</td><td>5000</td></tr><!-- 第三行 --><tr><td>小红</td><td>3000</td><td>5000</td></tr><!-- 第四行 --><tr><td>小丽丽丽</td><td>3000</td><td>5000</td></tr></table>
</body>
</html>

样例：

<td>改为<th>

23.<caption>表格标题标签

定义表格的标题

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>0610</title>
</head>
<body><table border="1" width="500" height="300" align="center" cellspacing="20" cellpadding="20"><!-- 表格标题 --><caption>职员工资条</caption><!-- 第一行 --><tr><th>工资条</th><th>第一年</th><th>第二年</th></tr><!-- 第二行 --><tr><td>小李</td><td>3500</td><td>5000</td></tr><!-- 第三行 --><tr><td>小红</td><td>3000</td><td>5000</td></tr><!-- 第四行 --><tr><td>小丽丽丽</td><td>3000</td><td>5000</td></tr></table>
</body>
</html>

样例：（位置跟着表格走，永远在表格上方，所以caption在table内才有意义）

补充知识点：合并单元格

1.跨行合并：rowspan=“合并单元格的个数”

2.跨列合并：colspan=“合并单元格的个数”

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" cellspacing="0" width="600" align="center"><tr><!-- 合并行时，从上到下考虑，合并列时，从左到右考虑,合并几个单元格，数字写几 --><!-- 合并之后，再删除多余的单元格 --><td>小红</td><td>20岁</td><td>女</td><td rowspan="2" align="center">照片</td></tr><tr><td>身高</td><td>体重</td><td>爱好</td></tr><tr><td colspan="4" align="center">个人简介</td></tr></table>
</body>
</html>

样例：

24.<thead> <tbody> <tfoot>划分表格标签

划分表格结构，有助于代码整体结构清晰

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" cellspacing="0" width="600" align="center"><thead><tr><th>小红</th><th>20岁</th><th>女</th><th>照片</th></tr></thead> <tbody><tr><td>身高</td><td>体重</td><td>爱好</td><td>照片</td></tr></tbody><tfoot><tr><td colspan="4" align="center">个人简介</td></tr></tfoot></table>
</body>
</html>

样例：

25.<ul>无序列表（常用）

语法格式：

<ul>

</ul>

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>早饭</li><li>午饭</li><li>晚饭</li></ul>
</body>
</html>

样例：

26.<ol>有序列表（不常用）

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ol><li>早饭</li><li>午饭</li><li>晚饭</li></ol>
</body>
</html>

样例：

27.<dl>自定义列表

语法格式:

<dl>

...

</dl>

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><dl><dt>早饭：</dt><dd>馒头</dd><dd>花卷</dd><dd>小米粥</dd></dl>
</body>
</html>

样例：

28.<input>表单标签

语法格式：

type属性设置不同的属性值用来指定不同的控件类型

value(值),文本框内有指引用户的文字

注意：其中radio的name要写成一样的名字，才能实现多个radio点击只能选中一个

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>用户名: <input type="text" value="请输入用户名" name="username"/><br /><!-- name用于区别不同表单 -->网名:<input type="text" value="请输入用户名" name="wangming"/><br />密码：<input type="password" name="pwd" /><br />性别：<input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" />女<br />爱好：<!-- 相同name可用快捷键，长押鼠标滚轮向下拉 -->游泳<input type="checkbox" name="hobby" />吃饭<input type="checkbox" name="hobby" /><br /><!-- 普通按钮需要写value值 --><input type="button" value="获取验证码" /><br /><!-- sumbit可不写value值，默认为提交按钮 --><!-- reset可不写value值，默认为重置按钮 --><input type="submit" /><input type="reset" /><br /><!-- 添加图片作为按钮，一定要写src --><input type="image" src="../images/btn.png" /><br /><!-- 上传文件,文件域 --><input type="file" />
</body>
</html>

样例：

29.<label>标签

作用：用于绑定一个表单元素，当点击lable标签时，被绑定的表单元素就会获得输入焦点

方法1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- label标签直接包input标签 --><label>用户名: <input type="text"  name="username"/><br /></label>
</body>
</html>

方法2：（for和id 重点）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 通过for 和 id 来控制 --><label for="username">用户名:</label><input id="username" type="text" />
</body>
</html>

30.<textarea>控件（文本域）

作用:通过textarea控件可以轻松的创建多行文本输入框

cols=“每行中的字符数”

rows="显示的行数"，但实际开发中基本不用

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>用户留言区域：<br /><textarea></textarea>
</body>
</html>

样例：

31.<select>下拉列表

语法格式：（不常用，常用div和ul）

...

</select>

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<select>现住址：<option>--请选择省份--</option><option>辽宁省</option><option>河北省</option><option>湖南省</option>
</select>
</body>
</html>

样例：

默认选中状态：

样例：

32.<form>表单域

语法格式：

各种表单控件

</form>

action：用于指定接受并处理表单数据的服务器程序的url地址

method：get和post