HTML5

  • head:通常知名页面标题,为搜索引擎准备的关于本页面的信息,加载样式表, 以及加载 JavaScript 文件,不过处于性能考虑,多数时候在页面底部 </body> 标签结束前加载 JavaScript 是更好的选择

  • body:包含页面的内容,文本、图像、表单、音视频等,也是访问者可以看到的东西缩进不重要, 但是结构很重要

body 的构成

常见元素

  • header:包含介绍性或导航性内容的区域,一个页面可以任意多的 header 元素, header中有role="banner",表示他是页面级的页眉。 不能在header里嵌套footer元素或另一个header, 也不能在footer或address元素里嵌套header。大多数情况下,如果header包含导航性链接,就可以用nav。

  • nav: 主导航链接区域

  • main: 一个页面只有一个部分代表其主要欸容,可以将这样的内容包再 main 元素中, 该元素在一个页面仅使用一次,最好在 main 开始标签中加上 role="main" 。 不能将main放置在article、aside、footer、header或nav元素中。

  • article: 表示文档、页面、应用或网站中的一个独立容器,可以独立分配。 article 可以嵌套在另外一个 article 中。一个页面可以有多个 article。一个 article 可以包含一个或多个 section。

  • section:代表文档或应用的一个一般区块,具有相似主题的一组内容,通常包含一个标题。不要与 div 元素混淆, section 标记是页面中的特定区域而 div 不传达任何语义。 如果只是出于添加样式的原因要对内容添加一个容器,应使用 div 而不是 secitonsection 在本质上组织性和结构性更强,而 article 代表的是自包含的容器。

  • aside: 应该将附注栏内容放在main的内容之后,出于 SEO 和可访问行的目的。HTML5不允许将 aside 嵌套在 address 元素内。

  • footer:footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时,它才是整个页面的页脚

  • div:division,通用容器,一个完全没有任何含义的容器。默认从新的一行开始显示。但div并不是唯一没有语义价值的元素。span是与div对应的一个元素:div是块级内容的无语义容器,而span则是短语内容的无语义内容.

ID & class

  • 在元素的开始标签中输入 id="name",其中 name 是唯一标识该元素的名称,

  • 在元素的开始标签中输入 class="name",如果要指定多个类别,用空格将不同的类别名称分开即可,如class="name anothername"

    注解

    推荐使用类为元素添加样式。

    HTML 文档中的每个id都必须是唯一的。换句话说,一个页面里不能出现两个具有相同id的元素,并且每个元素都只能有一个id。相同的id可以出现在不同的页面里

    一个class名称可以分配给页面中任意数量的元素,并且一个元素可以有一个以上的class。

    在class和id名称中,通常使用短横线分隔多个单词,例如class="footer-page"

    可以使用class属性实现微格式(microformat)

注释

警告

注释不能嵌套在其他注释里。

