你可能已经忘记了这些 HTML标签的做用

blog.logrocket.com/html-tags-e…html

随着对 JavaScript 框架和库的依赖愈来愈深，不少人对 HTML 的重视程度下降了。这就致使了咱们没法充分利用 HTML 的不少功能，这些功能能够大大的加强网站功能。另外经过编写语义化 HTML 能够在网站内容中添加正确的上下文，从而显着改善用户体验。前端

本文将会介绍一些你可能会忽略的可是颇有用的 HTML 标签。web

`<base>`

<base> 标签容许你建立一个场景，其中存在一个基本URL，这个 URL 充当文档中全部相对 URL 的前缀。标签必须有一个包含基本URL的 href 或 target 属性，或者二者兼有。浏览器

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.google.com/" target="_blank">
</head>
<body>

<h1>The base element(Google As a case study)</h1>

<p> <a href="gmail">Gmail</a> - Used to send emails; which are messages distributed by electronic means from one computer user to one or more recipients via a network.</p>

<p><a href="hangouts">Hangouts</a> - It's used for Messaging, Voice and Video Calls</p>
</body>
</html>
复制代码

这样就没必要为每一个请求重复 URL 的前缀了。服务器

一个 HTML 文档中只能有一个 <base> 元素，而且它必须位于 <head> 元素内。markdown

Image map

image map 是具备特定可点击区域的图片，而且是经过 map 标签订义的。这些区域使用 <area> 标签设置。这使你能够在图像的不一样部分中嵌入连接，这些连接能够指向其余页面，对于描述图片中的内容很是有用。app

看一个例子：框架

第一步是像日常同样用 <img> 标签插入图片，可是此次使用 usemap 属性。frontend

<img src="study.jpg" alt="Workplace" usemap="#workmap">
复制代码

接下来建立一个 <map> 标签，并使用与 img 标签中的 usemap 属性值相同的 name 属性。这会将 <image> 标签与 map 标签连接在一块儿。dom

<map name="workmap">

  </map>
复制代码

而后开始建立可点击区域。咱们须要定义如何绘制每一个区域，一般用 shape 和 coords 来绘制。

`<area>`

<map name="workmap">
  <area shape="rect" coords="255,119,634,373" alt="book" href="book.html">
</map>
复制代码

用 <area> 元素定义图像上的可点击区域。它添加在 map 元素内。

这些属性包括：

在相关区域上绘制矩形时须要使用 shape。你可使用其余形状，例如矩形、圆形、多边形或默认形状（整个图像）
alt 用来指定当 area 元素因为某些缘由而没法呈现时要显示的替代文本
href 包含将可点击区域连接到另外一个页面的 URL
coords 使用坐标（以像素为单位）精确切出形状。你能够用各类软件来获取图片的确切坐标；下面用微软的绘图软件做为一个简单的例子。不一样的形状以不一样的方式表示其坐标，好比矩形用 left, top, right, bottom 表示。

在这里咱们有 top, left 坐标：

你能够在图片的左下方读取光标在图片上的坐标，也能够只在水平和垂直面上使用标尺。

下面的截图显示了 right, bottom 坐标：

最终获得：

<img src="study.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="255,119,634,373" alt="book" href="book.html">
</map>
复制代码

也可使用其余形状，可是每一个形状的坐标写法不一样。

对于 circle，应该有圆心的坐标，而后添加半径：

<map name="workmap">
  <area shape="circle" coords="504,192,504" alt="clock" href="clock.html">
</map>
复制代码

圆心的坐标赞成位于左下角，圆心到末端的水平距离是半径。

建立一个 poly 更像是徒手画图。你只需连接图像上的不一样点，它们就会链接起来：

<map name="workmap">
  <area shape="poly" coords="154,506,168,477,252,429,187,388,235,332,321,310,394,322,465,347,504,402,510,469512,532,454,581,423,585,319,593,255,589,240,536" alt="clock" href="clock.html">
</map>
复制代码

下面是用 HTML 建立形状时所须要的值：

形状	Coordinates
rect	`left, top, right, bottom`
circle	`center-x, center-y, radius`
poly	`x1, y1, x2, y2, .….`
default	整个区域

`<abbr>` 和 `<dfn>`

