美文网首页
精通CSS 高级Web标准解决方案——读书笔记(一)

精通CSS 高级Web标准解决方案——读书笔记(一)

作者: 浴火小青春 | 来源:发表于2015-11-29 17:05 被阅读295次

    标题中的笔记N对应书中的第N章。

    正文从此开始

    1. 在很久以前,网页是采用table进行布局的,打开网页看源码发现全是<table><tr><td>这样的标签,这样构造出来的网页很混乱,不容易维护。
      所以语义化这个概念出现了,关于语义化的好处有以下几点:
      1. 便于搜索引擎进行搜索,爬虫更好的爬取
      2. 便于屏幕阅读器(视觉障碍)的用户进行阅读
      3. 结构清晰,便于开发人员进行维护
    2. 为元素命名时,一定要尽可能保持名称与表现方式无关。

    如果按照元素的表现方式来确定类的命名,比如说红色的字体就设置成
    <code>.red{color:red;}</code>的话,那么在网页中会调用很多次.red类,那么代码会很混乱,设置一个元素可能会调用了很多类,修改起来也比较麻烦。我们的应该根据他们是什么来命名,比如说内容就命名为<code>.content</code>,导航就命名为<code>.nav</code>,页脚就命名为<code>.footer</code>,这样有意义的命名可以在网站的不同位置进行重用。

    1. 在书写ID和Class时,要注意区分大小写。比如<code>.a</code>和<code>.A</code>会被浏览器识别为两个不同的类。
    2. 使用ID还是Class

    类使用在那些可以多复用的地方,而ID是网页中唯一的元素。通过<code>document.getElement(ID)</code>找到唯一的元素。但是类也不能随意使用,比如说下边的这段代码:
    <pre><code>
    <div class="new">
    <p class="new-head">毛宁吸毒被抓</p>
    <p class="new-content">今日经朝阳群众举报,知名歌手毛宁吸毒被抓</p>
    </div>
    <style type='text/css'>
    .new{//}
    .new-head{/
    /}
    .new-content{//}
    </style>
    </code></pre>
    在上边的代码中,可以看出来由三个类,其实这样写是比较多余的,我们可以通过选择器的使用减少css的代码量,可以分解成不同的部分,使结构更清晰,比如可以这样写:
    <pre><code>
    <div class="new">
    <h1>毛宁吸毒被抓</h1>
    <p>今日经朝阳群众举报,知名歌手毛宁吸毒被抓</p>
    </div>
    <style type='text/css'>
    .new{/
    /}
    .new>h1{//}
    .new>p/
    /}
    </style>
    </code></pre>
    其中选择器的使用可以参考30个你必须熟记的css选择符

    1. 文档类型,doctype及浏览器模式
      DTD(document type declaration)文档类型定义,是一组机器可读的规则

    HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

    a ) 如果需要干净的标记,免于表现层的混乱,用HTML Strict DTD类型:

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

    b )Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素. 如果用户使用了不支持层叠样式表(CSS)的浏览器以至于你不得不使用 HTML 的呈现特性时,用 Transitional DTD 类型:

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

    c ) Frameset DTD 被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD:

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

    HTML5:
    HTML 4.01 与 HTML 5 之间的差异在 HTML 4.01 中有 3 个不同的文档类型,在 HTML 5 中只有一个:
    <code><!DOCTYPE HTML></code>
    HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为(让浏览器按照它们应该的方式来运行。)。

    参考:
    <!DOCTYPE>标签的定义与用法

    相关文章

      网友评论

          本文标题:精通CSS 高级Web标准解决方案——读书笔记(一)

          本文链接:https://www.haomeiwen.com/subject/xexjhttx.html