HTML常用標簽

TML常用標簽有：a標簽、table標簽、img標簽、form標簽和input標簽。

a標簽

作用

跳轉到外部網頁
跳轉到內部錨點
跳轉到郵箱或電話等

屬性

（一）href

href是hyper reference的縮寫，超鏈接的意思。

用于指定鏈接目標的ur地址，(必須屬性)當為標簽應用href屬性時，它就具有了超鏈接的功能；
href=“#”表示這是一個空鏈接；
如果href里面地址是—個文件或者壓縮包,會下載這個文件。

<a href="https://google.com">超鏈接到google網站的主頁</a>
 <a href="https://google.com">超鏈接到google的主頁</a>
 <a href="//google.com">超鏈接到google的主頁</a>

展現形式：

點擊此鏈接，即可到達google的主頁

a標簽href的取值：

1、上述代碼中的網址的取值(推薦使用第三行的代碼)

<a href="//google.com">超鏈接到google的主頁</a>

由于此方式能夠自動補齊相關的網絡地址，前面兩種寫錯就會報錯，所以推薦使用。

2、路徑

/a/b/c 或者是a/b/c

當前路徑下的a里面的b，b里面的c

index.html 以及./index.html

在當前目錄下尋找index.html文件

3、偽協議

javascript：代碼；（冒號與分號一定要寫）

<a href="javascript：;">點擊后無任何點擊或刷新等動作的反應</a>

錨點鏈接

<a href="#要跳轉的元素的id"></a>

點擊鏈接的時候，會跳轉到指定元素所在的位置。

mailto：郵箱

<a href="mailto:abcdefg@163.com ">發郵件給我</a>

tel：手機號

<a href="tel:12345678901">打電話給我</a>

（二）targe

用于指定鏈接頁面的打開方式

a的target取值

1、內置名字

_blank 在空白頁打開

_self 在當前頁面打開

_parent 在父級窗口打開

_top 在最頂級的窗口打開

<a href="//google.com" target="_blank">超鏈接到google網站的主頁在空白頁打開</a>

2、程序員的命名

window：name（在xxx頁面打開）

iframe的name（iframe現在已經很少使用了，是指內嵌窗口）

（三）download

下載頁面，但目前很少用，有的瀏覽器不支持，尤其是手機瀏覽器可能不支持。

table標簽

1、table標簽的語法：

thead:表頭

tbody:表的內容，用于定義

tfoot:表的腳部

tr:table row,表格里的行

th:表格的表頭部分，其中的文本內容字體加粗居中顯示

td:table data,表格數據，用于定義表格中的單元格

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小紅</th>
          <th>小黃</th>
          <th>小藍</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>數學</th>
          <td>90</td>
          <td>60</td>
          <td>80</td>
        </tr>
        <tr>
          <th>語文</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
        <tr>
          <th>英語</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>總分</th>
          <td>266</td>
          <td>250</td>
          <td>274</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

第一行的th標簽為空

2、table的樣式

table-layout：auto；自動計算每一行的寬高

table-layout：fixed；通過列表的寬度來決定平均寬度

border-collapse：collapse；合并邊框(默認邊框與邊框之間不合并)

border-spacing：0；邊框為0.(邊框與邊框之間的距離)。

img標簽（圖片）

作用：發出get請求，展示一張圖片。

<img src="1.JPG" alt="頭像" width="400" />

當前路徑下的1.jpg，確定寬度為400，只寫寬度高度會自適應

屬性

alt：alternate的縮寫，替換的意思。替換文本，圖像不能顯示的文字。

路徑錯誤顯示alt內容

title：提示文本。鼠標放到圖像上，顯示的文字。

響應

max-width：100% 所有的圖片在手機上都自適應寬度，寬度最大為100%。

事件

onload/onerror 監聽圖片是否加載成功，加載成功時用onload，不成功是用onerror事件。確保在onerror事件能夠補救。

<body>
 <img id="xxx" src="dog.jpg" alt="一只小狗">
<script>
xxx.onload = function () {
console.log("圖片加載成功");
 };
