Basic knowledge of HTML hypertext markup language

Article directory

basic concept
Basic structure of HTML document
Commonly used tags in HTML
Form☆
frame
Other new additions in HTML5

basic concept

HTML (HyperText Markup Language), hypertext markup language, is a language used to describe web pages

HTML runs on the browser and is parsed by the browser . It is not case-sensitive (all lowercase is recommended)

HTML documents contain HTML tags and plain text to describe web pages, so HTML document = web page

The suffix name of the html document
is both .html and .htm. There is no difference.
HTML is a markup language composed of tags used to create web pages , not a programming language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages

HTML tag

HTML tag, HTML markup tag

HTML tags are keywords surrounded by angle brackets , such as <html>. Tags usually appear in pairs , such as <b> and </b>

The first tag in a tag pair is the opening tag and the second tag is the closing tag. Opening and closing tags are also known as opening tags and closing tags.

Classification of tags
1. Containment tags: There are start tags and end tags, such as <html></html>
2. Self-closing tags: only one tag<br/>
Tag writing
can be nested, but the nested syntax must be correct.
Attributes can be defined internally. Attributes consist of key-value pairs (values must be enclosed in double quotes). Multiple attributes are separated by spaces.

Comment

Begins with <!-- and ends with - ->

Code example:

<!--
这里编写HTML注释，
可以是一行，也可以是多行

标签的书写：
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
-->

<p id="p1" name="p1"> </p>

escape symbol

transfer symbol	describe
	escape as spaces
<	Escaped as less than sign <
∧	Escaped as the less than or equal sign ≤
>	Escaped as greater than sign >
≥	Escaped as the greater than or equal sign ≥
©	Escaped as copyright symbol ©

Basic structure of HTML document

Code example:

<!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>

The page shows:

Commonly used tags in HTML

Tag classification

HTML tags can be divided into two categories: block elements and row-level elements:

block element	Inline elements:
Occupy one line, the width automatically fills the width of its parent element	Arranged in the same row, the width changes with the content of the element.
Can set width and height	Setting width and height is invalid
Margin and padding properties can be set	Horizontal padding will have a margin effect, but vertical padding has no effect.

基本术语：

	块状元素：独占一行，可以设置宽高
			标题标签 h1-h6,
			段落标签 p ,
			水平线标签 hr,
			有序列表标签 ol--li，
			无序列表标签 ul--li，
			定义描述标签 dl-dt-dd，
			容器标签 div：
			
	行级元素：...，不能设置宽高
			span范围标签
			img图像标签

Commonly used layout combination tags

Navigation layout
div-ul-li/div-ol-li
Mixed graphics and text layout
div-dl-dt-dd
Form layout
div-form
Local rules data display layout
div-table

1. Text label

tag name	Writing method	usefulness
title tag	<h1></h1>	Generally used in the title of an article, the h1~h6 fonts are gradually reduced.
paragraph tags	<p></p>	Generally used for body text
newline tag	<br/>	Wrap lines in paragraphs
horizontal line label	<hr/>	Generally used to separate content
range label	<span></span>	It is generally used to highlight part of the content and change local content . It is generally used nested in other tags.

Code example:

<!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>

The page shows:

2. Image tags

<img src ="" />	


		src:图片的路径(推荐相对路径，即工程img包中的图片，../表示上一级目录)    
		title：[独有属性]
			鼠标移到图片上时显示文字
			图片无法显示时，显示文字
		width:宽度（以px结尾，或者设置为占屏的百分比）
		height:高度

Code example:

<!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>

The page shows:

At this time, click on the circular area with (100,100) as the center and 100-digit radius in the third picture or the rectangular area surrounded by (400,100) (600,200), it will jump to the text label.html

3. List tags

Generally used for navigation

Ordered tags:

<ol>
	<li>标签1</li>
	<li>标签2</li>
	<li>标签3</li>
	<li>标签4</li>
	<li>标签5</li>
</ol>

Unordered tags:

<ul>
	<li>标签1</li>
	<li>标签2</li>
