引言

随着客户端技术的出现和浏览器功能的改进，现代 Web 应用程序构建了一个新的范例。任何跨平台、多设备支持的新 Web 应用程序的基础都是 HTML5。HTML5 定义了 UI 元素和页面的结构，而 CSS3 使其成为丰富的 UI。

这将是 HTML5 学习指南中的第二篇文章，介绍

• 语义化元素
• 注释
• 文本强调标签
• 列表和表格
• 图像
• 超链接
• 其他一些新标签
• 浏览器支持

结构化元素

结构化元素定义页面的布局，消除了页面不同部分之间的歧义。这些元素提高了代码质量并降低了代码维护的复杂性。此外，正确使用语义标签可以使页面对搜索引擎更友好。搜索引擎优化 (SEO) 利用页面的语义标签对不同的网页进行抓取，以便将其列为搜索结果的一部分。

新元素

• <header> ：此标签定义了页面的头部部分
• <hgroup> ：此标签用于在标题具有多个级别（如主标题、副标题或标语）时对多个标题元素进行分组
• <footer> : 此标签定义了页面的页脚
• <article> : 此标签定义了页面的主体内容
• <section> : 此标签定义了页面主体内部或 article 标签内部的不同部分
• <aside> ：此标签定义了与页面内容不直接相关的内容
• <nav> : 此标签定义了应用程序内的导航

注释

任何代码段的可读性取决于代码片段中放置的正确注释。正确的注释可以提高页面的可维护性。注释标签是

<!—This block defines the login form -->

HTML5 中介绍的基础元素

HTML5 中引入了许多基础标签。在这里，我们将介绍常用的新标签和属性。

输入元素
HTML5 增加了许多新的输入类型，这有助于开发人员相应地定义字段。大多数新输入标签都得到主流浏览器的支持，并显示支持的输入元素的新类型编辑器。此外，如果浏览器支持特定的输入类型，它将根据类型对用户数据进行验证。

新的输入类型是
Date/datetime/datetime-local：定义一个输入标签，可以接受日期值作为输入

Date <input type="date" /> <br />
Local date time <input type="datetime-local" />

Chrome 的结果

Time ：定义接受时间值的输入标签
Month：定义用于月份输入的标签
Week：定义用于周输入的标签

Month <input type="month" /> <br />
Week <input type="week" />

Chrome 的结果

第一屏
月份选择
周选择

Number：定义一个用于接受数字的输入标签。我们可以为该字段定义允许的最小值和最大值。

Number <input type="number" /> <br />
Number 2 <input type="number" min="10" max="20" value="15" />

Chrome 的结果

Range :定义一个值的范围，在支持的浏览器中将显示为滑块

Range <input type="range" min="10" max="100"/> <br />

Chrome 的结果

Color：定义颜色条目

 Color <input type="color" />

Chrome 的结果

除了上述列表中的输入元素外，HTML5 还引入了 search、email、Tel 和 url 输入元素，以支持各种用户输入要求。

表单元素
除了上述列表中的输入元素外，HTML5 还添加了各种表单元素。在本节中，我们将介绍几个新表单元素。

Data list
Datalist 为 <input> 元素指定一组预定义的选项，或者为输入元素指定自动完成功能。

Days: <input list="days" />
<datalist id="days">
<option value="Monday" />
<option value="Tuesday" />
<option value="Wednesday" />
<option value="Thursday" />
<option value="Friday" />
<option value="Saturday" />
<option value="Sunday" />
</datalist>

Chrome 的结果

Keygen
Keygen 是一种安全的身份验证用户的方式。它是一个密钥对生成器字段，用于生成私钥和公钥。私钥将本地存储，公钥共享给服务器

<form action=“test.aspx" method="get">
Name: <input type="text" name="username">
Encryption: <keygen name="security">
<input type="submit">
</form>

输出
Output 表单元素表示表达式的结果。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
Number One: <input type="range" id="a" value="50" /> <br />
Number Two: <input type="number" id="b" value="50" /><br />
Result: <output name="x" for="a b"></output>
</form>

Chrome 的结果

更改“Number One”或“Number Two”字段的值，并观察“Result”字段的变化。

进度
Progress 定义进度条。

<progress value="20" max="100" title="Progress" />

Chrome 的结果

文本强调元素

HTML5 中有各种文本强调元素。在本节中，我们将讨论最常用的文本强调元素。

<b> ：此元素用于将文本定义为粗体
<strong>：另一种定义文本为粗体的方法。此标签将使用粗体突出显示指定文本。
<mark> ：此元素用于突出显示文本
<blockquote>：这定义了文本为块引用
<small>：small 元素重新定义为小字打印。

