HTML基础知识点

语义化就是选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器爬虫和机器很好的解析；
语义化的好处：
- 有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。
- 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
- 方便其他设备的解析（如屏幕阅读器）
- 便于团队开发和维护

内容和样式的分离，就是指在网页编码的过程中，要将HTML和CSS两大部分分开。写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能体现页面结构和内容；然后进行 CSS 样式的编写，减少内容与样式的耦合；
内容与样式分离的好处：
- 浏览器加载网页页面速度变快。分离原则下，页面样式的代码写在了CSS当中，HTML体积变得更小；
- 代码易于维护，修改网页样式时，更有效率。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式

meta常用于定义页面的说明、关键字、作者、最后修改日期和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它web服务
meta标签共有两个属性，分别是http-equiv属性和name属性

常见meta标签：

keywords(关键字) <meta name="keywords" content="博客，前端">
description(网站内容的描述) <meta name="description" content="热爱前端与编程">
viewport(移动端的窗口) <meta name="viewport" content="width=device-width, initial-scale=1">
author(作者) <meta name="author" content="author_name,123456789@qq.com">
copyright(版权) <meta name="copyright" content="xxx">
renderer(双核浏览器渲染方式)<meta name="renderer" content="webkit"> //默认webkit内核
renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面
指定网页字符集 <meta charset="utf-8">
X-UA-Compatible(浏览器采取何种版本渲染当前页面)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
cache-control(指定请求和响应遵循的缓存机制)<meta http-equiv="cache-control" content="no-cache">
expires(网页到期时间) <meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
refresh(自动刷新并指向某页面)<meta http-equiv="refresh" content="2；URL=http://www.XXX.com/">
Set-Cookie(cookie设定)
<meta http-equiv="Set-Cookie" content="User=xxx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT">

文档声明用来告知浏览器当前文档所使用的类型，让浏览器解析器知道要用什么规范来解析文档;
- 标准模式（standards mode）：浏览器根据标准规约来渲染页面;
- 混杂模式（quirks mode）：浏览器采用更加宽松的、向后兼容的方式来渲染页面。混杂模式下，浏览器会模仿旧浏览器的行为，比如IE6，在此基础上兼容新的标准特性。混杂模式又称兼容模式、怪异模式等；
<!doctype html>是html5标准网页声明,告诉浏览器用最新的HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式。

浏览器	内核	说明
IE	Trident	在IE4中被首次采用，并沿用到了IE11，win10的Edge浏览器内核为EdgeHTML
Firefox	Gecko	Netscape6开始采用的内核，后来的FireFox也采用了该内核，开源
Opera	Presto -> Blink	Presto引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性
Safari	Webkit	KHTML的分支，从KDE的KHTML及KJS引擎衍生而来，开源
Chrome	Webkit -> Blink	Blink是webkit的分支

标签	应用
`<html>`	是 HTML 页面的根元素；
`<body>`	包含页面的主体内容；
`<head>`	包含了文档的元（meta）数据；
`<meta>`	提供了元数据.元数据也不显示在页面上，被浏览器解析；
`<link>`	定义了文档与外部资源之间的关系。通常用于链接到样式表；
`<style>`	定义了HTML文档的样式文件引用地址，在`<style>` 元素中可直接添加样式来渲染 HTML 文档；
`<script>`	用于加载脚本文件，如： JavaScript；
`<title>`	描述了文档的标题；
`<h1>-<h6>`	定义了一级标题到六级标题，标题字体大小逐渐减弱；
`<p>`	定义一个段落；
`<a>`	定义超链接
`<image>`	定义html图像。可通过width和heigth属性来指定图像的大小；
`<div>`	定义块级元素，它是可用于组合其他 HTML 元素的容器,没有特定的含义
`<span>`	是内联元素，也没有特定的含义，可用作文本的容器；
`<ol><li>`	有序列表，列表项目会使用数字进行标记；
`<ul><li>`	无序列表，列表项目会使用粗体圆点（典型的小黑圆圈）进行标记；
`<table>`	定义表格；
`<tr>`	定义表格的行；
`<td>`	定义表格每行的列；
`<th>`	定义表格的表头；
`<tbody>`	定义表格的主体；
`<tfoot>`	定义表格的页脚；
`<iframe>`	用于在当前页面嵌入新页面；
`<strong>`	定义重要的文本；
`<em>`	定义被强调的文本。