HTML常見標(biāo)簽，可替換元素，全局屬性

一、 常見標(biāo)簽

1. 標(biāo)題標(biāo)簽: <h1~h6>，主要設(shè)置標(biāo)題，字體依次由大到小。
標(biāo)題標(biāo)簽<h1~h6>
2. 列表標(biāo)簽
  • <ol>+<li>(ordered list+list item):有序列表
有序列表<ol>+<li>

  • <ul>+<li>(unordered list +list +item):無序列表

    無序列表<ul>+<li>

  • <dl>+<dt>+<dd>(description list + term +data):自定義列表

自定義列表<dl>+<dt>+<dd>
3. 段落標(biāo)簽

<p>:包裹文段

段落<p>

4. 行標(biāo)簽

<span>：用于組合行內(nèi)元素，方便定位設(shè)置樣式

行標(biāo)簽<span>

5. 塊標(biāo)簽

<div>:用于劃分一個區(qū)塊，常用于頁面布局

塊標(biāo)簽div

6. 格式標(biāo)簽
  • <pre>(preview):展示有格式的內(nèi)容，在html里面多個空白字符也會只合并成一個，可以和code一起使用，
//&lt是HTML實體，表示小于號，&gt也是html實體，表示大于號
<pre>
    <code>
      &lt;div&gt;
        &lt;div&gt;  hello &lt;/div&gt;
      &lt;/div&gt;
    </code>
  </pre>
格式內(nèi)容
  • <hr>：表示分割線，是自閉合標(biāo)簽
    分割線<hr>
  • <br>(break):表示換行
    換行<br>
7. 字體突出標(biāo)簽

  • <mark>:標(biāo)記文段，標(biāo)明該文段出錯或者做標(biāo)記。

    標(biāo)記mark

  • <em>(emphasis): 選擇一部分的文字表示強(qiáng)調(diào)，語氣比較輕，標(biāo)記的文字會變成斜體，后面也可以用css選中em來單獨(dú)設(shè)置樣式。

    強(qiáng)調(diào)em

  • <strong>:強(qiáng)調(diào)性更強(qiáng),有很多表現(xiàn)形式可以表示強(qiáng)調(diào)，語氣比<em>強(qiáng)，字體加粗。
    強(qiáng)調(diào)strong
  • <b>(bold):只是表示粗體
    粗體<b>

注意：

  • Bold和Strong有什么區(qū)別：

Bold是一個物理狀態(tài)，只是表示一個粗體，沒有其他的意思。
Strong是一個邏輯狀態(tài)，可以用很多形式來表示強(qiáng)調(diào)，比如說改變文字的顏色或者字體的大小，或者加下劃線或者表達(dá)其他樣式，不僅限加粗。

  • Emphasis和Strong區(qū)別：

不同點(diǎn)：Strong比Emphasisi強(qiáng)調(diào)性更強(qiáng),Strong更多的是表示警告，非常重要，而Emphasis只是改變一句話的意思，語氣比較弱。
相同點(diǎn)：Strong和Emphasis都可以分別通過嵌套來增加相對重要性或強(qiáng)調(diào)重點(diǎn)。

8. 引用標(biāo)簽

blockquote:表示引用

//引用
<blockquote>"求知若饑 虛心似谷"</blockquote>
引用blockquote

二、 重點(diǎn)標(biāo)簽

