HTML超文本标记语言入门基础知识

文章目录

基本概念
HTML文档基本结构
HTML中常用标签
表单☆
框架
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标签可以分为块状元素和行级元素两类：

块状元素	行内元素：
独占一行，宽度自动填满其父元素宽度	排列到同一行里，宽度随元素的内容变化而变化
可以设置宽高	设置宽高无效
可以设置margin、padding属性	水平方向的padding会有边距效果，但是竖直方向的padding没有效果

基本术语：

	块状元素：独占一行，可以设置宽高
			标题标签 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

一、文本标签

标签名	写法	用处
标题标签	<h1></h1>	一般用在文章的标题上，h1~h6字体逐渐缩小
段落标签	<p></p>	一般用于正文
换行标签	<br/>	在段落中换行
水平线标签	<hr/>	一般用来分隔内容
范围标签	<span></span>	一般为了突出部分内容、改变局部内容的时候使用，一般嵌套在其他的标签中使用

代码示例：

<!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="https://www.baidu.com/" target="_blank">点击在新页面打开百度</a>
		<br /><br />
		<!--当前页面打开scdn-->
		<a href="https://www.csdn.net/" 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：%占据页面的比例；实际高度px
				cellpadding：内容距边线的距离
				cellspacing：单元格与单元格之间的距离
			tr：（行）
				align:文本水平方向的位置left、center、right
				valign:文本垂直

代码示例：

		<!--
			<table>
				<tr>行
					<th></th>列（一般表头单元格）
				</tr>	
				<tr>行
					<td></td>列（一般内容单元格）
				</tr>		
			</table>
			
			table:
				如果没有设置宽高，大小则按内容来定
				border:边框
				width：%占据页面的比例；实际高度px
				cellpadding：内容距边线的距离
				cellspacing：单元格与单元格之间的距离
			tr：（行）
				align:文本水平方向的位置left、center、right
				valign:文本垂直
				
		-->		
		<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> 属性的列表

属性	描述
accept-charset	规定用于表单提交的字符编码
action	规定提交表单时发送到指定的url
enctype	规定将表单数据提交到服务器时应如何编码（表单中有上传的文件时使用,取值为multipart/form-data）
method	规定发送表单数据时要使用的 HTTP 方法，默认为GET
name	规定表单名称
rel	规定链接资源和当前文档之间的关系
target	规定提交表单后在何处显示接收到的响应

HTML5新增	------------------------------------------------------------
autocomplete	规定表单或输入字段是否应该自动填写（设置为 on or off）
novalidate	规定提交时不应验证表单

GET与POST

get	post
提交的表单数据会在地址栏url中显示，会封装到请求行中	请求参数不会在地址栏url中显示，会封装到请求体中
请求参数大小有限制，URL 的长度最大2048 个字符	请求参数的大小没有限制，可发送大量数据
不太安全，适用于非安全数据	较为安全，表单数据包含敏感信息或个人信息，请务必使用 POST

表单 <form>

<form>
	...(内容)
</form>	

		常用属性
			action:指定提交数据的url
			method:指定提交方式，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>之间

表单元素的属性：

属性名称	描述
id	元素的唯一表示，不重复
name	表单项元素的名称，数据想要提交，必须指定，提交数据到服务器之后，服务器通过name获取数据
value	表单项元素的值，服务器获取数据通过name获取到的就是value
type	表示表单项元素的input的呈现形式（不是all都有）
class	表示样式名称
readonly	表示只读，只能看不能改
disabled	表示禁用，不能改而且背景是灰色

一、 <input> 元素（输入类型）☆

最重要的表单元素是<input>元素，根据不同的 type 属性可以变化为多种形态

输入限制

写在开始标签

（一部分为HTML5新增）

有些属性不需要值，例如disabled，等同于 disabled=“disabled”

属性	描述	适用于
disabled	输入字段是禁用的，被禁用的元素是不可用和不可点击的，被禁用的元素不会被提交
maxlength	规定输入字段的最大长度
readonly	规定输入字段为只读（无法修改）
size	规定输入字段的宽度（以长度计）
value	规定输入字段的初始值

