HTML5语义元素

最新推荐文章于 2021-05-30 18:50:01 发布

gloria_chenjing

最新推荐文章于 2021-05-30 18:50:01 发布

阅读量679

点赞数

分类专栏：前端HTML5 文章标签： web开发前端 html html5 浏览器

前端HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>	定义日期/时间。

gloria_chenjing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5语义元素

1、什么是语义元素？语义元素清楚的向浏览器和开发者描述其意义例如：非语义元素：2、HTML5提供新的语义元素（1）section元素定义文档中的节节：有主题的内容组通常具有标题将网站首页划分为简介内容联系信息（2）article 元素规定独自的包含内容文档有其自身的意义并且独立于其他内容进行阅读应用场景：论坛博客新闻在因特
复制链接

扫一扫