索引 web 圖片標簽 註意 進行 tps 由於 h標簽 變量

一.基本塊級標簽

1.HTML標簽的分類：

a.塊級標簽：顯示為塊狀，獨占一行，自動換行。 b.行級標簽：在一行中，從左往右依次排列，不會自動換行。

2.h標簽（標題標簽）

h標簽：標題標簽，顯示為黑體加粗！！！

標題標簽，共分六種：h1~h6:h1最大，h6最小！

<h1>這是h1標簽</h1>
        <h2>這是h2標簽</h2>
        <h3>這是h3標簽</h3>
        <h4>這是h4標簽</h4>
        <
 
h5>這是h5標簽</h5>
        <h6>這是h6標簽</h6>

2.hr標簽

<!--hr標簽：表示一條水平線--> <hr />自閉和標簽

3.p標簽（段落標簽）

p標簽：表示段落標簽。相當於我們文章中的一段文字！！

4.<br />換行符

註意：在代碼中，直接回車換行，瀏覽器不認識。必須使用換行符<br />告訴瀏覽器這裏要換行。

5.pre標簽（預格式標簽）

pre標簽會保留代碼中的空格，回車等符號，直接在瀏覽器中顯示。 pre標簽常用於在網頁中顯示代碼，保留代碼格式！！！

6.blockquote（塊引用標簽）

blockquote:塊引用標簽。表明一段話是從其他網站引用的。 有一個重要屬性：cite=""表示這段話的引用來源，常放一個網站地址。 但是瀏覽器顯示並沒有任何區別。

二.基於布局的塊級標簽

1.無序列表

有多個列表項組成，每個列表前面帶小黑點，稱為無序列表。用<ui>表示。列表中的每一個小項用<li>表示。

         <ul>
            <li>這是無序列表第一項</li>
            <li>這是無序列表第二項</
 
li>
            <li>這是無序列表第三項</li>
            <li>這是無序列表第四項</li>
        </ul>

2.有序列表

有序列表用<ol>標簽，列表中的每一個小項用<li>表示。

       <ol>
            <li>這是有序列表第一項</li>
            <li>這是有序列表第二項</li>
            <li>這是有序列表第三項</li>
            <li>這是有序列表第四項</li>
        </ol>
        

3.定義列表（定義描述列表）

定義列表<dl>，裏面有一個標題<dt>,有多個描述項<dd>. 標題默認頂格顯示，描述項相對標題向後縮進。

        <dl>
            <dt>這是dl列表的標題</dt>
            <dd>這是dl列表的描述項1</dd>
            <dd>這是dl列表的描述項2</dd>
            <dd>這是dl列表的描述項3</dd>
            
        </dl>

4.圖片組合標簽（了解）

組合標簽<figure>,裏面有兩部分； ①圖片<img/>後續講解； ②圖片的標題：<figcaption></figcaption>

5.分區標簽div（最常用的標簽）

沒有任何的特殊作用，僅僅起到一個包裹的功能，常用於網頁中劃分區塊。 此標簽中可以包裹任何內容，需要配合CSS一起使用。

三.基本行級標簽

1.塊級標簽與行級標簽的區別(很重要！！！)

① 塊級標簽：默認寬度100%(占滿一行)； 塊級標簽自動換行(獨占一行，右邊不能有任何東西)； 塊級標簽可以使用CSS設置寬度高度！ ② 行級標簽：默認寬度由內容撐開(內容多寬、寬度就占多寬)； 行級標簽不會自動換行(一行當中，從左往右依次排列)； 行級標簽的寬度高度不能設置！

2.常見的行級標簽

1、span標簽：

① span標簽只是包裹作用，沒有任何其他含義； ② span作用與div類似，需配合CSS使用。只不過div是塊級標簽、span是行級標簽。

2、[em/strong i/b 區別] ：{重點}

① em和i都能傾斜。strong和b都能加粗！但是，i和b僅僅是單純的傾斜加粗，而em和Strong多了強調的語義。 ② em和strong都表示強調，但是strong強調的級別更高！ 註意： 1、強調的目的：讓搜索引擎知道網頁重點強調的內容！便於搜索引擎顯示！ 2、Strong和em都可以多層嵌套，表示強調程度的遞增！

3、q標簽

q標簽：表示短引用 。 cite屬性：用於聲明引用的來源。 【常用的引用標簽】 <blockquote>用於引用一段內容</blockquote> <q>用於引用一句話</q> <cite>常用於引用作品名、書畫名等</cite> 相同點：三個引用標簽，都用cite屬性表示引用來源 不同點：① 引用的內容不同。 blockquote->一段話，q->一句話，cite->作品名 ② 顯示的默認效果不同。 blockquote->默認整段向右縮進； q->默認加引號； cite->默認傾斜！

4、small和big

