HTML重要知识总结
HTML、XHTML、XML的区别
前言
HTML：超文本标记语言；
XHTML：可扩展性超文本标记语言；
XML：可扩展性标记语言；
发展趋势：HTML--XHTML--XML，通过结合HTML和XML的优势，开发了XHTML。XHTML是HTML重新设计为XML；
HTML和XHTML的区别
- XHTML比HTML更严格，所有主流浏览器都支持XHTML。
- XHTML文档必须有XHTML DOCTYPE声明
- XHTML元素必须正确嵌套
在HTML中，一些元素可能会彼此不正确地嵌套，如下所示：
<b><i>this text is bold and italic</b></i>
在XHTML中，所有元素必须相互嵌套，如下所示：
<b><i>this text is bold and italic</i></b> - XHTML元素必须始终关闭
这是错误的：
<p>this is a paragraph
这是对的：
<p>this is a paragraph</p> - 空元素也必须是关闭的
这是错误的：
a break<br>
这是对的：
a break</br> - XHTML必须小写
这是错误的：
<BODY>this is a paragraph</BODY>
这是对的：
<body>this is a paragraph</body> - XHTML属性名称必须小写
这是错误的：
<table WIDTH="100%">
这是对的：
<table width="100%"> - 属性值必须被引用
这是错误的：
<table width=100%>
这是正确的：
<table width="100%"> - 属性最小化被禁止
这是错误的：
<input checked/>
这是正确的：
<input checked="checked">
XML和HTML的区别
- XML是可扩展标记语言，XML是一种与HTML类似的语言。它是为了描述数据而开发的。
- XML标签未在XML中预先定义。必须根据需要创建标签。
- XML是关于描述信息的，HTML是显示数据的。
- XML是可扩展的
理解HTML语义化
HTML语义化是什么？
语义化是根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器更好的解析。
<div>是一个容器，<strong>是表示强调。。。看到内容就想用什么标签，是什么就用什么标签。
为什么要语义化？
1.屏幕阅读器（如果访客有视障）会完全根据你的标记来读你的网页
例如：如果你使用的含语义的标记，屏幕阅读器就会逐个拼出你的单词，而不是试着对它完整发音。
2. PDA、手机等设备可能无法像电脑浏览器一样来渲染网页（通常是因为这些设备对css的支持较弱）
例如：一部手机可以选择使一段标记了标题的文字以粗体显示，而掌上电脑可能会以比较大的字体显示，无论哪种方式一旦你对文本标记为标题。你就可以确信读取设备根据自身的条件来合适的显示页面。
3. 有利于SEO
和搜索引擎建立很好的沟通，有利于爬虫抓取更多有效的信息，搜索引擎的爬虫也根据标记来确定上下文和各个关键字的权重。
4. 便于团队的开发和维护
w3c给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率。
相关连接：http://www.css88.com
理解内容与样式分离的原则
什么是内容与样式分离？
写HTML的时候，先不管样式重点放在HTML的结构和语义化上，让HTML能体现页面结构或者内容，之后再管样式。
写js的时候，尽量不要用js 去直接操作样式，而是通过给元素添加删除class来控制样式的变化。
CSS与HTML分离的好处
1. 使页面载入的更快
由于将页面代码写在了css中。使得页面的体积容量变得更小，相对于嵌套的方式加载速度更快。
2. 修改时更有效率
根据区域内容标记，到css中找到对应的id，使得修改也米阿尼的时候更加方便。
3. 保持视觉的一致性
以往嵌套的方法会使得页面与页面的显示效果有偏差。
4. 对浏览器和浏览者更友好
它可以根据不同的浏览器，达到显示效果的统一和不变形。
常见的meta标签
<meat>标签有两个属性name和http-equiv
name属性
- name='viewport'
说明：在移动设备浏览器上，通过为视口（viewport）设置、meta属性为user-scalable=no可以禁用其缩放功能。这样禁用缩放功能后，用户只能滚动屏幕。
<meta name="viewport" content="width=device-width",initial-scale=1,maximmum-scale=1,user-scakable=no''> - name='description'
这里一般是网页描述。一般是网页的关键词。
<meta name="description" content=""> - name='author'
说明标注网站的是谁
<meta name="author" content="黎明"> - name="keywords"'
说明：keywords用来告诉搜索引擎你的网页的关键字是什么，换句话说就是你网站的主题。从一定意义上说keywords和description其实它们的作用是一样的（突出网站的主题上），但是它们又有所不同（在搜索的结果页上）
<meta name="keywords" content=""> - name="copyright"
说明：标注网站的版权信息
<meta name="copyright" content="李敏"> - name="robots"
robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引，content的参数有：all,none,index,noindex,follow,nofllow.默认是all.
<meta name="robots" content="all">
http-equiv属性
与之对应的属性值是content,content中的内容其实就是各个参数的变量值。语法格式是：<meta http-equiv="参数" content="参数变量值">
- Refresh
说明：自动刷新并转到新页面。
<meta http-equiv="Refresh" content="5;URL">(URL可为空) - content-Type（显示字符集的设定）
说明：设定页面使用的字符集。
<meta charset="utf-8"> - Window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。
<meta http-equiv="window-target" content="_top"> - Set-Cookie
说明：如果网页过期，那么存盘的cookie将被删除。
<meta http-equiv="Set-Cookie"> content="cookievalue=xxx;expires=Friday,12-Jan-2001 18:18:18 GMT;path=/"（必须用GMT时间） - Pragma
说明：禁止浏览器从本地计算机的缓存中访问页面内容。
<meta http-equiv="Pragma" content="no-cache">
这样设定，访问者将无法脱机浏览。 - Expires(期限)
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
<meta http-equiv=Expires Content=0>
<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18GMT">
相关链接http://www.yunkus.com/meta-tag-usage/
浏览器乱码的原因
原因
主要是保存HTML文件和HTML文件在浏览器中展示这两个环节出错了。我们在保存HTML文件时。如果不是特意设置。编辑器会默认保存一种格式。这样在浏览器中展示的时候，又会自动识别一种格式展示，因此导致网页乱码。
解决办法
让浏览器识别你保存的HTML文件，保存的utf-8的格式，那你必须HTML文件的head里添加<meta charset="utf-8">,同理，保存gbk格式相同。
常见标签及其作用
| 标签 | 作用 |
|---|---|
| h1-h6 | h1代表页面最大的标题，h2代表二级标题 |
| p | 段落，大段的文字 |
| a 链接 |
<a href="url" target=_blank title="饥人谷"></a> <a href="#">jirenfu.com</a><a href="#">饥人谷.com</a><a href="/getcourse">饥人谷.com</a>
|
| img | 图片
|
| div | 用于给页面划分区块，让结构更清晰 |
| ul li | ul:并列内容，无序列表 ul和li可以相互嵌套 ul的直接子元素是li |
| ol li | 表示带步骤或编号的并列内容，有先后关系 |
| button | 按钮 |
| strong em span | strong是强调性极强，em次之，span用于块级元素中的行内元素，加颜色等 |
| iframe | 用于嵌入一个页面 |
| th td tr | td用于代表一列，th代表表头，tr代表一行 |
常见的浏览器及其内核
Trident(IE内核)
360安全浏览器（1.0-5.0为Trident,6.0为Trident+Webkit,7.0为Trident+Blank）;
360极速浏览器（7.5之前为Trident+Webkit,7.5为Trident+Bkink）;
遨游浏览器（遨游1.x/2.x为ie内核，3.x为ie与Webkit双核）；
猎豹安全浏览器（1.0-4.2为Trident+Webkit,4.3及以后的版本Trident+Blink）;
搜狗高速浏览器(1.x为Trident,2.0及以后版本为Trident+Webkit);
uc浏览器（Blink内核+Trident内核）；
Gecko(Firefox内核)
Webkit(Safari内核，Chrome内核）
Presto内核（Opera内核）
严格模式和混杂模式
严格模式：浏览器根据规范呈现页面
混杂模式：页面以一种比较宽松的向后兼容的方式显示。通常模拟老式浏览器的行为以防止老站点无法工作。
差异：最显著的例子是：ie6出现的时候，在严格模式使用正确的盒模式，在混杂模式中则使用老式专有的盒模型。
文档声明（Doctype）的作用
声明位于文档的最前面，处于标签之前，告知浏览器的解析器用什么文档类型来规范解析这个文档。Doctype不存在或者格式不正确会导致文档以混杂模式呈现。
例如：<!DOCTYPE html>等于开启了标准模式，那么浏览器就按照w3c的标准解析渲染页面
