目錄

1 -> HTML概念

2 -> HTML結構

2.1 -> 認識HTML標籤

2.2 -> HTML文件基本結構 

2.3 -> 標籤層次結構

3 -> 快速生成代碼框架

4 -> HTML常見標籤

4.1 -> 註釋標籤

4.2 -> 標題標籤

4.3 -> 段落標籤

4.4 -> 換行標籤

4.5 -> 格式化標籤

4.6 -> 圖片標籤 

4.7 -> 超鏈接標籤

5 -> 關於目錄結構

【海賊王航海日誌：前端技術探索】HTML你學會了嗎？(一)_#html5

1 -> HTML概念

HTML，全稱為HyperText Markup Language，即超文本標記語言，是一種用於創建網頁的標準標記語言。HTML允許用户在網頁中加入各種元素，如文本、圖像、鏈接、表格、列表、視頻等，從而構建出結構化的文檔。

2 -> HTML結構

2.1 -> 認識HTML標籤

HTML代碼是由“標籤”構成的。

形如：

<body>hello</body>
  • 標籤名(body)放到<>中。
  • 大部分標籤成對出現。<body>為開始標籤，</body>為結束標籤。
  • 少數標籤只有開始標籤，稱為“單標籤”。
  • 開始標籤和結束標籤之間，寫的是標籤的內容。
  • 開始標籤中可能會帶有“屬性”。id屬性相當於給這個標籤設置了一個唯一的標識符(身份證號碼)。 
<body id="myId">hello</body>

2.2 -> HTML文件基本結構 

<html>
    <head>
        <title>我的第一個頁面</title>
    </head>

    <body>
       One Piece
    </body>
</html>
  • <html>標籤是整個HTML文件的根標籤(最頂層標籤)。
  • <head>標籤中寫頁面的屬性。
  • <body>標籤中寫的是頁面上顯示的內容。
  • <title>標籤中寫的是頁面的標題。

2.3 -> 標籤層次結構

  • 父子關係
  • 兄弟關係
<html>
    <head>
        <title>我的第一個頁面</title>
    </head>

    <body>
       One Piece
    </body>
</html>

其中：

  • <head>和<body>是<html>的子標籤(<html>就是<head>和<body>的父標籤)。
  • <title>是<head>的子標籤。<head>是<title>的父標籤。
  • <head>和<body>之間是兄弟關係。

可以使用F12或者右鍵審查元素，開啓開發者工具，切換到元素標籤，就可以看到頁面結構的細節了。

【海賊王航海日誌：前端技術探索】HTML你學會了嗎？(一)_#前端_02

標籤之間的結構關係，構成了一個DOM樹。

DOM是Document Object Mode(文檔對象模型)的縮寫。

【海賊王航海日誌：前端技術探索】HTML你學會了嗎？(一)_#vscode_03

3 -> 快速生成代碼框架

在Visual Studio Code中創建文件xxx.html，直接輸入！，並且按tab鍵，此時就可以自動生成代碼的主體框架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

細節解釋：

  • <!DOCTYPE html>：稱為DTD(文檔類型定義)，描述當前的文件是一個HTML5的文件。
  • <html lang="en">：lang屬性表示當前頁面是一個“英語頁面”。(有些瀏覽器會根據此處的聲明提示是否進行自動翻譯)
  • <meta charset="UTF-8">：描述頁面的字符編碼方式。沒有這一行可能會導致中文亂碼。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：name="viewport"其中viewport指的是設備的屏幕上能用來顯示網頁的哪一塊區域；content="width=device-width, initial-scale=1.0"在設置可視區和設備寬度等寬，並設置初始縮放為不縮放。(這個屬性對於移動端開發更重要一些)。

4 -> HTML常見標籤

4.1 -> 註釋標籤

註釋不會顯示在界面上。目的是提高代碼的可讀性。

<!-- 我是註釋 -->

ctrl + / 快捷鍵可以快速進行註釋/取消註釋。

註釋的原則

  • 要和代碼邏輯一致。
  • 儘量使用中文。
  • 不要傳遞負能量。 

4.2 -> 標題標籤

標題標籤有六個，從h1到h6。數字越大，則字體越小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>One Piece</h1>
    <h2>One Piece</h2>
    <h3>One Piece</h3>
    <h4>One Piece</h4>
    <h5>One Piece</h5>
    <h6>One Piece</h6>
</body>

</html>

展示結果： 

