HTML5语义元素

1、什么是语义元素?

语义元素清楚的向浏览器和开发者描述其意义

例如:<form><table><img>

非语义元素:<div><span>

2、HTML5提供新的语义元素

(1)section元素

定义文档中的节 节:有主题的内容组 通常具有标题 将网站首页划分为 简介 内容 联系信息

(2)article 元素

规定独自的包含内容 文档有其自身的意义 并且独立于其他内容进行阅读

应用场景:

论坛

博客

新闻

 

在因特网上,您会发现 <section> 元素包含 <article> 元素的 HTML 页面,还有 <article> 元素包含 <sections> 元素的页面。

您还会发现 <section> 元素包含 <section> 元素,同时 <article> 元素包含 <article> 元素。

 

(3)header  文档或者节规定页眉  介绍性内容

footer  文档或者节规定页脚

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等

可以包含多个页眉和页脚

 

(4)<nav>定义大型导航链接块

(5)<aside>页面内容之外的内容(侧栏)

 

(6)figure和figcaption

figcation 为图片添加标题

可以将图片和标题组合显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<nav>
<a href="../form/radio.html">radio</a>|
<a href="../form/section.html">section</a>|
<a href="../form/submit.html">submit</a>|
<a href="../form/text.html">text</a>|
</nav>
<section>

<h1>chenjing</h1>
<p>如果需要学习一个网站的内容 你需要先打开这个网页</p>
</section>
<article>
<h1>price</h1>
<p>有些网页需要钱有些不需要</p>
</article>
<figure>
<img src="../taylor.jpg" alt="taylor" width="300" height="300">
<figcaption>fig-1.this is a beautiful girl</figcaption>
</figure>
</body>
</html>

3、HTML5语义元素

 

标签 描述
<article> 定义文章。
<aside> 定义页面内容以外的内容。
<details> 定义用户能够查看或隐藏的额外细节。
<figcaption> 定义 <figure> 元素的标题。
<figure> 规定自包含内容,比如图示、图表、照片、代码清单等。
<footer> 定义文档或节的页脚。
<header> 规定文档或节的页眉。
<main> 规定文档的主内容。
<mark> 定义重要的或强调的文本。
<nav> 定义导航链接。
<section> 定义文档中的节。
<summary> 定义 <details> 元素的可见标题。
<time> 定义日期/时间。