H5新标签和被H5拥抱的老元素们

事实上,所有元素都能被归类为几个 元素内容模型(content model),详情请参考MDN:

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories

这里不大谈内容模型,只不过按照这种思路划分我们的元素,谈谈那些比较广为接受的HTML5新元素和那些被HTML5拥抱的老元素。

元数据内容

base元素

老元素,假如你不是使用前端框架,基本上都可以用到。

base元素为页面上的所有的相对链接规定默认 URL 或默认目标,所以最好放在head元素里比较靠前的位置。

在一个文档中,最多能使用一个 base 元素。base 元素必须位于 head 元素内部。

如果使用了 base 标签,则必须具备 href 属性或者 target 属性或者两个属性都具备。

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
 
<body>
<img src="logo.png" width="24" height="39" alt="Stickman">
<a href="http://www.runoob.com">runoob.com</a>
</body>

href属性:规定页面中所有相对链接的基准 URL。

target属性:规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖。

noscript元素

老元素,浏览器们都支持。

此标签可被用于可识别 noscript 标签但无法支持js脚本的时候,通常写上它也不会有什么损失。

noscript 元素用来定义在脚本未被执行时的替代内容(文本)。

其他“元数据内容”标签的介绍可在此先省略。

章节元素(Sectioning content)

在当前的大纲中创建一个分节,此分节将定义 header元素footer元素 和“标题元素”的范围。

属于此类的H5元素总共有:

都是比较新出的元素,还好IE9及以上都作了基本支持。

用法可参考 demo

article元素

article元素 表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构

如在发布中,它可能是论坛帖子或新闻文章、博客文章、用户提交的评论、交互式组件,或者其他独立的内容项目。

用时要特别注意内容的独立性:一般独立完整的内容才使用article元素,如果只是一段内容的话应该是用section元素。

使用说明:

  • 当 article元素 嵌套使用时,则该元素代表与外层元素有关的文章。
    • 例如,代表博客评论的 article元素 可嵌套在代表博客文章的 article元素 中。
  • article元素 的作者信息可通过 address元素 提供,但是不适用于嵌套的 article元素。
  • article元素 的发布日期和时间可通过 time元素 表示。

section元素

  • 用于定义文章中的章节(通常应该有标题和段落内容)。
  • 用来定义文档中特定的内容区块,可视为一个区域分组元素。
  • 用一句话来概括它的作用就是:给内容分段,给页面分区。
  • 注意它与div的区别,div强调在形式上的独立性,section强调的是内容上的独立性,注意它的语义。

article和section对比:

1.语义不同:article元素是独立完整的内容,section元素页面内容分块。

2.相同点:本质上都是带有语义的div块元素 。

分别可以看做<div id="section"><div id="article">

aside元素

  • aside元素通常用来设置侧边栏。
  • 用于定义article元素之外的内容,前提是这些内容与article元素内的内容相关。
  • 同时也可嵌套在article元素内部使用,作为主要内容的附属信息。比如与内容有关的参考资料,名词解释等。
  • 用来定义目录、导航栏。
  • 并非所有的超链接都放在nav元素中,通常只把一个文档中的主导航栏放在nav中。

流式元素

header元素 和 footer元素 都是比较新出的元素,还好IE9及以上都作了基本支持。

用法可参考 demo

header元素

header元素 表示一组引导性的帮助,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等。

footer元素

footer元素 表示最近一个章节内容或者 根节点元素 的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

  • footer元素 内的作者信息应包含在 address元素 中。
  • footer元素 不是章节内容,因此在outline中不能包含新的章节。

address元素

address元素 虽然是老元素,但是一直大受 WHATWG组织 青睐,也进入了HTML5行列,浏览器兼容很好,尽量使用。

HTML的 address元素 可以让作者为它最近的 <article> 或者 <body> 祖先元素提供联系信息。在后一种情况下,它应用于整个文档。

  • 通常用来说明作者的联系信息,例如名字、E-mail、电话、地址等。
  • address元素中的内容会以斜体显示。
  • 通常, address元素 可以放在当前section的 footer元素中,如果存在的话。
  • 浏览器兼容很好,尽量使用。

HTML5强调多媒体在网页的嵌入:

  • figure元素 和 figcaption元素
  • video元素

在IE9及之后都可以支持基本的使用。

figure元素

figure元素 是一个媒体组合元素,也就是对其他的媒体元素(比如:图像、图标等等)进行组合后代表一段独立的内容。

当它属于主体(main flow)时,它的位置独立于主体。当 figure元素 转移到附录中或者其他页面时不会影响到主体。

经常与 figcaption元素 配合使用,并且作为一个独立的引用单元。

figcaption元素

是与其相关联的图片的说明/标题,用于描述其父节点 figure元素 里的其他数据。

这意味着 figcaption元素 是 figure元素块里的第一个或者最后一个。

同时,该元素是可以使用,也可以不使用的。

<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">	
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>

video元素

该元素的各个属性才是研究的重点,需要大家去深入总结。

短语元素

time元素

浏览器的支持非常差,最好把它当做一个有“时间”语义的 span标签 来用。尽量不使用它的属性。

<p>The concert starts at <time>20:00</time>.</p>

mark元素

