小白教程
所有教程
关于
Search
172.70.126.206
172.70.126.206
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML语义化标签”的源代码
本页内容
上一节:
HTML代码元素
下一节:
HTML代码语法格式规范
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|39]] 语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。 == 非语义化的HTML页面 == <sample title="" desc="" hererun="1"> <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> </sample> 可以看出使用div做了所有的事情,如果id或者class命名不好的话,很难快速的了解页面内容。 == 语义化的HTML页面 == <sample title="" desc="" hererun="3"> <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> </sample> 这就是一个语义化的页面,通过语义化标签我们不仅仅能快速了解内容,还能让搜索引擎等爬虫程序精准分析对内容进行提取。 == 什么是语义元素? == 语义元素清楚地向浏览器和开发人员描述了它的含义。 * <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:root@xiaobai.wang">root@xiaobai.wang</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> 语义标签就是工作中经常会用到的一类标签,它们的特点是视觉表现上交互都差不多,主要的区别在于它们表示了不同的语义,比如大家会经常见到的section,nav。 语义是我们说话表达的意思,多数的语义实际上都是由文字来承载的,语义类标签则是纯文字的补充,比如:标题,自然段,章节,列表,这些内容都是纯文字无法表达的,我们需要依靠语义标签代为表达。 </p> <aside> <p> 语义化标签的使用场景,自然语言表达能力的补充,文章标题摘要,适合机器阅读的整体结构 </p> </aside> </body> </html> </sample> === <nowiki><figure> 和 <figcaption> 元素</nowiki> === <nowiki><figure>标签指定独立的内容,如插图、图表、照片、代码列表等。 <figcaption>标签定义<figure>元素的标题。<figcaption>元素可以作为元素的第一个或最后一个子元素放置<figure>。 </nowiki> <sample title="" desc="" hererun="figure"> <figure> <img src="/favicon.ico" alt="Trulli"> <figcaption>这是xiaobai.wang的favicon</figcaption> </figure> </sample>
返回至“
HTML语义化标签
”。
上一节:
HTML代码元素
下一节:
HTML代码语法格式规范