Sharing several page examples of HTML5 design and modification_html5 tutorial skills

To understand and become familiar with the new semantic elements in HTML5, the best way is to take a classic HTML document as an example, and then enrich it with some fresh nutrients of HTML5. The following is the page we want to transform. The page is very simple and contains only one article.

ApocalypsePage_Original.html, this is a page with a very standardized format, and all styles come from external style sheets.

XML/HTML CodeCopy content to clipboard

1. html>  
2. html lang="zh-CN">  
3. head>  
4.   meta charset="utf-8">  
5.   title>Apocalypse Nowtitle>  
6.   link rel="stylesheet" href="ApocalypsePage_Original.css">  
7. head>  
8.   
9. body>  
10. div class="Header">  
11.   h1>How the World Could Endh1>  
12.   p class="Teaser">Scenarios that spell the end of life as we knowp>  
13.   p class="Byline">by Ray N. Carnationp>  
14. div>  
15.   
16. div class="Content">  
17.   p>span class="LeadIn">Right nowspan>, you're probably feeling pretty good. After all, life in the developed world is comfortablespan class="style1">—span>probably more comfortable than it's been for the average human being throughout all of recorded history.p>  
18.   p>But don't get too smug. There's still plenty of horrific ways it could all fall apart. In this article, you'll learn about a few of our favorites.p>  
19.      
20.   h2>Mayan Doomsdayh2>  
21.   p>Skeptics suggest that the Mayan calendar simply rolls to a new 5,126-year era after 2012, and doesn't actually predict a life-ending apocalypse. But given that the long-dead Mayans were wrong about virtually everything else, why should we trust them on this?p>  
22.      
23.   h2>Robot Takeoverh2>  
24.   p>Not quite as frightening as a Vampire Takeover or Living-Dead Takeover, a robot rebellion is still a disquieting thought. We are already outnumbered by our technological gadgets, and even Bill Gates fears the day his Japanese robot slave turns him over by the ankles and asks (in a suitably robotic voice) "Who's your daddy now?"p>  
25.      
26.   h2>Unexplained Singularityh2>  
27.   p>We don't know how the universe started, so we can't be sure it won't just end, maybe today, and maybe with nothing more exciting than a puff of anti-matter and a slight fizzing noise.p>  
28.      
29.   h2>Runaway Climate Changeh2>  
30.   p>Dismissed by some, Al Gore's prophecy of doom may still come true. If it does, we may have to contend with vicious storms, widespread food shortages, and surly air conditioning repairmen.p>  
31.      
32.   h2>Global Epidemich2>  
33.   p>Some time in the future, a lethal virus could strike. Predictions differ about the source of the disease, but candidates include monkeys in the African jungle, bioterrorists, birds and pigs with the flu, warriors from the future, an alien race, hospitals that use too many antibiotics, vampires, the CIA, and unwashed brussel sprouts. Whatever the source, it's clearly bad news.p>  
34.   
35. div>  
36.   
37. div class="Footer">  
38.   p class="Disclaimer">These apocalyptic predictions do not reflect the views of the author.p>  
39.   p>  
40.     a href="AboutUs.html">About Usa>  
41.     a href="Disclaimer.html">Disclaimera>  
42.     a href="ContactUs.html">Contact Usa>  
43.   p>  
44.   p>Copyright © 2014p>  
45. div>  
46. body>  
47. html>  

在不增加任何 CSS 样式表之前，效果如下：

上面通过三个

将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚。

这个例子中的样式表很简单，整个页面最大宽度设置为 800 像素，避免文本在宽屏显示器上显示过长。页眉位于一个带有蓝色边框的盒子中，内容区的两侧都增加了内边距，而页脚在整个页面的底部居中。

ApocalypsePage_Original.css样式文件内容如下：

XML/HTML Code复制内容到剪贴板