HTML5中的全新标签,需要IE9及以上的浏览器。不过低版本浏览器用了也无妨,只不过该标签没有默认的CSS样式而已。

突出一段文字,这段文字通常是被外部引用/需要被搜索引擎搜索获得/用来方便读者的某种特定的审阅。

  • 虽然 mark元素 本身有高亮效果,但是不要为了语法高亮而使用 mark元素,这时候应该使用 strong元素达到语法高亮。
  • mark元素 通常用于标注用来衔接上下文关系的文本,而strong元素用来标注在该大段文字中的重要语句。

cite元素

老元素,通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

按照惯例,引用的文本将以斜体显示。

cite标签 还有一个隐藏的功能:它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示。

表单相关内容

HTML5推崇新的表单控件,以及 表单相关的老元素 的更合理的使用, 这些老元素中常用的有:

  • form元素
  • fieldset元素
  • legend元素
  • label元素

用法可参考 demo

form元素

和表单相关的元素都由 form元素 包着,一个form代表一个表单。

fieldset元素

通常用来对表单的相关元素进行分组,如果不需要分组就可以直接不用fieldset这一层。

HTML5 中新增了一些 fieldset元素 的新属性:disabled、form、name,而HTML 4.01 中不支持这些属性。

目前,这些新属性被浏览器们支持得都很差。不建议fieldset使用任何属性。

legend元素

legend元素 代表一个用于表示 它的父元素<fieldset> 的内容的标题。

<form>
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

label元素

label元素 表示用户界面中项目的标题。

<form>
  <label for="GET-name">Name:</label>
  <input id="GET-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

使用 label配合控件使用:

在下面这个例子中,点击label会选中对应的input控件。靠的就是 for属性 和 id属性 产生的联系。

<label for="User">Click me</label>
<input type="text" id="User" name="Name" />

progress元素

需要IE10及以上的浏览器。

标示任务的进度:

<progress value="22" max="100"></progress> 

// 提高HTML代码性能的几点建议:

语义化标记

语义指意义相关的事物,HTML 可从页面内容中看出语义:元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素,如<header><footer><nav>

选择合适的元素来编写代码可保证代码的易读性:

  • 使用<h1>(<h2>,<h3>…)表示标题,<ul><ol>实现列表
  • 注意使用<article>标签之前应添加<h1>标签;
  • 选择合适的HTML5语义元素如<header><footer>,<nav>,<aside>;
  • 使用<p>描述Body 文本,HTML5 语义元素可以形成内容,反之不成立。
  • 使用<label>元素,输入类型,占位符及其他属性来强制验证。
  • 将文本和元素混合,并作为另一元素的子元素,会导致布局错误。
  • img元素记得加alt属性。

i/b/em/strong元素

<em> 用于对文本内容进行强调,强调位置的不同通常会改变句子的含义。如果仅仅在语态或语气上为了突出某一个文本,那应该使用<i>

但如果为了突出某一部分的重要性、严重性或紧急性,那应该使用 <strong>。根据 W3C 对 <b>元素的说明,<b>元素应当是在其他标签都不合适的情况下最后一个考虑使用的标签。

相同的,在考虑使用 <i> 之前,也要想想是否用<em><strong><dfn><mark> 等元素更合适。

布局

要提高HTML代码的性能,要遵循HTML 代码以实现功能和为目标,而不是样式。

  • 使用<p>元素修饰文本,而不是布局;默认<p>是自动提供边缘,而且其他样式也是浏览器默认提供的。
  • 避免使用<br>分行,可以使用block元素或CSS显示属性来代替。
  • 避免使用<hr>来添加水平线,可使用CSS的border-bottom 来代替。
  • 不到关键时刻不要使用div标签。
  • 尽量少用Tables来布局。
  • 可以多使用Flex Box
  • 使用CSS 来调整边距等。

// 被嫌弃的H5标签们:

command标签

目前只有IE支持。

hgroup标签

用来表明标题的集合,这样功能就比较鸡肋了,在最新的 HTML5.1 版中被废除了。

keygen标签

IE和Safari都不支持。

meter标签

IE不支持。

文章目录
  1. 1. 元数据内容
    1. 1.1. base元素
    2. 1.2. noscript元素
  2. 2. 章节元素(Sectioning content)
    1. 2.1. article元素
    2. 2.2. section元素
    3. 2.3. aside元素
    4. 2.4. nav元素
  3. 3. 流式元素
    1. 3.1. header元素
    2. 3.2. footer元素
    3. 3.3. address元素
    4. 3.4. figure元素
    5. 3.5. figcaption元素
    6. 3.6. video元素
  4. 4. 短语元素
    1. 4.1. time元素
    2. 4.2. mark元素
    3. 4.3. cite元素
  5. 5. 表单相关内容
    1. 5.1. form元素
    2. 5.2. fieldset元素
    3. 5.3. legend元素
    4. 5.4. label元素
      1. 5.4.1. 使用 label配合控件使用:
    5. 5.5. progress元素
  6. 6. // 提高HTML代码性能的几点建议:
    1. 6.1. 语义化标记
      1. 6.1.1. i/b/em/strong元素
    2. 6.2. 布局
  7. 7. // 被嫌弃的H5标签们:
|