都是文本标记语言
- HTML：全名为“超文本标记语言”， 语言较为松散，不严格的web语言；
- XML：全名为“可扩展标记语言”，是一种用来储存、传输数据的标记语言，标签没有预定义，需要自定义标签；
- XHTML：全名为“可扩展超文本标记语言”，基于XML，作用与HTML类似，但语法更严格。
语义化 HTML 就是选择合适的标签、使用合理的代码结构来编写HTML的方式，使代码更具可读性，也使得浏览器的爬虫和机器能对代码更好地解析。
- 清晰的页面结构：样式删掉的时候，也能让页面呈现清晰的结构，增强页面的可读性。
- 有利于SEO：便于浏览器和爬虫更好地解析，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
- 便于团队的开发和维护：在团队中，大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
- 在写 HTML时， 只考虑 HTML 的结构和语义化，让 HTML 能体现页面结构或者内容即可，避免出现属性样式。
- 写 JS 的时候，尽量不使用 JS直接操作样式，而是通过给元素添加删除class来控制样式变化。
- 页面展现的所有样式，都由CSS来负责实现，HTML 内不允许出现属性样式，尽量不要出现行内样式。
<meta>元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容，其属性定义了与文档相关联的名称/值对。
| 属性 | 值 | 描述 |
|---|---|---|
| charset | utf-8、gbk等 | 声明文档使用的字符编码 |
| http-equiv | X-UA-Compatible、expires、refresh、set-cookie、pragma | 把 content 属性关联到 HTTP 头部 |
| name | author、description、keywords、generator、revised、others | 把 content 属性关联到一个名称 |
| content | some_text | 定义与 http-equiv 或 name 属性相关的元信息 |
| scheme | some_text | 定义用于翻译 content 属性值的格式 |
告知浏览器的解析器，使用什么文档类型的标准来解析这个文档。
- 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
- 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
<!DOCYTYPE html>的意思是，告诉加载网页的浏览器，我要用html5的方式解码，也就是标准模式。
- 浏览器出现乱码一般是由于在制作页面时使用非英文字符时，保存的编码格式与浏览器解析时的解码格式不匹配。
- 在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式，那么一定要在html的
<head>里添加<meta charset="utf-8">。<meta charset="utf-8">是告诉浏览器使用utf-8格式来解码，就不会出现乱码了。
| 浏览器 | 内核 |
|---|---|
| ie、国内浏览器 | Trident |
| Firefox 、Netscape | Gecko |
| Opear | Presto |
| Safari、Chrome | Webkit |
| 标签 | 使用场景 |
|---|---|
<html>...</html> |
将所有HTML内容都包含在这个标签内 |
<head>...</head> |
用于定义文档的头部，它是所有头部元素的容器 |
<meta>...</meta> |
提供有关页面的元信息 |
<title>...</title> |
文档的标题 |
<body>...</body> |
文档的内容 |
<h1>...</h1> |
一级标题，h1 |
<p>...</p> |
整段文字 |
<a>...</a> |
定义锚，即在页面插入链接 |
<img/> |
图片 |
<ul>...</ul> |
无序列表 |
<ol>...</ol> |
有序列表 |
<li>...</li> |
列表项 |
<br/> |
换行 |
<div>...</div> |
定义文档中的节，默认表现为块元素 |
<span>...</span> |
定义定义文档中的节，默认表现为行内元素 |
<em>...</em> |
定义强调文本 |
<i>...</i> |
定义斜体字 |
<strong>...</strong> |
定义强调文本 |
<q>...</q> |
定义短引用 |
<title>...</title> |
文档的标题 |
<iframe>...</iframe> |
嵌入一个页面 |