1、什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们，浏览器并不会显示HTML标记，而只是使用标记来解释页面的内容。
HTML的语言特点包含：
可以设置文本的格式，比如标题、字号、文本颜色、段落等
可以创建列表
可以插入图像和媒体
可以建立表格
超链接。
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
2、HTML的结构
看一个案例结构：
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。
标签有两种，自闭合标签（比如：<meta charset="UTF-8"/>），其他正常的标签（比如<html> </html> ）
HTML的结构：
1） Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档。该属性会被浏览器识别并使用：
如果页面没有Doctype声明，则compatmode默认时backcompat，浏览器将按照自己的方式解析，那么不同的浏览器将会解析成不同的样式；
如果声明了Doctype，则开启了标准模式，浏览器会按照W3C标准解析渲染页面，则页面在所有的浏览器显示的都一样。
备注：W3C标准为万维网联盟。
2） HTML的开始标记：<html> 内容 </html>
HTML文档是由<html> </html> 包裹，也是HTML的开始标记，<html>在最前端，表示开始， </html>在最后端，表示网页的结束。html包含两个主要部分，head、body。
3）<head> 内容 </head>，HTML文件头标记
也称为HTML头信息开始标记，用来包含文件的基本信息，比如网页的标题、关键字。包含以下部分：
其中：
<meta>内容</meta>，为页面的元信息（meta-information），比如针对搜索引擎和刷新频率的描述和关键词。
<title>内容</title>，为网页头部信息，在网页框上显示
link 可设置链接，设置css格式、icon
style，在页面中写css格式
script，引进文件，写js代码
案例1：
效果：
4）网页的主题部分：<body> 内容 </body>
<body> 内容 </body>是网页的主体部分，中间可以存放<h1>标题</h1> 、<p>段落</p> 等标记，正是这些内容组成了我们所看见的网页。
4-1 块级标签、行内标签：
在htlm中经常能看到的标签一般分为两种：块级标签和行内标签。对应于
块级标签block-level elements，被视为独立的一块，会单独换一行，即“块框”。比如DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL
行内标签 inline elements，前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。比如SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR
案例2：块级和行内标签的区别
结果：
4-2 常用格式标记：
<br />：强制换行标记。让后面的文字、图片、表格等等，显示在下一行。
<p></p>：段落符号，默认两个段落之间有间距。
<center>：居中对齐标记。让段落或者是文字相对于父标记居中显示。
<pre>：预格式化标记。保留预先编排好的格式，常用来定义计算机源代码
<li>：列表项目标记。每个列表使用一个<li>标记，可用在有序列表(<ol>)和无序列表（<ul>）中
<ul>：无序列表标记。<ul>声明这个列表没有序号。项目符号
<ol>：有序列表标记。项目符号可以显示特定的一些顺序。比如type属性值"A"表示大写字母A、B、C，type属性值“1”表示阿拉伯数字1、2、3等。
<dl><dt><dd>：定义型列表，对列表条目进行简短说明。
<hr>：水平分割线标记，可以用作段落之间的分割线
<div>：分区显示标记，也称层标记，常用来编排一大段的HTML段落，也可以用于将表格式化，和<p>很相似，可以多层嵌套使用。
案例3：常用格式
效果：
4-3 各种特殊符号编码：
需要htlm代码中加入以&开头的字母组合以&#开头的数字。
比如：
具体其他的标签可参考：
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
4-4 a标签（超链接的使用）：
爬虫中经常需要抽取链接，链接的引用使用的是<a>标记。
基本语法：
<a href="链接地址" target="打开方式"name="页面锚定点名称">链接文字或者图片</a>。
主要包括以下属性：
href属性值是链接的地址，链接的地址可以是一个网页，也可以是一个视频、图片、音乐等
target属性用来定义超链接的打开方式。当属性值为_blank时，作用是在一个新的窗口中打开链接；当属性值为_self（属性值）时，作用是在当前窗口中打开链接，当属性值为_parent时，作用是在父窗口中打开页面，当属性值为_top时，在顶层窗口中打开文件。
name属性用来指定页面的锚定名称，锚定类似于查字典时候的目录。
案例4：a标签应用
效果：
案例5：a标签中id的应用:
效果：
4-5 文本标签：
<hn>：标题标记。共有6个级别，n的范围为1~6，不同级别对应不同显示大小的标题，h1最大，h6最小。
<font>：字体设置标记。用来设置字体的格式，一般有三个常用属性：size（字体大小），<font size="14px">；color（颜色），<font color="red">;face(字体)，<font face="微软雅黑">。
<b>：粗字体标签；
<i>：斜字体标签；
<sub>：文字下标字体标签；
<sup>：文字上标字体标签；
<tt>：打印机字体标签；
<cite>：引用方式的字体标签，通常是斜体；
<em>：表示强调，通常显示为斜体字；
<strong>：表示强调，通常显示为粗体字；
<samll>：小型字体标签；
<big>：大型字体标签；
<u>：下划线字体标签；
案例6：字体大小
效果：
4-6 input标签：
input标签的的type包含：
text：文本框
password：密码框，里面未***
email：邮箱，会检测是否符合邮箱格式。
radio：单选框
checkbox：复选框
file：文件上传
button：普通的按钮
submit：提交
reset：重置
textarea：多行文本
案例7：文本框
<!--文本框-->
<p>用户名：<input type="text"/></p>
<p>密码：<input type="password"/></p>
<p>邮箱：<input type="email"/></p>
结果：
案例8：单选框
<!--单选框-->
<p>性别：
<!--name的值可以随便设置，只需要一致即可识别-->
<br/>男<input type="radio" name="sex"/>
<br/>女<input type="radio" name="sex"/>
</p>
结果：
案例9：复选框
<!--复选框-->
<p>爱好：
<br/>游泳<input type="checkbox" name="ee"/>
<br/>打球<input type="checkbox" name="ee"/>
<br/>旅游<input type="checkbox" name="ee"/>
</p>
结果：
案例10：上传文件
<p>文件：<input type="file"/></p>
案例11：备注，按钮
<p>备注：<textarea></textarea></p>
<input type="submit" value="submit">
<input type="button" value="button">
<input type="reset" value="reset">
4-6 select标签：
案例12：select、下拉框
<!--下拉框-->
<p>城市：
<select>
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<!--多级下拉框就多写几个select-->
<!--mutiple最多展示几个，剩余的可以下滑-->
<select mutiple size="1">
<option>市区</option>
<option>郊区</option>
</select>
<!--optgroup多级标签-->
<select>
<optgroup label="AA">
<option>A1</option>
<option>A2</option>
</optgroup>
<optgroup label="BB">
<option>B1</option>
<option>B2</option>
</optgroup>
</select>
</p>
效果：
4-7 form标签，向后台发送数据
案例13：form标签
4-8 表格标签：
表格的基本结构包括<table>、<caption>、<tr>、<td>和<th>等标记。
基本格式：
<table 属性1="属性1"属性2="属性2"...>表格内容</table>
案例14：表格
常见属性：
width：宽度，可以设置成像素，比如px
heigh：宽度；
border：外边框宽度；
align：表格的显示位置（left居左显示，center居中显示，right居右显示）；
cellspacing：单元格之间的间距；
cellpadding：单元格与单元格变的显示距离；
frame：表格边框最外层的四条线框（void无边框，above顶部有边框，below仅有底部边框，hsides顶部边框和底部边框，lhs表示仅有左侧边框，rhs仅有右侧边框，vsides左右侧边框，border包含全部4个边框）
rules控制是否显示以及如何显示单元格之间的分割线（none无分割线；all所有分割线；rows仅有分割线；clos仅有列分割线；groups航组和列祖之间有分割线）
bgcolor：设置背景色，格式为bgcolor=“颜色值”
align用来设置垂直方向对齐方式（align=“值”，值为bottom表示靠顶端对齐，值为top表示底部对齐，值为middle表示居中对齐）
valign用于设置水平方向对齐方式，valign=“值”，值为left靠左对齐，值为right靠右对齐，值为center时，表示居中对齐
rowspan设置单元格所占行数，用于合并单元格
colspan设置单元格所占列数，用于合并单元格
4-9 fieldset标签：
案例15：有登录框的标签：
4-10 iframe标签：嵌套其他的网页
链接全部网页；比如链接到搜狐网全部网页：
案例16：iframe标签
结果：
4-10 img标签：
格式：<img src="路径/文件名.图片格式"width=“属性值”height="属性值"border="属性值"alt="属性值"/>
src用来指定要加载的图片路径、图片的名称以及图片格式
width图片宽度，单位可以是px、em、cm、mm
heigh图片高度
border图片的边框宽度
alt属性，1）当网页图片被加载完成后，鼠标移动到上面，会显示这个图片的指定属性文字；2）如果图像没有下载或者加载失败，会用文字来代替图像显示；3）搜索引擎可以通过这个属性的文字来抓取图片
案例链接：https://pan.baidu.com/s/1sk8QS8X 密码：gmxb
学习网址参考：http://www.w3school.com.cn/html/index.asp
2325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
