HTML 常用標(biāo)簽

a 標(biāo)簽

屬性

• href 鏈接地址
• target 指定在哪個(gè)頁(yè)面打開鏈接
• download 用來(lái)下載整個(gè)網(wǎng)頁(yè)，但很多瀏覽器中不支持
• rel=noopener 后面講 JS 的時(shí)候才會(huì)具體提到

作用

• 跳轉(zhuǎn)外部頁(yè)面
• 跳轉(zhuǎn)內(nèi)部錨點(diǎn)
• 跳轉(zhuǎn)到郵箱或電話等

屬性 href 的取值

網(wǎng)址

• https://google.com

• http://google.com

• //google.com

  無(wú)協(xié)議網(wǎng)址瓣蛀，自動(dòng)選擇使用 http/https胖秒，具體原因等學(xué)了 http 后才知道

  打開無(wú)協(xié)議網(wǎng)址超鏈接會(huì)經(jīng)歷的步驟：

  1. 打開 http://127.0.0.1:8080/a-href.html
  2. 點(diǎn)擊屬性「href=“//google.com”」 的超鏈接，// 會(huì)繼承當(dāng)前前綴鸦概，即「http」箩张，補(bǔ)全后為「http://google.com」
  3. 跳轉(zhuǎn)到「http://www.google.com」
  4. 跳轉(zhuǎn)到「https://www.google.com」

路徑

• /a/b/c 以及 a/b/c

  http 路徑與文件路徑不同。在哪個(gè)目錄下打開了 http 服務(wù)窗市，那個(gè)目錄就是根目錄先慷。如果位于根目錄，那么絕對(duì)路徑 /a/b/c 與相對(duì)路徑 a/b/c 相同谨设。

• index.html 以及 ./index.html

  均為當(dāng)前目錄下的文件

id

• #xxx

  頁(yè)面跳到該 id=xxx 處熟掂，地址也會(huì)加上 #xxx

  <p id=13>13</p>
  <!-- 點(diǎn)擊后地址變成 http://127.0.0.1:8080/a-href.html#13 -->
  <a href="#13">跳到13處</a>
  

偽協(xié)議

• javascript:代碼;

  只要點(diǎn)擊 a 標(biāo)簽，javascript 就會(huì)執(zhí)行那部分代碼扎拣。早期的用法赴肚，現(xiàn)在基本上不用這個(gè)用法∷囟澹現(xiàn)在常用空的偽協(xié)議來(lái)滿足需求。

  <a href="javascript:;">空的偽協(xié)議 (什么都不會(huì)發(fā)生)</a>
  <a href="">空 (會(huì)刷新頁(yè)面)</a>
  <a href="#">#號(hào) (不會(huì)刷新頁(yè)面 但會(huì)回到頁(yè)面頂端)</a>
  

• mailto:郵箱

  點(diǎn)擊該 a 標(biāo)簽誉券，會(huì)直接跳轉(zhuǎn)到已輸好郵箱地址的發(fā)郵件頁(yè)面

• tel:手機(jī)號(hào)

  手機(jī)頁(yè)面打開時(shí)指厌，點(diǎn)擊該 a 標(biāo)簽，會(huì)直接跳轉(zhuǎn)到已經(jīng)輸好手機(jī)號(hào)碼的撥號(hào)界面

屬性 target 的取值

內(nèi)置名字

• _self

  在當(dāng)前頁(yè)面打開踊跟，為默認(rèn)值

• _blank

  在新頁(yè)面打開

• _top

  在頂層頁(yè)面打開踩验。假設(shè)頁(yè)面 x 通過(guò) iframe 引用另一個(gè)頁(yè)面 y ( y 的內(nèi)容顯示在 x 中)，頁(yè)面 y 中有一 a 標(biāo)簽商玫，那將該 a 標(biāo)簽的 target 設(shè)為 _top 時(shí)箕憾，點(diǎn)擊 a 標(biāo)簽，頁(yè)面 x 會(huì)導(dǎo)向 a 標(biāo)簽的 href; 而將 a 標(biāo)簽的 target 設(shè)為 _self時(shí)拳昌，點(diǎn)擊 a 標(biāo)簽袭异，頁(yè)面 y （位于頁(yè)面 x 中） 會(huì)導(dǎo)向 a 標(biāo)簽的 href