文本元素

  • p:

  • small:用small标记页面的版权信息是一种常见的做法, small 只适用与短语

  • strong & em:Strong 表示内容的重要性,em 表示内容的着重点。(浏览器通常以粗体显示 Strong , 以斜体显示 em,如果 em 是 strong 的子元素,会同时以斜体和粗体显示文本)

  • b & i:b 元素表示出于实用目的提醒读者注意的一块文字,不传达任何额外的重要性, 当某些排版规则在现有的 HTML5 语义中还没有找到对应物, 如 文档关键字、评论中的产品名,可以适用 b 元素。 i元素表示一块不同于其他文字的文字,具有不同的语态或语气。用于如分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称等。

    注解

    不要适用 b 元素代替 strong, 也不要适用 i 元素代替 em

    b 和 i 元素是早期 HTML 遗留下来的产物,它们分别用于将文本变为粗体和斜体(那时CSS还未出现)

  • figure & figcaption:figure 元素可以包含多个内容块,figcapiton 是可选的。

  • cite:对某内容源的引用或参考。对于要从引用来源中引述的内容,适用 blockquote 或 q 元素来标记引述的文本。cite 只用于参考源本身,而不是从中引述的内容。

  • blockquote:blockquote 表示单独存在的引述(通常比较长),

  • q:q元素则用于短的引述,如句子里面的引述。 浏览器自动在 q 元素的周围加上特定语言的引号。(如 中文与英文的 引号不相同)

    注解

    可以对blockquote和q使用可选的cite属性,提供引述内容来源的URL。浏览器通常不会将cite的URL呈现给用户。对搜索引擎有用

    由于q元素的跨浏览器问题(参见图4.6.5),很多(可能是大多数)开发人员避免使用q元素,而是选择直接输入正确的引号或使用字符实体。

  • time:这是 HTML5 新增的元素,用来标记 时间、日期、时间段。

  • abbr:abbr(abbreviations) 元素标记缩写词并解释其含义,可选 title 属性提供缩写词的全称。也可以在缩写词后面加括号里面标注全称

  • dfn:仅包围要定义的术语,而不是包围定义

  • sub/sup:下标/上标,如 H<sub>2</sub>O, sub/sup 会轻微的影响行间距

  • address:如果要为一个 article 提供作者联系信息,就将光标放在该元素内。如果要提供整个页面的作者联系信息,就将光标放在 body 中

  • ins/del:ins 代表添加内容,del 标记已删除的内容。两个元素可以单独使用,也可以一起使用。del 和 ins 是少有的既可以包围短语(行内元素)又可以包围块级内容的元素

  • s:标记不再准确或不再相关的内容,s 只能标记短语

  • code:code 元素默认使用等宽字体样式

  • kbd/samp/var

  • pre:对于包含重要的空格和换行的文本(如:代码),pre 元素可以保持文本固有的换行与空格,以原样显示文本。

    注解

    如果要显示包含 HTML 元素的内容,需要把 尖括号(<,>) 分别使用字符实体 &lt; 和 &gt 替换

  • mark:希望引起读者对特定片段的注意,如(页面中针对搜索词汇高亮),HTML5 中新元素,在浏览器中以黄色背景显示

  • br:换行元素,<br /> 或 <br>

    警告

    要确保使用br是最后的选择,因为该元素将表现样式带入了HTML,而不是让所有的呈现样式都交由CSS控制。例如,不要使用br模拟段落之间的距离。相反,应该用p标记两个段落并通过CSS的margin属性规定两段之间的距离。

  • span:如果想使用下面的项目,没有任何语义,可以把它作为最后的选择,

    • 属性, 如 class, dir, id, lang, title

    • CSS 样式

    • JavaScript 行为

图形元素

  • image:<img src="a.jpg" width="300", height="400"></img>,可以使用 alt 属性在图像没有加载成功时候显示文字。 如果指定了图像的尺寸,浏览器就可以预留空间,在图像加载的同时让文本显示在周围,保持布局的稳定。

链接

链接是万维网的最重要组成,没有链接,每一个页面只能独立存在。

链接有两个重要的部分:

  • 目标 :可以指定访问者点击链接时会发生什么(如 给 xx 发邮件、 连接到其他网页的链接),连接到其他网页的链接的特定位置(成为锚, anchor)

  • 标签 :访问者在浏览器看到的部分。激活标签就可以到达链接的目标。

链接分类

  • 页面链接

    <a href="page.html"></a>
    

    注意

    HTML5 与以往的 HTML 版本有差异,以往的 HTML 中,链接中只能包含图像、文本短语,以及标记文本短语的元素(如 em、strong、cite 等),HTML5 支持块级链接

    target 属性,可以将链接设置为新的窗口或标签页打开,不推荐使用。(是否使用新的标签页或窗口打开,应该由用户来决定,而不是开发人员决定) <a href="some-page.html" target="window">Some page</a>, 会打开标题为 window 的 some-page.html 如果让多个链接指向同一个窗口(即使用同一个名称),链接将都在同一个窗口打开。或者,如果你希望链接总是在不同的窗口或标签页打开(即使多次激活同一个链接),就使用HTML预定义的名称_blank(target="_blank")。

  • 锚(anchor):在本页面内跳至特定区域。当用户激活该链接时,锚应用的t页面特定部分就会显示在浏览器的窗口的顶部

    <a href="#question-01">Can an id have more than word?</a>
    <h2 id="question-01">Can an id have more than word?</h2>
    
    <!-- 如果锚位置不在本页面,就需要使用 <a href="page.html#anchor-name"></a> 如果锚位置在其他服务器上需要写绝对路径 -->
    
  • 其他链接:还可以创建其他链接( 如 电话号码、邮箱地址、图片、音频、视频 等)