首頁 > 文章 > web前端 > html中的重難點標籤的用法

html中的重難點標籤的用法

王林轉載: 2021-02-18 09:47:232305瀏覽

html中的重難點標籤的用法

寫這篇文章的起因是自己最近在學習前端知識，因此特別整理了一些重點標籤的用法，方便日後複習。

1、a 標籤的用法

建立一個到其他網頁，文件，同一頁面內的位置，電子郵件地址或任何其他URL的超連結。 a標籤是特別常用的標籤，但很多用法相信大家都不太了解。

屬性：

a的href的取值:

可以是網址（最好寫成//google.com形式）路徑（/a/b/c， index.html)偽協定（js代碼，郵箱，手機號碼）ID常用於跳到頁面的某個部分

a的target取值：

##1、內建名字：

_blank(新頁面打開）_top(最上層的頁面打開，需要配合iframe使用）_parent(在上一層的頁面打開） _self(當前頁面加載，此值是預設的)

2、程式設計師自己命名：

window的name（可以為視窗指定名字，以實現在指定的視窗開啟）iframe的name，實作在指定的iframe開啟a的download

作用就是下載頁面，比較不常用。

2、img 標籤的用法

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

屬性：

alt：定義了圖像的備用文本描述height：圖像的高度width：圖像的寬度src：圖像的URL，這個屬性對a1f02c36ba31691bcfe87b2722de723b 元素來說是必要的。

響應式寫入：

例如 max-width：100%

可替換元素：

是一個可替換元素。它的 display 屬性的預設值是 inline，但它的預設解析度是由被嵌入的圖片的原始寬高來決定的，使得它就像 inline-block 一樣。你可以為設定 border/border-radius、padding/margin、width、height 等等的 CSS 屬性。沒有基線（baseline），這意味著，當在一個行內格式的上下文（an inline formatting context）中使用 vertical-align: baseline 時，圖像的底部將會與容器的文字基線對齊。

3、table標籤的用法

表示表格資料 — 即透過二維資料表表示的資訊。這個比較簡單

（學習影片分享：

html影片教學）

以下是範例程式碼

  <caption>Color names and values</caption>
  <tbody>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsla(180, 90%, 64%, 1)</code></td>
      <td><code>rgba(81, 246, 246, 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsla(38, 90%, 65%, 1)</code></td>
      <td><code>rgba(246, 188, 87, 1)</code></td>
    </tr>
  </tbody>
</table>

屬性：

align ：這個枚舉屬性指定了包含在文件中的表格必須如何對齊。有如下值:left，表格將在文件左側顯示； center，表格將在文件中央顯示； right，表格將在文件右側顯示

border：定義了表格邊框的大小。如果設定為0，這表示frame 屬性被設定為空。如果設定為1，表示表格具有1px大小的邊框。

**cellpadding：**這個屬性定義了表格單元的內容和邊框之間的空間。

**cellspacing：**這個屬性（使用百分比或像素）定義了兩個單元格之間空間的大小

**width：**此屬性定義了表格的寬度。寬度可能是像素或百分比值，寬度的百分比值將被定義為表格容器的寬度。

border-collapse: collapse合併邊框

border-spacing: 0; 邊框間距設定為0

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

4、其他感想

這些都不難，就是要記得東西比較多，需要細心一些，繼續努力吧！！！

——————部分文字資訊來自MDN、飢人谷

html中的重難點標籤的用法

相關文章