<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8\"大众>
<title></title>
</head>
<body>
网页的文本、图片等信息；
</body>
</html>
二、Head部分：用于表示网页的元数据即描述网页的基本信息
其常用标签及属性有：
1、title标签：浏览器标签页显示的标题
2、meta标签：其常用属性
①charset:设置文档的字符集编码格式。HTML5中设置字符集编码：<meta charset=\"大众UTF-8\"大众>
常见的字符集编码格式：
a.GB-2312:国标码，简体中文
b.GBK：扩展的国标码
c.UTF-8：万国码 Unicode 常用
②http-equiv属性:将我们的信息写给浏览器看，让浏览器按照这里面的哀求实行，可选属性值：Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 须要合营content属性利用。（http-equiv属性只是表明须要设置哪一部分，详细的设置内容，放到content属性中）
③name属性：利用方法同“http-equiv”。将我们的信息写给搜索引擎看
常用且须要节制的属性值：author（作者） keywords（网页关键字） description（网页描述） 这两个属性设置，网页必不可少。
3、link标签：链接网页图标（title前的小logo），其常用属性有：
①rel属性：声明链接文件的类型，此处选icon
②type属性：可以省略
③href属性：表示图片的路径地址
三、body部分：网页的文本、图片等信息
标签的分类：
块级标签：显示为块，前后隔一行（自动换行）
行级标签：按行从左往右逐一显示。
1、 常见的块级标签：
①<h1></h1>......<h6><h6>：标题标签，自动加粗，h1最大，h6最小。
②<hr/>：水平线标签，添加一条水平线。
③<p></p>:段落标签，
④<br/>:换行标签，
⑤<blockquote/></blockquote>:引用标签，cite属性，表明引用的来源，一样平常引用网址
浏览器默认首行缩进。
⑥<pre></pre>:预格式标签，用于重载代码。浏览器默认显示样式：1、显示为等宽字体。 2、代码中的换行、
空格等元素能在浏览器中显示。
【补充】html 文件中空格的表示：
2、 基于布局的块级标签
列表：无序列表、有序列表、定义列表
①有序列表：<ol></ol> 列表项：<li></li>
②无序列表：<ul></ul> 列表项：<li></li>
③定义列表（实现图文混排）:<dl></dl>
列表标题：<dt>一样平常只有一项</dt>
列表描述项：<dd>可以有很多项</dd>
3、组合标签：<figure></figure>用于显示图片及图片标题
他有两个子标签：<img />图片
<figcaption></figcaption>图片的标题
例如：<figure>
<img src=\"大众img/EZ.jpg\公众 height=\"大众20%\"大众 width=\"大众20%\"大众 alt=\"大众探险家\"大众/>
<figcaption>探险家 伊泽瑞尔</figcaption>
</figure>
4、分区标签：<div></div>
5、常见的行级标签
<1>span（文本）:无实际意义，用于包裹某部分笔墨，修正特定样式，例如：
这是<span style=\"大众color: red;font-size: 36px;\公众>span</span>中的笔墨
img（图片）：其常用属性：①src:表示引用图片的地址。
路径地址的写法：相对路径：以当前文件为最准，去探求图片地址
a、与文件处于同一层的图片，直接写图片名
b、图片在当前文件下一层：文件名/图片名
c、图片在当前文件上一层：../图片名
绝对路径:file:///盘符：/文件夹/图片名，但 是严禁利用
图片网址：网络上的图片链接，但是一样平常不用
②height和width：图片的高度和宽度。可以用CSS样式代替
③title：图片标。当鼠标指上之后显示的笔墨
④alt:当图片无法显示的时候，显示的笔墨
<2>em（倾斜强调）
<3>strong（加粗强调）
<4>b（加粗）
<5>i（倾斜）
Strong、em、b、i的差异
1、Strong、em都表示强调，Strong为粗体，em为斜体，而Strong的强调 程度逗比em高
2、Strong和b都能加粗，em和i都能倾斜，，但是Strong和em多了一层强调的语义 。H5哀求标签尽可能实现语义化。
<6>q（短引用）
<7>small/big（缩小/放大字体）：small和big分别是缩小和扩大字体，都可以多层嵌套直至上限或下限
<8>a（超链接）
1、href:超链接的路径，可以是网络链接，也可以是本地文件。
2、target:跳转页面打开的位置。_self自身页面，_blank新页面。
3、title:鼠标指在超链接上显示的名称。
4、Rel（被链接是当前的前/后一篇）:指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息：
rel=\公众prev\公众被链接文档是当前文档的前一篇文 档，
rel=\"大众next\"大众被链接文档是当前文档的后一篇文档,
rel=\"大众icon\"大众被链接文档是当前文档的图标
rel=\"大众stylesheet\"大众被链接文档是当前文档的样式表
5、Rev（当前是被链接的前/后一篇）
锚链接：
①本页面锚链接:a、设置锚点：<a name=\"大众top\公众></a>
b、跳转锚点：#name名
①页面间锚链接:a、在即将跳转页面的指定位置设置锚点
b、跳转锚点：页面地址.html#name名
<a href=\"大众02_常见的块级标签.html#Hbuilder\"大众>页面间锚链接</a><br/>
功能性链接： mailto用于给指定邮箱发送邮件
file：///e:/aaa.png打开本地文件
tencent://message/?uin=1315618220 给指定QQ发送息
<9>s标签，有误文本：删除线
<s>这是S标签中的笔墨</s><br />
<10>cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用
<cite>这是cite中的文本</cite><br />
<11>code:打算机代码，不保留代码格式
<pre>
<code></code>
</pre>
<12>bdo:表示文本方向，属性：dir=\"大众ltr\"大众表示从左往右，dir=\公众rtl\"大众表示从右往左
<bdo dir=\"大众rtl\"大众>1234567</bdo><br />
kbd:表示须要用户用键盘输入的内容，浏览器显示为等宽字体
请输入“<kbd>Esc</kbd>”推迟系统<br />
<13>sup:上标文本，sub:下标文本
x<sub>6</sub><br />
© © 空格
© © 空格 <br />
<14>u:下划线
<u>这是下划线</u><br />
mark:高亮或标记文本，浏览器显示为黄色背景
<mark>mark</mark><br />
6、表格：表格的行：tr，每行中的列：td，表格的表头：th
表格的常用属性：
表格行列属性：[tr和td的属性]：
1、width/heigh：单元格的宽高
2、bgcolor:单元格的背景颜色
3、align:left center right 单元格中的笔墨水平对齐办法
4、valign:top center bottom 单元格中的笔墨垂直对其办法
5、nowrap:单元格中笔墨不换行
【把稳】当表格属性与行列属性冲突时，行列属性优先级高
7、表单（form）
【两个主要属性】：action-表单提交的做事器地址 method-表单提交数据的方法（get/post）
get/post差异:
1>get利用URL传参：http://做事器地址?name1=value1&name2=value2
（?表示通报参数，?后面采取name=value的形式通报，多个参数之间用&连接） ① URL传参不屈安，所有信息可在地址栏看到，并且别人可以很随意马虎url注入，来 攻击自己的数据库。
② URL传参数据量有限，只能通报少量数据。
2>post:利用http要求通报数据。URL地址看不到数据信息，安全且通报信息量没有限定
综上所述：大部分利用post传参，但是get传参比Post快
【input标签及属性】
①type：input输入框的类型，可选值有：
②name：input输入框的别名，必填，由于传参的时候采取name=value的形式通报。
③value：input输入框的默认值
④placeholder:提示内容，当输入框有value时，提示内容消逝。
【input分外属性值】
① checked=\"大众checked\"大众默认选中
② disabled=\"大众disabled\"大众设置掌握不能利用，按钮上不能点击，输入框上不能修正，而且如果
输入框时disabled，则输入框信息不通报到后台
③hidden=“hidden”隐蔽。等同于<input type=\"大众hidden\"大众 name=\"大众username\公众value=\公众1234\"大众 />
等同于合营disabled或根据其他须要，利用隐蔽域通报信息.
【input-type属性详解】
①text：文本输入框
②password：密码输入框，内容不对外显示
③radio：单选按钮
checkbox:复选按钮
a、单选按钮，name和value属性需同时存在，提交时，提交的是value中的属性值
例如：<input type=\"大众radio\"大众 name=\"大众sex\"大众 value=\"大众男\公众/>提交显示为\"大众sex=男\公众
b、radio凭借name属性区分是否为同一组，name相同为同组，且只能选择一个
c、checked=\公众checked\公众默认选中，（radio只可以选一个，checkbox可以选多个）
④submit：提交按钮，提交表单数据
⑤reset：重置按钮，重置为默认状态
⑥file：文件上传按钮
⑦image：图片提交按钮，功能同submit，可以提交数据
⑧button：普通按钮，没什么软用
⑨其他常用属性值：见下图
【select标签】下拉选择标签
写法：
<select name=\"大众=city\"大众>
<option>青岛</option>
<option>烟台</option>
<option>北京</option>
<option>纽约</option>
<option>罗马</option>
</select>
常用属性
①name属性：写在select里，所有选项只有一个name
②multiple属性：multiple=\"大众multiple\"大众设置select为多选，一样平常不用
③option常用属性：value=\公众\"大众属性，当option没有value属性时，今后台通报的是<option></option>中间的笔墨，
当有value属性时，通报的是value的属性值。
title=\"大众\"大众属性,鼠标之上后现实的笔墨
select=\"大众select\公众默认属性值
④optgroup属性： 用于option属性分组，用lable属性表示分组名。
<optgroup label=\"大众中国\公众>
<option>青岛</option>
<option>烟台</option>
<option>北京</option>
</optgroup>
【textarea】:文本域，其常用属性 ：
①设置宽度高度 style=\公众width: 150px;height: 200px;
②readonly=\"大众readonly\"大众：只读模式，不许可修正编辑
③style=\"大众resize: none;\公众设置为宽度高度不许可修正
④style=\"大众overflow:;\公众设置笔墨超出区域时，如何处置，常用属性值有：
hidden 超出区域的笔墨，隐蔽无法显示
scroll 无论笔墨多少，均显示滚动
auto 自动，根据笔墨多少自动决定是否会显示为滚动条
【fieldset 、legend】表单的边框与标题
<fieldset> //边框
<legend> //标题
</legend>
</fieldset>
如果想让标题嵌入到边框中，需将标题标签写到边框标签里面
一个表单可以有多组标题加边框组合
【h5智能表单】
1、H5新增input的form属性，用于指定特form表单的id，实现input无需放在form标签之中，即可通过表单进行提交
<form id=foo>
……
</form>
<input type=\公众text\"大众 name=\"大众\公众 form=\公众foo\公众>
2、 input元素的新增属性：
Autocomplete：自动完成功能，记录用户之前输入的内容，并在用户下次输入时提示用户输入
》》》属性值：on/off
》》》可以再form表单利用，对全体表单的所有控件进行自动完成的开关也可以在input上利用，
对特定输入框进行修正
》》》绝大部分浏览器默认开启
Autofocus：自动得到焦点，autofocus=\"大众autofocus\公众只能得到一个焦点
Form：所属表单，通过id确认属于哪个表单
Required：必填,required=\"大众required\"大众,设置必填，否则停滞提交
Pattern：利用正则表达式验证input的模式
Placeholder：提示，当有value时取消提示。
一、Html的基本构造：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8\"大众>
<title></title>
</head>
<body>
网页的文本、图片等信息；
</body>
</html>
二、Head部分：用于表示网页的元数据即描述网页的基本信息
其常用标签及属性有：
1、title标签：浏览器标签页显示的标题
2、meta标签：其常用属性
①charset:设置文档的字符集编码格式。HTML5中设置字符集编码：<meta charset=\"大众UTF-8\"大众>
常见的字符集编码格式：
a.GB-2312:国标码，简体中文
b.GBK：扩展的国标码
c.UTF-8：万国码 Unicode 常用
②http-equiv属性:将我们的信息写给浏览器看，让浏览器按照这里面的哀求实行，可选属性值：Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 须要合营content属性利用。（http-equiv属性只是表明须要设置哪一部分，详细的设置内容，放到content属性中）
③name属性：利用方法同“http-equiv”。将我们的信息写给搜索引擎看
常用且须要节制的属性值：author（作者） keywords（网页关键字） description（网页描述） 这两个属性设置，网页必不可少。
3、link标签：链接网页图标（title前的小logo），其常用属性有：
①rel属性：声明链接文件的类型，此处选icon
②type属性：可以省略
③href属性：表示图片的路径地址
三、body部分：网页的文本、图片等信息
标签的分类：
块级标签：显示为块，前后隔一行（自动换行）
行级标签：按行从左往右逐一显示。
1、 常见的块级标签：
①<h1></h1>......<h6><h6>：标题标签，自动加粗，h1最大，h6最小。
②<hr/>：水平线标签，添加一条水平线。
③<p></p>:段落标签，
④<br/>:换行标签，
⑤<blockquote/></blockquote>:引用标签，cite属性，表明引用的来源，一样平常引用网址
浏览器默认首行缩进。
⑥<pre></pre>:预格式标签，用于重载代码。浏览器默认显示样式：1、显示为等宽字体。 2、代码中的换行、
空格等元素能在浏览器中显示。
【补充】html 文件中空格的表示：
2、 基于布局的块级标签
列表：无序列表、有序列表、定义列表
①有序列表：<ol></ol> 列表项：<li></li>
②无序列表：<ul></ul> 列表项：<li></li>
③定义列表（实现图文混排）:<dl></dl>
列表标题：<dt>一样平常只有一项</dt>
列表描述项：<dd>可以有很多项</dd>
3、组合标签：<figure></figure>用于显示图片及图片标题
他有两个子标签：<img />图片
<figcaption></figcaption>图片的标题
例如：<figure>
<img src=\"大众img/EZ.jpg\公众 height=\"大众20%\"大众 width=\公众20%\"大众 alt=\公众探险家\公众/>
<figcaption>探险家 伊泽瑞尔</figcaption>
</figure>
4、分区标签：<div></div>
5、常见的行级标签
<1>span（文本）:无实际意义，用于包裹某部分笔墨，修正特定样式，例如：
这是<span style=\"大众color: red;font-size: 36px;\公众>span</span>中的笔墨
img（图片）：其常用属性：①src:表示引用图片的地址。
路径地址的写法：相对路径：以当前文件为最准，去探求图片地址
a、与文件处于同一层的图片，直接写图片名
b、图片在当前文件下一层：文件名/图片名
c、图片在当前文件上一层：../图片名
绝对路径:file:///盘符：/文件夹/图片名，但 是严禁利用
图片网址：网络上的图片链接，但是一样平常不用
②height和width：图片的高度和宽度。可以用CSS样式代替
③title：图片标。当鼠标指上之后显示的笔墨
④alt:当图片无法显示的时候，显示的笔墨
<2>em（倾斜强调）
<3>strong（加粗强调）
<4>b（加粗）
<5>i（倾斜）
Strong、em、b、i的差异
1、Strong、em都表示强调，Strong为粗体，em为斜体，而Strong的强调 程度逗比em高
2、Strong和b都能加粗，em和i都能倾斜，，但是Strong和em多了一层强调的语义 。H5哀求标签尽可能实现语义化。
<6>q（短引用）
<7>small/big（缩小/放大字体）：small和big分别是缩小和扩大字体，都可以多层嵌套直至上限或下限
<8>a（超链接）
1、href:超链接的路径，可以是网络链接，也可以是本地文件。
2、target:跳转页面打开的位置。_self自身页面，_blank新页面。
3、title:鼠标指在超链接上显示的名称。
4、Rel（被链接是当前的前/后一篇）:指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息：
rel=\公众prev\"大众被链接文档是当前文档的前一篇文 档，
rel=\"大众next\"大众被链接文档是当前文档的后一篇文档,
rel=\"大众icon\公众被链接文档是当前文档的图标
rel=\"大众stylesheet\公众被链接文档是当前文档的样式表
5、Rev（当前是被链接的前/后一篇）
锚链接：
①本页面锚链接:a、设置锚点：<a name=\"大众top\"大众></a>
b、跳转锚点：#name名
①页面间锚链接:a、在即将跳转页面的指定位置设置锚点
b、跳转锚点：页面地址.html#name名
<a href=\"大众02_常见的块级标签.html#Hbuilder\"大众>页面间锚链接</a><br/>
功能性链接： mailto用于给指定邮箱发送邮件
file：///e:/aaa.png打开本地文件
tencent://message/?uin=1315618220 给指定QQ发送息
<9>s标签，有误文本：删除线
<s>这是S标签中的笔墨</s><br />
<10>cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用
<cite>这是cite中的文本</cite><br />
<11>code:打算机代码，不保留代码格式
<pre>
<code></code>
</pre>
<12>bdo:表示文本方向，属性：dir=\公众ltr\"大众表示从左往右，dir=\"大众rtl\"大众表示从右往左
<bdo dir=\公众rtl\"大众>1234567</bdo><br />
kbd:表示须要用户用键盘输入的内容，浏览器显示为等宽字体
请输入“<kbd>Esc</kbd>”推迟系统<br />
<13>sup:上标文本，sub:下标文本
x<sub>6</sub><br />
© © 空格
© © 空格 <br />
<14>u:下划线
<u>这是下划线</u><br />
mark:高亮或标记文本，浏览器显示为黄色背景
<mark>mark</mark><br />
6、表格：表格的行：tr，每行中的列：td，表格的表头：th
表格的常用属性：
表格行列属性：[tr和td的属性]：
1、width/heigh：单元格的宽高
2、bgcolor:单元格的背景颜色
3、align:left center right 单元格中的笔墨水平对齐办法
4、valign:top center bottom 单元格中的笔墨垂直对其办法
5、nowrap:单元格中笔墨不换行
【把稳】当表格属性与行列属性冲突时，行列属性优先级高
7、表单（form）
【两个主要属性】：action-表单提交的做事器地址 method-表单提交数据的方法（get/post）
get/post差异:
1>get利用URL传参：http://做事器地址?name1=value1&name2=value2
（?表示通报参数，?后面采取name=value的形式通报，多个参数之间用&连接） ① URL传参不屈安，所有信息可在地址栏看到，并且别人可以很随意马虎url注入，来 攻击自己的数据库。
② URL传参数据量有限，只能通报少量数据。
2>post:利用http要求通报数据。URL地址看不到数据信息，安全且通报信息量没有限定
综上所述：大部分利用post传参，但是get传参比Post快
【input标签及属性】
①type：input输入框的类型，可选值有：
②name：input输入框的别名，必填，由于传参的时候采取name=value的形式通报。
③value：input输入框的默认值
④placeholder:提示内容，当输入框有value时，提示内容消逝。
【input分外属性值】
① checked=\"大众checked\"大众默认选中
② disabled=\"大众disabled\公众设置掌握不能利用，按钮上不能点击，输入框上不能修正，而且如果
输入框时disabled，则输入框信息不通报到后台
③hidden=“hidden”隐蔽。等同于<input type=\"大众hidden\公众 name=\"大众username\"大众value=\"大众1234\"大众 />
等同于合营disabled或根据其他须要，利用隐蔽域通报信息.
【input-type属性详解】
①text：文本输入框
②password：密码输入框，内容不对外显示
③radio：单选按钮
checkbox:复选按钮
a、单选按钮，name和value属性需同时存在，提交时，提交的是value中的属性值
例如：<input type=\公众radio\"大众 name=\公众sex\公众 value=\"大众男\"大众/>提交显示为\"大众sex=男\公众
b、radio凭借name属性区分是否为同一组，name相同为同组，且只能选择一个
c、checked=\公众checked\"大众默认选中，（radio只可以选一个，checkbox可以选多个）
④submit：提交按钮，提交表单数据
⑤reset：重置按钮，重置为默认状态
⑥file：文件上传按钮
⑦image：图片提交按钮，功能同submit，可以提交数据
⑧button：普通按钮，没什么软用
⑨其他常用属性值：见下图
【select标签】下拉选择标签
写法：
<select name=\"大众=city\"大众>
<option>青岛</option>
<option>烟台</option>
<option>北京</option>
<option>纽约</option>
<option>罗马</option>
</select>
常用属性
①name属性：写在select里，所有选项只有一个name
②multiple属性：multiple=\公众multiple\"大众设置select为多选，一样平常不用
③option常用属性：value=\"大众\"大众属性，当option没有value属性时，今后台通报的是<option></option>中间的笔墨，
当有value属性时，通报的是value的属性值。
title=\"大众\"大众属性,鼠标之上后现实的笔墨
select=\"大众select\"大众默认属性值
④optgroup属性： 用于option属性分组，用lable属性表示分组名。
<optgroup label=\"大众中国\"大众>
<option>青岛</option>
<option>烟台</option>
<option>北京</option>
</optgroup>
【textarea】:文本域，其常用属性 ：
①设置宽度高度 style=\公众width: 150px;height: 200px;
②readonly=\"大众readonly\公众：只读模式，不许可修正编辑
③style=\公众resize: none;\"大众设置为宽度高度不许可修正
④style=\"大众overflow:;\"大众设置笔墨超出区域时，如何处置，常用属性值有：
hidden 超出区域的笔墨，隐蔽无法显示
scroll 无论笔墨多少，均显示滚动
auto 自动，根据笔墨多少自动决定是否会显示为滚动条
【fieldset 、legend】表单的边框与标题
<fieldset> //边框
<legend> //标题
</legend>
</fieldset>
如果想让标题嵌入到边框中，需将标题标签写到边框标签里面
一个表单可以有多组标题加边框组合
【h5智能表单】
1、H5新增input的form属性，用于指定特form表单的id，实现input无需放在form标签之中，即可通过表单进行提交
<form id=foo>
……
</form>
<input type=\公众text\公众 name=\"大众\"大众 form=\"大众foo\"大众>
2、 input元素的新增属性：
Autocomplete：自动完成功能，记录用户之前输入的内容，并在用户下次输入时提示用户输入
》》》属性值：on/off
》》》可以再form表单利用，对全体表单的所有控件进行自动完成的开关也可以在input上利用，
对特定输入框进行修正
》》》绝大部分浏览器默认开启
Autofocus：自动得到焦点，autofocus=\"大众autofocus\"大众只能得到一个焦点
Form：所属表单，通过id确认属于哪个表单
Required：必填,required=\"大众required\公众,设置必填，否则停滞提交
Pattern：利用正则表达式验证input的模式
Placeholder：提示，当有value时取消提示。