1. iframe
  • `<iframe>作用：能夠?qū)⒘硪粋€HTML頁面嵌入到當(dāng)前頁面中。
<iframe width="200" height="100"  src="http://baidu/com" referrepolicy="no-referrer" sandbox="allow-scripts">
  • iframe屬性
    ① width: 高度
    ② height: 高度
    ③ src：嵌套頁面的地址
    ④referrepolicy：向服務(wù)器發(fā)送嵌套的請求注明嵌套地址來源
<body>
 <h1>百度</h1>
  <iframe src="http://baidu.com" frameborder="0"></iframe>
</body>
頁面嵌入
2. 超鏈接：

<a>主要格式：<a href="鏈接地址" target="以什么方式打開">可以點(diǎn)擊的文字</a>

  • 超鏈接作用：跳轉(zhuǎn)外部頁面、跳轉(zhuǎn)內(nèi)部錨點(diǎn)、跳轉(zhuǎn)到郵箱或電話

  • 超鏈接屬性：href、target、download、rel=noopener


    a鏈接
2.1 href的取值

  • 網(wǎng)址
    https://baidu.com
    http://baidu.com
    //jirengu.com(錯誤寫法）

  • 路徑
    /a/b/c以及a/b/c
    a.png或者./a.png

  • 偽協(xié)議
    javascript: void 0:沒有跳轉(zhuǎn)效果；
    mailto: hunger@jirengu.com：點(diǎn)擊就會調(diào)取系統(tǒng)郵箱發(fā)送郵件；
    tel:1234567890：在手機(jī)就會自動打開撥號盤，寫入號碼，直接點(diǎn)撥號即可。

  • 錨點(diǎn)，指定跳轉(zhuǎn)，直接定位到指定位置
    ①href="#xxx" :跳轉(zhuǎn)到xxx


    錨點(diǎn)
錨點(diǎn)

②href="#" ：跳轉(zhuǎn)到頁面開頭


image.png
2.2 target屬性：主要是指定和何處顯示鏈接的 資源
  • _blank:新窗口加載
  • _self:在當(dāng)前頁面加載，默認(rèn)屬性
  • _parent:在當(dāng)前頁面框架的父級框架加載，如果父級不存在就在當(dāng)前頁面加載
  • top:在當(dāng)前頁面框架的最頂級框架加載，如果最頂級框架不存在就在當(dāng)前頁面加載。
2.3 dowmload屬性

作用：下載url而不是打開頁面
注意：

  • 此屬性適用于同源URL，會提示用戶保存為本地文件；
  • 如果此屬性有值，用值作為下載文件名。
//直接跳轉(zhuǎn)到下載
<a  download>下載</a>
下載
3. table
3.1相關(guān)標(biāo)簽
  • table：表格
  • thead：表格頭部
  • tbody: 表格中部
  • tfoot: 表格尾部
  • tr: 行
  • td: 列
  • colgroup: 歸類
  • caption：標(biāo)題
3.2 屬性

colspan:合并表格

3.3 邊框合并樣式

border-collapse:collapse

表格<table>
4. 圖片標(biāo)簽

<img>:可以插入圖片

  • 用法：<img src="圖片地址" alt="加載失敗提示">

  • 屬性：alt/width/height/src
    ①src:圖片地址
    ②width和height：可以設(shè)置圖片的寬高,一般在css設(shè)置。
    ③alt有2個作用：當(dāng)圖片加載失敗的時候，會有提示作用；讓讀屏器可以識別圖片內(nèi)容。

  • 特性：是可替換元素

圖片img
PS：可替換元素
  • 可替換元素展現(xiàn)效果不是由css控制，是一種外部對象，對于外觀的渲染獨(dú)立于css。
  • 典型的可替換元素
<iframe>
<video>
<embed>
<img>

三、全局屬性 ：

所有標(biāo)簽都共有的屬性

1. class

標(biāo)記標(biāo)簽，表示定位不同元素可以擁有相同的class,一個元素可以擁有多個class（一般情況下都是可以使用）

2. id

標(biāo)記標(biāo)簽，表示定位，表示獨(dú)一無二的身份，（頁面大區(qū)塊建議使用）

3. style:可以設(shè)置行內(nèi)樣式，
//設(shè)置css樣式
<p style="color: blue; font-size: 40px">hello</p>
設(shè)置css樣式
4. title:鼠標(biāo)放在所選區(qū)域就會有提示效果，一般是a鏈接使用，一般是單行，
p title="hello world" style="color: blue; font-size: 40px">hello</p>
提示效果
5. contenteditable:可以編輯效果，在展示情況下可以同時編輯。
//可以一邊展示，一邊編輯
<p title="hello  world" style="color: blue; font-size: 40px;"   contenteditable>hello</p>
編輯效果
6. tabindex：+table鍵可以切換,切換的時候是按照序號高-低切換，-1不切換，0是最后
//+tab鍵可以切換輸入框，切換序號高-低，-1不切換，0是最后
<input type="text" tabindex=1>
<input type="text" tabindex=3>
<input type="text" tabindex=2>
<input type="text"tabindex=-1>
切換順序：1-2-3
7. hidden:讓元素隱藏，后面不需要等于任何值都會生效
//在后面直接添加hidden即可隱藏，不需要等于值
<input type="text" tabindex=1 hidden>
8. data-屬性: 自定義屬性，可以暫存一些數(shù)據(jù)在標(biāo)簽上

參考：
饑人谷課件
http://www.itdecent.cn/p/590e095700ac

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容