Web前端基础（20）HTML5基本结构

2018-10-17 · 大约 600 个字 · 预计 3 分钟读完

基本HTML结构

每个HTML文档都应该包含一下几个组成部分：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html> 是声明页面为HTML5文档，在HTML4和XHTML1.0时代，有好几种DOCTYPE，每一种都会指明HTML的版本，以及使用的是过度型还是严格型模式，太难记了，所以每次都需要复制黏贴进来，现在所有浏览器都理解这种简单的HTML5的DOCTYPE,所以可以忘记过去复杂繁琐的DOCTYPE了。

<html lang=“en”> 是声明了页面默认语言。

分级标题

HTML提供了六级标题用于创建页面信息的层级关系，使用h1,h2,h3,h4,h5或h6元素对各级标题进行标记。

1
2
3
4
<body>
    <h1>大标题</h1>
    <h2>子标题</h2>
</body>

对任何页面来说，分级标题都是重要的HTML元素，由于标题传达的是页面的主题，所以，搜索引擎对标题赋予很高的权重，但这样并不是说标题越多越好。

页面构成

按照从页面顶端向下的顺序，页面通过header,nav,main,article,section,aside,footer来定义页面的结构，用通用容器div来添加额外元素，除了div这些元素都是HTML5中退出的标签。

页眉

一个页眉可以有任意数量的header元素，它们的含义可以根据上下文而有所不同。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <header role="banner">
        /*网站标识、导航等*/
    </header>
    <main role="main">
        <article>
            <header>
                <h1>第二个header</h1>
                <nav role="navigation">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </nav>
            </header>

            <article>
                <h2>第二个header对应的内容标题</h2>
                <p></p>
                <p></p>
                <p></p>
            </article>
        </article>
</body>

</html>

role=“banner"可选，显式的指明了该页眉为整个页面的页眉。

标记导航

在HTML5中使用nav来代表页面中的导航区域，nav和header一样自身并没有样式，只是一种文档元素含义的标记。

标记页面主要区域

大多数网页的页面上都有不同的区块，不过，一个页面只有一个部分代表主要内容。可以将这样的内容包在main中，该元素在页面只使用一次。

创建文章

article元素表示文档、页面、应用或者网站中一个独立的容器，我们可以将article嵌套在另一个article中，一个article可以包含一个或多个section元素。

定义区块

section元素代表文档或者应用的一个一般区块，通常包含一个主题。和div不同的是section的语义标记的是页面中特定的区域，而div不传达任何语义。section是定义具有相似主题的一组内容的，section和article的区别在于，section在本质上组织性和结构性更强，而article代表的是自包含的容器。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body>
<main role="main">
	<h1>Latest World News</h1>

	<section>
		<h2>Breaking News</h2>
		<ul>
			<li><a href="#">Headline 1</a></li>
			<li><a href="#">Headline 2</a></li>
			<li><a href="#">Headline 3</a></li>
		</ul>
	</section>

	<section>
		<h2>Business</h2>
		<ul>
			<li><a href="#">Headline 1</a></li>
			<li><a href="#">Headline 2</a></li>
			<li><a href="#">Headline 3</a></li>
		</ul>
	</section>

	<section>
		<h2>Arts</h2>
		<ul>
			<li><a href="#">Headline 1</a></li>
			<li><a href="#">Headline 2</a></li>
			<li><a href="#">Headline 3</a></li>
		</ul>
	</section>
</main>
</body>

指定附注栏

有时候页面有一部分内容与主体内容相关性没那么强，但可以独立存在，可以使用aside元素。比如侧栏、引述、相关文章、广告、友链等等。

在HTML中应该将aside放在main的内容之后，出于SE0和可访问性的目的，最好将重要的内容放在前面。

创建页脚

footer和header类似，不仅仅可以用在页面的底部，还可以用在其他地方。整个页面的页脚一般放在body内。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>

<main role="main">
	<article>
		<h1>The Diversity of Papua New Guinea</h1>

		<p>Papua New Guinea is home to more than 800 tribes and languages ...</p>

		<p>... [rest of story content] ...</p>

		<!-- the article's footer, not the page's -->
		<footer>
			<p>Leandra Allen is a freelance journalist who earned her degree in anthropology from the University of Copenhagen.</p>

			<address>
			You may reach her at <a href="mailto:leandra@therunningwriter.com">leandra@therunningwriter.com</a>.
			</address>
		</footer>
		<!-- end article footer -->
	</article>
</main>

<!-- the page footer -->
<footer role="contentinfo">
	<p>... [copyright and so on] ...</p>
</footer>
</body> 

创建通用容器

