HTML（HyperText Markup Language：超文本标记语言）

用于创建网页的标准标记语言。
HTML是一种基础技术，常和css、js一起搭建网页、网页应用程序以及移动应用程序的用户界面。
网页浏览器可以读取HTML文件并渲染成可视化的网页。
参考https://zh.wikipedia.org/wiki/HTML
HTML版本
1997.1 HTML3.2
1997.12 HTML4.0
1999.12 HTML4.01
2014.10 HTML5

一个典型的HTML5页面

Document

HTML5

一个典型的HTML4页面

Document

4到5加入了一些新标签并删除了一些废弃标签
4的兼容性好但一般按照5去写简单适应性更好

HTML、XML、XHTML

HTML：超文本标记语言，是语法较松散的、不严格的Web语言；
XML：（EXtensible Markup Language）可扩展标记语言，主要用于存储数据喝结构、设计宗旨是传输数据，而非显示数据、标签没有被预定义。需要自行定义标签；
参考http://w3school.com.cn/xml/xml_intro.asp
XHTML：可扩展超文本标记语言，是XML和HTML的结合物基于XML，作用和HTML类似，但语法更严格；
参考http://w3school.com.cn/xhtml/xhtml_why.asp

HTML中表现（HTML）、样式（Css）、行为（Js）分离

写HTML时不管样式，重点在html的结构和标签语义化上，让HTML能体现页面结构或内容后再去写样式（css）
写JS时，尽量不用js去直接操作样式，通过给元素添加删除class来控制样式变化。
HTML内不允许出现属性样式，尽量不出现行内样式

HTML语义化

语义化HTML是一种编写HTML的方式，语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，选择合适的标签、使用合理的代码结构，便于开发者阅读的同时也可以让浏览器的爬虫和机器很好的解析。

HTML常见标签、属性

标题标签：h1~h6 h1最大依次递减h6最小
段落标签：p 大段文字用p标签包裹
链接标签：a 链到一个地址，如：

饥人谷.com
饥人谷.com配合页面中定位使用（锚链接）如：
饥人谷.com
饥人谷.com
饥人谷.com
target属性：
1._blank 在新窗口中打开被链接的文档
2._self 默认，在相同的框架中打开被链接的文档
3._parent 在父框架集中打开被链接文档
4._top 在整个窗口中打开被链接文档
5.framename 在指定的框架中打开被链接文档
title属性：
鼠标悬停在超链接上的时候，显示该超链接的文字注释。如果希望注释多行显示，可以使用
作为换行符。

图片标签：img

alt属性：
当图片不能正常显示，对图片的描述

div标签：div
如：

...

div用于给页面划分区块，让结构更清晰
id和class的区别：class是一类，id具有唯一性

列表标签ul、ol、dl
ul li标签

首页

关于

更多
- 联系
- 地址

ul：insorti list 无序列表
用于表示并列的内容
ul的直接子元素是li
可以嵌套
ol li标签

把大象关到冰箱的步骤

把大象变小

打开冰箱

把大象塞进去

ol：order list 有序列表
用于表示有步骤或编号的并列内容
ol的直接子元素是li
可以嵌套
dl dt dd标签

商品名称:: 青花瓷
特征:: 白色; 圆口
商品介绍: 这是一个年代久远的瓷器，很贵，易碎

展示一系列“标题：内容…”的场景

按钮标签：button

文字：span strong em
span：正常显示
em：加强
strong：强调性更强

优惠 100 元

小谷 2 岁了

iframe标签
用于嵌入一个页面（注意跨域操作问题）

W3Cschool.cc

表格标签 table
用于展示表格，不能用做布局
thead tbody tfoot可省略，浏览器会自动添加border-collapse：collapse；用于合并边框

姓名	年纪
姓名	年纪
小明	18
小花	20

姓名	年纪
小明	18
小花	20

文档声明

作用是声明文档的解析类型，声明必须是 HTML 文档的第一行，位于标签之前。
声明不是HTML标签，它是指示Web浏览器关于页面使用哪个HTML版本进行编写的指令。
HTML4.01和HTML5有所不同一般用H5声明
就是HTML5的声明

浏览器解析模式

严格模式：又称标准模式，是指浏览器按照W3C标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的模式解析代码
如果页面声明那么浏览器就按照W3C的标准解析渲染页面，就是严格模式。如果没有，浏览器会按照自己的模式解析渲染页面，也就是混杂模式
里lang=“zh”表示告诉浏览器当前页面使用的语言，zh为中文意思

常用meta标签

meta标签是HTML里head区的一个辅助性标签
表示页面用utf-8编码表编码解析，如果不声明浏览器可能会错用其它编码表造成网页乱码
content="IE=edge,chrome=1">表示浏览器渲染内核的方式
表示适配移动页面

name=“”，content=“”是告诉搜索引擎当前页面的内容，对页面的描述

所有从当前页面中发起的请求将不会携带 referer

常见的浏览器和内核

IE浏览器的trident
火狐浏览器的gecko
谷歌、opera浏览器的blink
safari浏览器的webkit

HTML