xxx.onerror = function () {
console.log("圖片加載失敗");
xxx.src = "/404.jpg";
 };
</script>
</body>

監聽成功時，打印出成功

監聽失敗時，先打印出監聽失敗并且開始執行加載失敗是的挽救圖片。404.jpg文件執行

感想：

a標簽的默認樣式可以設置清除，href屬性可以有好多種取值，a標簽的意義也不僅僅是跳轉到一個網址，還可以發郵件打電話。
給img標簽設置寬度和高度時，不能讓圖片變形
table標簽必須按照thead,tbody,tfoot的結構去寫，先劃分好結構，再往里填充內容，即使tfoot寫在前面，也會顯示在頁面的尾部

本文為作者本人的原創文章，著作權歸作者本人和饑人谷所有，轉載務必注明來源。

TML <base> 元素

指定用于一個文檔中包含的所有相對 URL 的根 URL。一份中只能有一個 <base> 元素。

包含屬性href 和

target 可以指定a 標簽的默認窗口打開行為

<base href="https://www.baidu.com/img/123" target="_banlk"></base> 默認就打開新的窗口 <a href="aaa">123</a>

使用

雖然在codepen 的代碼上編寫的但是能夠正確的通過base url + img 的src 定位顯示出圖片

content 標簽

HTML <aside> 元素

表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分并且可以被單獨的拆分出來而不會使整體受影響。

HTML <blockquote> 元素

（或者 HTML 塊級引用元素），代表其中的文字是引用內容。通常在渲染時，這部分的內容會有一定的縮進（注中說明了如何更改）。若引文來源于網絡，則可以將原內容的出處 URL 地址設置到 cite 特性上，若要以文本的形式告知讀者引文的出處時，可以通過 <cite> 元素。

HTML <figure> 元素

代表一段獨立的內容, 經常與說明（caption） <figcaption> 配合使用, 并且作為一個獨立的引用單元。當它屬于主內容流（main flow）時，它的位置獨立于主體。這個標簽經常是在主文中引用的圖片，插圖，表格，代碼段等等，當這部分轉移到附錄中或者其他頁面時不會影響到主體。

Inline text semantics

HTML 縮寫元素（<abbr>）

用于展示縮寫，并且可以通過可選的 title 屬性提供完整的描述。

ps: 完整描述樣式貌似不能自定義

HTML鍵盤輸入元素(<kbd>)

用于表示用戶輸入，它將產生一個行內元素，以瀏覽器的默認monospace字體顯示。

HTML標記文本元素()

表示為引用或符號目的而標記或突出顯示的文本，這是由于標記的段落在封閉上下文中的相關性或重要性造成的。

ps:項目中大量使用span 標記的做法不符合html5 的語義化

HTML Ruby Base（<rb>）

元素用于分隔<ruby>注釋的基本文本組件（即正在注釋的文本）。一個<rb>元素應該包裝基本文本的每個單獨的原子段。

ps: 拼音注解

<samp> 元素

用于標識計算機程序輸出，通常使用瀏覽器缺省的 monotype 字體（例如 Lucida Console）。

HTML 中的

元素將使文本的字體變小一號。(例如從大變成中等，從中等變成小，從小變成超小)。在HTML5中，除了它的樣式含義，這個元素被重新定義為表示邊注釋和附屬細則，包括版權和法律文本。

HTML 元素定義了一個文本區域，出于排版的原因，與主要的文本相比，應該展示得更低并且更小。

ps: 下腳標

HTML 元素定義了一個文本區域，出于排版的原因，與主要的文本相比，應該展示得更高并且更小。

ps: 上腳標

HTML 元素

使文本在其內容的基線下的一行呈現下劃線。在HTML5中, 此元素表示具有未標注的文本跨度，顯示渲染，非文本注釋，例如將文本標記為中文文本中的專有名稱(一個正確的中文標記), 或將文本標記為拼寫錯誤

HTML <map>

與 <area> 屬性一起使用來定義一個圖像映射(一個可點擊的鏈接區域).

HTML <track> 元素

