當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

【温故知新】HTML学习笔记（上）

發布時間：2025/3/20 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了【温故知新】HTML学习笔记（上）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML固定結構：

HTML標簽分類：

1、雙標簽 ?<head> </head> ?一對夫妻
2、單標簽 ?<br /> ? 數量非常少

其中“/”稱之為關閉符

HTML標簽關系：

1、嵌套關系（父子關系）

2、并列關系（兄弟關系）

用記事本來書寫開發效率很低，很容易忽視錯誤。實際工作中，為了效率，推薦使用Subline工具。
生成HTML骨架快捷鍵：
輸入“html:5”，按下“TAB”鍵。
輸入“!”，按下“TAB”鍵。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>淘寶網淘你喜歡</title> </head> <body>雙十二馬上要來了！ </body> </html>

預覽時，直接單擊鼠標右鍵，在瀏覽器中打開即可。

<!DOCTYPE html> ：HTML的版本號，這里表示HTML 5的版本，目前基本都是使用該版本。
lang="en" ：語言，雖然這里是"en" ，但是也可以錄入中文。
<meta charset="UTF-8"> ：字符集，"UTF-8"是目前最常用的字符集編碼方式，常用的還有GBK和GB2312，GB2312（國標）是簡體中文，包括了6763個漢字，BIG5是為了繁體中文港澳臺等使用，GBK包含全部中文字符，是GB2312的擴展，加入了繁體字的支持，并且兼容GB2312，而UTF-8則包含了全世界所有國家用到的字符。

HTML標簽語義化

就是白話，一眼看去，就知道那個是重點，結構是什么，知道每塊的內容是干什么的。核心是在合適的地方給一個合理的標簽，它遵循的原則是，先確定語義的HTML，再選合適的CSS。

HTML常用的標簽

HTML的標簽有很多，正常學習時查詢手冊即可。
這里首先介紹一下基本的排版標簽。
1、標題標簽
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
HTML有6個等級的標題，依次變小，可作為標題使用，并且依據重要性遞減。

2、段落標簽
<p> 文本內容 </p>
默認情況下，文本在一個段落中會根據瀏覽器窗口大小自動換行。

3、水平線標簽
<hr /> 是一個單標簽
就是一條線。

4、換行標簽
<br /> 是一個單標簽
就是強制換一行，直接按回車/空格是沒有效果的，區別于段落標簽的是行間距。

5、div和span標簽
div和span沒有語義，是我們網頁布局的兩個主要盒子，比如CSS+DIV。
<div> </div> : div一行只能有一個
<span> </span> : span一行可有多個

6、文本格式化標簽
粗體： <strong> </strong> 語義強烈，推薦使用
? ? ? ? ? ?<b> </b>
斜體： <em> </em> 語義強烈，推薦使用
? ? ? ? ? ?<i> </i>
加刪除線： <del> </del> 語義強烈，推薦使用
? ? ? ? ? ? ? ? ? <s> </s>
加下劃線： <ins> </ins> 語義強烈，推薦使用
? ? ? ? ? ? ? ? ? <u> </u>

7、圖像標簽
<img src="圖像URL" /> ? 是一個單標簽
src是其中一個屬性，表明圖像的路徑。
alt是其中一個屬性，是替換文本（提示文本），要是圖像顯示不出來，可以以文字進行提示。
titile是其中一個屬性，鼠標放上去（懸停時）會有說明文本。
width/height是其中的屬性，表明圖像的寬度和高度，正常改一個值就可以了，自動等比縮放。
border是其中一個屬性，可以給圖像添加邊框。

8、鏈接標簽
<a herf="跳轉目標" target="目標窗口的彈出方式"> 這里放文本或者圖像 </a>
href是屬性，指定鏈接目標的url地址，外部鏈接http協議不能省略（例如http://www.baidu.com），要是鏈接已經有了，但是還不可以跳轉，那就以“#”代替。
target是屬性，指定鏈接頁面的打開方式，其取值有self（默認 “_self”）和blank（新窗口打開“_blank”）兩種。

9、錨點定位
通過定位（創建錨點）的方式，快速去往頁面某一個位置（目標內容）。
分為兩步實現：
使用<a href="#id名"> 鏈接文本 </a> 創建鏈接文本
使用相應的id名標注跳轉目標的位置（使用id屬性 id="id名"）

10、base標簽
<base /> 是一個單標簽
在head部分使用，比如頁面中有多個鏈接，可以設置整體鏈接的打開狀態。

11、特殊字符標簽
空格： 
小于號<：<
大于號>：>
和號&：&
人民幣￥：¥
版權?：©
注冊商標?：®
攝氏度°：°
正負號±：±
乘號X：×
除號÷：÷
平方（上標2）2：²
立方（上標3）3：³

12、注釋標簽

多寫注釋是非常好的寫代碼習慣，瀏覽器不會執行。

13、路徑介紹

相對路徑

在同一級路徑：直接輸入 <img src="aa.jpg" />
在下一級路徑：需要經過相應文件夾，以“/”隔開 <img src="images/aa.jpg" />
在上一級路徑：上一級需要輸入“../”<img src="../aa.jpg" />

絕對路徑

完整的路徑地址 <img src="D:\project\images\aa.jpg" />
這種方式基本不會用到。

14、列表標簽
容器里面裝載著文字或者圖表的一種形式叫列表。
列表最大的特點是整齊有序。
分為以下三類：

無序列表：依次羅列，沒有順序，<ul>標簽里面只能放<li>，而在<li>里面則可以容納所有標簽，無序列表會帶有自己的樣式屬性，這部分是CSS的功能；

有序列表：有上下順序，<ol>標簽里面只能放<li>，而在<li>里面則可以容納所有標簽

<ol>，會自動帶有1、2、3、4...的順序，具體樣式也是在CSS里面調整；
? ? ?<li>列表項1</li>
? ? ?<li>列表項2</li>
? ? ?<li>列表項3</li>
? ? ?...
</ol>

自定義列表：常用于對術語或者名詞進行解釋和描述，列表項前面沒有任何項目；

總結

以上是生活随笔為你收集整理的【温故知新】HTML学习笔记（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【转摘】Word中查找与替换的妙用
下一篇：【温故知新】HTML学习笔记（表格）