标题中的笔记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 来规范浏览器的行为（让浏览器按照它们应该的方式来运行。）。
