文章目录
基本概念HTML 标签注释转义符号HTML文档基本结构HTML中常用标签标签分类常用的布局组合标签一、 文本标签二、 图片标签三、 列表标签四、 定义描述标签及布局标签五、 超链接标签页面间跳转锚链接六、 表格标签规则表格不规则表格表格标签表单☆表单属性表单 <form>表单元素一、 <input> 元素（输入类型）☆输入限制标签1、 文本text2、 密码password3、 单选按钮radio4、 复选框checkbox5、文件域6、 按钮① 提交数据至程序submit② 重置数据reset③ 普通按钮button7、隐藏域HTML5新增输入类型8、 数值number9、 滑块输入range10、 日期①date② datetime③ datetime-localmonthweektime11、 邮箱email12、 颜色color13、 电话tel14、 地址url15、 搜索search二、 <select> 元素（下拉列表）三、 <textarea> 元素（文本域）四、 <bottom> 元素① 提交数据至程序submit② 重置数据reset③ 普通按钮buttonHTML5 新增表单元素datalist框架HTML5中其它新增语义标签音频视频基本概念
HTML（HyperText Markup Language），超文本标记语言，是用来描述网页的一种语言
HTML运行在浏览器上，通过浏览器解析，不区分大小写（建议全部小写）
HTML文档中包含HTML标签和纯文本，用来描述网页，因此HTML文档=网页
html文档的后缀名
.html和.htm都可以，没有区别
HTML是用于创建网页、由标签构成的标记语言，不是编程语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标签，即HTML标记标签
HTML标签是由尖括号包围的关键词，比如 <html>，标签通常成对出现，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签
标签的分类
1、围堵标签：有开始标签和结束标签，例如 <html></html>
2、自闭和标签：只有一个标签 <br/>
标签的书写
可以嵌套，但是嵌套的语法要正确
内部可以定义属性，属性由键值对组成（值需用双引号引起来），多个属性用空格隔开
注释
以<!-- 开头 ，- ->结尾
代码示例：
<!--这里编写HTML注释，可以是一行，也可以是多行标签的书写：<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>--><p id="p1" name="p1"> </p>
转义符号
HTML文档基本结构
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>HTML页面</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body>hello world！</body></html>
页面显示：
HTML中常用标签
标签分类
html标签可以分为块状元素和行级元素两类：
基本术语：块状元素：独占一行，可以设置宽高标题标签 h1-h6,段落标签 p ,水平线标签 hr,有序列表标签 ol--li，无序列表标签 ul--li，定义描述标签 dl-dt-dd，容器标签 div：行级元素：...，不能设置宽高span范围标签img图像标签
常用的布局组合标签
导航布局div-ul-li/div-ol-li图文混编布局
div-dl-dt-dd表单布局
div-form局部规则数据展示布局
div-table
一、 文本标签
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>文本标签</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--标题标签--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!--水平线分分割标签--><hr /><!--水平线属性改变--><!--标签中可以出现属性，多个属性空格隔开--><hr color="bisque" size="8" /><!--段落标签--><h4>段落测试</h4><p>锄禾<span style="color: red;">日</span>当午</p><p>汗滴禾下土</p><!--换行标签--><p>谁知盘中餐<br />粒粒皆辛苦</p><!--水平线分分割标签--><hr /></body></html>
页面显示：
二、 图片标签
<img src ="" />src:图片的路径(推荐相对路径，即工程img包中的图片，../表示上一级目录) title：[独有属性]鼠标移到图片上时显示文字图片无法显示时，显示文字width:宽度（以px结尾，或者设置为占屏的百分比）height:高度
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>图片标签</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--图片标签<img />src:图片的路径(推荐相对路径，即工程img包中的图片，../表示上一级目录) title：[独有属性]鼠标移到图片上时显示文字图片无法显示时，显示文字width:宽度（以px结尾，或者设置为占屏的百分比）height:高度--><img src ="../../img/小奶猫1.JPG" width="500px"/><!--图片无法显示时，显示title中的文字--><img src = "../../img/小奶猫2.JPG" title="嘿嘿"/ height="500px"><!--热点区域属性点击不同位置，跳到不同的区域img添加热点区域时使用usemap="#名称"<img src="" usemap="#地图名称" /><map name="地图名称"></map>--><img src="../../img/思考人生的猫.JPG" width="500px" usemap="#myMap" /><map name="myMap"><!--map的名称--><!--shape：形状（circle、rect、poly）coords：大小范围href：超链接title：名称圆：circle(圆心横坐标，圆心纵坐标，半径)矩形：rect（左上角横坐标，左上角纵坐标，右下角横坐标，右下角纵坐标）多边形：poly三角形：poly（三个点的横坐标纵坐标）五边形：poly（按画的顺序，依次横坐标纵坐标列出全部）--><area shape="circle" coords="300,300,300" href="文本标签.html" title="常用标签"/><!--如果需要多个热点区域，可以使用多个<area>--><area shape="rect" coords="400,100,600,200" href="文本标签.html" title="还是常用标签" /></map></body></html>
页面显示：
此时点击第三张图的以（100,100）为圆心，100位半径的圆形区域或者以（400,100）（600,200）围成的矩形区域，会跳转到文本标签.html
三、 列表标签
一般用在导航上
有序标签：
<ol><li>标签1</li><li>标签2</li><li>标签3</li><li>标签4</li><li>标签5</li></ol>
无序标签：
<ul><li>标签1</li><li>标签2</li></ul>
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>列表标签</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--列表标签一般用于导航无序标签:<ul><li></li></ul>有序标签：<ol><li></li></ol>--><h1>无序列表</h1><ul><!--无序标签--><li>无序标签1</li><li>无序标签2</li><li>无序标签3</li><li>无序标签4</li><li>无序标签5</li></ul><h1>有序列表</h1><ol><!--有序标签--><li>有序标签1</li><li>有序标签2</li><li>有序标签3</li><li>有序标签4</li><li>有序标签5</li></ol></body></html>
页面显示：
四、 定义描述标签及布局标签
定义描述标签：
一般用于图文的描述中
<dl><dt>标题</dt><dd>描述1</dd><dd>描述2</dd></dl>
布局标签：
一般作为容器，盛放其他标签
<div></div>
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>定义描述标签</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--定义描述标签<dl><dt>标题</dt><dd>描述1</dd><dd>描述2</dd></dl>--><!--容器div，盛放其它标签<div></div>--><div style="border: 2px solid lightsalmon;"><dl><dt>标题</dt><!--标题，一般只有一个--><dd>描述1</dd><!--描述可以有多个--> <dd>描述2</dd></dl></div><dl><dt><img src="../../img/咖啡店的猫猫.JPG" width="200px"/></dt><!--标题，一般只有一个--><dd>姓名：呆呆</dd><!--描述可以有多个--> <dd>技能：懵懵</dd></dl><!--基本术语：块状元素：独占一行，可以设置宽高标题标签 h1-h6,段落标签 p ,水平线标签 hr,有序列表标签 ol--li，无序列表标签 ul--li，定义描述标签 dl-dt-dd，容器标签 div：行级元素：...，不能设置宽高span范围标签img图像标签--></body></html>
页面显示：
五、 超链接标签
作用实现页面间的跳转
实现锚链接
页面间跳转
<a href="" target=""></a>href:路径、网址均可target：目标self：当前页面打开（默认）blank：新页面打开
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>页面间跳转超链接</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--<a></a>href:路径、网址均可target：目标self：当前页面打开（默认）blank：新页面打开--><!--新页面打开百度--><a href="/" target="_blank">点击在新页面打开百度</a><br /><br /><!--当前页面打开scdn--><a href="/" target = "_self">点击在当前页面打开CSDN</a></body></html>
页面显示：
锚链接
当一个页面长度超过一屏时，跳转到指定位置
这个定位可以实现本页面间的锚链接也可以实现不同页面间的锚链接
目标位置，定义锚点：<a name = "锚点名称"></a>超链接跳转到定义的目标位置：<a href = "锚点名称" target = "">自定义锚链接名称</a>
代码示例：
<!DOCTYPE html><!-- 声明当前文档是html5文档 --><html><!-- html,根元素,使用围堵标签--><!--head,头元素：作用：1、声明页面上的元数据meta：定义页面的编码格式title:定义页面的标题2、引入外部的资源文件--><head><!--头元素,子元素--><meta charset="utf-8" /><title>锚链接</title></head><!--body，主体：浏览器显示的内容都在这里编写--><body><!--<a></a>href:路径、网址均可target：目标self：当前页面打开（默认）blank：新页面打开--><!--锚链接（回到指定位置）目标位置，定义锚点：<a name = "锚点名称"></a>超链接位置：<a href = "锚点名称" target = "">自定义锚链接名称</a>--><a href = "#point3" target="_self">跳转至本网页的模块3</a><br /><br /><a href = "超链接标签2.html#point3" target="_self">跳转至另一网页的模块333</a><div style="height: 300px; background: lavender;">模块1</div><div style="height: 300px; background: peachpuff;">模块2</div><div style="height: 300px; background: lemonchiffon;"><a name = "point3"></a><!--定义锚点，本页面锚链接-->模块3</div></body></html>
页面显示：
当点击第一个超链接时，网页进度条下拉，模块3完全显示
另一网页与当前页面一模一样，点击第二个超链接时跳转到另一网页并进度条下拉至模块3
浏览器显示的内容都在body编写，因此之后的代码块仅为body部分
六、 表格标签
规则表格
<table><tr>行<th></th>列（一般表头单元格）</tr><tr>行<td></td>列（一般内容单元格）</tr></table>------------------------------------------table:如果没有设置宽高，大小则按内容来定border:边框width：%占据页面的比例；实际高度pxcellpadding：内容距边线的距离cellspacing：单元格与单元格之间的距离tr：（行）align:文本水平方向的位置left、center、rightvalign:文本垂直
代码示例：
<!--<table><tr>行<th></th>列（一般表头单元格）</tr><tr>行<td></td>列（一般内容单元格）</tr></table>table:如果没有设置宽高，大小则按内容来定border:边框width：%占据页面的比例；实际高度pxcellpadding：内容距边线的距离cellspacing：单元格与单元格之间的距离tr：（行）align:文本水平方向的位置left、center、rightvalign:文本垂直--><h1>规则表格</h1><table border="1" width="100%" height="200px" bgcolor="papayawhip" cellpadding="10" cellspacing=""><tr align="center" valign=""><!--行--><th>序号</th><th>商品名称</th><th>价格</th><!--列--></tr><tr><!--行--><td>1</td><td>曲奇</td><td>100</td><!--列--></tr><tr><!--行--><td>2</td><td>饼干</td><td>200</td><!--列--></tr></table>
页面显示：
不规则表格
在规则表格的基础上添加行列的合并
不规则表格（跨行跨列等，即合并单元格）colspan:跨列，即合并后面的表格rowspan：跨行
代码示例：
<h1>不规则表格</h1><!--不规则表格（跨行跨列等，即合并单元格）colspan:跨列，即合并后面的表格rowspan：跨行--><table border="1" width="100%" height="200px" bgcolor="papayawhip" cellpadding="10" cellspacing=""><tr><!--行--><td colspan="3" align="center">个人简历</td><!--列--></tr><tr><!--行--><td>姓名</td><td>憨憨</td><td rowspan="3" align="center">照片</td><!--列--></tr><tr><!--行--><td>性别</td><td>女</td><!--列--></tr><tr><!--行--><td>年龄</td><td>20</td><!--列--></tr></table>
页面显示：
表格标签
标题标签、逻辑分区标签
标题标签：<caption></caption>逻辑分区标签：方便区分和整体控制<thead></thead>表的标题<tbody></tbody>表的内容<tfoot></tfoot>表的总结内容
代码示例：
<h1>高级标签</h1><p>标题标签和逻辑分区标签</p><!--标题标签：<caption></caption>逻辑分区标签：方便区分和整体控制<thead></thead>表的标题<tbody></tbody>表的内容<tfoot></tfoot>表的总结内容--><table border="1" width="100%" height="200px" bgcolor="papayawhip" cellpadding="10" cellspacing=""><caption>资产负债表</caption><!--标题标签--><thead style="background: papayawhip;"><!--表的标题--><tr align="center" valign=""><!--行--><th>月份</th><th>负债</th></tr></thead><tbody style="background: peachpuff;"><!--表的内容--><tr><!--行--><td>1月</td><td>1w</td></tr><tr><!--行--><td>2月</td><td>4w</td></tr></tbody><tfoot style="background: plum;"><!--表的总结内容--><tr><!--行--><td>总计</td><td>5w</td></tr></tfoot></table>
页面显示：
表单☆
作用用于采集用户输入的数据
用于与服务器进行交互
（例如账号密码的输入）
表单属性
所有 <form> 属性的列表
GET与POST
表单 <form>
<form>...(内容)</form>常用属性action:指定提交数据的urlmethod:指定提交方式，7种get：(没有敏感数据)1、请求参数会在地址栏中显示，会封装到请求行中2、请求参数大小有限制3、不太安全post：1、请求参数不会在地址栏中显示，会封装到请求体中2、请求参数的大小没有限制3、较为安全enctype:表单中有上传的文件时使用，且取值为multipart/form-data
代码示例：
<form action="常用标签.html" method="get" enctype="multipart/form-data"></form>
表单元素
表单元素，即不同类型的 input 元素、复选框、单选按钮、提交按钮等等
HTML表单包含表单元素，即 <form></form>中的内容
下文有关表单元素的代码都默认写在<form>和</form>之间
表单元素的属性：
一、 <input> 元素（输入类型）☆
最重要的表单元素是<input>元素，根据不同的 type 属性可以变化为多种形态
输入限制
写在开始标签
（一部分为HTML5新增）
有些属性不需要值，例如disabled，等同于 disabled=“disabled”
标签
<label for = "">标签名称</label><input type="text" id = "" name = "" placeholder=""/>id：元素的唯一标识，不推荐重复name：表单元素的名称，数据提交时服务器通过name获取valueplaceholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）lable中的for与input中的id对应，加了lable之后页面点击用户名后输入框会出现光标
代码示例：
<label for = "username">用户名：</label><input type="text" id = "username" name = "uername" placeholder="请输入用户名"/><!--用户名：<input type="text" id = "username" name = "uername" />-->
页面显示：
1、 文本text
<input type=“text”> 定义供文本输入的单行输入字段
<input type="text" id = "" name = "" placeholder=""/>id：元素的唯一标识，不推荐重复name：表单元素的名称，数据提交时服务器通过name获取valueplaceholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）
代码示例：
用户名：<input type="text" id = "username" name = "uername" />
页面显示：
当输入内容“用户1”后placeholder中的内容被覆盖
2、 密码password
<input type=“password”> 定义密码字段
<input type="password" id = "" name = "" placeholder=""/>id：元素的唯一标识，不推荐重复name：表单元素的名称，数据提交时服务器通过name获取valueplaceholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）
代码示例：
密码：<input type="password" id = "password" name = "password" placeholder="请输入密码"/>
页面显示：
当输入密码后placeholder中的内容被覆盖
由于是密码，密码内容不会显示
3、 单选按钮radio
<input type=“radio”> 定义单选按钮
<input type="radio" name = "" value="" />选项名称1<input type="radio" name = "" value="" />选项名称2单选按钮：一般都是成组出现，name相同表示一组，只能选一个name：表单元素的名称，数据提交时服务器通过name获取valuevalue：服务器通过name获取到的值checked 表示默认选中(一般默认选第一个选项)
代码示例：
性别：<input type="radio" name = "gender" value="男" />男<input type="radio" name = "gender" value="女" />女<input type="radio" name = "gender" value="未知" checked=""/>未知
页面显示：
4、 复选框checkbox
<input type=“checkbox”> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项
<input type = "checkbox" name = "" value = "" />选项名称1<input type = "checkbox" name = "" value = "" />选项名称2复选框 type = "checkbox"复选框都是成组出现，name相同表示一组，可以选多个value：服务器通过name获取到的值checked 表示默认选中(一般默认选第一个选项)
代码示例：
爱好：<input type = "checkbox" name = "hobby" value = "swim" />游泳<input type = "checkbox" name = "hobby" value = "sing" />唱歌<input type = "checkbox" name = "hobby" value = "dance" />跳舞<input type = "checkbox" name = "hobby" value = "read" />看书<input type = "checkbox" name = "hobby" value = "sleep" />睡觉
页面显示：
5、文件域
头像：<input type = "file" name = "" />头像：<input type = "file" name = "" multiple="multiple"/>复选框 type = "file"name：表单元素的名称，数据提交时服务器通过name获取valuemultiple:允许多选，即同时上传多个文件
代码示例：
头像：<input type = "file" name = "headImg" multiple="multiple"/>
页面显示：
选择单个文件
选择多个文件
6、 按钮
与<button>元素作用相同
① 提交数据至程序submit
定义提交表单数据至表单处理程序的按钮<input type=“submit”>
<button type=“submit”></button>
② 重置数据reset
定义重置数据按钮<input type=“reset”>
<button type=“reset”></button>
③ 普通按钮button
定义按钮<input type=“button”>
<button type=“button”></button>
<input type = "submit" value="" /><!--跳转到指定的页面--><input type = "reset" value="" /><!--刷新--><input type = "button" value="" /><!--普通按钮，按钮长相，只能按-->value：服务器通过name获取到的值<!--另一种按钮--><button type="submit">按钮名称</button><button type="reset">按钮名称</button><button type="button">按钮名称</button><input type = "image" src="" width="" /><!--图片按钮，类似于submit-->src：图片路径
代码示例：
<input type = "submit" value="注册" /><!--跳转到<form>中action指定的页面--><input type = "reset" value="刷新" /><!--刷新--><input type = "button" value="按钮" /><!--普通按钮，按钮长相，只能按--><!--图片按钮，类似于submit--><input type = "image" src="../../img/下帝视角.jpg" width="100px" /><br /><!--另一种按钮--><button type="submit">注册</button><button type="reset">刷新</button><button type="button">按钮</button>
页面显示：
7、隐藏域
隐藏起来了，不影响用户看，但是程序员又能获取到数据
<input type="hidden" name = "" value=""/>隐藏域name：表单元素的名称，数据提交时服务器通过name获取valuevalue：服务器通过name获取到的值
代码示例：
<input type="hidden" name = "hanhan" value="66666666666666666"/>
页面显示：
无显示效果
HTML5新增输入类型
8、 数值number
<input type=“number”> 用于应该包含数字值的输入字段
对输入数字给定限制
代码示例：
请输入1~5范围内的一位数：<input type="number" name="quantity" min="1" max="5">
页面显示：
9、 滑块输入range
<input type=“range”> 用于包含一定范围内的值的输入字段
根据浏览器支持，输入字段能够显示为滑块控件
代码示例：
Points（0~10）:<input type="range" name="points" min="0" max="10">
页面显示：
10、 日期
①date
<input type=“date”> 用于应该包含日期的输入字段
根据浏览器支持，日期选择器会出现输入字段中
可以为日期添加限制
代码示例：
birthday:<input type="date" name="birthday"><!--添加限制-->请输入 1980-01-01 之前的日期：<br><input type="date" name="bday" max="1979-12-31"><br><br>请输入 2000-01-01 之后的日期：<br><input type="date" name="bday" min="2000-01-02"><br><br><input type="submit">
页面显示：
添加限制的日期显示：
② datetime
<input type=“datetime”> 允许用户选择日期和时间（有时区）
根据浏览器支持，日期选择器会出现输入字段中（本文使用谷歌，不支持，因此只能手动输入）
代码示例：
请输入日期和时间：<input type="datetime" name="bdaytime">
页面显示：
③ datetime-local
<input type=“datetime-local”> 允许用户选择日期和时间（无时区）
根据浏览器支持，日期选择器会出现输入字段中
代码示例：
请选择日期和时间：<input type="datetime-local" name="bdaytime">
页面显示：
month
<input type=“month”> 允许用户选择月份和年份
代码示例：
选择月和年：<input type="month" name="bdaymonth">
页面显示：
week
<input type=“week”> 允许用户选择周和年。
根据浏览器支持，日期选择器会出现输入字段中
代码示例：
选择年和周：<input type="week" name="year_week">
页面显示：
time
<input type=“time”> 允许用户选择时间（无时区）
根据浏览器支持，时间选择器会出现输入字段中
代码示例：
请选取一个时间：<input type="time" name="usr_time">
页面显示：
11、 邮箱email
<input type=“email”> 用于应该包含电子邮件地址的输入字段
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证
某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入
<input type = "email" name = "" />格式必须为email型，否则会报错name：表单元素的名称，数据提交时服务器通过name获取valuerequire：提交前必须填写，不能为空
代码示例：
邮箱:<input type = "email" name = "email" required="required"/>
页面显示：
提交时未填写，提交时报错
填入文本非email格式，提交时报错
12、 颜色color
<input type=“color”> 用于应该包含颜色的输入字段
代码示例：
Select your favorite color:<input type="color" name="favcolor" value="#ff0000">
页面显示：
13、 电话tel
<input type=“tel”> 用于包含电话号码的输入字段
目前只有 Safari 8 支持tel类型
代码示例：
Telephone:<input type="tel" name="telephone">
页面显示：
14、 地址url
<input type=“url”> 用于包含 URL 地址的输入字段
根据浏览器支持，在提交时能够自动验证 url 字段
某些智能手机识别url类型，并向键盘添加 “.com” 以匹配 url 输入
代码示例：
请输入url：<input type="url" name="homepage">
页面显示：
15、 搜索search
<input type=“search”> 用于搜索字段（搜索字段的表现类似常规文本字段）
代码示例：
搜索CSDN：<input type="search" name="scdn">
页面显示：
二、 <select> 元素（下拉列表）
<select> 元素定义下拉列表
<option> 元素定义待选择的选项
列表通常会把首个选项显示为被选选项，也通过添加 selected 属性来定义预定义选项
<select name=""><option value = "属性值1">属性值1</option><option value = "属性值2">属性值2</option></select>下拉列表框通过select自行选择，option给出选项value：服务器通过name获取到的值selected表示默认选中
代码示例：
选择日期：<select name="month"><option value = "1">1</option><option value = "2">2</option><option value = "3">3</option><option value = "4">4</option><option value = "5">5</option><option value = "6">6</option><option value = "7">7</option><option value = "8">8</option><option value = "9">9</option><option value = "10">10</option><option value = "11">11</option><option value = "12">12</option></select>
页面显示：
三、 <textarea> 元素（文本域）
<textarea></textarea> 定义多行输入字段（文本域）
<textarea rows="" readonly="" disabled="">...</textarea>文本域<textarea></textarea>rows:行高，默认多少行cols：指定列数，每行多少字readonly：只读disabled：禁用，央视呈现灰色
代码示例：
协议：<textarea rows="10" readonly="readonly" disabled="disabled">条款说明：1.必须遵守......2..........</textarea>
页面显示：
四、 <bottom> 元素
① 提交数据至程序submit
定义提交表单数据至表单处理程序的按钮<input type=“submit”>
<button type=“submit”></button>
② 重置数据reset
定义重置数据按钮<input type=“reset”>
<button type=“reset”></button>
③ 普通按钮button
定义按钮<input type=“button”>
<button type=“button”></button>
<input type = "submit" value="" /><!--跳转到指定的页面--><input type = "reset" value="" /><!--刷新--><input type = "button" value="" /><!--普通按钮，按钮长相，只能按-->value：服务器通过name获取到的值<!--另一种按钮--><button type="submit">按钮名称</button><button type="reset">按钮名称</button><button type="button">按钮名称</button><input type = "image" src="" width="" /><!--图片按钮，类似于submit-->src：图片路径
代码示例：
<input type = "submit" value="注册" /><!--跳转到<form>中action指定的页面--><input type = "reset" value="刷新" /><!--刷新--><input type = "button" value="按钮" /><!--普通按钮，按钮长相，只能按--><!--图片按钮，类似于submit--><input type = "image" src="../../img/下帝视角.jpg" width="100px" /><br /><!--另一种按钮--><button type="submit">注册</button><button type="reset">刷新</button><button type="button">按钮</button>
页面显示：
HTML5 新增表单元素
datalist
<datalist> 元素为 <input> 元素规定预定义选项列表
用户在输入数据时能够看到预定义选项的下拉列表
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性
代码示例：
<datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist>
页面显示：
点击准备输入数据时：
框架
HTML5中已移除
<iframe name = "" src="" ></iframe>name：名称src：url，显示不同的网页frameborder：边框 0和no都代表没有width：宽heigh：高
代码示例：
<iframe name = "baidu" src="/" width=100% height="300px" ></iframe><br /><hr color="antiquewhite" size="4"/><iframe name = "CSDN" src="/" width=100% height="300px" frameborder="0"></iframe>
页面显示：
HTML5中其它新增
语义标签
音频
使用<audio>
视频
使用<video>
