标题中的笔记N对应书中的第N章。
正文从此开始
- 在很久以前,网页是采用table进行布局的,打开网页看源码发现全是<table><tr><td>这样的标签,这样构造出来的网页很混乱,不容易维护。
所以语义化这个概念出现了,关于语义化的好处有以下几点:- 便于搜索引擎进行搜索,爬虫更好的爬取
- 便于屏幕阅读器(视觉障碍)的用户进行阅读
- 结构清晰,便于开发人员进行维护
-
为元素命名时,一定要尽可能保持名称与表现方式无关。
如果按照元素的表现方式来确定类的命名,比如说红色的字体就设置成
<code>.red{color:red;}</code>的话,那么在网页中会调用很多次.red类,那么代码会很混乱,设置一个元素可能会调用了很多类,修改起来也比较麻烦。我们的应该根据他们是什么来命名,比如说内容就命名为<code>.content</code>,导航就命名为<code>.nav</code>,页脚就命名为<code>.footer</code>,这样有意义的命名可以在网站的不同位置进行重用。
- 在书写ID和Class时,要注意区分大小写。比如<code>.a</code>和<code>.A</code>会被浏览器识别为两个不同的类。
-
使用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选择符
- 文档类型,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 来规范浏览器的行为(让浏览器按照它们应该的方式来运行。)。
网友评论