什么是HTML
htyper text markup language 即超文本标记语言HTML是一个网页的主体部分，也是一个网页的基础。因为一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容。所以HTML部分是整个前端的基础
超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言.
它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识
网页==HTML文档，由浏览器解析，用来展示的 静态网页：静态的资源，如xxx.html 动态网页：html代码是由某种开发语言根据用户请求动态生成的
什么是标签
HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的。
HTML标签
是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头. 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写. 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体. 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img /> 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>
标签的属性
通常是以键值对形式出现的. 例如 name="alex" 属性只能出现在开始标签 或 自闭和标签中. 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex" 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
!DOCTYPE标签
由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在
W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility
Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars
mode)，这就是二者最简单的区别。
这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上
window.top.document.compatMode： //BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 //CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,
这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的
标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
这就是<!DOCTYPE html>的作用
HTML文档结构
固定结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello world
</body>
</html>
上面的代码解释如下：
首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档
HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性
HTML注释
无论我们学习什么编程语言，一定要重视的就是注释，注释的重要性不言而喻，我们在此不再啰嗦，下面我们说一下HTML中注释的格式
<!-- 注释 -->
在sublime中的快捷键 win -- ctrl + /
注意：注释中可以直接使用回车换行。并且我们习惯用注释的标签把HTML代码包裹起来
<!-- xxx部分 开始
这里放你xxx部分的HTML代码
xxx部分 结束 -->
注释的注意事项
HTML注释不支持嵌套 HTML注释不能写在HTML标签中
HTML标签属性
设置标签属性
属性一般以键值对的方式写在开始标签中
<div id="i1">这是一个div标签</div> <p class='p1 p2 p3'>这是一个段落标签</p> <a href="http://www.baidu.com">这是一个超链接</a> <input type='button' onclick='addclick()'></input>
为什么能设置属性
你可以这样简单理解，因为最终我们这些标签会通过css去美化，通过javascript来操作，那么这些标签我们可以看成是一个对象，对象就应该有它自己的属性和方法。那么你像上面说到input标签，type=‘button’就是它的属性，onclick=‘addclick()’就是它的方法
注意事项
HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个 属性用空格分隔，多个属性不区分先后顺序 属性值要用引号包裹起来，通常使用双引号也可以单引号 属性和属性值不区分大小写，但是推荐使用小写
标签分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
常用的块状元素
<div> <p> <h1>~<h6> <ol> <ul> <table> <form> <li>
block特点
每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行 元素的高度、宽度、行高以及顶和底边距都可设置。 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的行内元素
<a> <span> <br> <i> <em> <strong> <label>
inline特点
和其他元素都在一行上； 元素的高度、宽度及顶部和底部边距不可设置； 元素的宽度就是它包含的文字或图片的宽度，不可改变
常用的行内块状元素
<img> <input>
inline-block特点
和其他元素都在一行上； 元素的高度、宽度、行高以及顶和底边距都可设置
注意：
我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备
标签嵌套规则
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
<div><div></div><h1></h1><p><p></div> OK <a href=”#”><span></span></a> OK <span><div></div></span> 错误 #<div>是块元素，<span>是行元素所以这个式子是错的
块级元素不能放在p标签里面
<p><ol><li></li></ol></p> 错误 <p><div></div></p> 错误
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是
h1、h2、h3、h4、h5、h6、p
li元素可以嵌入ul，ol，div等标签
第一个HTML页面
<!-- 注释 --> <!-- 标签: 由<>包裹,由字母开头,可以结合合法字符,能被浏览器解析的标记 --> <!-- 为什么使用标签: 标签具有作用域(名称空间,控制范围), 可以赋予功能 --> <!-- 一个页面文件就是一个html,有且只有一个html根标签,只有一儿一女(head | body) --> <!-- 规定文档类型: html代表改文件采用的是h5语法标准 --> <!-- 文档类型与注释属于 指令 --> <!doctype html> <html style="color: red"> <head> <!-- 页面文件头 | 样式表 | 脚本 | 页面表述... | (后勤) --> <!-- 设置文件编码格式 --> <meta charset="utf-8" /> <!-- 网页标签的标题 --> <title>first page</title> </head> <body style="color: orange"> <!-- 页面显示内容都属于body标签 --> <!-- 也可以出现样式 | 脚本 --> 旭旭宝宝 斗鱼第一老屌 <杨虎虎> <<<Zero> </body> </html>
基本标签
常用标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 <div> <span>
块级标签：<p> <h1> <table> <ol> <ul> <form> <div>
内联标签：<a> <input> <img> <sub> <sup> <textarea> <span>
特殊字符
< > " © ®
< > " © ®
实现简单的换行符
<br>可插入一个简单的换行符。 <br />
<br>标签是空标签（意味着它没有结束符，因此下面的这个是错误的：<br></br>）
HTML中块级标签和内联标签的区别
| 块级元素 | 行内元素 |
| 独占一行,默认情况下，其宽度自动填满其父元素宽度 | 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化 |
| 可以设置width，height属性 | 行内元素设置width，height属性无效 |
| 可以设置margin和padding属性 | 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。 |
| 对应于display:block | 对应于display:inline； |
head标签
我们首先来介绍一下head标签的主要内容和作用，文档的头部描述了文档的各种属性和信息，包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）等
title标签
在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题
meta标签
元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能
name属性
<!-- SEO --> <!-- <meta name="keywords" content="8-12个以英文逗号隔开的单词或词语"> --> <!-- <meta name="description" content="80字以内的一段话，与网站内容相关"> --> <!-- 移动适配 --> <!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
http-equiv属性
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值
<!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge">
name属性
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="水击三千里">
body标签
想要在网页上展示出来的内容一定要放在body标签中。 把我们之前海燕那一段HTML代码贴过来，保存到一个HTML格式的文件中
<!DOCTYPE HTML>
<html>
<head>
<title>花自飘零，几处相思，几处闲愁</title>
</head>
<body>
<h1>成功</h1>
<p>自信人生两百年</p>
<p>会当击水三千里</p>
</body>
</html>
标题标签
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用css来定义来达到漂亮的显示效果。 标题标签通常用来制作文章或网站的标题
h1~h6标签的默认样式
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>怀念</title>
</head>
<body>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗，斜体，线条样式等等
<b></b>：加粗 <strong></strong>加粗强调 <i></i>：斜体 <em></em>斜体强调 <u></u>：下划线 <s></s>：删除线 <sup></sup>：上标 <sub></sub>：下标
在浏览器中<em>默认会用斜体表示，<strong>会用粗体来表示。两个标签相比，我们通常会推荐大家使用<strong>表示强调
段落标签
<p>,paragraph的简写。定义段落
<body>
<p>我们大多数都是想法太多实践太少，或者简单点说就是想不劳而获</p>
<p>为了改变自己，我决定好好学习，多做事情，少说话</p>
</body>
link标签
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
利用link做一个小图标
<link rel="icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico">
超链接标签
<a href="https://www.baidu.com " target="_self">baidu</a> <a href="https://www.baidu.com " target="_blank">baidu</a> href:要连接的资源路径 格式如下: href="http://www.baidu.com" " target="_blank": 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容. " target="_self"：在本地窗口打开连接内容 baidu 就相当于定义一个页面的书签
超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像
锚点使用实例
<body>
<!-- 1.设置锚点: 锚点名page_top -->
<a href="" name="page_top"></a>
<img class="img" src="./img/timg.jpg" alt="">
<a href="00_复习预习.html">前往00页面</a>
<!-- 前往本页面中个某个位置: Top => 锚点 -->
<!-- 1.设置锚点 2.设置前往锚点的a转跳 -->
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
br*50
<!-- 通配标签页可以设置锚点 -->
<!-- <a href="" name="t_123"></a> -->
<div id="t_123">123</div>
<br>
br*80
<!-- 2.设置前往锚点的a转跳: #锚点名 -->
<a href="#page_top">Top</a>
<a href="#t_123">123</a>
<a href="00_复习预习.html#md">前往锚点</a>
</body>
链接其他表现形式
目标文档为下载资源 例如：href属性值，指定的文件名称，就是下载操作(rar、zip等) 电子邮件链接 前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。 例如：<ahref="mailto:zhaoxu@tedu.cn">联系我们</a> 返回页面顶部的空链接或具体id值的标签 例如：<a href="#">内容</a>或<a href="#id值">内容</a> javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。 例如：<ahref="javascript:alert()">内容</a> javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a
列表标签
<ul>: 无序列表
<ol>: 有序列表
<li>:列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容
<ul>:unordered lists的缩写 无序列表
<ol>:ordered listsde的缩写 有序列表
<!-- 无序列表 type可以定义无序列表的样式-->
<ul type="circle">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 type可以定义有序列表的样式 -->
<ol type="a">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
ol标签的属性
type：列表标识的类型
- 1：数字
- a：小写字母
- A：大写字母
- i：小写罗马字符
- I：大写罗马字符
列表标识的起始编号
- 默认为1
ul标签的属性
type：列表标识的类型
- disc：实心圆(默认值)
- circle：空心圆
- square：实心矩形
- none：不显示标识
盒子标签
<div>可定义文档的分区 division的缩写 译：区 <div> 标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="utf-8" >
<title>常用标签一</title>
</head>
<body>
<divid="wrap">
<divclass="para">
<pstyle="height: 1000px" id="p1">段落</p>
</div>
<divclass="anchor">
我是普通的文本
<h1>
<ahref="http://www.baidu.com" target="_blank" title="百度">百度</a>
<ahref="a.zip">下载包</a>
<ahref="mailto:zhaoxu@tedu.cn">联系我们</a>
<ahref="#">跳转到顶部</a>
<ahref="#p1">跳转到p1</a>
<ahref="javascript:alert(1)">内容</a>
<ahref="javascript:;">内容</a>
</h1>
</div>
<!-- <h2>******</h2>
<h3>**********</h3>
<h4>**************</h4>
<h5>******************</h4>
<h6>***************************</h6> -->
<divclass="para">
<!-- 定义段落 通常指文章一段内容 -->
<p>好好学习，天天向上</p>
<p>有时候把，我觉得有些人真的厉害，为什么那么厉害呢</p>
<p>有时候把，又觉得自己超级笨，为什么自己那么笨呢</p>
</div>
<divclass="lists">
<!-- 无序列表 -->
<ultype="circle">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 -->
<oltype="a">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
</div>
</div>
</body>
</html>
分析上面代码可以下面的层次结构
<div id='wrap'>
<div class='para'></div>
<div class='anchor'></div>
<div class='para'></div>
<div class='lists'></div>
</div>
我们将文档放在一个父级的区（div）中，它里面包含四块区（div）域，浏览器查看效果,你会发现每小块区域都是独占一行的，所以div是块级元素。另外，每块区域表示独立的一块，id属性和class属性其实很简单，你可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id，跟身份证号码一样，class可以设置同样的属性值，并且可以设置多个，例如class=’para n1‘
图片标签
src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。
语法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
注意：
src设置的图片地址可以是本地的地址也可以是一个网络地址。 图片的格式可以是png、jpg和gif。 alt属性的值会在图片加载失败时显示在网页上。 还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
使用
<div>
<span>与行内元素展示的标签<span>
<span>与行内元素展示的标签<span>
<img src="./machine-right.png" alt="金融量化分析" style="200px;height:200px">
</div>
与行内元素在一行内显示
可以设置宽度和高度
span标签可以单独摘出某块内容，结合css设置相应的样式
表格标签
表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. 像素 百分比.（最好通过css来设置长宽）
重要属性
colspan = "value" 合并列(横着合并) rowspan = "value" 合并行(竖着合并) align = "left/center/right" 水平对齐方式 valign = "top/bottom/middle/baseline" 垂直对齐方式 cellpadding = "value" 单元边沿与其内容之间的空白(table标签专属?) cellspacing = "value" 单元格之间的空白(table标签专属?) border = "value" 表格外边框线宽度(设置为0时表格内分割线也没了)(table标签专属?) 属性,直接写在标签内:<table cellpading = "1">
表格样式
caption-sider:top/bottom/left/right | 设置表格标题放置的位置 border-spacing:"npx" | 单元格间距(使用cellspacing属性也能办到)(写在table标签内?) border-collapse:separate(边框分开)/collapse(边框合并) | pass empty-cells:show/hide | 无内容的单元格是否显示 table-layout:auto/fixed | 自动表格布局(较慢)/固定表格布局(不灵活) CSS样式 - tip : caption-sider属性的值中,left和right只有火狐能识别,top,bottomIE7以上版本支持.
表格使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
.table1 {
500px;
height: 500px;
display: none;
}
th, td {
padding: 20px;
}
.table2 td {
/*border: 10px solid black;*/
}
</style>
</head>
<body>
<!-- table的display: table -->
<!-- table显示规则注意点: 当设置的盒子高度不足够显示内容时, 盒子高度由内容撑开, 当设置的高度大于显示内容所需高度,采用设置的高度 -->
<!-- border: 设置边框宽度 -->
<!-- cellspacing: 单元格间的间距 -->
<!-- cellpadding: 单元格的内边距 == th, td设置padding -->
<table class="table1" border="1" cellspacing="0">
<!-- tr>th{标题}*3 -->
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
<!-- (tr>td{单元格}*3)*3 -->
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
<!-- 边框的保留格式 => rules: rows | cols | groups | all -->
<table class="table2" border="10" rules="all">
<caption>表格标题</caption>
<thead>
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">单元格</td>
<td rowspan="2" colspan="2">单元格</td>
<!-- <td>单元格</td> -->
<td>单元格</td>
</tr>
<tr>
<!-- <td>单元格</td> -->
<!-- <td>单元格</td> -->
<!-- <td>单元格</td> -->
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>单元格</td>
<td colspan="2">单元格</td>
<!-- <td>单元格</td> -->
<td>单元格</td>
</tr>
</tfoot>
</table>
<!-- >>> display: table-cell => 可以嵌入任意类型标签, 可以快速实现多行文本垂直居中 -->
</body>
</html>
多行文本垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文本垂直居中</title>
<style>
p {
margin: 0;
}
.box, .b1 {
150px;
height: 150px;
margin: 10px auto;
background-color: pink;
text-align: center;
}
.b3 {
line-height: 150px;
}
.b2 {
line-height: 150px;
/*不起作用*/
/*vertical-align: middle;*/
}
.b1 {
/*实现多行文本垂直居中 =>
针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div class="b1">
<p>好的</p>
<p>真好</p>
<div>好的</div>
<div>真好</div>
</div>
</div>
<div class="box b2">
<p>好的</p>
<p>真好</p>
</div>
<div class="box b3">好的真好好的真好好的真好好的真好</div>
</body>
</html>
表单标签
表单form是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）
表单的作用
表单用于显示、手机信息，并将信息提交给服务器
语法
<form>允许出现表单控件</form>
表单标签<form>
表单用于向服务器传输数据。
表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和label元素
表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式
post/get 默认取值 就是 get（信封）
get 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post 1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
get/post是常见的两种请求方式.
表单元素
<input> 标签的属性和对应值
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
type: text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.) button和submit的区别？
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客
户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.
上传文件注意两点
1 请求方式必须是post
2 enctype="multipart/form-data"
<select> 下拉选标签属性
name:表单提交项的键.
size：选项个数
multiple：multiple
<option> 下拉选中的每一项 属性：
value:表单提交项的值. selected: selected下拉选默认被选中
<optgroup>为每一项加上分组
<textarea> 文本域
name: 表单提交项的键.
cols: 文本域默认有多少列
rows: 文本域默认有多少行
<label>
<label for="www">姓名</label> <input id="www" type="text">
<fieldset>
<fieldset>
<legend>登录吧</legend>
<input type="text">
</fieldset>
常用表单运用实例
<form action="http://www.baidu.com" method="get">
<!-- input -->
<!--文本框-->
<p>
用户名称：
<input type="text" name="txtUsename" value="请输入用户名称" readonly>
</p>
<p>
用户密码：
<input type="password" name="txtUsepwd">
</p>
<p>
确认密码：
<input type="password" name="txtcfmpwd" disabled>
</p>
<!--单选框-->
<p>
用户性别：
<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked=''>女
</p>
<!--复选框-->
<p>
用户爱好：吃
<input type="checkbox" name="chkhobby" value="吃" checked> 喝
<input type="checkbox" name="chkhobby" value="喝"> 玩
<input type="checkbox" name="chkhobox" value="玩"> 乐
<input type="checkbox" name="chkhobox" value="乐" checked>
</p>
<!-- 按钮 -->
<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按钮">
</p>
<!--文件选择框-->
<p>
请上传文件：
<input type="file" name="txtfile">
</p>
<!--textarea-->
<p>
自我介绍：
<textarea name="txt" cols="20" rows="5"></textarea>
</p>
<!--选择框-->
<!--滚动列表 multiple设置以后实现多选效果，ctrl+鼠标左键进行多选-->
<p>籍贯：
<select name="sel" size="3" multiple>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
<!--下拉列表-->
<p>意向工作城市：
<select name="sel">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
</form>
系统标签
<!-- 系统标签 | 自定义标签: 系统没有的满足标签语法的所有标签 --> <zero title="XXX" style="color: red">zero</zero>
其他标签
原生标签pre
<pre> 呵 < asd> & ; 呵 </pre>
换行标签 br
<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。
分割线 hr
<hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容
文档中的区段section
<section> <h1>PRC</h1> 在下面的段落标签解释标题h1中的文字 <p>The People's Republic of China was born in 1949...</p> </section>
空格
浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格
所以HTML代码对缩进的要求并不严格，我们通常使用缩进来让我们的代码结构更清晰，仅此而已
特殊字符
在上一个实例中，我们演示了HTML中输入空格、回车都是没有作用的。要想输入空格，需要用特殊符号 -- 。
| 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 |
| Α | Α | Α | Β | Β | Β | Γ | Γ | Γ |
| Δ | Δ | Δ | Ε | Ε | Ε | Ζ | Ζ | Ζ |
| Η | Η | Η | Θ | Θ | Θ | Ι | Ι | Ι |
| Κ | Κ | Κ | Λ | Λ | Λ | Μ | Μ | Μ |
| Ν | Ν | Ν | Ξ | Ξ | Ξ | Ο | Ο | Ο |
| Π | Π | Π | Ρ | Ρ | Ρ | Σ | Σ | Σ |
| Τ | Τ | Τ | Υ | Υ | Υ | Φ | Φ | Φ |
| Χ | Χ | Χ | Ψ | Ψ | Ψ | Ω | Ω | Ω |
| α | α | α | β | β | β | γ | γ | γ |
| δ | δ | δ | ε | ε | ε | ζ | ζ | ζ |
| η | η | η | θ | θ | θ | ι | ι | ι |
| κ | κ | κ | λ | λ | λ | μ | μ | μ |
| ν | ν | ν | ξ | ξ | ξ | ο | ο | ο |
| π | π | π | ρ | ρ | ρ | ς | ς | ς |
| σ | σ | σ | τ | τ | τ | υ | υ | υ |
| φ | φ | φ | χ | χ | χ | ψ | ψ | ψ |
| ω | ω | ω | ϑ | ϑ | ϑ | ϒ | ϒ | ϒ |
| ϖ | ϖ | ϖ | • | • | • | … | … | … |
| ′ | ′ | ′ | ″ | ″ | ″ | ‾ | ‾ | ‾ |
| ⁄ | ⁄ | ⁄ | ℘ | ℘ | ℘ | ℑ | ℑ | ℑ |
| ℜ | ℜ | ℜ | ™ | ™ | ™ | ℵ | ℵ | ℵ |
| ← | ← | ← | ↑ | ↑ | ↑ | → | → | → |
| ↓ | ↓ | ↓ | ↔ | ↔ | ↔ | ↵ | ↵ | ↵ |
| ⇐ | ⇐ | ⇐ | ⇑ | ⇑ | ⇑ | ⇒ | ⇒ | ⇒ |
| ⇓ | ⇓ | ⇓ | ⇔ | ⇔ | ⇔ | ∀ | ∀ | ∀ |
| ∂ | ∂ | ∂ | ∃ | ∃ | ∃ | ∅ | ∅ | ∅ |
| ∇ | ∇ | ∇ | ∈ | ∈ | ∈ | ∉ | ∉ | ∉ |
| ∋ | ∋ | ∋ | ∏ | ∏ | ∏ | ∑ | ∑ | − |
| − | − | − | ∗ | ∗ | ∗ | √ | √ | √ |
| ∝ | ∝ | ∝ | ∞ | ∞ | ∞ | ∠ | ∠ | ∠ |
| ∧ | ∧ | ⊥ | ∨ | ∨ | ⊦ | ∩ | ∩ | ∩ |
| ∪ | ∪ | ∪ | ∫ | ∫ | ∫ | ∴ | ∴ | ∴ |
| ∼ | ∼ | ∼ | ≅ | ≅ | ≅ | ≈ | ≈ | ≅ |
| ≠ | ≠ | ≠ | ≡ | ≡ | ≡ | ≤ | ≤ | ≤ |
| ≥ | ≥ | ≥ | ⊂ | ⊂ | ⊂ | ⊃ | ⊃ | ⊃ |
| ⊄ | ⊄ | ⊄ | ⊆ | ⊆ | ⊆ | ⊇ | ⊇ | ⊇ |
| ⊕ | ⊕ | ⊕ | ⊗ | ⊗ | ⊗ | ⊥ | ⊥ | ⊥ |
| ⋅ | ⋅ | ⋅ | ⌈ | ⌈ | ⌈ | ⌉ | ⌉ | ⌉ |
| ⌊ | ⌊ | ⌊ | ⌋ | ⌋ | ⌋ | ◊ | ◊ | ◊ |
| ♠ | ♠ | ♠ | ♣ | ♣ | ♣ | ♥ | ♥ | ♥ |
| ♦ | ♦ | ♦ | |   | ¡ | ¡ | ¡ | |
| ¢ | ¢ | ¢ | £ | £ | £ | ¤ | ¤ | ¤ |
| ¥ | ¥ | ¥ | ¦ | ¦ | ¦ | § | § | § |
| ¨ | ¨ | ¨ | © | © | © | ª | ª | ª |
| « | « | « | ¬ | ¬ | ¬ | ­ | ­ | |
| ® | ® | ® | ¯ | ¯ | ¯ | ° | ° | ° |
| ± | ± | ± | ² | ² | ² | ³ | ³ | ³ |
| ´ | ´ | ´ | µ | µ | µ | " | " | " |
| < | < | < | > | > | > | ' | ' |