</ul>

Code example:

<!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>

The page shows:

4. Define description tags and layout tags

Define description tags:

Generally used in picture and text descriptions

<dl>
	<dt>标题</dt>
	<dd>描述1</dd>
	<dd>描述2</dd>
</dl>

Layout tags:

Generally used as a container to hold other labels

<div></div>

Code example:

<!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>

The page shows:

5. Hyperlink tags

Function:
Jump between pages
and implement anchor links

Jump between pages

<a href="" target=""></a>
	href:路径、网址均可
	target：目标		
		self：当前页面打开（默认）
		blank：新页面打开

Code example:

<!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>

The page shows:
Insert image description here

anchor link

When a page is longer than one screen , jump to the specified position

This positioning can realize anchor links between this page and anchor links between different pages.

目标位置，定义锚点：
<a name = "锚点名称"></a>

超链接跳转到定义的目标位置：
<a href = "锚点名称" target = "">自定义锚链接名称</a>

Code example:

<!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>

The page shows:

When the first hyperlink is clicked, the web page progress bar pulls down and module 3 is fully displayed.

Another web page is exactly the same as the current page. When you click the second hyperlink, you will jump to another web page and the progress bar will drop down to module 3.

The content displayed by the browser is written in the body, so the subsequent code blocks are only the body part.

6. Table labels

Rule table

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

Code example:

		<!--
			<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>

The page shows:

irregular form

Add the merging of rows and columns based on the rule table

不规则表格（跨行跨列等，即合并单元格）
	colspan:跨列，即合并后面的表格
	rowspan：跨行

Code example:

		<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>

The page shows:

table label

Title tag, logical partition tag

标题标签：<caption></caption>

逻辑分区标签：方便区分和整体控制
			<thead></thead>表的标题
			<tbody></tbody>表的内容
			<tfoot></tfoot>表的总结内容

Code example:

		<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>

The page shows:

Form☆

Used
to collect data entered by users
and used to interact with the server
(such as inputting account and password)

form properties

List of all <form> attributes

Attributes	describe
accept-charset	Specifies the character encoding used for form submission
action	Specifies to send to the specified url when submitting the form
enctype	Specifies how form data should be encoded when submitted to the server (used when there are uploaded files in the form, the value is multipart/form-data)
method	Specifies the HTTP method to use when sending form data, the default is GET
name	Specify form name
rel	Specifies the relationship between the linked resource and the current document
target	Specifies where to display the received response after submitting the form

HTML5 new	------------------------------------------------------------
autocomplete	Specifies whether the form or input field should be automatically filled in (set to on or off)
novalidate	Specifies that the form should not be validated on submission

GET and POST

get	post
The submitted form data will be displayed in the address bar URL and will be encapsulated into the request line.	The request parameters will not be displayed in the address bar URL and will be encapsulated in the request body.
There is a limit to the size of request parameters, and the maximum length of the URL is 2048 characters.	There is no limit on the size of request parameters, large amounts of data can be sent
Not very secure, suitable for non-secure data	It is more secure. The form data contains sensitive or personal information. Please be sure to use POST.

form<form>

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

		常用属性
			action:指定提交数据的url
			method:指定提交方式，7种
					get：(没有敏感数据)
						1、请求参数会在地址栏中显示，会封装到请求行中
						2、请求参数大小有限制
						3、不太安全
					post：
						1、请求参数不会在地址栏中显示，会封装到请求体中
						2、请求参数的大小没有限制
						3、较为安全
			enctype:表单中有上传的文件时使用，且取值为multipart/form-data

Code example:

<form action="常用标签.html" method="get" enctype="multipart/form-data">

</form>

form elements

Form elements, namely different types of input elements, check boxes, radio buttons, submit buttons, etc.

HTML forms contain form elements, that is, the content in <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	Define the progress of any type of task
section	Define sections (sections, sections) in the document
time	Define date or time
wbr	Specifies where in the text it is appropriate to add line breaks

Audio

Use <audio>

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

video

Use <video>

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