目录
前言
不想当前端的后台不是好后台（当我在瞎掰吧）
HTML是什么？
可能大家都对它很熟悉，但我还是引用了一段度娘百科上的一段文字：
超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
其实大家通常称其为标签语言，它是前端三大件之一吧，是前端的结构。
为什么要学HTML？
为什么要学HTML或者说为什么HTML很重要，做个类比吧，将前端视为一个人，那么HTML可以视为这个人的骨骼、肌肉（也就是内部的一个架构，结构），CSS视为这个人的皮肤和衣衫（它是一个样式对吧，就像人穿搭得体），JS视为一个人的行为动作（比如DOM啊网络请求这样的行为动作，这个名为前端的这个人想要干什么是通过JS来完成的）。
那么为什么HTML很重要，很容易可以看出来，人没有骨骼和肌肉，衣服穿得再好，行为动作再顺滑，其实也没用，HTML就是这样一个内在的结构，所以要把HTML巩固好，俗话楼盖的多高不得看地基嘛。
HTML常用元素总结
HTML分“头”部分、和“主体”部分，也就是head和body，那么这两个部分的常见元素如下：
head部分常用元素
title：定义标题
meta：
<meta name= "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" charset = "utf-8" >
其中charset代表编码，常见设置utf-8，Unicode又称万国码，其内有非常多种语言，所以一般设为utf-8,
name= "viewport" 视窗口，移动端打开浏览器会寻找若是定义了视窗口的width，就会将页面放到指定width的viewport内，若没有指定视窗口，以iphone为例，默认宽度为980px（为了适配移动端）
width=device-width: 网页宽度自动适应设备的宽度 initial-scale=1.0, maximum-scale=1.0: 初始化缩放为1， 最大缩放为1
user-scalable: 用户是否可以手动缩放
style：于为 HTML 文档定义样式信息。
link：标签定义文档与外部资源的关系， 标签最常见的用途是链接样式表。
script：标签用于定义客户端脚本，比如 JavaScript。
base：
基础路径
base href
比如由base制定了一个URL地址，接下来你所要调用的文件或图片等就无须再填写完整的地址，只需写上该文件名或图片名即可。通过下方一张图片来简单的认识一下base标签的用法：
body内常用元素
body常用元素又分几个类别：
超链接
a 超链接跳转
href 跳转地址
target 有 4 个保留的目标名称用作特殊的文档重定向操作：
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
表格
table | thead | tbody | th | tr | td
注意两个属性, colspan / rowspan分别代表多少行多少列
表单
form 属性 target：表单提交目的地， method：提交方式POST、GET、PUT等，enctype：POST时采用什么编码（两种：urlencode、formdata（数据编码后提交，可上传图片，若上传图片不指定的话会导致上传失败））
即使在ajax的情况下，form也会带来一些便利，比如大量的表单提交，比如一些框架的表单验证
input | submit | button | select | textarea
容器或者区域
div | header | footer | section | aside | article | aside
段落
p
inline元素
span | em
列表
ul 无序列表 | ol 有序列表 | li 列表中条目
HTML元素包含关系
block元素包含inline元素
inline元素除a外不能包含block元素（a内可以写div）
详细具体包含关系可以去查阅html5相关文档
HTML的版本发展过程（HTML5 前世今生）
从HTML4开始说起，HTML4的时候很多时候是不规范的，比如元素没结束，虽然浏览器支持了这样的情况，浏览器背的锅比较多，但是代码整体上杂乱无章，打代码的觉得这样下去不OK，应该更多的规范约束，于是出现了XHTML，它是基于XML（可扩展标记语言）的，总所周知XML是比较严格的，所以，XHTML在语法上更加严格，因为之前的杂乱无章大家开始关注代码规范，所以很多的网站开始采用XHTML，但是发展一段时间，大家觉得约束越来越严格了，打HTML的程序员开始渐渐顶不住了，太严格了，于是HTML5出来了。
HTML5解决的问题
1.Web浏览器间的兼容性低:在一个浏览器中可以运行的HTML、Css、Javascript，在另一个浏览器中不能运行。
原因：各浏览器规范不统一，没有被标准化。
解决方案：使各浏览器的功能符合通用标准。
2.文档结构不够明确：HTML4中元素不能把文档结构表示清楚。
解决方案：增加与结构相关的元素。
Web应用程序的功能受到限制：HTMLL4对Web应用程序的贡献很小，比如：不允许同时上传多个文件。
解决方案：提供Web应用程序使用的API。（HTML5大的优势或者说变化就在这些API例如本地存储Storage等非常有用，它的一个核心就在此）
上图来自w3school
HTML5与XHTML的一些不同
XHTML：属性必须带引号，属性必须小写，开头申明DTD(文档类型定义)，Boolean值必写等
HTML5：属性不带引号，属性可以大写。
HTML5新的部分特性
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search、placeholder、表单验证
相信大家对于canvas、article、footer、header等都非常熟悉
HTML和DOM的那点事
常说HTML DOM，那么HTML是不是就是DOM，其实不是，HTML是字符串，在键盘balabala敲出一串一串HTML，其实他就是字符串，那么DOM是啥，浏览器会解析HTML字符串，解析成DOM（也就是一个树结构），然后交给JS去操作，DOM的结构示例如下：
简述基于HTML的SEO（搜索引擎优化）（HTML文档化）
可以将HTML理解成一份文档，HTML文档，而标签就是文档的结构，例如标题、摘要、大纲等，所以像写文档一样HTML不是随便去拼凑的，结构层次清晰的去写的，像写论文一样。
如上面所说的，写HTML像在写一个文档一样，那么文档有它的outline（大纲），H5将一些标签归入大纲的范畴，而W3C提供了一个工具http://h5o.github.io/ ，可以去Google应用商店找
在google可以以插件的形式装在chrome上，装后可以看到任何网页的outline:
若是html页面打出来，大纲层次分明，说明是比较好的，比起那种div乱飞的页面，它是有自己的结构的，这样有结构的html对于搜索引擎是比较友好的，搜索引擎去接受的时候是比较舒服的。
简述HTML5 Microdata微数据
上面讲到SEO也就是采用语义化的标签和结构来增强网页的语义从而达到SEO的效果，但是HTML的标签总归是有限，虽然HTML5草案中新增了很多标签，但其实是不够的，所以我们可以通过其他的方式进一步增强网页的语义。
Microdata微数据，它对于普通用户来说可能显得没有那么重要，但对于搜索引擎可以带来机器语言分析的便利。他是一种SEO的手段，提高搜索引擎对网页内容的辨识程度。
微数据，就是网页中特别定义的一个“名称name-属性值value”组合。这种组合我们称之为"项"(items)。在HTML中，有一个itemscope 属性是用来描述items项：
<div itemscope>
<p>网站标题名称 <span itemprop="name">W3School</span>.</p>
</div>
那么搜索引擎可以知道这里的内容是网站的名字。经过这么处理后，我们网站中的信息将被更加准确的采集和分类处理。
以上对HTML的一些小结
378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
