一、web标准的重要性以及好处

  1. 可以交付到更多的用户代理,也就是可以更好的适应多种浏览网页的容器。
  2. 能够改善性能,也就是可以利用更少的代码实现相同的功能。
  3. 更能够适合浏览器,对于兼容早期浏览器作出的努力更少。
  4. 分离内容和表现。
  5. 能够构建流动式(自适应的)页面。
  6. 流水线式生产,可以让内容和表现的开发分开进行,并且能够无缝地衔接起来。
  7. 使内容具有可访问性。
  8. 减轻维护代码的负担。
  9. 代码可以更好的适应未来。
  10. ...

二、XHTML的理解

在学习XHTML前应该先学习XML的基础知识,这样XHTML理解起来更加容易。

重要概念

DTD (Document Type Definition): 文档类型定义(详情:百度或者谷歌)。

XHTML标记的九大规则

1. 声明DOCTYPE

3种主要标记类型

1) 严格型(Strict) : 所有标记必须符合XHTML标准。

exp : 
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

2) 过渡型 : 可以兼容之前的HTML代码。

exp : 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      
3) 框架型 : 可以兼容XHTML不推荐的框架。

exp : 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">

2. 声明XML命名空间 : 处理相应的DTD中,包含哪些已经定义的有效的XHTML标签。

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

3. 声明内容类型 : 出现在文档头部,其实可以想成设置内容编码。

    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    
这里如果你考虑HTML5标准,推荐:
    
    <meta charset="utf-8" />

4. 关闭每个标签


    <p>Hello World!</p>

5. 所有标签必须正确嵌套

    <!-- 不符合 -->
    <p><strong></p></strong>
    <!-- 符合 -->
    <p><strong></strong></p>

6. 行内标签不能包含块级标签


    <!-- 不符合 -->
    <a><p>Test</p></a>
    <!-- 符合 -->
    <p><strong>Test</strong></p>
     

7. 标签全部小写

    <!-- 不符合 -->
    <DIV></DIV> 
    <!-- 符合 -->
    <div></div> 

8. 属性必须有值

    <!-- 不符合 -->
    <select name>
        <option value>ZhangSan</option>
        <option value selected>LiSi</option>
    </select>
    <!-- 符合 -->
    <select name="persons">
        <option value="zhangsan">ZhangSan</option>
        <option value="lisi" selected="selected">LiSi</option>
    </select>

9. 在内容中为特殊符号使用等价的编码符号

exp : 

    {
        "<" : "&lt",
        ">" : "&gt"
    }
    

三、文档流

四、浏览器的内部样式表

五、文档层次

标签: 前端

添加新评论