有时候需要在一段内容外围包一个容器，从而可以为其应用css样式或JavaScript效果。div并不是唯一没有语义的元素，span是与div对应的一个元素，div是块级内容的无语义容器，而span则是短语内容的无语义容器。

在上面的标签元素中，div是除了h1~h6以外唯一早于HTML5出现的元素，在HTML5之前，div是包围大块内容（如页眉、页脚、主要内容、插图等），从而可以为之添加css样式，之前div没有任何语义，现在也一样。

使用ARIA改善可访问性

WAI-ARIA(Web Accessibility Initiative’s Accessible Rich Internet Applicaitions) 无障碍网页倡议-无障碍的富互联网应用，简称ARIA.它是一种规范，使用属性来填补一些语义上的空白。

地标角色

地标角色来帮助识别页面的区域，这些区域用role属性来标记。

地标角色	解释	如何使用及何时使用
role=“banner”(横幅)	面向全站的内容，通常包含网站标志，网站赞助者标志，全站搜索工具等。横幅通常显示在页面顶端，而且通常横跨整个页面的宽度。	将其添加到页面级的header元素，每个页面只用一次
role=“navigation”(导航)	文档内不同部分或相关文档的导航性元素（通常为链接）的集合。	与nav元素是对应的，应将其添加到每个nav元素，或其他包含导航性链接的容器。每个页面可以使用多次。
role=“main”(主题)	文档的主要内容。	与main元素是对应关系。也可以添加到div，每个页面仅用一次。
role=“complementary”(补充性内容)	文档中作为主体内容补充的支撑部分。它对主体内容是有意义的。	与aside元素是对应关系。应将其添加到aside或div元素，一个页面可以包含多个。
role=“contentinfo”(内容信息)	包含关于文档的信息的大块可感知区域这类信息的例子包括版权声明和指向隐私权声明的链接等。	将其添加至整个页面的页脚（通常为footer元素）。每个页面仅使用一次。

文本标记

p是最常用的文本标记之一，要在网页中表示段落就需要用p标签。

small和strong

small表示细则一类旁注，通常包括免责声明、注意事项、法律版本、版权信息等。small通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本。

1
2
3
4
5
6
7
<p>Order now to receive free shipping. <small>(Some restrictions may apply.)</small></p>

<p>...</p>

<footer>
	<p><small>&copy; 2013 The Super Store. All Rights Reserved.</small></p>
</footer>

strong表示内容的重要性，而em表示内容的着重点。根据内容需要，这两个元素可以单独使用，也可以一起使用。

1
2
    <p><strong>Warning: Do not approach the zombies <em>under any circumstances</em></strong>. They may <em>look</em>
        friendly, but that's just because they want to eat your arm.</p>

浏览器通常将strong文本以粗体显示，而将em文本以斜体显示，如果em是strong的子元素，将同时显示粗体和斜体。

注意：不用使用b元素代替strong，也不要使用i元素代替em。尽管他们在浏览器中显示的样式是一样的，但是含义却不一样。可以在strong中嵌套strong,em中嵌套em,来说明更加重要。

创建图

HTML5中引入了figure和figcaption来表示页面上的图。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<article>
	<h1>2013 Revenue by Industry</h1>

	<p>. . . [report content] . . .</p>

	<figure>
		<figcaption><b>Figure 3:</b> Breakdown of Revenue by Industry</figcaption>
		
		<img src="/post/img/chart-revenue.png" width="180" height="143" alt="Revenue chart: Clothing 42%, Toys 36%, Food 22%" />
	</figure>

	<p>As Figure 3 illustrates, . . . </p>

	<p>. . . [more report content] . . .</p>
</article>

这个figure只有一个图表，不过放置多个图像或其他类型的内容（如数据表格，视频等）也是允许的。figcaption元素并不是必须的，但如果包含他就必须是figure的第一个元素或者最后一个元素。

指明引用或参考

使用cite元素可以对内容的引用或参考进行指明，例如、戏剧、脚本或图书的标题，歌曲、电影、照片或雕塑的名称，演唱会、音乐会，报纸、法律文件等。

引述文本

blockqute元素表示单独存在的引述。

指定时间

我们可以使用time元素标记时间、日期或时间段。

1
<time>2018-10-21</time>

图像

在img标签内，在src属性和值的后面添加alt=““来为图像添加描述文本，当图片显示失败的时候就会显示这段文本。

可以使用width=“x” 和height=“y"来设置图片显的宽高。

关于文本标签还有很多，可以参考w3c school的详细解释。更多HTML5和CSS3知识请参考《HTML5与CSS3基础教程》和《CSS3速查手册》点击下载