<b>Bold</b> <br />
<blockquote>The six-week contest is made up of a series of weekly mini-contests where authors compete to produce the best article from a list of pre-defined topics. During the first couple weeks we'll cover the barebone basics of learning to code HTML and CSS and as the challenge progresses we'll move into some more advanced topics. The overall goal of the contest is to produce a 12-article series that constitutes CodeProject's Beginner's Guide to HTML5 and CSS3.</blockquote> <br />
<small>Small redefined</small> <br />
Heighlight the <strong>element</strong> using strong element <br />
Another way to <mark>heighlight</mark> is to use mark element <br />

Chrome 中的结果：
<i>：将文本标记为斜体
<u> ：为指定文本添加下划线
<strike>：将指定文本标记为删除线
<sub>：下标文本
<sup>：上标文本

This mark the <i>text </i>as italics <br />
This mark the <u>text </u> as underline <br />
This mark the <strike>text</strike> as strike through <br />
Superscript: 22<sup>nd</sup> August <br />
Subscript: H<sub>2</sub>O is water <br />

Chrome 中的结果：

<code>：此元素将包含的文本定义为代码片段
<cite>：引用信息将使用此元素进行正确标记

Normal text <br />
<code> Code Snippet will be enclosed here</code> <br />
<cite>Author information</cite>

Chrome 中的结果

图像

<img> 标签用于在 HTML5 中定义图像元素。我们可以将宽度、高度和替代文本作为 img 元素的一部分进行定义。

<img src="sampleimage.jpg" width="275" />

HTML5 不再支持 align、hspace 等属性。

在 HTML5 中，引入了 <figcaption> 元素以及 <figure> 元素，用于将标题与图像关联起来。

<figure>
<img src="sampleimage.jpg" alt="About image" width="300" />
<figcaption>
<p>Image of tulips. </p>
</figcaption>
</figure> 

Chrome 中的结果

有效使用 CSS3 滤镜和 img 标签可以提供同一图像的不同视图。稍后我们将进一步讨论 CSS3 滤镜。

不同类型的超链接

<a> 元素在 HTML5 中定义超链接。除了 HTML 前版本支持的属性外，HTML5 还为 <a> 元素添加了一些新属性，如 download、type 和 media。

Download 指定当用户单击链接时将下载目标的文件名。Type 定义 mime 类型，media 指定链接文档优化所用的设备/媒体。

<a href="TestPage.html">First link</a><br />
<a href="sampleimage.jpg" download="myimage.jpg">Second link</a>

Chrome 中的结果

两个链接看起来相同。当您单击第一个链接时，它会导航到 TestPage.html。但是，当您单击第二个链接时，它会以 myimage.jpg 的名称下载 sampleimage.jpg。

列表

HTML5 支持不同的列表，如使用 <ol> 的有序列表和使用 <ul> 的无序列表。有序列表支持新的 reversed 属性，该属性定义列表的降序。

Ordered List 1
<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ol>
<br />
Ordered List 2
<ol reversed>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ol>

Chrome 的结果

无序列表由 <ul> 元素支持。但是，HTML5 不支持无序列表的 type 和 compact 属性。

UnOrdered List
<ul>
<li>TV</li>
<li>Mobile</li>
<li>AC</li>
</ul> 

Chrome 的结果

表格

<table> 元素定义表。HTML5 不支持 HTML 前版本中定义的 table 元素属性，如 border、bgcolor、cellpadding 等。

<table>
<thead>
<tr>
<th>Roll No</th>
<th> Name</th>
<th>Mark</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>100</td> 
<td>Anu</td> 
<td>90</td>
</tr>
<tr>
<td>101</td>
<td>Binu</td>
<td>85</td>
</tr>
</tbody>
</table>

Chrome 的结果

浏览器支持

并非所有现代浏览器都支持 HTML5。大多数浏览器仅部分支持这些功能。了解浏览器兼容性是开发跨平台 Web 应用程序的关键。有许多在线工具可以提供 HTML5 和 CSS3 的浏览器支持信息。

• HTML5please 是一个在线工具，它提供有关 HTML5 和 CSS3 功能的更详细信息。此外，该网站还建议使用每项功能，例如您现在是否可以使用该功能，是否有备用选项，或者是否需要避免使用。

http://html5please.com/

• HTML5Test 是一个在线工具，用于针对浏览器评估 HTML5 功能。

http://html5test.com/

• CSS3Test 是一个在线工具，用于评估您浏览器的 CSS3 支持情况。

http://css3test.com/

HTML5 引入了视频、音频元素、地理定位功能、Web 存储、fieldset 等其他功能，这些将在后续文章中讨论。

结论

HTML5 引入了许多新元素和属性，使 Web 开发人员能够定义跨平台支持的丰富 UI。