首頁  >  文章  >  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教學

以上是html中的重難點標籤的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.im。如有侵權,請聯絡admin@php.cn刪除