重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？

2019年9月1日 187次阅读 来源: 凯小默

笔记申明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时候开的一个专栏，
天天10分钟，重构你的前端学问系统，笔者主要整顿进修历程的一些要点笔记以及感悟，完全的可以到场winter的专栏进修【原文有winter的语音】，若有侵权请联络我，邮箱：kaimo313@foxmail.com。

HTML语义：怎样运用语义类标签来显现Wiki网页？

经由过程wiki网页案例来进修语义类标签

HTML最初的设想场景就是“超文本”，初期HTML工作组的专家都是出版界书本排版的专家。

案例网址：

https://en.wikipedia.org/wiki/World_Wide_Web

打不开上面这个网址的，（winter很知心）供应了副本网址：

http://static001.geekbang.org/static/time/quote/World_Wide_Web-Wikipedia.html

申明：本文图片由winter专栏供应，以为不错的可以去定阅winter的专栏进修全文。

1、aside

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

标记的这块地区属于aside内容主要就是起到导航作用。

2、article

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

标记的这块地区文章的主体部份可运用article，具有明白的独立性。

3、hgroup,h1,h2

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

标记的部份可以像下面如许剖析：

  • hgroup是题目组
  • h1是一级题目：World Wide Web
  • h2是二级题目：From Wikipedia, the free encyclopedia

代码的话就相似如许：

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

4、abbr

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

说实话这个标签我没有见过，有点忸捏，我特地查了一下w3c的abbr标签的定义和用法：

  • <abbr> 标签指导简称或缩写，比方 “WWW” 或 “NATO”。
  • 经由过程对缩写举行标记，您可以为浏览器、拼写搜检和搜索引擎供应有效的信息。
  • <abbr> 标签最初是在 HTML 4.0 中引入的，示意它所包括的文本是一个更长的单词或短语的缩写情势。

浏览器支撑状况：

  • 一切浏览器都支撑 <abbr> 标签
  • 诠释：IE 6 或更早版本的 IE 浏览器不支撑 <abbr> 标签。

实列：标记一个缩写

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

经由过程这些引见，winter这里提的WWW就很好理解了：

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

5、hr

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

你们一开始是否是以为这里是否是用hr吗？

我一开始以为就是用hr，但被winter打脸了_(:3」∠)_.

答案是不必。

诠释以下：

winter: hr示意故事走向的改变和话题的改变，明显这里是两个题目，并没有这类关联，应当经由过程css的border来完成

<hr>注重的几个点

  • 修正色彩运用background-color属性
  • hr标签是块级标签，有边框
  • 设置它本身的边框为0，然后在设置height。

6、p

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

标记的部份有三个注记（note），它在文章中的作用就是分外的诠释，然则html中并没有note相干的语义，这时候可以运用p标签举行相干完成。

7、strong

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

假如高低文中某些词很主要我们可以用strong标签

比方代码：

<p>
    hello winter
    <strong>The World Wide Web (WWW)</strong>
</p>

8、blockquote,q,cite

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

关于“引述”标签的用法

  • blockquote：示意段落引述内容
  • q：示意行内引述内容
  • cite：示意引述的作品名

这个我基础很罕用，为了弄的更清晰一点，我又去查W3C关于blockquote，q，cite的定义跟用法：

1）、w3c关于blockquote标签

定义和用法：

<blockquote> 标签定义块援用。
<blockquote>与
</blockquote> 之间的一切文本都邑从通例文本中分离出来，常常会在左、右双方举行缩进（增添外边距），而且有时会运用斜体。也就是说，块援用具有它们本身的空间。

浏览器支撑状况：

一切主流的浏览器均支撑
<blockquote> 标签，诠释：没有浏览器可以正确地显现
cite属性。

例子：

<blockquote>
    Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

提醒：

如需把页面作为 strict XHTML 举行考证，那末
<blockquote>元素必需包括块级元素，比方如许：

<blockquote>
    <p>here is a long quotation here is a long quotation</p>
</blockquote>

2）、w3c关于q标签

定义和用法：

cite 属性划定援用的泉源。该属性的值是一个包括在引号中并指向联机文档的 URL，以及（假如有能够的话）援用在该文档中的确实位置。

浏览器支撑状况：

主流浏览器均不支撑
cite 属性。不过，搜索引擎能够会运用该属性取得更多有关援用的信息。

语法：

<q cite="URL">

例子：

下面这个
q元素中的
cite属性指定了援用的泉源：

<p>
    WWF's goal is to:
    <q cite="http://www.wwf.org">
        build a future where people live in harmony with nature
    </q> we hope they succeed.
</p>

3）、w3c关于cite标签

定义和用法:

  • <cite>标签一般示意它所包括的文本对某个参考文献的援用，比方书本或许杂志的题目。根据通例，援用的文本将以斜体显现。
  • 更多可以参考w3c网址…

浏览器支撑状况：

一切浏览器都支撑
<cite>标签。

例子：

比方作品名：What is the difference between the Web and the Internet?

<cite>What is the difference between the Web and the Internet?</cite>

9、time

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

图片标记划线部份为日期，为了让机械浏览越发轻易，我们可以增加time标签

代码以下：

Retrieved <time datetime="2015-07-16">16 July 2015</time>.

10、figure,figcaption

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

如图所示标记部份：图文的连系组成了一个figure的语法征象，figure标签用于示意与主文章相干的图象…等内容

例子：

用作文档中插图的图象：

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

figcaption标签用作文档中插图的图象，带有一个题目，代码以下：

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

11、dfn

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

我刚开始看的时以为是dnf（大笑），这又是我没见过的_(:3」∠)_，因而我先查了一下w3c关于dfn标签，觉得引见很少

dfn标签定义和用法：

<dfn>标签可标记那些对特别术语或短语的定义。如今盛行的浏览器一般用斜体来显现
<dfn>中的文本。未来，
<dfn>还能够有助于建立文档的索引或术语表。

图片划线部份就有Internet和WWW的定义，例子代码以下：

The <dfn>Internet</dfn> is a global system of interconnected computer networks.

12、nav,ol,ul

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

如图这个可以导航而且有递次，代码以下：

<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>

13、pre,samp,code

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

这三个标签的定义和用法:

  • pre：元素可定义预格式化的文本。被包围在 pre元素中的文本一般会保存空格和换行符。罕见运用就是用来示意计算机的源代码。
  • samp：示意一段用户应当对其没有什么其他诠释的文本字符
  • code：标签用于示意计算机源代码或许其他机械可以浏览的文本内容。

例子代码：

<pre>
    <samp>
        GET /home.html HTTP/1.1
        Host: www.example.org
    </samp>
</pre>
<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>

补充申明

上面winter已讲了也许20来个标签，下面这些是没讲到的，winter做了一下整顿补充

《重学前端进修笔记（五）--怎样应用语义类标签来显现Wiki网页？》

个人总结

经由过程winter的这个案例梳理，我觉得本身对html熟习深那末一点，html学问也轻微拓展了一点，也愿望人人对html有不一样的熟习，winter的发起：“你可以只管只用本身熟习的语义标签，而且只在有把握的场景引入语义标签。如许，我们才保证语义标签不被滥用，形成更多的题目。”

    原文作者：凯小默
    原文地址: https://segmentfault.com/a/1190000019018021
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