“HTML语义化标签”的版本间差异
(创建页面,内容为“39 语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。 == 非语…”) |
|||
第60行: | 第60行: | ||
这就是一个语义化的页面,通过语义化标签我们不仅仅能快速了解内容,还能让搜索引擎等爬虫程序精准分析对内容进行提取。 | 这就是一个语义化的页面,通过语义化标签我们不仅仅能快速了解内容,还能让搜索引擎等爬虫程序精准分析对内容进行提取。 | ||
== 什么是语义元素? == | |||
语义元素清楚地向浏览器和开发人员描述了它的含义。 | |||
* <nowiki>非语义元素的例子:<div>和<span>- 没有说明它的内容。</nowiki> | |||
* <nowiki>语义元素示例: <form>、<table>和<article>- 明确定义其内容。</nowiki> | |||
=== <nowiki><section></nowiki> 元素 === | |||
<nowiki><section></nowiki>元素定义文档中的一个部分。 | |||
根据 W3C 的 HTML 文档:“部分是内容的主题分组,通常带有标题。” | |||
<nowiki><section></nowiki>可以使用场景: | |||
* 章节 | |||
* 介绍 | |||
* 新闻项目 | |||
* 联系信息 | |||
网页通常可以分为介绍、内容和联系信息的部分。 | |||
<sample title="" desc="" hererun="s1"> | |||
<section> | |||
<h2>非语义化</h2> | |||
<p>使用div</p> | |||
</section> | |||
<section> | |||
<h1>语义化</h1> | |||
<p>使用语义化标签</p> | |||
</section> | |||
</sample> | |||
=== <nowiki><article></nowiki> 元素 === | |||
<nowiki><article></nowiki>元素指定独立的、自包含的内容。一篇文章本身应该有意义,并且应该可以独立于网站的其余部分进行传播。 | |||
<nowiki><article></nowiki>可以使用场景: | |||
* 论坛帖子 | |||
* 博客文章 | |||
* 用户评论 | |||
* 产品卡片 | |||
* 报纸文章 | |||
<sample title="" desc="" hererun="s2"> | |||
<article> | |||
<h2>Google Chrome</h2> | |||
<p>Google Chrome是由Google开发的网络浏览器,于2008年发布。Chrome是当今世界上最受欢迎的网络浏览器!</p> | |||
</article> | |||
<article> | |||
<h2>Mozilla Firefox</h2> | |||
<p>Mozilla Firefox是Mozilla开发的开源网络浏览器。Firefox是自2018年1月以来第二受欢迎的网络浏览器.</p> | |||
</article> | |||
<article> | |||
<h2>Microsoft Edge</h2> | |||
<p>Microsoft Edge是由Microsoft开发的Web浏览器,于2015年发布。Microsoft Edge更换了Internet Explorer。</p> | |||
</article> | |||
</sample> | |||
=== <nowiki><header></nowiki> 元素 === | |||
<nowiki><header></nowiki>元素表示介绍性内容或一组导航链接的容器。 | |||
一个<nowiki><header></nowiki>元素通常包含: | |||
* 一个或多个标题元素 <nowiki>(<h1> - <h6>)</nowiki> | |||
* 标志或图标 | |||
* 作者信息 | |||
<blockquote> | |||
<nowiki>注意:您可以<header>在一个 HTML 文档中包含多个元素。但是不能<header>放置在<footer> <address>等 | |||
</nowiki> | |||
</blockquote> | |||
<sample title="" desc="" hererun="s3"> | |||
<article> | |||
<header> | |||
<h1>xiaobai.wang是干什么的</h1> | |||
<p>小白教程的愿景:</p> | |||
</header> | |||
<p>让知识获取更加简单快捷。</p> | |||
</article> | |||
</sample> | |||
=== <nowiki><footer></nowiki> 元素 === | |||
<nowiki><footer></nowiki>元素定义文档或部分的页脚。 | |||
一个<nowiki><footer></nowiki>元素通常包含: | |||
* 作者信息 | |||
* 版权信息 | |||
* 联系信息 | |||
* 网站地图 | |||
* 回到顶部链接 | |||
* 相关文件 | |||
您可以<footer>在一个文档中包含多个元素。 | |||
<sample title="" desc="" hererun="footer"> | |||
<footer> | |||
<p>作者:xiaobai.wang</p> | |||
<p>邮箱:<a href="mailto:[email protected]">[email protected]</a></p> | |||
</footer> | |||
</sample> | |||
=== <nowiki><nav></nowiki> 元素 === | |||
<nowiki><nav></nowiki>元素定义了一组导航链接。 | |||
<blockquote> | |||
<nowiki>请注意,并非文档的所有链接都应该在<nav>元素内。该 <nav>元素仅用于主要的导航链接块。 | |||
</nowiki></blockquote> | |||
<sample title="" desc="" hererun="nav"> | |||
<nav> | |||
<a href="/html/">HTML教程</a> | | |||
<a href="/css/">CSS教程</a> | | |||
<a href="/js/">JavaScript教程</a> | | |||
<a href="/jquery/">jQuery教程</a> | |||
</nav> | |||
</sample> | |||
=== <nowiki><aside></nowiki> 元素 === | |||
<nowiki><aside></nowiki>除了放置它的内容(如侧边栏)之外,该元素还定义了一些内容。 | |||
<nowiki><aside></nowiki>内容应该与周围的内容间接相关。 | |||
<sample title="" desc="" hererun="aside"> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<style> | |||
aside { | |||
width: 30%; | |||
padding-left: 15px; | |||
margin-left: 15px; | |||
float: right; | |||
font-style: italic; | |||
background-color: lightgray; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<p></p> | |||
<aside> | |||
<p> | |||
</p> | |||
</aside> | |||
</body> | |||
</html> | |||
</sample> |
2022年8月14日 (日) 10:40的版本
语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
非语义化的HTML页面
示例
<html>
<body>
<div class="article">
<div class="header">
<h1>h1 - WEB 语义化</h1>
</div>
<div class="nav">
<ul>
<li>nav1 - HTML语义化</li>
<li>nav2 - CSS语义化</li>
</ul>
</div>
<div class="section">
section1 - HTML语义化
</div>
<div class="section">
section2 - CSS语义化
</div>
<div class="time">time - 2022年03月23日</div>
<div class="footer"> footer</div>
</div>
</body>
</html>
可以看出使用div做了所有的事情,如果id或者class命名不好的话,很难快速的了解页面内容。
语义化的HTML页面
示例
<html>
<body>
<article>
<header>
<h1>h1 - WEB 语义化</h1>
</header>
<nav>
<ul>
<li>nav1 - HTML语义化</li>
<li>nav2 - CSS语义化</li>
</ul>
</nav>
<section>
section1 - HTML语义化
</section>
<section>
section2 - CSS语义化
</section>
<time datetime="2018-03-23" pubdate>time - 2018年03月23日</time>
<footer> footer</footer>
</article>
</body>
</html>
这就是一个语义化的页面,通过语义化标签我们不仅仅能快速了解内容,还能让搜索引擎等爬虫程序精准分析对内容进行提取。
什么是语义元素?
语义元素清楚地向浏览器和开发人员描述了它的含义。
- 非语义元素的例子:<div>和<span>- 没有说明它的内容。
- 语义元素示例: <form>、<table>和<article>- 明确定义其内容。
<section> 元素
<section>元素定义文档中的一个部分。
根据 W3C 的 HTML 文档:“部分是内容的主题分组,通常带有标题。”
<section>可以使用场景:
- 章节
- 介绍
- 新闻项目
- 联系信息
网页通常可以分为介绍、内容和联系信息的部分。
示例
<section>
<h2>非语义化</h2>
<p>使用div</p>
</section>
<section>
<h1>语义化</h1>
<p>使用语义化标签</p>
</section>
<article> 元素
<article>元素指定独立的、自包含的内容。一篇文章本身应该有意义,并且应该可以独立于网站的其余部分进行传播。
<article>可以使用场景:
- 论坛帖子
- 博客文章
- 用户评论
- 产品卡片
- 报纸文章
示例
<article>
<h2>Google Chrome</h2>
<p>Google Chrome是由Google开发的网络浏览器,于2008年发布。Chrome是当今世界上最受欢迎的网络浏览器!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox是Mozilla开发的开源网络浏览器。Firefox是自2018年1月以来第二受欢迎的网络浏览器.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge是由Microsoft开发的Web浏览器,于2015年发布。Microsoft Edge更换了Internet Explorer。</p>
</article>
<header> 元素
<header>元素表示介绍性内容或一组导航链接的容器。
一个<header>元素通常包含:
- 一个或多个标题元素 (<h1> - <h6>)
- 标志或图标
- 作者信息
注意:您可以<header>在一个 HTML 文档中包含多个元素。但是不能<header>放置在<footer> <address>等
示例
<article>
<header>
<h1>xiaobai.wang是干什么的</h1>
<p>小白教程的愿景:</p>
</header>
<p>让知识获取更加简单快捷。</p>
</article>
<footer>元素定义文档或部分的页脚。
一个<footer>元素通常包含:
- 作者信息
- 版权信息
- 联系信息
- 网站地图
- 回到顶部链接
- 相关文件
您可以<footer>在一个文档中包含多个元素。
示例
<footer>
<p>作者:xiaobai.wang</p>
<p>邮箱:<a href="mailto:[email protected]">[email protected]</a></p>
</footer>
<nav>元素定义了一组导航链接。
请注意,并非文档的所有链接都应该在<nav>元素内。该 <nav>元素仅用于主要的导航链接块。
示例
<nav>
<a href="/html/">HTML教程</a> |
<a href="/css/">CSS教程</a> |
<a href="/js/">JavaScript教程</a> |
<a href="/jquery/">jQuery教程</a>
</nav>
<aside> 元素
<aside>除了放置它的内容(如侧边栏)之外,该元素还定义了一些内容。
<aside>内容应该与周围的内容间接相关。
示例
<!DOCTYPE html>
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p></p>
<aside>
<p>
</p>
</aside>
</body>
</html>