HTML常用標(biāo)簽

TML常用標(biāo)簽有：a標(biāo)簽、table標(biāo)簽、img標(biāo)簽、form標(biāo)簽和input標(biāo)簽。

a標(biāo)簽

作用

跳轉(zhuǎn)到外部網(wǎng)頁
跳轉(zhuǎn)到內(nèi)部錨點(diǎn)
跳轉(zhuǎn)到郵箱或電話等

屬性

（一）href

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

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

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

展現(xiàn)形式：

點(diǎn)擊此鏈接，即可到達(dá)google的主頁

a標(biāo)簽href的取值：

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

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

由于此方式能夠自動補(bǔ)齊相關(guān)的網(wǎng)絡(luò)地址，前面兩種寫錯就會報錯，所以推薦使用。

2、路徑

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

當(dāng)前路徑下的a里面的b，b里面的c

index.html 以及./index.html

在當(dāng)前目錄下尋找index.html文件

3、偽協(xié)議

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

<a href="javascript：;">點(diǎn)擊后無任何點(diǎn)擊或刷新等動作的反應(yīng)</a>

錨點(diǎn)鏈接

<a href="#要跳轉(zhuǎn)的元素的id"></a>

點(diǎn)擊鏈接的時候，會跳轉(zhuǎn)到指定元素所在的位置。

mailto：郵箱

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

tel：手機(jī)號

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

（二）targe

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

a的target取值

1、內(nèi)置名字

_blank 在空白頁打開

_self 在當(dāng)前頁面打開

_parent 在父級窗口打開

_top 在最頂級的窗口打開

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

2、程序員的命名

window：name（在xxx頁面打開）

iframe的name（iframe現(xiàn)在已經(jīng)很少使用了，是指內(nèi)嵌窗口）

（三）download

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

table標(biāo)簽

1、table標(biāo)簽的語法：

thead:表頭

tbody:表的內(nèi)容，用于定義

tfoot:表的腳部

tr:table row,表格里的行

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

td:table data,表格數(shù)據(jù)，用于定義表格中的單元格

<!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>小藍(lán)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>數(shù)學(xué)</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標(biāo)簽為空

2、table的樣式

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

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

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

border-spacing：0；邊框?yàn)?.(邊框與邊框之間的距離)。

img標(biāo)簽（圖片）

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

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

當(dāng)前路徑下的1.jpg，確定寬度為400，只寫寬度高度會自適應(yīng)

屬性

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

路徑錯誤顯示alt內(nèi)容

title：提示文本。鼠標(biāo)放到圖像上，顯示的文字。

響應(yīng)

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

事件

onload/onerror 監(jiān)聽圖片是否加載成功，加載成功時用onload，不成功是用onerror事件。確保在onerror事件能夠補(bǔ)救。

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

監(jiān)聽成功時，打印出成功

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

感想：

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

本文為作者本人的原創(chuàng)文章，著作權(quán)歸作者本人和饑人谷所有，轉(zhuǎn)載務(wù)必注明來源。

TML <base> 元素

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

包含屬性href 和

target 可以指定a 標(biāo)簽的默認(rèn)窗口打開行為

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

使用

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

content 標(biāo)簽

HTML <aside> 元素

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

HTML <blockquote> 元素

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

HTML <figure> 元素

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

Inline text semantics

HTML 縮寫元素（<abbr>）

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

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

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

用于表示用戶輸入，它將產(chǎn)生一個行內(nèi)元素，以瀏覽器的默認(rèn)monospace字體顯示。

HTML標(biāo)記文本元素()

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

ps:項(xiàng)目中大量使用span 標(biāo)記的做法不符合html5 的語義化

HTML Ruby Base（<rb>）

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

ps: 拼音注解

<samp> 元素

用于標(biāo)識計(jì)算機(jī)程序輸出，通常使用瀏覽器缺省的 monotype 字體（例如 Lucida Console）。

HTML 中的

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

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

ps: 下腳標(biāo)

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

ps: 上腳標(biāo)

HTML 元素

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

HTML <map>

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

HTML <track> 元素

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

HTML <object> 元素

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

ps: 支持引入的資源類型

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

關(guān)于支持資源類型的測試

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

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

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

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

html是什么文件

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

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

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

HTML由來

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

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

網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)(如：腳本語言、公共網(wǎng)關(guān)接口、組件等)，可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。

HTML特點(diǎn)

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

HTML文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是WWW盛行的原因之一，其主要特點(diǎn)如下：

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

2、可擴(kuò)展性，HTML語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，HTML采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。

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

在線咨詢

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

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML常用標(biāo)簽

a標(biāo)簽

table標(biāo)簽

img標(biāo)簽（圖片）

感想：

您的項(xiàng)目需求