實(shí)用HTML標(biāo)簽的有哪些

這篇文章主要介紹實(shí)用HTML標(biāo)簽的有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元?jiǎng)﹂w做網(wǎng)站,已為上家服務(wù),為劍閣各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

隨著對(duì) JavaScript 框架和庫(kù)的依賴越來(lái)越深，很多人對(duì) HTML 的重視程度降低了。這就導(dǎo)致了我們無(wú)法充分利用 HTML 的很多功能，這些功能可以大大的增強(qiáng)網(wǎng)站功能。另外通過編寫語(yǔ)義化 HTML 可以在網(wǎng)站內(nèi)容中添加正確的上下文，從而顯著改善用戶體驗(yàn)。

實(shí)用HTML標(biāo)簽的有：

`<base>`

<base> 標(biāo)簽允許你創(chuàng)建一個(gè)場(chǎng)景，其中存在一個(gè)基本URL，這個(gè) URL 充當(dāng)文檔中所有相對(duì) URL 的前綴。標(biāo)簽必須有一個(gè)包含基本URL的 href 或 target 屬性，或者兩者兼有。

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

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

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

這樣就不必為每個(gè)請(qǐng)求重復(fù) URL 的前綴了。

一個(gè) HTML 文檔中只能有一個(gè) <base> 元素，并且它必須位于 <head> 元素內(nèi)。

Image map

image map 是具有特定可點(diǎn)擊區(qū)域的圖片，并且是通過 map 標(biāo)簽定義的。這些區(qū)域使用 <area> 標(biāo)簽設(shè)置。這使你可以在圖像的不同部分中嵌入鏈接，這些鏈接可以指向其他頁(yè)面，對(duì)于描述圖片中的內(nèi)容非常有用。

看一個(gè)例子：

第一步是像平常一樣用 <img> 標(biāo)簽插入圖片，但是這次使用 usemap 屬性。

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

接下來(lái)創(chuàng)建一個(gè) <map> 標(biāo)簽，并使用與 img 標(biāo)簽中的 usemap 屬性值相同的 name 屬性。這會(huì)將 <image> 標(biāo)簽與 map 標(biāo)簽鏈接在一起。

  <map name="workmap">

  </map>

然后開始創(chuàng)建可點(diǎn)擊區(qū)域。我們需要定義如何繪制每個(gè)區(qū)域，通常用 shape 和 coords 來(lái)繪制。

`<area>`

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

用 <area> 元素定義圖像上的可點(diǎn)擊區(qū)域。它添加在 map 元素內(nèi)。

這些屬性包括：

在相關(guān)區(qū)域上繪制矩形時(shí)需要使用 shape。你可以使用其他形狀，例如矩形、圓形、多邊形或默認(rèn)形狀（整個(gè)圖像）
alt 用來(lái)指定當(dāng) area 元素由于某些原因而無(wú)法呈現(xiàn)時(shí)要顯示的替代文本
href 包含將可點(diǎn)擊區(qū)域鏈接到另一個(gè)頁(yè)面的 URL
coords 使用坐標(biāo)（以像素為單位）精確切出形狀。你可以用各種軟件來(lái)獲取圖片的確切坐標(biāo)；下面用微軟的繪圖軟件作為一個(gè)簡(jiǎn)單的例子。不同的形狀以不同的方式表示其坐標(biāo)，比如矩形用 left, top, right, bottom 表示。

在這里我們有 top, left 坐標(biāo)：

實(shí)用HTML標(biāo)簽的有哪些

你可以在圖片的左下方讀取光標(biāo)在圖片上的坐標(biāo)，也可以只在水平和垂直面上使用標(biāo)尺。

下面的截圖顯示了 right, bottom 坐標(biāo)：

實(shí)用HTML標(biāo)簽的有哪些

最終得到：

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

也可以使用其他形狀，但是每個(gè)形狀的坐標(biāo)寫法不同。

對(duì)于 circle，應(yīng)該有圓心的坐標(biāo)，然后添加半徑：

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

