HTML、XML、XHTML 的区别
从字面上看，他们都是HTML，都是标记语言（Markup Language）
- HTML全名为超文本标记语言（Hyper Text Markup Language），是用于创建Web的标准的标记语言。
HTML编码不规范，表现、结构混乱。不利于开发和维护
- XML全名为可扩展标记语言（Extensible Markup Language），它也是一种标记语言，不过它的标签是可以自定义的，通常用来传送及携带数据。
- XHTML是根据HTML 4 和 XML 1.0重组而成。改进了HTML定义不规范，结构不严谨的缺点。它的语法更加严格，相对HTML的兼容性也不差。
HTML 语义化
对于当前的 Web 而言，HTML 是联系大多数 Web 资源的纽带。随着互联网的发展，WEB承载越来越多的信息（图片，声音，视频等），人们开始用机器来处理网络信息，就此诞生了搜索引擎。如次庞大及复杂的信息如何让搜索引擎处理和挖掘，所以让机器能够更好地读懂WEB上内容就变得越来越重要。
Web语义化有三个阶段
1、浏览器和W3C组织推出的如h1~h6、thead、ul、ol的HTML标签，用于在Web页面中组织对应的内容，如网页标题、表头、无序、有序列表，以达到更方便的协作及传播互联网内容。搜索引擎很好的利用了这些语义化标签抓取内容，又鉴于搜索引擎的巨大流量推荐，Web前端不得不考虑SEO，从而两者实现有益的循环，共同推进着语义化标签的使用。
2、但Web的发展超乎想象，起初定义的HTML语义化标签，不足以实现对Web页面各个部分的功能或位置描述，所以Web前端人员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值），以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。
3、W3C组织意识到了之前HTML版本的不足，推出的HTML5进一步推进了Web语义化发展，采用了诸如footer、section等语义化标签，弥补了采用id="footer"或者class="footer"形式的不足，以更好的推动Web的发展。
语义化的好处
- 清晰的页面结构：去掉或者丢失样式的时候也能让页面展示清晰的结构，增强页面的可读性。
- 支持更多的设备：屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。 如果你使用的含语义的标记，屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。
- 有利于SEO：和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
- 便于团队开发和维护：在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
怎样理解内容与样式分离的原则
在前端中，Html指的是结构；CSS指的是样式；JavaScript指的是行为。
-
写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
-
HTML 内不允许出现属性样式，尽量不要出现行内样式。
-
写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化。
常见的meta标签
| 标签 | 含义 |
|---|---|
<mata charset="utf-8"> |
声明文档使用的字符编码 |
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> |
声明文档兼容模式，指示IE以最新的模式渲染 |
<meta name="keywords" content="your tags"> |
定义针对搜索引擎的关键词 |
<meta name="description" content="不超过850个字符"> |
页面描述，告诉搜索引擎你的站点的主要内容 |
<meta name="revised" content="David, 2008/8/8/" /> |
定义页面的最新版本 |
<meta http-equiv="refresh" content="5"/> |
5秒刷新一次页面 |
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> |
用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式 |
<meta http-equiv="pragma" content="no-cache"> |
禁用缓存 |
<meta http-equiv="set-cookie" content="Mon, 12 May 2001 00:20:00 GMT"> |
cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也必须使用GMT时间格式。 |
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> |
视口设置，禁用页面缩放 |
文档声明的作用?严格模式和混杂模式指什么?<!doctype html>
- <!DICTYPE>声明位于文档中的最前面，在<html>标签之前，他告诉浏览器以什么样的文档规范来解析这个文档。
- 严格模式的排版和JS的运行是以浏览器支持的最高标准运行。
- 在混杂模式中，浏览器以宽松向后兼容的方式显示，模拟老式浏览器的工作方式防止站点无法工作。
浏览器乱码的原因是什么？如何解决
- 常见的编码方式有ASCII、ISOLatin-1、UNICODE、UTF-8、GBK
- 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
- 乱码一般是英文以外的字符才会出现。
- 在页面meta标签中设置相对应的编码方式
如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单调整。
- IE9浏览器：在需要转码的网页空白出右键鼠标，选择“编码”。
- 傲游浏览器：在需要转码的网页时，菜单“查看”-->“编码”即可选择转换编码
- 谷歌浏览器：在需要转码的网页时，点击右上角“三横”图标选择“工具”-->“编码”即可选择切换网页编码
常用浏览器
- Safari所用的浏览器内核是webkit
- 谷歌chrome用的内核也是webkit,不过在性能上优化了许多
- Opera浏览器在2013年以前用的是自家的Presto,而后跟随chrome使用Blink核心引擎（基于webkit）
- Firefox浏览器使用的是Gecko
- IE采用的是Trident
- 傲游浏览器3、QQ浏览器和搜狗高速浏览器都是使用Webkit与Trident双核心
常用标签
- h1-h6 标题标签
- p 段落标签
- a 链接标签
- href="#about" 跳转到id为about的位置
- href="/test" 跳转到完整域名+test
- img 图片链接
- alt 图片无法展示时，显示内容，便于视力障碍人士使用
- div 块标签
- ul 无序列表
- li ul的子标签，ul下的直接元素必须是li
- ol 有序列表
- li ol的子元素
- dl 展示有标题和内容的自定义表格
- dt 标题子标签
- dl
- button 按钮标签
- strong 强调元素
- em 中层强调元素
- span 标记一段行内元素
- iframe 在当前页面嵌入一个页面
- table 用于展示表格，不要用来做布局
- thead、tbody、tfoot 一般不用写
- tr 代表表格的一行
- th 代表表格第一行的列内容
- td 代表表格的一列
网友评论