1. @charset "utf-8";
2. /* CSS Document */
3. body{
4. /*font-family To use safe fonts, follow the principle of special first and then general,
5. First give the font you want, then a safer font,
6. Finally ends with sans-serif font*/
7. font-family: "Lucida sans Unicode", "Lucida Grande", Geneva, sans-serif;
8. max-width: 800px; /*The maximum width does not exceed 800 pixels*/
9. }
10. /*Title area style at the top of the page*/
11. .Header {
12. background-color: #7695FE; /*Any color value is acceptable*/
13. border: thin #336699 solid; /*all-in-one border attribute*/
14. padding: 10px; /* 10 pixel padding, the distance between the border and the content*/
15. margin: 10px; /* 10 pixel margin, the distance between the border and surrounding elements*/
16. text-align: center; /*Header text is centered*/
17. }
18. /*Title in headerh1>Style*/
19. .Header h1{
20. margin: 0px;
21. color: white;
22. font-size: xx-large; /*Precise control can be done in pixels or em units*/
23. }
24. /*Header subtitle style*/
25. .Header .Teaser{
26. margin: 0px;
27. font-weight: bold;
28. }
29. /*Signature line style in header*/
30. .Header .Byline{
31. font-style: italic;
32. font-size: small;
33. margin: 0px;
34. }
35. .Content{
36. font-size: medium;
37. font-family: Cambria, Cochin, Georgia, "Times New Roman", Times, serif;
38. /*Maximum left and right padding*/
39. padding-top: 20px;
40. padding-right: 50px;
41. padding-bottom: 5px;
42. padding-left: 50px;
43. line-height: 120%; /*The distance between two adjacent text lines*/
44. }
45. .Content .LeadIn{
46. font-weight: bold;
47. font-size: large;
48. font-variant: small-caps;
49. }
50. .Content .h2{
51. color: #24486C;
52. margin-bottom: 2px;
53. font-size: medium;
54. }
55. .Content p{
56. margin-top: 0px;
57. }
58. .Footer{
59. text-align: center;
60. font-size: x-small;
61. }
62. .Footer .Disclaimer{
63. font-style: italic;
64. }
65. .Footer p{
66. margin: 3px;
67. }

In this way, our style sheet has been bent. Now let’s see what the result will be? As shown below:

Use HTML5 to construct the page

Still a must-have element in web design, it is an intuitive, versatile container that allows you to apply styles to any block on the page. But the problem with

is that it itself doesn't reflect any information about the page.

To improve this situation with HTML5, replace

with an element with more descriptive semantics.

In ApocalypsePage_Revised.html, the class attributes of Header and Footer and

have been replaced by

and

. Part of the code is as follows:

XML/HTML CodeCopy content to clipboard

1. header>  
2.   h1>How the World Could Endh1>  
3.   p class="Teaser">Scenarios that spell the end of life as we knowp>  
4.   p class="Byline">by Ray N. Carnationp>  
5. header>  
6. ...   
7. footer>  
8.   p class="Disclaimer">These apocalyptic predictions do not reflect the views of the author.p>  
9.   p>  
10.     a href="AboutUs.html">About Usa>  
11. ...   
12.   p>  
13.   p>Copyright © 2014p>  
14. footer>  

当然，对应的 ApocalypsePage_Revised.css 文件也需要进行修改，将其中的 .Header 和 .Footer 替换为 header 和 footer 。部分代码如下：

XML/HTML Code复制内容到剪贴板

1. /*Title area style at the top of the page*/
2. header {
3. background-color: #7695FE; /*Any color value is acceptable*/
4. border: thin #336699 solid; /*all-in-one border attribute*/
5. padding: 10px; /* 10 pixel padding, the distance between the border and the content*/
6. margin: 10px; /* 10 pixel margin, the distance between the border and surrounding elements*/
7. text-align: center; /*Header text is centered*/
8. }
9. /*Title in headerh1>Style*/
10. header h1{
11. margin: 0px;
12. color: white;
13. font-size: xx-large; /*Precise control can be done in pixels or em units*/
14. }

Finally, there is one element that needs to be used in the sample file, which is the

element, which represents a complete, self-contained content.

The

element should contain the content of a news report or article, including the title, byline, and body text. So the structure after adding the

element is as follows:

XML/HTML CodeCopy content to clipboard

