行内元素(内联元素)：a, abbr(缩写), acronym(只取首字母缩写), b, bdo(文本方向), big, br, cite(引用), code, em(强调), i, img, input, label, q(短引用), select, small, span, strong, sub(下标), sup(上标), textarea...
块级元素：address, caption, dd(定义列表的定义条目), div, dl(定义列表), dt(定义列表中的项目), form, h1~h6, hr, li, ol, ul, p(段落), pre(预格式化), table, tbody, td, tr, blockquote(段落缩进), marquee(滚动文本)...
可变元素(根据上下文来决定是哪一种元素)：button, map, object......
=>行内元素与块级元素的区别：
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容，其内容不受CSS视觉格式化模型控制。如img, input, textarea, select, object.....
=>替换元素与非替换元素的区别：
HTML5常用全局属性：
class, accesskey(访问元素的键盘快捷键), id, title, lang, style, tabindex(Tab键控制次序),
contextmenu(上下文菜单), contenteditable(是否允许编辑), hidden, draggable(是否允许拖动), dropzone(被拖动到元素中会发生的事情), spellcheck(是否进行拼写或语法检查)
*加粗表示为HTML5新增
meta是head部的一个辅助性标签，提供HTML文档的元数据。供机器解读。
=>作用：
可选属性：
| http-equiv | 添加服务器发送到浏览器的http头部内容 |
charset(文字及语言) expires(设置网页过期时间) refresh(设置网页特定时间内自动刷新并跳转到新页面url) pragma(禁止浏览器从本地计算机访问页面内容) ...... |
| name | 用于描述网页，其属性值content便于搜索引擎查找/分类信息 |
keywords(关键词) description(主要内容) robots(告诉搜索机器人哪些页面需要索引) ...... |
| scheme | 指定用来翻译属性值的方案 | |
| property="og" | 同意网页内容可以被其他社会化网站引用 |
|
常用的meta标签：
//声明文档使用的字符编码，一定要写在第一行解决乱码问题 <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> //禁止百度自动转码 <meta http-equiv="Cache-Control" content="no-siteapp" /> //SEO优化 <!-- 页面关键词 keywords --> <meta name="keywords" content="your keywords"> <!-- 页面描述内容 description --> <meta name="description" content="your description"> <!-- 定义网页作者 author --> <meta name="author" content="author,email address"> <!-- 定义网页搜索引擎索引方式，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 --> <meta name="robots" content="index,follow"> //移动端页面布局 <meta name="viewport" content="width=device-width, initial-scale=1.0"> //Microsoft Internet Explorer浏览器 <!-- 优先使用最新的ie版本 --> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- 是否开启cleartype显示效果 --> <meta http-equiv="cleartype" content="on"> //Google Chrome <!-- 优先使用最新的chrome版本 --> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <!-- 禁止自动翻译 --> <meta name="google" value="notranslate"> //移动端 <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true">
<!doctype>声明必须处于HTML文档的头部，在<html>标签之前，告知浏览器使用什么文档标准解析这个文档。如果DOCTYPE不存在或者格式不正确会导致文档以兼容模式出现。
<!doctype>不是一个HTML标签，而是一个高告诉浏览器当前HTML版本的指令。
HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。（这是为什么HTML5只需要写就够了）
*SGML：Standard Generalized Markup language（简称“通用标言”），是一种定义电子文档结构和描述其内容的国际标准语言。
*DTD：Document Type Definition（文档类型定义），是一种特殊文档，它规定、约束符合SGML或SGML子集可扩展标示语言（XML）规则的定义和陈述。
标准模式与兼容模式的区别：
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。
兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
具体体现：
在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
在兼容模式中 ：width则是元素的实际宽度（即包括内外边距）。
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
在Standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
使用margin:0 auto在Standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）。
作用：如果在文档中间出现<script>标签，浏览器会立刻加载并执行相应的脚本，这样会阻塞后续文档的加载（白屏）。
=>defer和async的区别：
原文：https://www.cnblogs.com/hermionepeng/p/13194297.html