【海賊王航海日誌：前端技術探索】HTML你學會了嗎？(一)_css_04

4.3 -> 段落標籤

把一段比較長的文本粘貼到HTML中，會發現並沒有分成段落。

例如以下文本：

css中的1px並不等於設備的1px

  在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應着電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻並非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。後來隨着技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，

蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設備上的一個css像素相當於多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。

  還有一個因素也會引起css中px的變化，那就是用户縮放。例如，當用户把頁面放大一倍，那麼css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。關於這點，在文章後面的部分還會講到。

  在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義為：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 /

  獨立像素。css中的px就可以看做是設備的獨立像素，所以通過devicePixelRatio，我們可以知道該 設備上一個css像素代表多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是説1個css像素相當於2個物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問題，所以我們現在還並不能完全信賴這個東西。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>css中的1px並不等於設備的1px
          在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應着電腦屏幕的1個物理像
       素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻並非如此，css
       中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同
       的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的
       移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確
       實是等於一個屏幕物理像素的。後來隨着技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，
       蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着
       同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。其他品牌的移動設備也是
       這個道理。例如安卓設備根據屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五
       花八門，安卓設備上的一個css像素相當於多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。
          還有一個因素也會引起css中px的變化，那就是用户縮放。例如，當用户把頁面放大一倍，那麼css中
       1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。關於
       這點，在文章後面的部分還會講到。
          在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的
       定義為：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 /
          獨立像素。css中的px就可以看做是設備的獨立像素，所以通過devicePixelRatio，我們可以知道該
       設備上一個css像素代表多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，
       也就是説1個css像素相當於2個物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在
       些許的兼容性問題，所以我們現在還並不能完全信賴這個東西。</p>
</body>

</html>

展示結果：

【海賊王航海日誌：前端技術探索】HTML你學會了嗎？(一)_#vscode_05

  • p標籤表示一個段落。
<p>這是一個段落</p>

通過p標籤改進上述代碼，每個段落放到p標籤中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>css中的1px並不等於設備的1px</p>

    <p>
    在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應着電腦屏幕的1個物理像
    素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻並非如此，css
    中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同
    的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的
    移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確
    實是等於一個屏幕物理像素的。後來隨着技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，
    蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着
    同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。其他品牌的移動設備也是
    這個道理。例如安卓設備根據屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五
    花八門，安卓設備上的一個css像素相當於多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。
    </p>

    <p>
       還有一個因素也會引起css中px的變化，那就是用户縮放。例如，當用户把頁面放大一倍，那麼css中
    1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。關於
    這點，在文章後面的部分還會講到。
    </p>

    <p>
       在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的
    定義為：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 /
       獨立像素。css中的px就可以看做是設備的獨立像素，所以通過devicePixelRatio，我們可以知道該
    設備上一個css像素代表多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，
    也就是説1個css像素相當於2個物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在
    些許的兼容性問題，所以我們現在還並不能完全信賴這個東西，具體的情況可以看下這篇文章。
    </p>
</body>

</html>

展示結果：

【海賊王航海日誌：前端技術探索】HTML你學會了嗎？(一)_#vscode_06

注意：

  • p標籤之間存在一個空隙。
  • 當前的p標籤描述的段落，前面還沒有縮進(可以使用CSS)。
  • 自動根據瀏覽器寬度來決定排版。
  • html內容首尾處的換行、空格均無效。
  • 在html中文字之間輸入的多個空格只相當於一個空格。
  • html中直接輸入換行不會真的換行，而是相當於一個空格。 

4.4 -> 換行標籤

<br>是break的縮寫。表示換行。

  • <br>是一個單標籤(不需要結束標籤)。
  • <br>標籤不像<p>標籤那樣帶有一個很大的空隙。
  • <br/>是規範寫法。不建議寫成<br>。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
          在css中我們一般使用px作為單位，<br/>
          在桌面瀏覽器中css的1個像素往往都是對應着電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，
       那就是css中的像素就是設備的物理像素。但實際情況卻並非如此，css中的像素只是一個抽象的單位，在不
       同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我
       們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，
       如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。後來隨
       着技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，
       分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着同樣大小的屏幕上，像素卻多了一倍，
       這時，一個css像素是等於兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素
       密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設備上的一個css像素相
       當於多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。
    </p>
</body>

</html>

展示結果：

【海賊王航海日誌：前端技術探索】HTML你學會了嗎？(一)_#前端_07