HTML5新增	--------------------------------------------------------------------------------
max	规定输入字段的最大值	number、range、date、datetime、datetime-local、month、time 、 week
min	规定输入字段的最小值	number、range、date、datetime、datetime-local、month、time 、 week
pattern (regexp)	规定通过其检查输入值的正则表达式
required	规定输入字段是必需的（必需填写）	text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file
step	规定输入字段的合法数字间隔	number、range、date、datetime、datetime-local、month、time 、week
height	高度	image
width	宽度	image
autocomplete	规定表单或输入字段是否应该自动填写（设置为 on or off）	text、search、url、tel、email、password、datepickers、range 、 color
autofocus	布尔属性，如果设置则当页面加载时 <input> 元素自动获得焦点
form	规定 <input> 元素所属的一个或多个表单，如需引用一个以上的表单，使用空格分隔的表单 id 列表
formaction	规定当提交表单时处理该输入控件的文件的 URL，属性覆盖 <form> 元素的 action 属性	submit、image
formenctype	规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）,覆盖 <form> 元素的 enctype 属性	submit、image
formmethod	定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法,覆盖<form> 元素的 method 属性	submit、image
formnovalidate	布尔属性,如果设置则在提交表单时不对<input> 元素进行验证，覆盖 <form> 元素的 novalidate 属性	submit
formtarget	规定的名称或关键词指示提交表单后在何处显示接收到的响应,覆盖 <form> 元素的 target 属性	submit、image
list	list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项
multiple	布尔属性,如果设置则允许用户在 <input> 元素中输入一个以上的值	email 、 file
pattern	用于检查 <input> 元素值的正则表达式	text、search、url、tel、email、 password
placeholder	文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）	text、search、url、tel、email 、 password

<label for = "">标签名称</label>
	<input type="text" id = "" name = "" placeholder=""/>


	id：元素的唯一标识，不推荐重复
	name：表单元素的名称，数据提交时服务器通过name获取value
	placeholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）
	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获取value
placeholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）

代码示例：

用户名：<input type="text" id = "username" name = "uername" />

页面显示：

当输入内容“用户1”后placeholder中的内容被覆盖

2、密码password

<input type=“password”> 定义密码字段

<input type="password" id = "" name = "" placeholder=""/>

id：元素的唯一标识，不推荐重复
name：表单元素的名称，数据提交时服务器通过name获取value
placeholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）

代码示例：

密码：<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获取value
			value：服务器通过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获取value
		multiple:允许多选，即同时上传多个文件

代码示例：

头像：<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获取value
		value：服务器通过name获取到的值

代码示例：

<input type="hidden" name = "hanhan" value="66666666666666666"/>

页面显示：

无显示效果

HTML5新增输入类型

序号	名称
1	color
2	date
3	datetime
4	datetime-local
5	email
6	month
7	number
8	range
9	search
10	tel
11	time
12	url
13	week

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获取value
	require：提交前必须填写，不能为空

代码示例：

邮箱:<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	input标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值
keygen	规定用于表单的密钥对生成器字段
output	标签定义不同类型的输出，比如脚本的输出

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="https://www.baidu.com/" width=100% height="300px" ></iframe>
		<br />
		<hr color="antiquewhite" size="4"/>
		<iframe name = "CSDN" src="https://www.csdn.net/" width=100% height="300px" frameborder="0"></iframe>

页面显示：

HTML5中其它新增

语义标签

标签	描述
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
header	定义了文档的头部区域
footer	定义 section 或 document 的页脚
nav	定义导航链接的部分
progress	定义任何类型的任务的进度
section	定义文档中的节（section、区段）
time	定义日期或时间
wbr	规定在文本中的何处适合添加换行符

音频

使用<audio>

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

视频

使用<video>

Format	MIME-type
MP4	video/mp4
Ogg	audio/ogg
WebM	video/webm