HTML重要知识总结

HTML、XHTML、XML的区别

---

前言

HTML：超文本标记语言；
XHTML：可扩展性超文本标记语言；
XML：可扩展性标记语言；
发展趋势：HTML--XHTML--XML，通过结合HTML和XML的优势，开发了XHTML。XHTML是HTML重新设计为XML；

HTML和XHTML的区别

1. XHTML比HTML更严格，所有主流浏览器都支持XHTML。
2. XHTML文档必须有XHTML DOCTYPE声明
3. XHTML元素必须正确嵌套
   在HTML中，一些元素可能会彼此不正确地嵌套，如下所示：
   this text is bold and italic
   在XHTML中，所有元素必须相互嵌套，如下所示：
   this text is bold and italic
4. XHTML元素必须始终关闭
   这是错误的：
   

   this is a paragraph
   这是对的：
   

   this is a paragraph

5. 空元素也必须是关闭的
   这是错误的：
   a break

   这是对的：
   a break

6. XHTML必须小写
   这是错误的：
   this is a paragraph
   这是对的：
   this is a paragraph
7. XHTML属性名称必须小写
   这是错误的：
   
   这是对的：
   
   属性值必须被引用
   这是错误的：
   
   
   这是正确的：
   
   属性最小化被禁止
   这是错误的：
   
   这是正确的：
   

   XML和HTML的区别

   1. XML是可扩展标记语言，XML是一种与HTML类似的语言。它是为了描述数据而开发的。
   2. XML标签未在XML中预先定义。必须根据需要创建标签。
   3. XML是关于描述信息的，HTML是显示数据的。
   4. XML是可扩展的

   理解HTML语义化

   ---

   HTML语义化是什么？

   语义化是根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器更好的解析。
   

   是一个容器，是表示强调。。。看到内容就想用什么标签，是什么就用什么标签。

   为什么要语义化？

   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标签

   ---

   标签有两个属性name和http-equiv

   name属性

   1. name='viewport'
      说明：在移动设备浏览器上，通过为视口（viewport）设置、meta属性为user-scalable=no可以禁用其缩放功能。这样禁用缩放功能后，用户只能滚动屏幕。
      
   2. name='description'
      这里一般是网页描述。一般是网页的关键词。
      
   3. name='author'
      说明标注网站的是谁
      
   4. name="keywords"'
      说明：keywords用来告诉搜索引擎你的网页的关键字是什么，换句话说就是你网站的主题。从一定意义上说keywords和description其实它们的作用是一样的（突出网站的主题上），但是它们又有所不同（在搜索的结果页上）
      
   5. name="copyright"
      说明：标注网站的版权信息
      
   6. name="robots"
      robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引，content的参数有：all,none,index,noindex,follow,nofllow.默认是all.
      

   http-equiv属性

   与之对应的属性值是content,content中的内容其实就是各个参数的变量值。语法格式是：

   1. Refresh
      说明：自动刷新并转到新页面。
      (URL可为空)
   2. content-Type（显示字符集的设定）
      说明：设定页面使用的字符集。
      
   3. Window-target(显示窗口的设定)
      说明：强制页面在当前窗口以独立页面显示。
      
   4. Set-Cookie
      说明：如果网页过期，那么存盘的cookie将被删除。
      content="cookievalue=xxx;expires=Friday,12-Jan-2001 18:18:18 GMT;path=/"（必须用GMT时间）
   5. Pragma
      说明：禁止浏览器从本地计算机的缓存中访问页面内容。
      
      这样设定，访问者将无法脱机浏览。
   6. Expires(期限)
      说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
      
      

   相关链接http://www.yunkus.com/meta-tag-usage/

   浏览器乱码的原因

   ---

   原因

   主要是保存HTML文件和HTML文件在浏览器中展示这两个环节出错了。我们在保存HTML文件时。如果不是特意设置。编辑器会默认保存一种格式。这样在浏览器中展示的时候，又会自动识别一种格式展示，因此导致网页乱码。

   解决办法

   让浏览器识别你保存的HTML文件，保存的utf-8的格式，那你必须HTML文件的head里添加,同理，保存gbk格式相同。

   常见标签及其作用

   ---

   标签	作用
   h1-h6	h1代表页面最大的标题，h2代表二级标题
   p	段落，大段的文字
   a 链接	jirenfu.com 饥人谷.com 饥人谷.com
   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不存在或者格式不正确会导致文档以混杂模式呈现。
   例如：等于开启了标准模式，那么浏览器就按照w3c的标准解析渲染页面