什么是语义元素
-
语义元素清楚地向浏览器和开发者描述其意义
举例:
非语义元素:<div>
,<span>
---> 特点:无法提供关于其内容的信息。
语义元素:<form>
,<table>
,<img>
--->特点:清晰地定义其内容
Html5中新的语义元素
许多网站包含了指示导航、页眉以及页脚的 HTML 代码,例如这些:<div id="nav"> <div class="header"> <div id="footer">
标签 | 描述 |
---|---|
<article> |
定义文章。规定独立的自包含内容。文档有其自身的意义,并且可以独立于网站其他内容进行阅读。 |
<aside> |
定义页面内容以外的内容。比如侧栏。aside 内容应该与周围内容相关。 |
<details> |
定义用户能够查看或隐藏的额外细节。 |
<figcaption> |
定义 <figure> 元素的标题。 |
<figure> |
规定自包含内容,比如图示、图表、照片、代码清单等。图片和标题能够被组合在 <figure> 元素中 |
<footer> |
定义文档或节的页脚。提供有关其包含元素的信息。包含文档的作者、版权信息、使用条款链接、联系信息等等。 |
<header> |
规定文档或节的页眉。被用作介绍性内容的容器。一个文档中可以有多个 <header> 元素。 |
<main> |
规定文档的主内容。 |
<mark> |
定义重要的或强调的文本。 |
<nav> |
定义导航链接。是一个集合。旨在定义大型的导航链接块,并非文档中所有链接都应该位于<nav> 元素中! |
<section> |
定义文档中的节。“节(section)是有主题的内容组,通常具有标题。可以将网站首页划分为简介、内容、联系信息等节 |
<summary> |
定义<details> 元素的可见标题。 |
<time> |
定义日期/时间。 |
可以简单的理解为:每个语义元素下必须接内容。
<section>
<section contenteditable="false">
<h1>Semantic Elements</h1>
<p contenteditable="true" style="font-family: '微软雅黑'; color: saddlebrown; font-size: medium;">This is a content about Semantic Elements</p>
</section>
<section contenteditable="false">
<h1>Content</h1>
<p contenteditable="true" style="font-family: '微软雅黑'; color: darkmagenta; font-size: large;">Input Something</p>
</section>
<article>
<article contenteditable="false" style="font-family: '微软雅黑'; color: black; font-size: large;">
<h1>What can you do</h1>
<p contenteditable="false" style="font-family: '微软雅黑'; color: royalblue; font-size: medium;">It is a content</p>
</article>
<section>
元素和<article>
元素的区别
-
<article>
元素定义完整的相关元素自包含块。<section>
元素被定义为相关元素块。 -
不能够使用该定义来决定如何嵌套元素
-
<section>
可包含<article>
也可包含<section>
-
<article>
可包含<article>
也可包含<sections>
<header>
和<table>
标签的<thead>
标签类型,定义页眉
<article contenteditable="false" style="font-family: '微软雅黑'; color: blanchedalmond;">
<header contenteditable="false" style="font-family: '微软雅黑'; color: darkblue; font-size: larger;">
<h1>Title of the article</h1>
<p contenteditable="false" style="font-family: '微软雅黑'; color: black; font-size: medium;">What is the title of the article</p>
</header>
<p contenteditable="true" style="font-family: '微软雅黑'; color: black; font-size: initial;">Input your answer</p>
</article>
<footer>
<footer contenteditable="false" style="font-family: '微软雅黑'; color: darkcyan; font-size: inherit;">
<p contenteditable="false">Information from:<a href="PracticeList.html">Lucifer@163.com</a>.</p>
</footer>
<aside>
<p contenteditable="false" style="font-family: '微软雅黑';">This is a content</p>
<aside contenteditable="false" style="font-family: '微软雅黑'; color: red; font-size: inherit;">
<ul contenteditable="false" style="font-family: '微软雅黑'; color: hotpink;">
<li>Html</li>
<li>Css</li>
<li>JavaScript</li>
</ul>
</aside>
<figure>
、<img>
、<figcaption>
-
<figure>
内放<img>
和<figcaption>
<p contenteditable="false">This is a content about picture</p>
<figure>
<figcaption contenteditable="false" style="font-family: '微软雅黑'; color: red; text-align: left;">皮卡丘,大大大</figcaption>
<img src="../Picture/Big.gif" alt="This is a Picture" width="304" height="228" />
</figure>