The <dfn> tag specifies a term to be defined within a parent element. It stands for “definition element.” This parent of the <dfn> tag contains the definition/explanation for the term, while the term is inside the <dfn>. You can also add:

标签 <dfn> 指定要在父元素中定义的术语。它表明“定义元素”。标签 <dfn> 的父级包含术语的定义或解释，而术语位于 <dfn> 内部。能够这样添加：

<p><dfn title="HyperText Markup Language">HTML</dfn> 
  Is the standard markup language for creating web pages.
</p>
复制代码

也能够与 <abbr> 结合使用：

<!DOCTYPE html>
<html>
<body>

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> 
  It's the standard markup language for creating web pages.</p>
</body>
</html>
复制代码

这能够加强可访问性，由于这样编写语义 HTML 可使阅读器和浏览器在适合用户的上下文中解释页面上的内容。

也能够单独使用 <abbr>：

<abbr title="Cascading Stylesheet">CSS</abbr>
复制代码

`<pre>` 和 `<code>`

预格式化的文本或 <pre> 标签用于在编写文本时显示文本（一般是代码）。它显示全部空格和制表符，并彻底按照块中的格式进行设置。

<pre>
    <code>
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>
复制代码

`<fig>` 和 `<figcaption>`

这两个标签一般会一块儿出现。<figcaption> 用做 <fig> 的标题。

<fig>
  <img src="https://images.unsplash.com/photo-1600618538034-fc86e9a679aa?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
  <figcaption>basketball<figcaption/>
<fig>
复制代码

这些标签也能够与代码块、视频和音频一块儿使用，以下所示。

代码块：

<figure>
  <pre>
    <code>
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>
   <figcaption>The code block</figcaption>
</figure>
复制代码

视频：

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>
复制代码

音频：

<figure>
    <audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>
  <figcaption>An audio file</figcaption>
</figure>
复制代码

`<details>` 和 `<summary>`

<details> 和 <summary> 用来建立一个可切换的部分。 <summary> 标签位于 <details> 标签内，单击后会自动显示和隐藏的内容。

最好用的地方是你能够用 CSS 去设置它们的样式，即便不依赖 JavaScript 也能够完美地工做。

<details>
    <summary>
        <span>I am an introvert</span>
    </summary>

    <div>An introvert is a person with qualities of a personality type known as introversion, which means that they feel more comfortable focusing on their inner thoughts and ideas, rather than what's happening externally. They enjoy spending time with just one or two people, rather than large groups or crowds</div>
    <div>        
</details>
复制代码

`<cite>` 和 `<blockquote>`

基本上 <blockquote> 是从另外一个来源引用的部分。并添加了 <cite> 属性来指示源。

<blockquote cite="https://en.wikipedia.org/wiki/History_of_Nigeria">
The history of Nigeria can be traced to settlers trading across the middle East and Africa as early as 1100 BC. Numerous ancient African civilizations settled in the region that is known today as Nigeria, such as the Kingdom of Nri, the Benin Empire, and the Oyo Empire. Islam reached Nigeria through the Borno Empire between (1068 AD) and Hausa States around (1385 AD) during the 11th century,[1][2][3][4] while Christianity came to Nigeria in the 15th century through Augustinian and Capuchin monks from Portugal. The Songhai Empire also occupied part of the region.[5]
</blockquote>
复制代码

若是使用 cite 属性，那么这个属性必须是指向源的有效 URL。要得到相应的引文连接，必须相对于元素的节点文档来解析属性的值。有时它们是私有的，例如调用服务器端脚本收集有关网站使用状况的统计信息。

`<cite>`

cite 元素表示做品或知识产权的标题，例如书籍、文章、论文、诗歌、歌曲等。

<p>The best movie ever made is <cite>The Godfather</cite> by
Francis Ford Coppola . My favorite song is <cite>Monsters You Made</cite> by the Burna boy.</p>
复制代码

总结

咱们应该更多地关注这些标记，并经过编写更多的语义代码来改善网站的功能。

你可能已经忘记了这些 HTML标签的做用

<base>

Image map

<area>

<abbr> 和 <dfn>

<pre> 和 <code>

<fig> 和 <figcaption>

<details> 和 <summary>

<cite> 和 <blockquote>

<cite>

总结

欢迎关注个人公众号：前端先锋