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)部錨點
跳轉(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)形式：

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

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

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

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

由于此方式能夠自動補齊相關(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：;">點擊后無任何點擊或刷新等動作的反應(yīng)</a>

錨點鏈接

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

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

mailto：郵箱

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

tel：手機號

<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

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

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；自動計算每一行的寬高

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

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

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

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% 所有的圖片在手機上都自適應(yīng)寬度，寬度最大為100%。

事件

onload/onerror 監(jiān)聽圖片是否加載成功，加載成功時用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>

監(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標(biāo)簽中H標(biāo)簽又稱標(biāo)題標(biāo)簽。在建網(wǎng)站中會使用到，不到的段落格式需要使用不同的標(biāo)簽。標(biāo)簽可以反映一段文字的大小、顏色、縮寫、換行、間距等等內(nèi)容，根據(jù)全文的實際情況靈活應(yīng)用標(biāo)簽，特別是HTML標(biāo)題標(biāo)簽將對網(wǎng)站文章的質(zhì)量起到非常重要的作用。我們圍繞著這個標(biāo)簽詳細(xì)講一下如何正確使用標(biāo)題標(biāo)簽。

HTML標(biāo)題標(biāo)簽的種類：
HTML標(biāo)題標(biāo)簽總共有6個，分別為：H1,H2,H3,H4,H5,H6。
h1代表最大，它的重要性最高，字體也最大。
h6代表最小，字體最小，重要性也最小。
h1，h2，h3，h4，h5，h6，作為HTML標(biāo)題標(biāo)簽，顯示的文字樣式為粗體，與html粗體標(biāo)簽效果一樣。

HTML標(biāo)題標(biāo)簽的重要性：
H1-H6以重要性遞減，它可以讓頁面的層級關(guān)系更加清晰。

示例：
<h1>一級標(biāo)題</h1>
<p>段落</p>
<div>
<h2>二級標(biāo)題</h2>
<p>...</p>
<div>
<h3>三級標(biāo)題</h3>
<p>...</p>
<div>
<h4>四級標(biāo)題</h4>
<p>...</p>
</div>
</div>
</div>

根據(jù)文章實際的段落意義正確使用代表不同層級關(guān)系的HTML標(biāo)題標(biāo)簽，瀏覽器才能通過HTML解析出與本意一致的表達效果。

.br 強制換行標(biāo)簽

讓后面的文字、圖片、表格等等，顯示在下一行

碼海無際<br>碼海無際

2.p 換段落標(biāo)簽

在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標(biāo)簽，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落，而段落的標(biāo)簽就是

<p>碼海無際</p><p>碼海無際</p>

3.hr 水平分割線標(biāo)簽

在網(wǎng)頁中常?？吹揭恍┧骄€將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過插入圖片實現(xiàn)，也可以簡單地通過標(biāo)簽來完成，hr 就是創(chuàng)建橫跨網(wǎng)頁水平線的標(biāo)簽。

碼海無際<hr>碼海無際

4.div 分區(qū)顯示標(biāo)簽

分區(qū)顯示標(biāo)簽，也稱之為層標(biāo)簽，常用來編排一大段的HTML段落，也可以用于格式化表，和 p 很相似，是塊狀元素，經(jīng)常嵌套使用。

<div>碼海無際</div><div>碼海無際</div><div>  <div>碼海無際</div>  <div>碼海無際</div></div>

5.span 行內(nèi)標(biāo)簽

用來組合文檔中的行內(nèi)元素，沒有固定的格式表現(xiàn)。當(dāng)對它應(yīng)用樣式時，它才會產(chǎn)生視覺上的變化。

<span>碼海無際</span><span>碼海無際</span>

6.pre 預(yù)格式化標(biāo)簽

pre 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。

<pre>  碼海無際  碼海無際</pre>

7.ul 無序列表標(biāo)簽

無序列表的各個列表項之間沒有順序級別之分，是并列的。

<ul>  <li>碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ul>

注意：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。 2. <li>與</li>之間相當(dāng)于一個容器，可以容納所有元素。 3. 無序列表會帶有自己樣式屬性，但是不推薦使用，一般會用CSS設(shè)置。

8.ol 有序列表標(biāo)簽

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義

1.格式：

<ol type="符號類型">    <li type="符號類型"></li>    <li type="符號類型"></li></ol>

2.有序列表的type屬性值:

1：阿拉伯?dāng)?shù)字1.2.3等等，默認(rèn)type屬性值
A：大小字母A、B、C等等
a：小寫字母a、b、c等等
Ⅰ：大寫羅馬數(shù)字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
?。盒懥_馬數(shù)字ⅰ、ⅱ、ⅲ、ⅳ等等

3.有序列表的value屬性值:

指定一個新的序列數(shù)字起始值

4.列表可以進行嵌套

<ol>  <li>碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ol><hr><ol type="A">  <li>碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ol><hr><ol>  <li>碼海無際</li>  <li type="A">碼海無際</li>  <li>碼海無際</li></ol><hr><ol>  <li>碼海無際</li>  <li>碼海無際</li>  <li value="6" type="A">碼海無際</li>  <li>碼海無際</li>  <li>碼海無際</li></ol><hr><ol>  <li>碼海無際</li>  <li>碼海無際</li>  <li>    <ol type="A">      <li>志存高遠(yuǎn)</li>      <li>志存高遠(yuǎn)</li>    </ol>  </li>  <li>碼海無際</li>  <li>碼海無際</li></ol>

9.dl 自定義型列表標(biāo)簽

對列表條目進行簡短的說明

<dl>  <dt>軟件說明：</dt>  <dd>這是軟件說明</dd>  <dt>軟件界面：</dt>  <dd>這是軟軟件界面</dd></dl>

10.center 居中對齊標(biāo)簽

居中對齊

<center>碼海無際</center>

在線咨詢

上一篇：HTML5格式問題，你遇到了嗎？
下一篇：從小白到專家：JavaScript 延展操作符的幾個基本用法

您的項目需求

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

整合營銷服務(wù)商