重学前端-总结：04、如何运用语义类标签来呈现Wiki网页？

最新推荐文章于 2023-02-03 13:48:54 发布

BraveSoul360

最新推荐文章于 2023-02-03 13:48:54 发布

阅读量553

点赞数

分类专栏： web前端文章标签：重学前端 web前端学习

本文链接：https://blog.csdn.net/yunfeng482/article/details/87893131

版权

web前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

文章目录

重学前端-总结：04、如何运用语义类标签来呈现Wiki网页？
前言
标签介绍
总结
课程链接

重学前端-总结：04、如何运用语义类标签来呈现Wiki网页？

前言

相信大多数的前端开发者是没有专门了解html的语义标签，估计是html上手快，需要用到就去查阅文档，大多数人只会用div span ul h1 去进行排版页面，却忽略了html语义标签的重要性和严谨性。

标签介绍

分析一篇 wiki 的文章用到的语义类标签，来进一步帮你理解语义的概念。打开这个页面：https://en.wikipedia.org/wiki/World_Wide_Web

aside-导航性质内容

在这里插入图片描述

article-文章主体部分

在这里插入图片描述

hgroup, h1, h2-标题组

<hgroup>
<h1>World Wide Web </h1>
<h2>From Wikipedia, the free encyclopedia</h2>
</hgroup>

在这里插入图片描述

abbr-表示缩写

    <abbr title="World Wide Web">WWW</abbr>.

在这里插入图片描述

hr-横向分隔

hr 表示故事走向的转变或者话题的转变，显然此处两个标题并非这种关系，所以我们应该使用 CSS 的 border 来把它当作纯视觉效果来实现，所以这里是不需要用 hr 的。

在这里插入图片描述

p-普通的段落

HTML 中并没有 note 相关的语义，所以，我们用普通的 p 标签，加上class="note"来实现。后面的多数自然段都是普通的段落，我们用 p 标签来实现。
在这里插入图片描述

strong-加粗强调

<p>
	 A global map of the web index for countries in 2014
	<strong>The World Wide Web (WWW)</strong>, also called <strong>the Web</strong>
</p>

在这里插入图片描述

blockquote, q, cite-文字引用

在这里插入图片描述

用法“引述”。
interlinked by hypertext links, and accessible via the Internet.[1]

注意看这里的 [1]，当我们把鼠标放上去的时候，出现了引述的相关信息：

What is the difference between the Web and the Internet?”. W3C Help and FAQ. W3C. 2009. Archived from the original on 9 July 2015. Retrieved 16 July 2015.

在 HTML 中，有三个跟引述相关的标签 blockquote 表示段落级引述内容，q 表示行内的引述内容，cite 表示引述的作品名。

这里的作品名称 “What is the difference between the Web and the Internet?”，应当使用 cite 标签。

    <cite>"What is the difference between the Web and the Internet?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on 9 July 2015. Retrieved 16 July 2015.

time-时间描述

在这里插入图片描述

这里除了引用的文章外，还出现了日期，为了让机器阅读更加方便，可以加上 time 标签：

<cite>"What is the difference between the Web and the Internet?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on <time datetime="2015-07-09">9 July 2015</time>. Retrieved <time datetime="2015-07-16">16 July 2015</time>

figure, figcaption-表示与主文章相关的图像、照片等流内容

在这里插入图片描述

<figure> <img src="https://.....440px-NeXTcube_first_webserver.JPG"/> <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption></figure>

dfn-包裹被定义的名词

在这里插入图片描述

分别定义了 Internet 和 World Wide Web，我们应该使用 dfn 标签。

The terms Internet and World Wide Web are often used without much distinction. However, the two are not the same. The <dfn>Internet</dfn> is a global system of interconnected computer networks.In contrast, the <dfn>World Wide Web</dfn> is a global collection of documents and other resources, linked by hyperlinks and URIs.

nav, ol, ul-无序列表、有序列表

在这里插入图片描述

目录链接到文章的各个章节，使用 nav 标签。目录顺序不可随意变化，用多级的 ol 结构。
ol 和 ul 的区分是内容是否有顺序关系

<nav>
<h2>Contents</h2>
<ol>
	<li><a href="...">History</a></li>
	<li><a href="...">Function</a>
	<ol>
		<li><a href="...">Linking</a></li>
		<li><a href="...">Dynamic updates of web pages</a></li>
		        ...
	</ol>
	</li>
	    ...
</ol>
</nav>

pre, samp, code-换行标签、

在这里插入图片描述

<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>

pre 标签:
不需要浏览器进行排版，避免换行

samp 标签:
玉米渣

code 标签：

<html>
  <head>
    <title>Example.org – The World Wide Web</title>
  </head>
  <body>
    <p>The World Wide Web, abbreviated as WWW and commonly known ...</p>
  </body>
</html>

加上 code 标签改成：

<pre><code>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Example.org – The World Wide Web&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;The World Wide Web, abbreviated as WWW and commonly known ...&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

总结

wiki页面对于语义标签的使用时很严谨的，没讲到的标签，我们这里稍微做一下简要的补充说明。

在这里插入图片描述

课程链接

在这里插入图片描述

BraveSoul360

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
重学前端-总结：04、如何运用语义类标签来呈现Wiki网页？

文章目录重学前端-总结：04、如何运用语义类标签来呈现Wiki网页？前言标签介绍aside-导航性质内容article-文章主体部分hgroup, h1, h2-标题组abbr-表示缩写hr-横向分隔p-普通的段落strong-加粗强调blockquote, q, cite-文字引用time-时间描述figure, figcaption-表示与主文章相关的图像、照片等流内容dfn-包裹被定义的名词...
复制链接

扫一扫