small標簽：將字體縮小一號； big標簽：將字體放大一號； 註意： ① small和big可以多層嵌套，直到字體達到最小或最大為止； ② 這倆標簽已經被淘汰，並不建議使用。

5、img 圖片標簽

① src屬性：表示圖片的路徑

[圖片路徑的合法方式]

a.網絡鏈接：由於圖片在其他網站，如果其他網站刪除圖片，我們也不能訪問，所以不建議使用這種方式； <img src="https://www.baidu.com/img/bd_logo1.png" /> b.絕對路徑：使用絕對路徑的圖片，只有在本機使用file協議才能訪問！所以，嚴禁使用這種方式！ <img src="file:///E:/icon.jpg" /> c.相對路徑： ① 圖片與當前文檔在同一層文件夾：直接寫圖片名 eg:<img src="icon.jpg" /> ② 圖片在當前文檔的下一層文件夾：文件夾名/圖片名 eg:<img src="img/icon.jpg" /> ③ 圖片在當前文檔的上一層文件夾： ../圖片名 (../表示後退一層) eg:<img src="../icon.jpg" /> 但是，一定要註意：圖片必須包含在項目裏面，不能訪問項目外的圖片。

② height:圖片的高度 width：圖片的寬度

eg:<img src="img/icon.jpg" height="500" width="10" />

③ title：圖片的標題，也就是鼠標指上後看到的提示文字

eg:<img src="img/icon.jpg" title="鼠標指上後看到的提示文字" />

④ alt: 圖片無法加載時顯示的文字。省略alt，將默認顯示title內容。

eg:<img src="img/icon.jpg" alt="圖片無法加載時顯示的文字" />

⑤ align：圖片周圍的文字相對於圖片如何對齊。

可選值：top->圖片頂部 center->圖片中部 bottom->圖片底部 eg: <img src="img/icon.jpg" align="top" />12345

6.a標簽（超鏈接）

a標簽屬性

①href屬性：表示超鏈接需要跳轉的頁面。 A.可以寫網絡地址： <a href="http://www.baidu.com">這是一個超鏈接</a> B.可以打開本地html文件： 采用相對路徑確定文件地址。與img標簽確定方式相同。 ②title屬性：鼠標指上後顯示的提示文字。 ③target屬性：設置新頁面打開的窗口位置 可選值：-self自身頁面打開（默認）-blank新窗口打開

【超鏈接的特殊應用】

1.功能性鏈接：（了解） mailto：//點擊鏈接給指定郵箱發送郵件 代碼示例： <a href="mailto:[email protected]" >發郵件！！</a> tencent://message/?uin=1097270356 點擊與指定QQ聊天 還有：tell：//手機端點擊打電話； message：//手機端點擊發送短信； ftp://使用ftp協議進行文件的上傳下載； 2.錨鏈接：（重點） ①在頁面的指定位置設置一個錨點，用name屬性表示錨點的名字； <a name="top"></a> ②將超鏈接的href屬性，設置為#加錨點的名字； <a href="#top">點擊鏈接，跳轉到top錨點位置</a> >>>頁面間錨鏈接 ①在新頁面的指定位置設置一個錨點，用name屬性表示錨點的名字； <a name="top"></a> ②將超鏈接的href屬性，設置為“新頁面地址#加錨點名字”； <a href="test.html#top">點擊鏈接，跳轉到test.html的top錨點位置</a>

7.W3c規範：

1.W3c:萬維網聯盟，負責制定和維護Web行業開發標準； 2.W3c要求的規範： ①規範中倡導兩個分離： 內容與表現分離；（HTML與CSS分離開） 內容與行為分離：（HTML與JavaScript分離開） ②HTML語言要遵循語義化！！ ③關於代碼書寫的規範： 標簽與屬性必須要小寫 標簽必須要閉合 屬性值必須用引號引起來（img src="屬性值"） 標簽必須正確嵌套（不能交叉，塊級標簽可以包裹行級標簽，行級標簽不能包裹塊級標簽）

8. 其他的行級標簽:[了解即可]

(1)u標簽:帶下劃線

代碼： <u>u標簽帶下劃線</u> <span style="text-decoration: underline;">css實現下劃線</span>

(2)s標簽：帶刪除線

代碼： <s>s標簽帶刪除線</s> <span style="text-decoration: line-through;">css實現刪除線</span>

(3)定義專業術語(dfn 定義專業術語 abbr 專業術語縮寫詞)

提示搜索引擎，當前為一段計算機代碼。 但是code不會保留代碼格式，需要配合pre標簽共同使用。

(5)var:表示變量

代碼： <var>x</var>+<var>y</var>=<var>z</var>

(6)bdo：定義文本的顯示方向

rtl 從右向左 ltr從左向右

(7)kbd：需要用戶輸入的文字

(8)sup，sub:上下標

(9)time:表示時間

HTML標簽部分（塊級/行級）