基础复习之HTML （doctype、标签语义化）

这段时间找实习看的眼花缭乱的，然后也被拒得落花流水，啊哈哈～还是写博客好玩儿～嘿嘿，下面正题

一、doctype

• 标准模式 (Full Standards Mode)
• 接近标准模式 (Almost Standards Mode)
• 混杂模式 (Quirks Mode)

以上三种模式是浏览器在解析CSS时的三种工作模式，混杂模式是依据旧式的、非标准的CSS规则来渲染网页；标准模式则是遵循W3C标准去解析CSS的，接近标准模式与标准模式实际上差异并不大；关于Firefox中DTD与浏览器工作模式的详细信息可参见 Mozilla's_DOCTYPE_sniffing ，关于Opera中DTD与浏览器工作模式的详细信息可参见  DOCTYPE Switches support in Opera Presto 2.10

在编写一个页面时，要使用能够触发浏览器“标准模式”的DTD（Document Type Definition），推荐使用 < !DOCTYPE html > ，并且书写符合规范的代码，这样才能保证页面在各个浏览器中可以最大程度的兼容；

二、HTML结构之标签语义化

• 更容易被搜索引擎收录，与搜索引擎建立起良好的沟通，有利于爬虫抓取更多的有效信息：爬虫依据标签来确定上下文和关键字的权重；
• 便于团队开发和维护，语义化更具有可读性，也是下一步网页的重要动向；遵循W3C标准的团队都遵循这个标准，有利于减少差异性；
• 去掉或丢失样式时能让页面的结构呈现相对清晰；
• 更方便其他设备解析网页内容（如屏幕阅读器、盲人阅读器、移动设备）；

  HTML 语义化标签的几个栗子：

1. <a>标签实现超链接；注意title属性的作用，方便搜索引擎了解链接地址的内容；
2. <p>文章段落
3. <hx>文章标题或者栏目标题
4. <strong>和<em>强调文本，粗体和斜体
5. <q>短文本引用
6. <blockquote>长文本引用
7. <adress>为页面加入地址信息
8. <ul>无序列表
9. <ol>有序列表
10. <caption>为表格添加标题；注意表格的summary属性，和<a>标签的title属性很像；

  HTML5 语义化标签的几个栗子：

1. <article>装载显示一个独立的文章内容；

   例如一篇完整的论坛帖子，一篇新闻、一篇博客文章、一个用户评论等；<article>标签可以嵌套，内层对外层有隶属关系；举个栗子：

   <article>
   <h1>文章标题</h1>
   这是一篇文章
         <article>评论01</article>
         <article>评论02</article>
   </article>

    

2. <section>定义文档中的节，比如文章的章节、页眉、页脚等；举个栗子：

   <section>
         <h1>章节一</h1>
         <p>详细内容</p>
   </section>
   <section>
        <h1>章节二</h1>
        <p>详细内容</p>
   </section>

    

3. <aside>用来装载非正文的内容，比如广告、侧边栏、成组的链接等；

    

4. <hgroup>用于对网页或区段的标题（h1-h6）将行组合；栗子＋1:

   <hgroup>
       <h1>标题一</h2>
       <h1>标题二</h2>
   </hgroup>

    

5. <header>表示一组引导性的帮助，可能包含标题元素，也可以包含比如像logo、分节头部、搜索导航等；
6. <footer>表示最近一个章节内容或者根节点元素的页脚；一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息；
7. <nav>导航链接放在<nav>标签里；
8. <time>用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区；此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点
9. <mark>代表突出显示的文字,例如可以为了标记特定上下文中的文本而使用这个标签；不要把<mark>元素和<strong>元素搞混淆,<strong>元素用来表示文本在上下文的重要型的，而<mark>元素是用来表示上下文的关联性的；
10. <figure>规定独立的流内容（如 图片、图表、照片、代码等），<figure>中的内容应当是与主内容相关的，但是若是删除的话应当是并不会对文档流产生影响的；
11. <figcaption>定义<figure>元素的标题，注意应被置于<figure>元素的第一个或最后一个子元素的位置；

     注：关于语义化标签部分内容来自博客园ToNiQ，以下地址：http://www.cnblogs.com/ToNi/p/4271537.html?utm_source=tuicool&utm_medium=referral

 

/******暂时就到这里吧，又饿了，再过一个小时去吃饭**********************/

 

转载于:https://www.cnblogs.com/lazychen/p/5258651.html