阅读 118

重学前端学习笔记(五)--如何运用语义类标签来呈现Wiki网页?

笔记说明

重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱:kaimo313@foxmail.com。

HTML语义:如何运用语义类标签来呈现Wiki网页?

通过wiki网页案例来学习语义类标签

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

案例网址:

en.wikipedia.org/wiki/World_…

打不开上面这个网址的,(winter很贴心)提供了副本网址:

static001.geekbang.org/static/time…

说明:本文图片由winter专栏提供,觉得不错的可以去订阅winter的专栏学习全文。

1、aside

aside图片

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

2、article

article图片

标记的这块区域文章的主体部分可使用article,具有明确的独立性。

3、hgroup,h1,h2

hgroup,h1,h2图片

标记的部分可以像下面这样解析:

  • 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

abbrt图片

说实话这个标签我没有见过,有点惭愧,我特意查了一下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

hr图片

你们一开始是不是觉得这里是不是用hr吗?

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

答案是不用。

解释如下:

winter: hr表示故事走向的转变和话题的转变,显然这里是两个标题,并没有这种关系,应该通过css的border来实现

<hr>注意的几个点

  • 修改颜色使用background-color属性
  • hr标签是块级标签,有边框
  • 设置它自身的边框为0,然后在设置height。

6、p

p图片

标记的部分有三个注记(note),它在文章中的作用就是额外的注释,但是html中并没有note相关的语义,这时可以使用p标签进行相关实现。

7、strong

strong图片

如果上下文中某些词很重要我们可以用strong标签

比如代码:

<p>
    hello winter
    <strong>The World Wide Web (WWW)</strong>
</p>
复制代码

8、blockquote,q,cite

blockquote,q,cite图片

关于“引述”标签的用法

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

这个我基本很少用,为了弄的更清楚一点,我又去查W3C关于blockquoteqcite的定义跟用法:

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

time图片

图片标记划线部分为日期,为了让机器阅读更加方便,我们可以添加time标签

代码如下:

Retrieved <time datetime="2015-07-16">16 July 2015</time>.
复制代码

10、figure,figcaption

figure,figcaption

如图所示标记部分:图文的结合组成了一个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

dfn

我刚开始看的时以为是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

nav,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>
复制代码

13、pre,samp,code

pre,samp,code图片

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

  • 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做了一下整理补充

补充说明

个人总结

通过winter的这个案例梳理,我感觉自己对html认识深那么一点,html知识也稍微拓展了一点,也希望大家对html有不一样的认识,winter的建议:“你可以尽量只用自己熟悉的语义标签,并且只在有把握的场景引入语义标签。这样,我们才能保证语义标签不被滥用,造成更多的问题。”

关注下面的标签,发现更多相似文章
评论