被當作媒體元素—<audio> 和 <video>的子元素來使用。它允許指定計時字幕（或者基于時間的數據），例如自動處理字幕。

HTML <object> 元素

（或者稱作 HTML 嵌入對象元素）表示引入一個外部資源，這個資源可能是一張圖片，一個嵌入的瀏覽上下文，亦或是一個插件所使用的資源

ps: 支持引入的資源類型

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

關于支持資源類型的測試

http://joliclic.free.fr/html/object-tag/en/index.php

TML文本是由 HTML命令組成的描述性文本，HTML 命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。 HTML的結構包括頭部 (Head)、主體 (Body) 兩大部分。下面是什么是html內容，希望對您有所幫助。

HTML(Hyper Text Mark-up Language )即超文本標記語言，是 WWW 的描述語言，由 Tim Berners-lee提出。設計 HTML 語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯系在一起，形成有機的整體，人們不用考慮具體信息是在當前電腦上還是在網絡的其它電腦上。這樣，你只要使用鼠標在某一文檔中點取一個圖標，Internet就會馬上轉到與此圖標相關的內容上去，而這些信息可能存放在網絡的另一臺電腦中。

HTML文本是由 HTML命令組成的描述性文本，HTML 命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。 HTML的結構包括頭部 (Head)、主體 (Body) 兩大部分。頭部描述瀏覽器所需的信息，主體包含所要說明的具體內容。

html是什么文件

HTML就是超文件標示語言(HyperText Markup Language)。主要是在瀏覽器中顯示一份文件的內容。它本身并非程式設計，只不過是標示(Mark-up)，用來強調及組織一般性的文字。HTML是由一些標記(tags)所構成，每個標記對瀏覽器下一個特定的指令，這些指令會告訴瀏覽器如何顯示文件的內容。

編輯HTML不需要多么高級的軟體配備，你只要有『記事本』這項軟體就可以了。但記得，HTML文件的副檔名有些奇怪，你必須設定為 .htm 或是.html 才行。

例如： index.htm是一個合法的HTML檔名，但index.txt就不是了。你可能聽過一些HTML的編輯程式如：HotDog 、CutrHTML ....等。對初學者而言，使用這些工具并不太好。雖然它們的設計目的是幫助你更容易使用HTML來工作。但不幸的是，其中有許多會將HTML的代碼隱覽起來，造成學習上的困難。

HTML由來

萬維網上的一個超媒體文檔稱之為一個頁面(外語：page)。作為一個組織或者個人在萬維網上放置開始點的頁面稱為主頁(外語：Homepage)或首頁，主頁中通常包括有指向其他相關頁面或其他節點的指針(超級鏈接)，所謂超級鏈接，就是一種統一資源定位器(Uniform Resource Locator，外語縮寫：URL)指針，通過激活(點擊)它，可使瀏覽器方便地獲取新的網頁。這也是HTML獲得廣泛應用的最重要的原因之一。

在邏輯上將視為一個整體的一系列頁面的有機集合稱為網站(Website或Site)。超級文本標記語言(英文縮寫：HTML)是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言。

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術(如：腳本語言、公共網關接口、組件等)，可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網(Web)編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

HTML特點

HTML(Hyper Text Mark-up Language)即超文本標記語言或超文本鏈接標示語言，是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭部(Head)、主體(Body)兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。

HTML文檔制作不是很復雜，且功能強大，支持不同數據格式的文件鑲入，這也是WWW盛行的原因之一，其主要特點如下：

1、簡易性，HTML版本升級采用超集方式，從而更加靈活方便。

2、可擴展性，HTML語言的廣泛應用帶來了加強功能，增加標識符等要求，HTML采取子類元素的方式，為系統擴展帶來保證。

3、平臺無關性。雖然PC機大行其道，但使用MAC等其他機器的大有人在，HTML可以使用在廣泛的平臺上.

在線咨詢

上一篇：post表單提交也會亂碼？
下一篇：技術貼：一篇文章看懂鏈接（超鏈接）設計

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML常用標簽

a標簽

table標簽

img標簽（圖片）

感想：

您的項目需求