HTML 最全知识点（超级详细）
网页三剑客 最主要由三部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、 css 和JavaScript。
【 web前端开发最核心的3个技术 】：
（1）HTML是什么？
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
（2）CSS
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
（3）JavaScript
JavaScript是一门 脚本语言 。
【 学习路线图 】：
学习路线： html 入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→ jQuery 入门→ ASP.NET 入门（或PHP入门）→Ajax→ ASP .NET进阶（或PHP进阶）
一、网页基础知识：你对我们常用的浏览器了解多少？
为什么会有 web标准 ：
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
HTML骨架格式：
【 注释解析 】：
1.html结构：包括<head>,< body>
2. HTML标签 是以尖括号包围的关键字.
3.html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
4.html通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写,建议小写。
在网页编辑中经常会用到的工具软件：
目前 HTML编辑器 可以说是种类繁多, 特别是国外, 开源的商业的, 各种版本,. 我只是简单介绍几个常见的免费/开源 的 可视化 HTML编辑器 (WYSIWYG)。
HTMLArea
功能一般, 文件不大, 支持是几种语言, 比较容易定制, 使用广泛,支持IE/Firefox/ Mozilla 等多种浏览器. 遵循BSD版权, 目前最新版是3.0.
官方网站:
FCKEditor
庞大, 功能强大, 加载慢. 在很多地方使用广泛, 比如 CSDN 的blog就是使用的这个. 功能也可以定制. 支持多种浏览器, 遵循LGPL版权. 目前最新版是2.0
官方网站:
演示:
FreeTextBox
定制编辑器界面, 包括 Office 2000 /Office XP/Office 2003 等界面, 运行速度一般, 功能还不错, 能够支持多种浏览器. 主要应用于ASP.net. 目前最新版是3.0.6.
官方网站:
演示:
aynHTML
界面比较象Windows, 美观度一般, 加载速度尚快, 遗憾的是只支持 IE , 目前最新的版本是
官方网站:
演示:
SPAW Ediotr
支持多种浏览器, 界面比较漂亮,类似MAC风格, 功能一般, 加载速度中等, 支持PHP比较好. GPL版权,
官方网站:
演示:
TinyMCE
界面相当清新, 很适合素雅主义使用, 功能比较强大, 不逊色于FCKEditor, 但是加载速度委实比较慢, 支持多种浏览器, 使用LGPL版权, 目前最新版本是2.0
官方网站:
演示:
XinHa
界面还可以, 加载速度比较慢, 但是比TinyMCE强点, 定制功能相当强大, 而且本身支持的功能也很强大, 支持多种浏览器, 也可以把它跟HTMLArea比较一下. 基于BSD授权,
官方网站:
演示地址:
skyWriter
功能比较强大, 使用比较复杂. 开发源代码. 有兴趣可以尝试下.
官方网站:
演示:
————————————————
有兴趣的小伙伴也可以在评论区留言推荐你觉得好用的编辑器，我们相互学习交流。
HTML是什么？
HTML超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML的基本标签：
HTML文档由4个主要标记组成，包括<html>、<head>、<title>、<body>.这4个标记构成了HTML页面最基本的元素。
为了方便记忆配图结合加深记忆，HTML标签间的相互关系：
【 html基本标签规则 】：
用<>尖括号包括英文单词 的关键词
HTML 标签 通常是成对出现的，比如 <b> 和 </b>、
标签对中的第一个标签是开始标签，以开始标签起始。第二个标签是结束标签，也是结束标签。
1 HTML标签：
作用所有HTML中标签的一个根节点。通常以<html>开头 </html>结尾。
2 head标签 ：
作用：用于存放：
title, meta ,base,style,script,link
注意在head标签中我们必须要设置的标签是title
3.title标签：
作用：让页面拥有一个属于自己的标题。
4.body标签：
作用：页面在的主体部分，用于存放所有的HTML标签：
p,h,a,b,u,i,s,em,del,ins,strong,img
【 属性 】：
color:文本的颜色
bgcolor:背景色
background:背景图片
【 颜色的表示方式 】：
第一种方式： 使用颜色名称: 仅仅有16种颜色名可用英文字母，其余的要用16进制值。
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver , teal, white, yellow
第二种方式： RGB模式
第三种： 十六进制：#000000 #ffffff #325687 #377405
平时我们在浏览网页时候可以按住键盘上的 F12 快捷键，打开我们所浏览网页的编码详情，大家可以简单的明白一个网页的构成是怎样的结构。
以 百度 为例简单演示：
是不是感觉一个百度搜索页，怎么会有这么多英文代码构成，是不是有点一头雾水呢？
那么我们又该如何解读这些内容呢？他们又是一个怎样的结构关系，组合到一起。通过网页的形势呈现的呢？带着这些疑问开始我们今天的内容分享吧。
文档类型<! DOCTYPE >（重点）
还是用刚才截图的百度搜索页截图做个简单说明，我们看到开头有这样一串英文代码。 <!DOCTYPE html>，该如何解读呢？
<!DOCTYPE html>
这句话就是告诉我们使用的哪个html版本？ 我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。
标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。
————————————————
HTML标签的语义化（重点）
白话： 所谓标签语义化，就是指标签的含义。
为什么要有语义化标签：
1、方便代码的阅读和维护
2、同时让浏览器或是 网络爬虫 可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好的搜索引擎优化：
核心：合适的地方给出一个最为合理的标签。
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
不管是谁都能看懂这块内容是什么。
【 遵循的原则 】：先确定语义的HTML ，再选合适的CSS。
总结：（重要知识点）
双标签：
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>
单标签：
<br><hr><img><input><param><meta><link>
————————————————
文档结构：
包括<html>、<head>、<title>、<body>.这4个标记构成了HTML页面最基本的元素。
(1)HTML标签
<html>标记是 HTML文件 的开头。
在整个网页代码编辑中是从 <html> 这里开始的，然后到 </html> 结束。
标记虽然没有实质性的功能，但却是HTML必不可少的部分。
所有的HTML文件都以标记开头，以标记结束，即HTML页面的所有标记都要放置在与标记中。
(2)head标签
<head>标记是HTML文件的头标记，用于存放HTML文件的信息，如定义CSS样式的代码可放置在与标记之中。
<title>标记
<title>标记为标题标记。
可将网页的标题定义在标记之中
(3)body标签
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
HTML页面的主体标记。
页面中的所有内容都定义在标记中。
标记本身也具有控制页面的一些特性，如控制页面的背景图片和颜色等。
HTML常用标记：
换行标记：
在HTML中，换行标记是<br>
排版标签：
1.注释标签：<!–注释–>
2.换行标签：<br/>
3.段落标签：<p>文本文字
特点：段与段之间有行高
属性：align对齐方式
(left：左对齐 center：居中 right：右对齐)
4.水平线标签:<hr/>
属性:
width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color: 水平线的颜色
align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
容器标签
<div>:块级标签，独占一行，换行
<span>:行级标签，所有内容都在同一行作用：
<div>:主要是结合css页面分块布局
<span>:进行友好提示信息
段落与文字
(一)、段落标签
(1)、段落与文字标签
(2)、文本格式化标签
(二)、网页特殊符号
网页特殊符号 只需要记忆一个就行了，就是HTML空格“ ”，其他的 特殊符号 我们不需要记忆，当我们需要的时候再回来查找一下 特殊符号 表就OK了。
(三)、自动闭合标签
HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。
一般标签可以在开始符号和结束符号之间插入其他标签或文字。
自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。
(1)、一般标签
举例：<body></body>
(2)、自动闭合标签
举例：<br/>、<hr/>
(四)、块元素和行内元素
(1)、 HTML元素 根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等
标签语义对照表
3种列表的语义记忆：
(一)、HTML3种列表
【列表有3种】： 有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是序列表，请大家重点掌握。
目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。
(1)、有序列表
有序列表type属性
(2)、无序列表
无序列表是三个列表中最为重要的列表。
无序列表type属性
(3)、定义列表
【 说明 】：
<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。
5、表格
(一)、表格语义记忆
通过语义化记忆表格标签：
表格结构标签
(二)、表格基本结构
<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。
【 说明 】：
<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着表格的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。
(三)、表格完整结构
表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。
表格语义化之后，使得代码更清晰和更利于后期维护。
【 语法 】：
<table>
<caption>表格标题</caption>
<!–表头–>
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!–表身–>
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!–表脚–>
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
【 说明 】：
<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。
(四)、合并行和合并列
合并行使用td标签的 rowspan 属性，而合并列则用到td标签的colspan属性。
(1)、合并行
【 语法 】：
<td rowspan=”跨度的行数”>
【 举例 】
<!DOCTYPE html>
<html xmlns=”#34;>
<head>
<title>合并行rowspan</title>
</head>
<body>
<table>
<!–第1行–>
<tr>
<td>姓名:</td>
<td>小明</td>
</tr>
<!–第2行–>
<tr>
<td rowspan=”2″>喜欢水果:</td>
<td> 苹果 </td>
</tr>
<!–第3行–>
<tr>
<td>香蕉</td>
</tr>
</table>
</body>
</html>
演示效果
(2)、合并列
【 语法 】：
<td colspan=”跨度的列数”>
【 举例 】：
<!DOCTYPE html>
<html xmlns=”#34;>
<head>
<title>合并列colspan</title>
</head>
<body>
<table>
<!–第1行–>
<tr>
<td colspan=”2″>绿叶学习网精品教程</td>
</tr>
<!–第2行–>
<tr>
<td>HTML教程</td>
<td>CSS教程</td>
</tr>
<!–第3行–>
<tr>
<td>jQuery教程</td>
<td>SEO教程</td>
</tr>
</table>
</body>
</html>
————————————————效果演示————————————————
6、图像
(一)、图像标签
在HTML中，图像标签为<img>。<img>是一个自闭合标签。img标签只需要掌握3个属性就可以了：src、alt、title。
【 语法 】：
<img src=”图片地址” alt=”图片描述（给搜索引擎看）” title=”图片描述（给用户看）”>
src和alt这两个属性是img标签必不可少的属性。其他属性我们一般用不到，所以只需要掌握这两个属性即可，大家要是在别的书籍上看到<img>还有别的属性，你不用去记忆它们。
(二)、 相对路径 和绝对路径
相对路径，指的是同一个网站下，不同文件之间的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对的路径。
绝对路径，指的是文件的完整路径。
当前文件找目标文件的过程
2.绝对路径
3.相对路径
用得很多，可移植性很好
同级目录
(三)、图片格式
虽然图片格式这一节知识比较多，大部分我们只需要了解就可以了，我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。
1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差，但是可以制作动画。
7、链接
超链接使用a标签，语法如下：
<a href=”链接地址” target=”目标窗口的打开方式”>
我们只需要掌握“_self”和“_blank”这两个属性值就可以了，其他两个用不到。
超链接根据链接对象的不同分为：
（1）外部链接
（2）内部链接：①内部页面链接；② 锚点 链接；
<!DOCTYPE html>
<html xmlns=”#34;>
<head>
<title>锚点链接</title>
</head>
<body>
<div>
<a href=”#music”>推荐音乐</a><br />
<a href=”#movie”>推荐电影</a><br />
<a href=”#article”>推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id=”music”>
<h3>推荐音乐</h3>
<ul>
<li> 林俊杰 -被风吹过的下图</li>
<li> 曲婉婷 -在我的歌声里</li>
<li> 许嵩 -灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id=”movie”>
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id=”article”>
<h3>推荐文章</h3>
<ul>
<li> 朱自清 – 荷塘月色 </li>
<li> 余光中 -乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
</body>
</html>
————————————————
锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。如下图：
只要我们点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接，滚动条就会滚动到相应的版块。
1.a 标签 (Anchor ) : 超链接（锚）
超链接在页面中起到跳转或定位的作用（超链接、锚链接、a链接、a标签）
2. a标签的跳转功能
3.a 标签的属性
4.a 标签的其他用法
5.a标签的定位功能
a标签可以快速定位到当前页面或者其他页面的目标内容（百度百科）
在当前页面进行定位
8、表单
表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。
我们通过一张表单来把所有input标签囊括：
文本格式化标签
定义粗体文本。
定义大号字。
定义着重文字。
定义斜体字。
定义小号字。
定义加重语气。
定义下标字。
定义 上标 字。
定义插入字。
定义删除字。
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
HTML5 新标签与特性
常用新标签
- header ：定义文档的页眉
- nav：定义导航链接的部分
- footer：定义文档或节的页脚
- article：标签规定独立的自包含内容
- section：定义文档中的节（section、区段）
- aside：定义其所处内容之外的内容
多媒体标签
embed：标签定义嵌入的内容
audio：播放音频
video：播放视频
多媒体 embed（会使用）
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
\<embed src=”#34;%20allowFullScreen=”true” quality=”high” width=”480″ height=”400″ align=”middle” allowScriptAccess=”always” type=”application/x-shockwave-flash”>\</embed>
多媒体 audio
HTML5通过<audio>标签来解决音频播放的问题。
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
多媒体 video
HTML5通过<video>标签来解决音频播放的问题。
通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
HTML常用标签或属性全称
好了今天的内容分享就到这里，后续不断更新，敬请期待。
