HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML5 语义

在任何语言中，在交流过程中理解单词的含义是必不可少的。如果这是计算机通信，则它变得更加重要。所以 HTML5 提供了更多的语义元素，使代码更容易理解。

因此语义学定义了单词和短语的含义，即

语义元素=具有意义的元素。语义元素对浏览器和开发人员都具有简单明了的意义。

例如：

在 HTML4 中，我们已经看到 <div>、<span> 等是非语义元素。他们没有透露任何有关其内容的信息。

另一方面，<form>、<table> 和<article> 等是语义元素，因为它们清楚地定义了它们的内容。

所有主流浏览器都支持 HTML5 语义元素。

为什么要使用语义元素？

在 HTML4 中，开发人员必须使用自己的 id/class 名称来设置元素的样式：页眉、顶部、底部、页脚、菜单、导航、主、容器、内容、文章、侧边栏、顶部导航等。

这对于搜索引擎来说很难识别正确的网页内容。现在在 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> 元素定义文档、页面、应用程序或网站中的文章内容。它可用于表示论坛帖子、杂志、报纸文章或大故事。

例子：

<!DOCTYPE html>
<html>
<body>
<article>  
    <h2>Today's highlights</h2>  
    <p>First story</p>  
    <p>Second story</p>  
    <p>Third story</p>  
 </article>
</body>
</html>

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>

在 <section> 标签中嵌套 <article> 标签还是反之亦然？

我们知道 <article> 元素指定独立的、自包含的内容，而 <section> 元素定义文档中的部分。

在 HTML 中，我们可以在 <article> 元素中使用 <section> 元素，在 <section> 元素中使用 <article> 元素。

我们还可以在 <section> 元素中使用 <section> 元素，在 <article> 元素中使用 <article> 元素。

例如：

在报纸中，体育版块中的体育<文章> 可能在每个<文章> 中都有一个技术版块。

HTML5 <nav> 元素

HTML <nav> 元素用于定义一组导航链接。

例子：

<!DOCTYPE html>    
<html>    
<body>    
<nav>    
  <a href="https://www.rocschool.com/tutorial/html-tutorial";>HTML</a> |    
  <a href="https://www.rocschool.com/tutorial/java-tutorial";>Java</a> |    
  <a href="https://www.rocschool.com/tutorial/php-tutorial";>PHP</a> |    
  <a href="https://www.rocschool.com/tutorial/css-tutorial";>CSS</a>    
</nav>    
</body>    
</html>

HTML5 <header> 元素

<header> 元素表示文档的标题，其中可以包含介绍性内容或导航链接。

例子：

<header>  
    <h1>Welcome to rocschool.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>


上一主题 HTML5 新元素 下一主题 HTML5 迁移
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具