本文概述
无论使用哪种语言, 在交流过程中理解单词的含义都是至关重要的。如果这是计算机通信, 那么它将变得更加重要。因此, HTML5提供了更多的语义元素, 可轻松理解代码。
因此, 语义学定义了单词和短语的含义, 即
语义元素=具有含义的元素。语义元素对浏览器和开发人员都具有简单明了的含义。
例如：
在HTML4中, 我们已经看到<div>, <span>等是非语义元素。他们没有透露任何内容。
另一方面, <form>, <table>和<article>等是语义元素, 因为它们清楚地定义了它们的内容。
所有主要浏览器均支持HTML5语义元素。
为什么要使用语义元素？
在HTML4中, 开发人员必须使用自己的ID /类名称来设置元素的样式：页眉, 顶部, 底部, 页脚, 菜单, 导航, 主菜单, 容器, 内容, 文章, 边栏, topnav等。
搜索引擎很难识别正确的网页内容。现在在HTML5元素（<header> <footer> <nav> <section> <article>）中, 这将变得更加容易。现在, 它允许在应用程序, 企业和社区之间共享和重用数据。”
语义元素可以增加网站的可访问性, 还有助于创建更好的网站结构。
HTML5中的语义元素
| 指数 | 语义标签 | 描述 |
|---|---|---|
| 1. | <article> | 定义文章 |
| 2. | <aside> | 定义页面内容以外的内容 |
| 3. | <details> | 定义用户可以查看或隐藏的其他详细信息 |
| 4. | <figcaption> | 为<figure>元素定义标题 |
| 5. | <figure> | 指定独立的内容, 例如插图, 图表, 照片, 代码清单等。 |
| 6. | <footer> | 为文档或节定义页脚 |
| 7. | <header> | 指定文档或节的标题 |
| 8. | <main> | 指定文档的主要内容 |
| 9. | <mark> | 定义标记/突出显示的文本 |
| 10. | <nav> | 定义导航链接 |
| 11. | <section> | 在文档中定义一个部分 |
| 12. | <summary> | 为<details>元素定义可见的标题 |
| 13. | <time> | 定义日期/时间 |
HTML5中的一些重要语义元素
HTML5 <article>元素
HTML <article>元素定义文档, 页面, 应用程序或网站中的文章内容。它可以用来表示论坛帖子, 杂志, 报纸文章或大故事。
例：
<article>
<h2>Today's highlights</h2>
<p>First story</p>
<p>Second story</p>
<p>Third story</p>
</article>立即测试
HTML5 <aside>元素
<aside>元素表示间接向页面主要内容提供信息的内容。它经常表示为侧边栏。
例：
<body>
<h2>My last year memories</h2>
<p>I have visited Paris with my friends last month. This was the memorable journey and i wish to go there again.</p>
<aside>
<h4>Paris</h4>
<p>Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture</p>
</aside>
</body>立即测试
HTML5 <section>元素
<section>元素用于表示HTML文档中的独立部分。一个页面可以包含多个部分, 每个部分可以包含任何内容, 但是每个部分的标题不是必需的。
例：
<h2>Web designing Tutorial</h2>
<section>
<h3>HTML</h3>
<p>HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications.</p>
</section>
<section>
<h3>CSS</h3>
<p>CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML.</p>
</section>立即测试
将<article>标签嵌套在<section>标签中还是反之？
我们知道<article>元素指定了独立的独立内容, 而<section>元素定义了文档中的section。
在HTML中, 我们可以在<article>元素内使用<section>元素, 在<section>元素内使用<article>元素。
我们还可以在<section>元素内使用<section>元素, 并在<article>元素内使用<article>元素。
例如：
在报纸中, “体育”部分中的“体育<文章>”可能在每个“ <文章>”中都有一个技术部分。
HTML5 <nav>元素
HTML <nav>元素用于定义一组导航链接。
例：
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="https://www.srcmini02.com/html-tutorial">HTML</a> |
<a href="https://www.srcmini02.com/java-tutorial">Java</a> |
<a href="https://www.srcmini02.com/php-tutorial">PHP</a> |
<a href="https://www.srcmini02.com/css-tutorial">CSS</a>
</nav>
</body>
</html>立即测试
HTML5 <header>元素
<header>元素代表文档的标题, 其中可以包含介绍性内容或导航链接。
例：
<header>
<h1>Welcome to Web123.com</h1>
<nav>
<ul>
<li>Home |</li>
<li>About us |</li>
<li>Contact us</li>
</ul>
</nav>
</header>立即测试
HTML5 <footer>元素
<footer>标记定义HTML文档或页面的页脚。
例：
<footer>
<p>© Copyright 2019. All rights reserved. </p>
</footer>立即测试
