你知道這些HTML標籤的做用嗎？

時間 2021-01-12

標籤 html 前端程序員 web 面試 segmentfault 瀏覽器服務器微信多線程欄目 HTML 简体版

原文原文鏈接

隨着對 JavaScript 框架和庫的依賴愈來愈深，不少人對 HTML 的重視程度下降了。這就致使了咱們沒法充分利用 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 的前綴了。web

一個 HTML 文檔中只能有一個 <base> 元素，而且它必須位於 <head> 元素內。面試

Image map

image map 是具備特定可點擊區域的圖片，而且是經過 map 標籤訂義的。這些區域使用 <area> 標籤設置。這使你能夠在圖像的不一樣部分中嵌入連接，這些連接能夠指向其餘頁面，對於描述圖片中的內容很是有用。segmentfault

看一個例子：瀏覽器

第一步是像日常同樣用 <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>