• _parent

  會(huì)在上一層頁(yè)面打開

程序員命名

• 自定義 window name ( a 標(biāo)簽中 target=xxx )

  如果沒(méi)有 xxx 窗口，那就新建一個(gè)窗口且命名為 xxx炬藤；如果已存在 xxx 窗口御铃，那就在 xxx 窗口打開

  <a  target="xxx">target=xxx (google)</a>
  <a  target="xxx">target=xxx (baidu)</a>
  

  配合 iframe 使用(令 iframe 標(biāo)簽中 name=xxx, src="") 可以做到點(diǎn)擊 a 標(biāo)簽來(lái)控制 iframe 中的頁(yè)面顯示

  <a  target="xx">target=xx (google)</a>
  <a  target="xx">target=xx (baidu)</a>
  <div>
    <iframe style="border:none; width:100%" src="" name="xx"></iframe>
  </div>
  

屬性 download

作用

下載頁(yè)面而非打開頁(yè)面

問(wèn)題

少有瀏覽器支持，尤其是手機(jī)瀏覽器不支持

table 標(biāo)簽

相關(guān)標(biāo)簽

• table
• thead
• tbody
• tfoot
• tr (r: row)
• td (d: data)
• th (h: head)

table 按結(jié)構(gòu)可分為三部分： thead, tbody, tfoot. thead, tbody, tfoot 的書寫順序不影響他們最終的顯示順序沈矿。tbody 不可省略上真，其他兩個(gè)可省略。這三個(gè)部分又可由單個(gè)或多個(gè) tr 組成羹膳。

tr 中包括一行所有項(xiàng)睡互，每一項(xiàng)根據(jù)其功能可分為 td 或 th。

example 1

<table>
    <thead>
        <tr>
            <th>數(shù)字</th>
            <th>英文</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>one</td>
        </tr>
        <tr>
            <td>2</td>
            <td>two</td>
        </tr>
        <tr>
            <td>3</td>
            <td>three</td>
        </tr>
    </tbody>
</table>

example 2

<table>
    <thead>
        <tr>
            <th></th>
            <th>小紅</th>
            <th>小明</th>
            <th>小亮</th>
    </thead>
    </tr>
    <tbody>
        <tr>
            <th>語(yǔ)文</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <th>數(shù)學(xué)</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>

        </tr>
        <tr>
            <th>英語(yǔ)</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>總分</th>
            <td>3</td>
            <td>6</td>
            <td>9</td>
        </tr>
    </tfoot>
</table>

相關(guān)樣式

• table-layout

  • auto 根據(jù)內(nèi)容調(diào)節(jié)列寬
  • fixed 每列等寬

• border-collapse

  單元格之間的邊界是否合并

• border-spacing

  單元格之間的間隔大小

常用

table{
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

img 標(biāo)簽

作用

發(fā)出 get 請(qǐng)求溜徙，展示一張圖片

屬性

• src

  圖片地址

• alt

  圖片加載失敗后會(huì)顯示的文字

• height & weight

  只設(shè)置其中一個(gè)時(shí)湃缎，另一個(gè)自適應(yīng)

事件

• onload / onerror

  加載成功或失敗。

為了好的用戶體驗(yàn)蠢壹，可以在檢測(cè)到圖片加載失敗后顯示一張預(yù)存的錯(cuò)誤圖嗓违。

<img id="xxx" height=200 src="spring.png" alt="spring">
<script>
  xxx.onload = function () {
    console.log("圖片加載成功");
  }
  xxx.onerror = function () {
    console.log("圖片加載失敗");
    xxx.src = "spring.jpg";
  }

響應(yīng)式

為了適應(yīng)手機(jī)寬度，要限制圖片寬度不要超出顯示寬度图贸。

img {
    max-width: 100%;
}

可替換元素

考試被問(wèn)概率 30%蹂季，參考 可替換元素

可替換元素自身的內(nèi)容不受當(dāng)前文檔的 CSS 樣式的影響。CSS 樣式只影響該可替換元素位于當(dāng)前文檔中的位置疏日。

典型的可替換元素有 iframe, embed, img.

其他感想

• 學(xué)習(xí)要持之以恒
• 不要在雄心壯志時(shí)定下不合理的目標(biāo)
• 種一顆樹最好的時(shí)機(jī)是十年前偿洁，其次是現(xiàn)在