1. article>  
2.   header>  
3.   h1>How the World Could Endh1>  
4.   p class="Teaser">Scenarios that spell the end of life as we knowp>  
5.   p class="Byline">by Ray N. Carnationp>  
6.   header>  
7.   div class="Content">  
8.   p>span class="LeadIn">Right nowspan>, you're probably feeling pretty good. After all, life in the developed world is comfortablespan class="style1">—span>probably more comfortable than it's been for the average human being throughout all of recorded history.p>  
9. ...   
10.   div>  
11. article>  

重新设计后，页面结构如下：

用

添加插图

很多页面都是包含图片的。但是，插图 (figure) 与图片的概念还不完全一样。插图虽然独立于文本，但是文本中会提到它。

一般来说插图应该是浮动的，还会有浮动图题。下面是在文章中添加插图的 HTML 标记，在正文的第一段和第二段之间的位置，部分代码如下：

XML/HTML Code复制内容到剪贴板

1. ...   
2. div class="Content">  
3. p>span class="LeadIn">Right nowspan>, you're ...p>  
4. div class="FloatFigure">  
5. img src="human_skull.jpg" alt="Human skull">  
6. p>Will you be the last person standing if one of these apocalyptic   
7. scenarios plays out?p>  
8. div>  
9. p>But don't get too smug. There's...p>  
10. ...  

相应的 样式表规则如下：

XML/HTML Code复制内容到剪贴板

1. .FloatFigure{   
2.   float: left;   
3.   margin: 0px 20px 0px 0px;   
4. }   
5. .FloatFigure p{   
6.   max-width: 300px;   
7.   font-size: small;   
8.   font-style: italic;   
9.   margin-bottom: 5px;   
10. }  

下图展示了这个示例的外观，插图恰好在第一段文本之后，浮动在后面文本的左侧，图题的文本的宽度我们限制住了，让图题显示很充实、很优雅。

HTML5 中提供了一个

元素，图题可以放在

中的

元素里，经过改造，代码如下：

XML/HTML Code复制内容到剪贴板

1. figure class="FloatFigure" >
2. img src="human_skull. jpg" alt="Human skull">
3. figcaption>Will you be the last person standing if one of these apocalyptic
4. scenarios plays out?figcaption>
5. figure>

Of course, the selector in the style sheet can be modified accordingly.

XML/HTML CodeCopy content to clipboard

1. .FloatFigure{
2. float: left;
3. margin: 0px 20px 0px 0px;
4. }
5. .FloatFigure figcaption{
6. max-width: 300px;
7. font-size: small;
8. font-style: italic;
9. margin-bottom: 5px;
10. }

Finally, the alt attribute in the element can be deleted, because the title contains a complete description of the image.

Add a note using

The new

element represents content that is not closely related to the text around it. It can introduce another related topic or explain a point made in the main document. It can also be used to place advertisements and related content links.

The following example will be used as a pull quote. Use the

element to create this effect, but use the

element to make the markup more meaningful:

Part of the code is as follows:

XML/HTML CodeCopy content to clipboard

1.   p>... (in a suitably robotic voice) "Who's your daddy now?"p>  
2.   
3. aside class="PullQuote">  
4.   img src="quotes_start.png" alt="Quote">  
5.   We don't know how the universe started, so we can't be sure it won't just end, maybe today.   
6.   img src="quotes_end.png" alt="End quote">  
7. aside>  
8.   
9. h2>Unexplained Singularityh2>  

对应的样式表内容如下：

XML/HTML Code复制内容到剪贴板

1. .PullQuote{   
2.   float: right;   
3.   max-width: 300px;   
4.   border-top: thin black solid;   
5.   border-bottom: thick black solid;   
6.   font-size: 30px;   
7.   line-height: 130%;   
8.   font-style: italic;   
9.   padding-top: 5px;   
10.   padding-bottom: 5px;   
11.   margin-left: 15px;   
12.   margin-bottom: 10px;   
13. }   
14. .PullQuote img{   
15.   vertical-align: bottom;   
16. }