實(shí)用HTML標(biāo)簽的有哪些

圓心的坐標(biāo)同意位于左下角，圓心到末端的水平距離是半徑。

創(chuàng)建一個(gè) poly 更像是徒手畫圖。你只需鏈接圖像上的不同點(diǎn)，它們就會(huì)連接起來(lái)：

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

實(shí)用HTML標(biāo)簽的有哪些

下面是用 HTML 創(chuàng)建形狀時(shí)所需要的值：

形狀	Coordinates
rect	`left, top, right, bottom`
circle	`center-x, center-y, radius`
poly	`x1, y1, x2, y2, .….`
default	整個(gè)區(qū)域

`<abbr>` 和 `<dfn>`

標(biāo)簽 <dfn> 指定要在父元素中定義的術(shù)語(yǔ)。它代表“定義元素”。標(biāo)簽 <dfn> 的父級(jí)包含術(shù)語(yǔ)的定義或解釋，而術(shù)語(yǔ)位于 <dfn> 內(nèi)部?？梢赃@樣添加：

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

也可以與 <abbr> 結(jié)合使用：

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

這可以增強(qiáng)可訪問性，因?yàn)檫@樣編寫語(yǔ)義 HTML 可以使閱讀器和瀏覽器在適合用戶的上下文中解釋頁(yè)面上的內(nèi)容。

也可以單獨(dú)使用 <abbr>：

 <abbr title="Cascading Stylesheet">CSS</abbr>

`<pre>` 和 `<code>`

預(yù)格式化的文本或 <pre> 標(biāo)簽用于在編寫文本時(shí)顯示文本（通常是代碼）。它顯示所有空格和制表符，并完全按照塊中的格式進(jìn)行設(shè)置。

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

`<fig>` 和 `<figcaption>`

這兩個(gè)標(biāo)簽通常會(huì)一起出現(xiàn)。<figcaption> 用作 <fig> 的標(biāo)題。

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

這些標(biāo)簽也可以與代碼塊、視頻和音頻一起使用，如下所示。

代碼塊：

 <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> 用來(lái)創(chuàng)建一個(gè)可切換的部分。 <summary> 標(biāo)簽位于 <details> 標(biāo)簽內(nèi)，單擊后會(huì)自動(dòng)顯示和隱藏的內(nèi)容。

最好用的地方是你可以用 CSS 去設(shè)置它們的樣式，即使不依賴 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> 是從另一個(gè)來(lái)源引用的部分。并添加了 <cite> 屬性來(lái)指示源。

<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 屬性，那么這個(gè)屬性必須是指向源的有效 URL。要獲得相應(yīng)的引文鏈接，必須相對(duì)于元素的節(jié)點(diǎn)文檔來(lái)解析屬性的值。有時(shí)它們是私有的，例如調(diào)用服務(wù)器端腳本收集有關(guān)網(wǎng)站使用情況的統(tǒng)計(jì)信息。

`<cite>`

cite 元素表示作品或知識(shí)產(chǎn)權(quán)的標(biāo)題，例如書籍、文章、論文、詩(shī)歌、歌曲等。

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

以上是“實(shí)用HTML標(biāo)簽的有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱：實(shí)用HTML標(biāo)簽的有哪些
文章位置：http://jinyejixie.com/article34/pshcse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、品牌網(wǎng)站設(shè)計(jì)、域名注冊(cè)、、網(wǎng)站排名、用戶體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

實(shí)用HTML標(biāo)簽的有哪些

<base>

Image map

<area>

<abbr> 和 <dfn>

<pre> 和 <code>

<fig> 和 <figcaption>

<details> 和 <summary>

<cite> 和 <blockquote>

<cite>

`<base>`

`<area>`

`<abbr>` 和 `<dfn>`

`<pre>` 和 `<code>`

`<fig>` 和 `<figcaption>`

`<details>` 和 `<summary>`

`<cite>` 和 `<blockquote>`

`<cite>`