首页 > 代码库 > HTML5定稿一周年，谈谈我与HTML5
HTML5定稿一周年，谈谈我与HTML5
原来学习的HTML5&CSS3只是知道了一些Html5独有的标签和CSS3新添加的特性，我以为这就是HTML5了。后来当我和教研主任聊天中发现原来我所学习的方法——利用表格布局原来是几年前的老套路了。后来在我不断学习的时候发现，表格布局并不适用于移动端，而且还有很多弊端，所以思考一下，我应该重新认识一下HTML5了。
术语HTML5，指一组共同构成了未来开放式网络平台的技术，也指HTML5规范。
HTML5规范是一个独特的单元，它涵盖了有限的功能集合，其中包括诸如新的HTML标签(<video>、<audio>、<canvas>)，HTML是用于互联网上创建页面的标准语言，HTML5是最新的版本。
一个基本的HTML页面分成几个部分，通常有<head>、<body>，新的HTML5规范增加了一些新的部分，例如<nav>、<article>、<header>、<footer>……。给我留下深刻印象的是，HTML4满篇幅的div标记让人难以捉摸，HTML5尽量不使用无语义的容器，让每个标记都有其独特的含义和功能。
<!DOCTYPE html> <html > <head> <meta charset="utf-8" /> <title>用于浏览器的标签页的标题</title> </head> <body> </body> </html>
用于声明页面为HTML5文档。<html>这是标记，meta元素用于说明字符编码。每个HTML页面都需要头部（<head>）和身体（<body>）这是最基础的HTML5的页面，一般在<head>标签中，通常提供给搜索引擎的信息和样式表，也就是互相搭配的CSS3，还有可能加载JavaScript，不过一般这些都放在</body>标签结束之前了，因为你有时不能确保你的页面一定会加载完成。
接着我们来仔细说一下各个标签。
<title>标签，一般放在<head>标签中meta元素后，每个HTML页面都必须有一个标题。标题都要做到简短、描述性、唯一。标题不能有任何格式。标题的使用对于搜索引擎的索引起到了很大的作用，我们应该去足够重视title元素。搜索引擎会根据60个字符为基准进行截取，标题的话，建议把核心内容放到前60个，为了用户更好地体验。
HTML支持分级标题h1-h6，数字越大，级别越低。最大的标题h1，文字显示最大，而且会自动换一行，h2位子标题，以此类推，为了方便不同文章的不同标题。HTML5新的标记有<hgroup></hgroup>用来标记连续的几层标题，用来对浏览器说明文章结构的排列。
表示一个段落使用标记<p>、</p>。在标记中放入你的段落，段落会独立出来，也就是段落前后会换一行。
<br>就是来用作换行，有时候你会见到<br />它没有结束的标记，所以表示它是自闭的，它本身就代表换行所以不存在用一个结束的标记来表示这是一个换行，在HTML5中，你可以直接<br>这样使用。
使用header元素来为页面的一块包含一组介绍性或导向性内容的区域创建页眉。页眉中可以使用链接，也可以使用多个header元素在页面中。
HTML 的早期版本没有明确表示主导航链接的区域的元素，而 HTML5 则有这样一个元素，即nav。nav的链接可以只想页面中的其他内容，也可以指向其他页面和资源。用nav元素来包含页面中的一些链接群。
main元素是HTML5新添加的一个元素，顾名思义，它代表一个页面的主要部分，该元素在页面中只能使用一次。
article元素，另一个HTML5添加的新元素，用来添加文章，在HTML5中定义的不局限于文章、帖子等，是一种容器。在<article></article>中你可以添加你需要的内容项，这个标签可以支持嵌套操作。
section元素代表文档或应用的一个一般的区块。section标记页面的“通用”的区块，包含相似主题的一组内容。Section与artic在本质上有区别，做一下对比。section 在组织性和结构性更强，而 article 代表的是自包含的容器。
aside元素，页面中与主体部分相关联并不强的一部分，是附注栏，虽然经常被看做成侧栏，但是根据具体情况我们具体分析它的位置，还要依据上下文。
footer元素，与header元素一样可以作用在你需要的地方，但是一般作为页面的底部的页脚，这里通常就放置版权声明、指向隐私政策页面的链接等等。footer元素可以嵌套在它的最近的 article、aside、blockquote、body、details、fieldset、figure、nav、section、td元素，只有它相距最近的，才是整个页面的页脚。
small元素标记页面的版权信息，包含在标记中的字体小一号。
strong元素表示内容的重要性，字体会加粗。
em元素表示内容的着重点，字体同样会加粗。在HTML5中,em表示强调的唯一元素，而strong表示的是重要程度。
figure元素用来创建图，figcaption是其标题，通常用来表示页面中需要表示的图表。
cite元素指明引用或者参考，cite只用于参考源本身，而不是从中引述的内容，默认格式会使用斜体。根据它的语义，来源的话使用cite，其他情况比如言论之类的引用，则使用下面两种元素。
blockquote元素表示单独存在的引述。浏览器默认对blockquote文本进行缩进。
q元素用于短的引述。比如说在一个句子中引述别人的言论。使用的话浏览器会自动为你加上引号。
time元素标记时间、日期或时间段。time元素会按照你在标记中的文本来显示时间，这是在使用datetime属性的时候，反之忽略属性，那么你就必须按照格式来表述你需要的时间。
abbr元素来解释缩写词，使用title属性来把你需要解释的含义写出来，当用户把鼠标停留在使用abbr元素标记过的词语时，浏览器就会把title属性显示在一个提示框中。
dfn元素用来定义术语。后续再次使用术语的时候就不再出现，也就是说dfn元素的使用至多一次，用法和abbr元素相同，也可以使用title属性。
sub/sup元素创建下标/上标。
addresss元素用于添加作者联系信息。address元素不只可以表示地址，也可以表示电子邮箱、联系信息等等。具体表示的信息，取决于它出现的位置。
del元素标记不再准确、不再相关的文本，浏览器上的样式一般是文本加一条删除线。
ins元素对页面内容的编辑标出来，浏览器上的样式一般是文本下面加入一条下划线，。以上两个元素既可以包括短语内容，又可以包括块级内容元素。
code元素表示其中的是代码或文件名，默认的字体为等宽字体。
pre元素用来和code元素搭配，可以使用预格式化的文本，就是说把你在HTML文档中的格式保留下来，非常适合展示计算机代码的元素。
mark元素，HTML5新的元素，用来突出显示文本，标记我们想突出文本的关键词，默认的样式想黄色荧光笔划过一样，引起用户的注意。
u元素，HTML5重新定义了该元素，富裕新的语义，一块文字添加明显的非文本注解，就是标记专有名词或者拼写有误的词语，浏览器默认会把文本下添加下划线。
wbr元素，HTML5为br元素引入了一个相近的元素，代表一个可换行处，它同样是自闭的，使用的时候英文居多，如果浏览器显示文本到可换行的元素时，则换行。
meter元素表示分数的值或已知范围的结果，浏览器在显示meter时，显示一个表示测量值得颜色条。
progress元素表示某项任务的完成进度。根据不同的属性，使progress显示不同的进度条。
img元素在页面中插入图像，自闭的标记，<img src="http://www.mamicode.com/image.url" />其中引号中的是你需要的图片的位置。使用alt属性，为图像添加一段描述性的文本，如果让你的图像因为某些原因不能显示在页面上的时候，这段文本变回代替图像来呈现给用户。在img标签中，src 属性的后面，输入width=”x” height=”y”默认的单位是像素，x代表宽度，y代表高度，制定图像尺寸的属性是不改变原来图像，只改变的是图像展示在页面上的效果。
a元素用来创建链接，链接来把网页联系到一起，其实这也是当时互联网的想法。输入<a href=http://www.mamicode.com/”page.html”>，page.html 是目标网页的URL，点击就会转到另一个页面，停留在a标签上浏览器就会在左下角标出链接到的URL。a元素还可以应用块级链接，可以在a标签中嵌套其他大部分元素，让这些块级元素一同指向目标。a标记还有一个作用是——锚。顾名思义也能猜到它的用途，把与一对元素关联起来，a元素使用“#”加目标id的属性值，另一个标签为锚id赋一个有意义的名称。这样就能实现跳转。a元素可以创建指向其他类型的各种URL的链接，也可以是任何文件。
接触了这么多的标签，相信你已经对HTML5标记有了印象，个别标记虽然有些样式，那是古老的遗留问题，并不推荐这样。HTML5标记表示结构，想要不同的展示方式和布局，那就需要CSS（层叠样式表）。CSS3是目前最新的版本，虽然没有成为规范，但是它的很多特性还是可以满足我们的需要的。
CSS有三种方式添加的到HTML5的页面中，第一种是做一个外部的CSS文件，然后链接到HTML5页面，第二种是在页面头部（head标记中）加入一对style标记，定义一系列CSS规则，第三种是在单个标记中加入style属性，加入CSS样式来规定显示样式。
HTML5定稿一周年，谈谈我与HTML5