HTML 標籤（上）
HTML 標籤（上）
一、HTML 簡介
1.1 網頁
-
什麼是網頁？
要知道什麼是網頁，先要理解網站的概念。網站是指在因特網上根據一定的規則，使用 HTML 等製作的用於展示特定內容相關的網頁集合。網頁就是網站中的一頁，通常是 HTML 格式的檔案，它要通過瀏覽器來閱讀。
網頁是構成網站的基本元素，它通常由圖片、連結、文字、聲音、視訊等元素組成。通常我們看到的網頁，常見以 .htm 或 .html 字尾結尾的檔案，因此將其俗稱為 HTML 檔案。
-
什麼是 HTML
HTML 指的是超文字標記語言（ Hyper Test Markup L
anguage），它是用來描述網頁的一種語言。是具有一套標記標籤的標記語言。所謂的超文字，有兩層含義：
- 它可以加入圖片、聲音、動畫、多媒體等內容（超越了文字限制）。
- 它還可以從一個檔案跳轉到另一個檔案，與世界各地主機的檔案連結（超級連結文字）。
-
網頁的形成
網頁是由網頁元素組成的，這些元素是利用 html 標籤描述出來，然後通過瀏覽器解析來顯示給使用者的。
前端人員開發程式碼 ----> 瀏覽器解析、渲染程式碼 ----> 生成最後的 Web 頁面
1.2 常用的瀏覽器
-
常用的瀏覽器
瀏覽器是網頁顯示、執行的平臺。常用的瀏覽器有 IE 、火狐（Firefox）、谷歌（Chrome）、Safari、和 Opera 等。
檢視瀏覽器市場份額：http://tongji.baidu.com/data/browser 谷歌瀏覽器佔最大市場份額，強烈推薦使用。
-
瀏覽器核心
瀏覽器核心（渲染引擎）：負責讀取網頁內容，整理訊息，計算網頁顯示方式並顯示頁面。
瀏覽器 核心 備註 IE Trident IE、獵豹安全、360極速瀏覽器、百度瀏覽器 Firefox Gecko 火狐瀏覽器核心 Safari Webkit 蘋果瀏覽器核心 Chrome/Opera Blink 谷歌、Opera 瀏覽器核心。其實是 WebKit 的分支。 目前國內一般瀏覽器都會採用 Webkit/Blink 核心，如360、UC、QQ、搜狗等瀏覽器。
1.3 Web 標準
Web 標準是由 W3C組織和其他標準化組織制定的一系列標準的集合。W3C（全球資訊網聯盟）是國際最著名的標準化組織。
-
為什麼需要 web 標準
瀏覽器不同，它們顯示頁面或者陪伴就有些許差異。有了 web 標準就可以消除所有瀏覽器的顯示差異。
-
web 標準的構成
web 標準主要包括 結構（Structure）、 表現（Presentation）、 行為（Behavior）三個方面。
- 結構：結構用於對網頁元素進行整理和分類，主要用 HTML。
- 表現：表現用於設定網頁元素的板式、顏色、大小等外觀樣式，主要用 CSS。
- 行為：行為是指網頁模型的定義及互動的編寫，主要用 Javascript。
web 標準提出的最佳體驗方案：結構、樣式、行為相分離。即應該把結構寫到 HTML 檔案中，表現寫到 CSS 中，行為寫到 JavaScript 檔案中。
二、HTML 標籤介紹
2.1 HTML 語法規範
-
基本語法概述
HTML 標籤是由尖括號包圍的關鍵詞，例如 <html>。
HTML 標籤通常是成對出現的，例如 <html> 和 </html> ，它們稱為雙標籤。第一個是開始標籤，第二個是結束標籤。
也有特殊的標籤是單個的標籤，例如 <br /> ，它們稱為單標籤。
-
標籤關係
雙標籤關係可以分為包含關係和並列關係兩類。
/* 包含關係 */ <head> <title></title> </head> /* 並列關係 */ <head></tead> <body></body>
2.2 HTML 基本結構標籤
-
第一個 HTML 網頁
每一個網頁都會有一個基本的結構標籤（也稱之為骨架標籤），頁面內容也是在這些基本標籤上書寫的。HTML 頁面也稱為 HTML 文件。
<html> <head> <title>我的第一個頁面</title> </head> <body> 從來沒有真正的絕境, 只有心靈的迷途| </body> </html>
標籤名 定義 說明 <html></html> HTML 標籤 頁面中最大的標籤，我們稱為根標籤 <head></head> 文件的頭部 網頁的相關資訊寫在這裡，必須要有 title 標籤 <title></title> 文件的標題 網頁的標題 <body></body> 文件的主體 元素內容，頁面內容都放這裡
三、開發工具 VSCode 的使用
工欲善其事必先利其器，網頁的開發工具有很多，Dreamweaver、sublime、WebStorm、HBuilder、Visual Studio Code等。其中 VSCode 在前端開發中最長用。
3.1 軟體的下載和基本的 html 檔案建立
-
VSCode 下載可以去VSCode官網下載
-
新建檔案，該檔名和和檔案格式為 .html 即可
-
在新建的 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> -
修改網頁的<title> 和 <body> 標籤為自己想修改的內容然後右鍵選擇Open In Default Browser 在預設瀏覽器中開啟，可能你的右鍵沒有這個選項，需要安裝外掛。
-
覺得頁面程式碼字型不合適可以通過 command + 加號鍵、和 command + 減號鍵調整字型大小。
3.2 VSCode 外掛使用
-
外掛安裝方法，在最左邊的是外掛功能選擇，之後再搜尋框搜尋外掛名安裝，重啟 VSCode 即可生效。
-
推薦安裝的外掛
- Chinese(Simplified)Language Pack for VS Code：中文（簡體）語言包
- Open in Browser：右鍵選擇在瀏覽器中開啟 html 檔案，上面演示的功能
- JS-CSS-HTML Formatter：每次儲存，都會自動格式化js、css 和 html 程式碼
- Auto Rename Tag：自動重新命名配對的 HTML/XML 標籤
- CSS Peek：追蹤至樣式
更多好用的外掛希望大家相互推薦~
3.3 VSCode 工具生成的骨架標籤新增的程式碼
-
文件型別宣告標籤 < !DOCTYPE >：告訴瀏覽器使用那種 HTML 版本來顯示網頁
<!DOCTYPE html> 表示當前頁面採用的是 HTML5 版本來顯示網頁。<!DOCTYPE html> 不是一個 HTML 標籤，它只是一個文件型別宣告標籤。
-
lang 語言種類：用來定義當前文件顯示的語言
en 定義語言為英語，zh-CN 定義語言為中文。無論哪種都可以在網頁裡寫中英文，都能正常顯示，這個屬性只用於瀏覽器翻譯功能的判斷而已。
-
字符集：是多個字元的集合，以便計算機能夠識別和儲存各種文字
在<head> 標籤內，可以通過 <meta> 標籤的 charset 屬性來規定 HTML 文件使用的字元編碼集。
charset 常用值有：GB2312、BIG5、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼，基本包含了全世界所有國家需要用到的字元。
【注意】:上面語法是必須要寫的程式碼，否則可能引起亂碼的情況。一般情況下，統一使用“UTF-8”編碼，儘量統一寫成標準的 “UTF-8”，不要寫成 “utf8” 或 “UTF8”。
四、HTML 常用標籤
學習標籤是有技巧的，重點是記住每個標籤的語義。簡單理解就是指標籤的含義，即這個標籤是用來幹嘛的。 根據標籤的語義，在合適的地方給一個最為合理的標籤，可以讓頁面結構更清晰。
4.1 標題標籤<h1> - <h6>
-
為了使網頁更具有語義化，我們經常會在頁面中用到標題標籤。HTML 提供了 6 個等級的網頁標題， 即 <h1> - <h6>。
<h1>標題一共六級選,</h1> <h2>文字加粗一行顯。</h2> <h3>由大到小依次減，</h3> <h4>從重到輕隨之變。</h4> <h5>語法規範書寫後，</h5> <h6>具體效果重新整理見。</h6>
-
h 是單詞 head 的縮寫，意為頭部、標題。
-
標籤語義：作為標題使用，並且依據重要性遞減。
-
特點有：
-
加了標題的文字會變的加粗，字號也會依次變大。
-
一個標題獨佔一行。
-
4.2 <p> 段落標籤和 <br /> 換行標籤
-
在網頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示。在 HTML 標籤中，<p>標籤用於定義段落，它可以將整個網頁分為若干個段落。
<p> 我是一個段落標籤 </p> -
p 是單詞 paragraph的縮寫，意為段落。
-
標籤語義：可以把 HTML 文件分割為若干段落。
-
特點:
- 文字在一個段落中會根據瀏覽器視窗的大小自動換行。
- 段落和段落之間保有空隙。
-
在 HTML 中，一個段落中的文字會從左到右依次排列，直到瀏覽器視窗的右端，然後才自動換行。如果希望某段文字強制換行顯示，就需要使用換行標籤 <br />。
<p> 我是一個段落標籤 </p> <p> 我是一個換行的<br />段落標籤 </p>
-
br 是單詞 break 的縮寫，意為打斷、換行。
-
標籤語義:強制換行。
-
特點:
- <br /> 是個單標籤。
- <br /> 標籤只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。
4.3 文字格式化標籤
-
在網頁中，有時需要為文字設定粗體、斜體 或下劃線或
刪除線等效果，這時就需要用到 HTML 中的文字格式化標籤，使文字以特殊的方式顯示。 -
標籤語義: 突出重要性, 比普通文字更重要。
語義 標籤 說明 加粗 <strong></strong> 或者 <b></b> 推薦使用<strong>，語義更強烈 傾斜 <em></em> 或者 <i></i> 推薦使用<em>，語義更強烈 刪除線 <del></del> 或者 <s></s> 推薦使用<del>，語義更強烈 下劃線 <ins></ins> 或者 <u></u> 推薦使用<ins>，語義更強烈
4.4 <div> 和 <span> 盒子標籤
-
<div> 和 <span> 是沒有語義的，它們就是一個盒子，用來裝內容的。
<div> 我是div1,同時演示下<strong>加粗</strong> </div> <div> 我是div2,同時演示下<em>傾斜</em></div> <span> 我是span1,同時演示下<del>刪除線</del></div></span> <span> 我是span2,同時演示下<ins>下劃線</ins></div></span>
-
div 是 division 的縮寫，表示分割、分割槽。span 意為跨度、跨距。
-
特點：
- <div> 標籤用來佈局，但是現在一行只能放一個<div>。 大盒子
- <span> 標籤用來佈局，一行上可以多個 <span>。小盒子
4.5 < img> 影象標籤
-
在 HTML 標籤中，<img> 標籤用於定義 HTML 頁面中的影象。
<img src="影象URL" /> -
img 是單詞 image 的縮寫，意為影象。
-
src 是 <img> 標籤的必須屬性，它用於指定影象檔案的路徑和檔名。
-
影象標籤的屬性：
屬性 屬性值 說明 src 圖片路徑 必須屬性，影象的url alt 文字 替換文字，當影象不能正常顯示時替換顯示的文字 title 文字 提示文字，滑鼠放在影象上時顯示的文字 height 畫素 設定影象的高度 width 畫素 設定影象的寬度 border 畫素 設定影象的邊框粗細 -
影象標籤屬性注意點：
- 影象標籤可以擁有多個屬性，必須寫在標籤名的後面。
- 屬性之間不分先後順序，標籤名與屬性、屬性與屬性之間均以空格分開。
- 屬性採取鍵值對>的格式，即 key=“value" 的格式，屬性 = “屬性值”。
-
路徑可以分為：
- 相對路徑是以引用檔案所在位置為參考基礎，而建立出的目錄路勁，這裡簡單來說，圖片相對於 HTML 頁面的位置。相對路徑是從程式碼所在的這個檔案出發，去尋找目標檔案的，而我們這裡所說的上一級 、下一級和同一級就是圖片相對於 HTML 頁面的位置。
相對路徑分類 符號 說明 同一級路徑 影象檔案位於 HTML 檔案同一級 如 < img src=“baidu.png”> 下一級路徑 / 影象檔案位於 HTML 檔案下一級 如 < img src=“imgages/baidu.png”> 上一級路徑 …/ 影象檔案位於 HTML 檔案上一級 如 < img src="…/baidu.png"> - 絕對路徑是指目錄下的絕對位置，直接到達目標位置，通常是從碟符開始的路徑。例如，Windown系統上"D:\web\img\logo.gif"或MacOS系統上"/Users/ganmingpro/Desktop/log.jpg"或完整的網路地址"http://www.itcast.cn/images/logo.gif"。
4.6 <a> 超連結標籤
-
超連結可以連結到其他想要跳轉的地方
<a href="跳轉目標" target="目標視窗的彈出方式"> 文字或影象 </a> -
a 是單詞 anchor 的縮寫，意為:錨。
屬性 作用 href 必須屬性，用於指定連結目標的 url 地址 target 用於指定連結頁面的開啟方式，其中_self值為預設值，_blank 為在新視窗中開啟 -
連結的分類：
- 外部連結：例如<a href=“http://www.baidu.com”> 百度 </a>。
- 內部連結：網站內部頁面之間的相互連結. 直接連結內部頁面名稱即可，例如 <a href=“index.html”> 首頁 </a>。
- 空連結：如果當時沒有確定連結目標時，<a href="#"> 首頁 </a> 。
- 下載連結：如果 href 裡面地址是一個檔案或者壓縮包，點選這個連結會下載這個檔案。
- 網頁元素連結：在網頁中的各種網頁元素，如文字、影象、表格、音訊、視訊等都可以新增超連結。
- 錨點連結：當我們想點選連結，可以快速定位到頁面中的某個位置時用錨點連結。
- 在連結文字的 href 屬性中，設定屬性值為#名字 的形式，如<a href="#two"> 第2集 </a>。
- 找到目標位置標籤，裡面新增一個 id 屬性 = 剛才的名字 ，如<h3 id=“two”>第2集介紹</h3>。
4.7 HTML 中的註釋和特殊字元
-
註釋：如果需要在 HTML 文件中新增一些便於閱讀和理解但又不需要顯示在頁面中的註釋文字，就需要使用註釋標籤。 HTML 中的註釋以" <!– “開頭，以” –> "結束。VSCode 中註釋快捷鍵為 command + / (MacOS)。
-
特殊字元：在 HTML 頁面中，一些特殊的符號很難或者不方便直接使用，此時我們就可以使用下面的字元來替代。