4.5 -> 格式化標籤

  • 加粗：<strong>標籤和<b>標籤。
  • 傾斜：<em>標籤和<i>標籤。
  • 刪除線：<del>標籤和<s>標籤。
  • 下劃線：<ins>標籤和<u>標籤。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <strong>strong 加粗</strong>
    <b>b 加粗</b>
    <em>傾斜</em>
    <i>傾斜</i>
    <del>刪除線</del>
    <s>刪除線</s>
    <ins>下劃線</ins>
    <u>下劃線</u>
</body>

</html>

展示結果：

【海賊王航海日誌：前端技術探索】HTML你學會了嗎？(一)_css_08

使用CSS也可以實現類似的效果。實際的開發中以CSS方式為主。

4.6 -> 圖片標籤 

<img>標籤必須帶有src屬性。表示圖片的路徑。 

<img src="MyImg.jpg">

此時要把MyImg.jpg這個圖片文件放到和html中的同級目錄中。

<img>標籤的其他屬性：

  • alt：替換文本。當文本不能正確顯示的時候，會顯示一個替換的文字。
  • title：提示文本。鼠標放到圖片上，就會有顯示。
  • width/height：控制寬度高度。寬度和高度一般改一個就行，另外一個會等比例縮放。否則就會圖片失衡。
  • border：邊框，參數是寬度的像素。但是一般使用CSS來設定。
<img src="MyImg.jpg" alt="路飛" title="這是五檔路飛" width="500px" height="800px"
border="5px">

注意：

  1. 屬性可以有多個，不能寫到標籤之前。
  2. 屬性之間用空格分割，可以是多個空格，也可以是換行。
  3. 屬性之間不分先後順序。
  4. 屬性使用“鍵值對”的格式來表示。

4.7 -> 超鏈接標籤

  • href：必須具備，表示點擊後會跳轉到哪個頁面。
  • target：打開方式。默認是_self。如果是_blank則用新的標籤頁打開。
<a href="http://www.baidu.com">百度</a>

鏈接的幾種形式：

  • 外部鏈接：href引用其他網站的地址
<a href="http://www.baidu.com">百度</a>
  • 內部鏈接：網站內部頁面之間的鏈接。寫相對路徑即可。

在一個目錄中，先創建一個1.html，再創建一個2.html。

<!-- 1.html -->
我是 1.html
<a href="2.html">點我跳轉到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">點我跳轉到 1.html</a>
  • 空鏈接：使用#在href中佔位。
<a href="#">空鏈接</a>
  • 下載鏈接：href對應的路徑是一個文件。(可以使用zip文件)
<a href="test.zip">下載文件</a>
  • 網頁元素鏈接：可以給圖片等任何元素添加鏈接(把元素放到<a>標籤中)。
<a href="http://www.baidu.com">
       <img src="MyImg.jpg" alt="">
</a>
  • 錨點鏈接：可以快速定位到頁面中的某個位置。
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>

<p id="one">
   第一集劇情 <br>
   第一集劇情 <br>
   ...
</p>

<p id="two">
   第二集劇情 <br>
   第二集劇情 <br>
 ...
</p>

<p id="three">
   第三集劇情 <br>
   第三集劇情 <br>
 ...
</p>

禁止<a>標籤跳轉：

<a href="javascript:void(0);"> 
或者
<a href="javascript:;">

5 -> 關於目錄結構

對於一個複雜的網站，頁面資源很多，這種情況可以使用目錄把這些文件整理好。

1. 相對路徑：以html所在的位置為基準，找到圖片位置。

  • 同級路徑：直接寫文件名即可(或者./)。
  • 下一級路徑：image/1.jpg。
  • 上一級路徑：../image/1.jpg。

2. 相對路徑：一個完整的磁盤路徑，或者網絡路徑。例如：

  • 磁盤路徑："D:\oneDrive\桌面\前端技術.png"。
  • 網絡路徑：。

代碼示例

1. 使用相對路徑：創建一個image目錄和html同級，並放入一個MyImg2.jpg。

<img src="image/MyImg2.jpg" alt="">

2. 使用相對路徑：在image目錄中創建一個html，並訪問上級目錄的MyImg.jpg。 

<img src="../MyImg.jpg" alt="">

3. 使用絕對路徑：最好使用/，不要使用\。 

<img src="D:/MyImg.jpg" alt="">

4. 使用絕對路徑：使用網絡路徑。 

<img src=""
alt="">

 

感謝各位大佬支持！！！

互三啦！！！