乐趣区

关于html5:你知道-这些HTML标签的作用吗

jiezi

随着对 JavaScript 框架和库的依赖越来越深，很多人对 HTML 的器重水平升高了。这就导致了咱们无奈充分利用 HTML 的很多性能，这些性能能够大大的加强网站性能。另外通过编写语义化 HTML 能够在网站内容中增加正确的上下文，从而显着改善用户体验。

本文将会介绍一些你可能会疏忽的然而很有用的 HTML 标签。

<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> 元素内。

Image map

image map 是具备特定可点击区域的图片，并且是通过 map 标签定义的。这些区域应用 <area> 标签设置。这使你能够在图像的不同局部中嵌入链接，这些链接能够指向其余页面，对于形容图片中的内容十分有用。

看一个例子：

第一步是像平时一样用 <img> 标签插入图片，然而这次应用 usemap 属性。

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

接下来创立一个 <map> 标签，并应用与 img 标签中的 usemap 属性值雷同的 name 属性。这会将 <image> 标签与 map 标签链接在一起。

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

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

总结

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

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现
  • 更多文章 …
退出移动版