您的位置：首页 > Web前端 > HTML5

HTML5语义元素

2017-11-01 16:25 197 查看
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>
4000
|
</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>定义日期/时间。
HTML5
元素

HTML5
迁移


HTML
参考手册

HTML
实例

HTML
测验
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航