基础复习之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 语义化标签的几个栗子：

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

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

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

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

<h1>文章标题</h1>

这是一篇文章

      <article>评论01</article>

      <article>评论02</article>

</article>
```

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

<section>

      <h1>章节一</h1>

      <p>详细内容</p>

</section>

<section>

     <h1>章节二</h1>

     <p>详细内容</p>

</section>

<aside>用来装载非正文的内容，比如广告、侧边栏、成组的链接等；
<hgroup>用于对网页或区段的标题（h1-h6）将行组合；栗子＋1:
```
<hgroup>

    <h1>标题一</h2>

    <h1>标题二</h2>

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

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

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

巴特西

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

最新文章

热门文章