HTML5
HTML5
- html5文档声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
-
Html5中的标签
-
<section>
<section>元素用来定义文档或应用程序中的区域(或节)。例如,可以用它组织你的个 人信息,一个<section>用于联系信息,另一个用于新闻动态。需要重点理解的是用它的目的不是为了美化样式。如果你只想将某个元素包裹起来以便设置样式,那应该和以 前一样继续使用<div>。 -
<nav>
<nav>元素用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区 域。因为<nav>用于主导航区域,所以严格来讲它不是为页脚或其他经常会包含一组链 接的区块而设计的(虽然将它用在这些区块里包含链接也没问题)。 -
<article>
<article>元素用来包裹独立的内容片段。当搭建一个页面时,想想你准备放入<article>标签的内容能否作为一个整块而被复制粘贴到另外一个完全不同的网站且能保持完整的意义?另一种办法是,想想包裹在<article>中的内容能否在 RSS 订阅源中独立成为一篇文章?应该使用<article>标签包裹的内容,最明显的例子 就是博客正文。注意,如果出现嵌套的<article>元素,那内层的<article>元素内容 应该和外层文章内容直接有关。 -
<aside>
<aside>元素用来表示与页面主内容松散相关的内容。在实践中,我经常将其用作侧边 栏(当它包含合适的内容时)。另外,引文、广告以及导航元素(如友情链接等)也可以 使用它。 -
<hgroup>
如果页面中有一组使用h1、h2、h3等标签的标题、标语和副标题,则可以考虑 使用<hgroup>将它们包裹起来。这样在 HTML5 的大纲结构算法中就会隐藏次级标题元 素,从而只让<hgroup>中的第一个标题元素进入文档大纲。 -
html5中容许在每个<section>中拥有自己独立的大纲结构，也就是说，每个section中都可以使用h1标签。
-
<header>
<header>元素不计入大纲结构,所以不能用它来划分内容结构,而是应该用它来包含对区域内容的介绍说明。实际使用中,<header>可用作网站头部的“刊头”区域,也 可用作对其他内容如<article>元素的简要介绍。 -
<footer>
footer元素不计入大纲结构，不能用于划分内容结构。
应该用他来包括包含其所在区域的辅助信息。
例如可以用它包含一组指向其他页面的超链接, 或者用它包含版权信息。和<header>一样,它也可以视情况在同一个页面上多次出现。 例如博客网站的页脚可以用它,同时博客正文<article>元素内的文脚也可以用它。不 过规范指出,博文作者的联系信息应该使用<address>元素来包裹。
-
<address>
<address>元素用于明确地标注离其最近的<article>或<body>祖先元素的联系信息。 为避免产生混淆,请记住<address>中一般不放具体的邮政地址,除非相应内容确实需 要联系地址。而邮政地址和其他可能会改变的联系信息应该使用‘p’标签来包裹。 -
每个<article><section>元素中都可以有自己的<header><nav><footer>三种标签。
-
'b'标签
做为样式钩子。
因为现在 HTML5 标准对'b'标签的定义是:
一小段文本,纯粹为了吸引人的注意,除此之外不传达任何重要性,也不 暗示其他语态或语气,如文档摘要中的关键词、评论中的产品名称、交互式文 本软件中的可操作单词,或者文章的导语。
- 'em'
强调文中的重点。
除非你确实想强调标签中的内容,否则的话可以考虑使用'b'标签或者可以的话使 用'i'标签。
-
'i'标签
一小段有不同语态或语气的文字,或者是样子上与普通文章有所差异以便标明不同特点的文字。
简单地说,它不仅仅是用来给某些文字加斜体效果的。 -
嵌入媒体
<video src="myVideo.ogg"></video>
音频使用<audio></audio>标签
视频使用<video></video>标签
<video src="video/myVideo.mp4" width="640" height="480" controls autoplay>What, do you mean you don't understand HTML5?</video>
设置播放器宽度640高度480，显示播放控制栏并自动播放。
controls 显示播放控制栏目。
autoplay自动播放。
- 针对不同浏览器支持不同视频格式的解决方案。
<video width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
What, do you mean you don't understand HTML5?
</video>
如果浏览器支持 Ogg 格式,则使用第一个文件;否则它会继续往下解析下一个<source>标签。
