HTML、XML、XHTML的区别
- HTML，超文本标记语言，是语法较为松散的、不严格的Web语言；
- XML，可扩展标记语言，主要用于存储数据和结构参考；
- XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格参考。
HTML 语义化
即让标签发挥合适和正确的作用，从而根据内容使得页面结构化。
HTML语义化有以下优势：
- 清晰的页面结构：去掉或样式丢失的时候，也能让页面呈现清晰的结构，增强页面的可读性。
- 支持更多的设备：屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。 如果你使用的含语义的标记，屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
- 便于团队开发和维护：在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
如何做到html语义化
- 代码使用中<div>和<span>最没有语义，因此应该尽量少使用，因此需要按照应用场景来规范使用HTML标签。
- 熟悉各标签规范的属性，给HTML标签设置必要的属性。
内容与样式分离的原则
一个网页主要包含以下3块内容：
- html ———— 结构；
- css ———— 表现；
- JavaScript ———— 行为。
html即为内容，css即为样式，内容与样式分离也就是html和css的分离。
因此在写html文件应该把重点放到结构化和内容上面，让HTML能提现页面结构或者内容,，然后进行 css 样式设置，减少 HTML 与 CSS 契合度（即内容与样式分离） ，写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）。
分离原则的优点
- 浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
- 网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。
- 典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。
- 更好地被搜索引擎收录。基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
- css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。
常见的meta标签
作用
meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。
meta的属性组成
- name属性
- http-equiv属性
name属性
name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。
meta标签中name属性语法格式是：
<meta name="参数" content="具体的描述">
name属性的集中参数以及应用：
- 关键字——keywords
用于向搜索引擎告知网页关键字
<meta name="keywords" content="html5,html">
- 网站内容描述——description
用于向搜索引擎说明网站主要内容
<meta name="description" content="随时随地发现新鲜事！微博带你欣赏世界上每一个精彩瞬间，了解每一个幕后故事。分享你想表达的，让全世界都能听到你的心声！" >
- 移动端的窗口——viewport
<meta name="viewport" content="width=device-width, initial-scale=1"&>
- 定义搜索引擎爬虫的方式————robots
具体参数如下：
-
none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
-
noindex : 搜索引擎不索引此网页。
-
nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
-
all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
-
index : 搜索引擎索引此网页。
-
follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
-
作者————author
<meta name="author" content="Bootstrap中文网">
-
网页制作软件————generator
-
完整的meta列表：
meta-tags.md
文档声明
<!DOCTYPE html>
HTML文档需要以文档类型声明（英语非正式说法“doctype”）开头。在浏览器中，文档类型声明有助于确定渲染模式——特别是是否使用怪异模式（指在计算机领域中，一些网页浏览器为了维持对较旧的网页设计的向后兼容性，而使用的一种技术，有别于严格遵循万维网联盟（W3C）与互联网工程任务组（IETF）标准而设计的“标准模式”。）。
严格模式和混杂模式
- 在标准模式中，浏览器以其支持的最高标准呈现页面，；
- 在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
浏览器乱码的原因
- 码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
- 乱码一般是英文以外的字符才会出现。
参考资料：
http://ruoyu.jirengu.com/post/%E5%85%B3%E4%BA%8E%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B9%B1%E7%A0%81
常见的浏览器以及内核
| 浏览器 | 内核 |
|---|---|
| IE | Trident |
| chrome | WebKit |
| safari | WebKit |
| firefox | Gecko |
| opera | WebKit |
常见的标签以及应用场景
| 标签 | 场景 |
|---|---|
| head标签 | head标签是页面的“头部”， 一般来说，只有6个标签能放在<head>标签内：<title>、<meta>、<link>、<style>、<script>、<base> |
| body标签 | 页面主体 |
| h1~h6标签 | 设置不同的标题 |
| p标签 | 标记一段文字 |
| <br/>标签 | 换行 |
| <div>标签 | 定义文档中的分区或节，分割页面部分 |
| <ul>标签 | 无序列表 |
| <ol>标签 | 有序列表 |
| <form>标签 | 设置一个表单 |
| <img>标签 | 设置一个图像 |
网友评论