網頁 1. 什麼是網頁 網站是指在網際網路上根據一定的規則，使用HTML等製作的用於展示特定內容相關的網頁集合。 網頁是網站中的一“頁”，通常是HTML格式的文件，它要通過瀏覽器來閱讀。 網頁是構成網站的基本元素，它通常由圖片、鏈接、文字、聲音、視頻等元素組成。通常我們看到的網頁，常見以.htm或.h ...
網頁
1. 什麼是網頁
網站是指在網際網路上根據一定的規則，使用HTML等製作的用於展示特定內容相關的網頁集合。
網頁是網站中的一“頁”，通常是HTML格式的文件，它要通過瀏覽器來閱讀。
網頁是構成網站的基本元素，它通常由圖片、鏈接、文字、聲音、視頻等元素組成。通常我們看到的網頁，常見以.htm或.html尾碼結尾的文件，因此將其俗稱為HTML文件。
網頁生成製作：有前端人員書寫HTML文件，然後瀏覽器打開，就能看到了網頁。
1.1 什麼是HTML
HTML指的是超文本標記語言，它是用來描述網頁的一種語言。
HTML不是一種編程語言，而是一種標記語言。
標記語言是一整套標記標簽。
HTML：超文本標記語言，用來製作網頁的一門語言，有標簽組成的，比如 圖片標簽 鏈接標簽 視頻標簽等....。
所謂超文本，有2層含義：
1.它可以加入圖片、聲音、動畫、多媒體等內容（超越了文本限制）。
2.他還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接（超級鏈接文本）。
2. 常用瀏覽器
瀏覽器是網頁的顯示、運行的平臺。常用的五大瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safar和Opera。
2.1 瀏覽器內核
瀏覽器內核（渲染引擎）：負責讀取網頁內容，整理訊息，計算網頁的顯示方式並顯示內容。
|
瀏覽器 |
內核 |
備註 |
|
IE |
Trident |
IE、獵豹安全、360極速瀏覽器、百度瀏覽器。 |
|
firefox |
Gecko |
火狐瀏覽器內核。 |
|
Safari |
Webkit |
蘋果瀏覽器內核。 |
|
chrome/Opera |
Blink |
chrome/opera瀏覽器內核。Blink其實就是Webkit的分支。 |
目前國內一般瀏覽器會採用Webkit/Blink內核，如360、UC、QQ、搜狗等。
3. Web標準
Web標準是由W3C組織和其他標準化組織制定的一系列的標準集合。W3C(萬維網聯盟)是國際最著名的標準化組織。
3.1 為什麼需要Web標準
遵循Web標準除了可以讓不同的開發人員寫出的頁面更標準，更統一外，還有以下優點：
1.讓Web的發展前景更廣闊。
2.內容能被更廣泛的設備訪問。
3.更容易被搜尋引擎搜索。
4.降低網站流量費用。
5.使網站更易於維護。
6.提高網頁瀏覽速度
3.2 Web標準的構成
主要包括結構、表現和行為三個方面。
|
標準 |
說明 |
|
結構 |
結構用於對網頁元素進行整理和分類，現階段主要學的是HTKL。 |
|
表現 |
表現用於設置網頁元素的版本、顏色、大小等外觀樣式，主要指的是CSS。 |
|
行為 |
行為是指網頁模型的定義及交互的編寫，現階段主要學的是JavaScript。 |
Web標準提出的最佳體驗方案：結構、樣式、行為相分離。
簡單理解：結構寫到HTML文件中，表現寫到CSS文件中，行為寫到JavaScript文件中。結構類似身體，表現類似外觀裝飾，行為類似行為動作，相比較而言，三者結構最重要。
HTML語法規範
1. 基本語法概述
1.HTML標簽是由尖括弧包圍的關鍵詞，例如<html>。
2.HTML標簽通常是成對出現的，例如<html>和</html>，我們稱為雙標簽。標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽。
3.有些特殊的標簽必須是單個標簽（極少情況），例如<br />,我們稱為單標簽。
1.1 標簽關係
雙標簽關係可以分為兩類：包含關係和併列關係。
|
包含關係（父子關係） |
併列關係（兄弟關係） |
|
<head> <title></title> </head> |
<head></head> <body></body> |
2. HTML基本結構標簽
2.1 第一個HTML網頁
每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），網頁內容也是在這些基本標簽上書寫。
HTML頁面也成為HTML文檔。
2.2 網頁的書寫規範
<html>
<head>
<title>我的第一個頁面</title>
</head>
<body>
</body>
</html>
2.3 定義與說明
|
標簽名 |
定義 |
說明 |
|
<html></html> |
HTML標簽 |
頁面中最大的標簽，我們稱為根標簽。 |
|
<head></head> |
文檔的頭部 |
註意在head標簽中我們必須要設置的標簽是title。 |
|
<title></title> |
文檔的標題 |
讓頁面擁有一個屬於自己的網頁標題。 |
|
<body></body> |
文檔的主題 |
元素包含文檔的所有內容，頁面內容基本都是放到body裡面的。 |
HTML文檔的尾碼名必須是.html或.htm，瀏覽器的作用是讀取HTML文檔，並以網頁的形式顯示出它們。
此時，用瀏覽器打開這個網頁，我們就可以預覽我們寫的第一個HTML文件了。
2.4 網頁開發工具
VSCode的使用
1.雙擊打開軟體。
2.新建文件（Ctrl+N）。
3.保存（Ctrl+S），註意移動要保存為.html文件。
4.Ctrl+加號鍵，Ctrl+減號鍵 可以放大縮小試圖。
5.生成頁面骨架結構。
輸入！按下Tab鍵。
6.利用插件在瀏覽器中預覽頁面：單擊滑鼠右鍵，在彈出出口中點擊“Open In Default Browser”。
2.5 VS Code插件安裝
推薦安裝的插件
|
插件 |
作用 |
|
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. 文檔類型聲明標簽
<! DOCTYPE html>文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁。
<!DOCTYPE html>
這句代碼的意思是：當前頁面採取的是HTML5版本來顯示網頁。
註意：
1.<! DOCTYPE>聲明位於文檔中的最前面的位置，處於<html>標簽之前。
2.<! DOCTYPE>不是一個HTML標簽，它就是文檔類型聲明標簽。
3.1 lang語言種類
定義：用來定義當前文檔顯示的語言。
例如：en定於語言為英語， zh-CN定義語言為中文。
簡單來說，定義為en就是英文網頁，定義為zh-CN就是中文網頁。
這個屬性對瀏覽器和搜索引擎（百度、谷歌等）還是有作用的。
3.2 字元集
字元集是多個字元的集合。以便電腦能夠識別和存儲各種文字。
在<head>標簽內，可以通過<meta>標簽的charset屬性來規定HTML文檔應該使用哪種字元編碼。
<meta charset="UTF-8" />
charset 常用的值有：GB2312、BIG5、GBK和UTF-8,其中UTF-8也被稱為萬國碼，基本包含了全世界所有國家需要用到的字元。
註意：上面語法是必須要寫的代碼，否則可能引起亂碼的情況。一般情況下，統一使用“UTF-8”編碼，儘量統一寫成標準的“UTF-8”,不要寫成“utf8”或“UTF8”。
4. HTML常用標簽
4.1 標簽語義
學習標簽是有技巧的，重點是記住每個標簽的語義。簡單理解就是指標簽的含義，即這個標簽是用來乾什麼的。
根據標簽的語義，在合適的地方給一個最為合理的標簽，可以讓頁面結構更清晰，例如標題標簽，段落標簽。
4.2 標題標簽<h1>-<h6>
為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽。HTML提供了6個等級的網頁標題，即<h1>-<h6>。
|
<h1>我是一級標題</h1> <h1>標題一共六級選</h1> <h2>文字加粗一行顯</h2> <h3>由大到小依次減</h3> <h4>由重到輕隨之變</h4> <h5>語法規範書寫後</h5> <h6>具體效果刷新見</h6> |
單詞head的縮寫，意為頭部、標題。
標簽語義：作為標題使用，並且依據重要性遞減。
特點：
1.加了標題的文字會變的加粗，字型大小也會依次變大。
2.一個標題獨占一行。
4.3 段落和換行標簽
4.3.1 <p>標簽
在網頁中，要把文字條理地顯示出來，就需要將這些文字分段顯示。在HTML標簽中，<p>標簽用於定義段落，它可以將整個網頁分為若幹個段落。
<p>我是一個段落標簽</p>
單詞paragraph地縮寫，意為段落。
標簽語義：可以把HTML文檔分割為若幹段落。
特點：
1. 文本在一個段落中會根據瀏覽器視窗的大小自動換行。
2. 段落和段落之間保有空隙。
4.3.2 <br />標簽
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器視窗的右端，然後才自動換行。如果希望某段文本強制換行顯示，就需要使用換行標簽<br />。
<br />
單詞break的縮寫，意為打斷、換行。
標簽語義：強制換行。
特點：
1. <br />是個單標簽。
2. <br />標簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。
4.4 文本格式化標簽
在網頁中，有時候需要文字設置粗體、斜體或下劃線等效果，這是就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。
標簽語義：突出重要性，比普通文字更重要。
|
語義 |
標簽 |
說明 |
|
加粗 |
<strong></strong>或者<b></b> |
更推薦<strong>標簽加粗 語義更強烈。 |
|
傾斜 |
<em></em>或者<i></i> |
更推薦<em>標簽傾斜 語義更強烈。 |
|
刪除線 |
<del></del>或者<s></s> |
更推薦<del>標簽刪除線 語義更強烈。 |
|
下劃線 |
<ins></ins>或者<u></u> |
更推薦<ins>標簽下劃線 語義更強烈。 |
4.5 <div>和</spen>標簽
<div>和<span>是沒有語義的，它們就是一個小盒子，用來裝內容的。
<div>這是頭部</div>
<span>今天價格</span>
div是division的縮寫，表示分割，分區。span意為跨度、跨距。
特點：
1. <div>標簽用來佈局，但是現在一行只能放一個<div>。大盒子。
2. <span>標簽用來佈局，一行可以多個<span>。小盒子。
4.6 圖像標簽和路徑
4.6.1 圖像標簽
在HTML標簽中，<img>標簽用於定義HTML頁面中的圖像。
<img scr="圖像URL" />
單詞image的縮寫，意為圖像。
scr是<img>標簽的必要屬性，它用於指定圖像文件的路徑和文件名。
所謂屬性:簡單理解就是屬於這個圖像標簽的特性。
圖像標簽的其他屬性：
|
屬性 |
屬性值 |
說明 |
|
scr |
圖片路徑 |
必須屬性。 |
|
alt |
文本 |
替換文本。圖像不能顯示的文字。 |
|
title |
文本 |
提示文本。滑鼠放到圖像上，顯示的文字。 |
|
width |
像素 |
設置圖像的寬度。 |
|
height |
像素 |
設置圖像的高度。 |
|
border |
像素 |
設置圖像的邊框粗細。 |
圖像標簽屬性註意點：
1. 圖像標簽可以擁有多個屬性，必須寫在標簽名的後面。
2. 屬性之間不分先後順序，標簽名與屬性、屬性與屬性之間均以空格分開。
3. 屬性採取鍵值對的格式，即key="value"的格式，屬性=“屬性值”。
4.6.2 路徑（前期鋪墊知識）
（1）目錄文件夾和根目錄：
實際工作中，我們的文件不能隨便亂放，否則用起來很難快速找到他們，因此我們需要一個文件夾來管理他們。
目錄文件夾：就是普通文件夾，裡面只不過存放了我們做頁面所需要的相關素材，比如html文件。圖片等。
根目錄：打開目錄文件夾的第一層就是根目錄。
（2）VSCode打開目錄文件夾:
文件-----打開文件夾，選擇目錄文件夾，後期非常方便管理文件。
4.6.3 路徑
頁面中的圖片會非常多，通常我們會新建一個文件夾來存放這些圖像文件（images），這時在查找圖像，就需要採用“路徑”的方式來指定圖像文件的位置。
路徑可以分為：
1.相對路徑。
2.絕對路徑。
4.6.4 路徑之相對路徑
相對路徑：以引用文件所在位置為參考基礎，而建立出的目錄路徑。
這簡單來說，圖片相對於HTML頁面的位置。
|
相對路徑分類 |
符號 |
說明 |
|
同一級路徑 |
|
圖像文件位於HTML文件同一級 如<img scr="baidu.gif" />。 |
|
下一級路徑 |
/ |
圖像文件位於HTML文件下一級 如<img scr="images/baidu.gif" />。 |
|
上一級路徑 |
../ |
圖像文件位於HTML文件上一級 如<img scr="../baidu.gif" />。 |
相對路徑是從代碼所在的這個文件出發，去尋找目標文件的，而我們這裡所說的上一級、下一級和同一級就是圖片相對於HTML頁面的位置。
4.6.5 路徑之絕對路徑
絕對路徑：是指目錄下的絕對路徑，直接到達目標位置，通常是從盤符開始的路徑。
例如，“D\web\img\logo.gif”或完整的網路地址“http://www.itcast.cn/images/logo.gif“。
在HTML標簽中，<a>標簽用於定義超鏈接，作用是從一個頁面鏈接到另一個頁面。
5. 鏈接的語法格式
<a href="跳轉目標"target=“目標視窗的彈出方法”>文本或圖像</a>
單詞cnchor的縮寫，意為：錨。
兩個屬性的作用如下：
|
屬性 |
作用 |
|
href |
用於指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它就具有了超鏈接的功能。 |
|
target |
用於指定鏈接頁面的打開方式，其實_self為預設值，_blank為在新視窗中打開方式。 |
5.1超鏈接標簽
鏈接分類：
1. 外部鏈接：例如<a href="http://www.baidu.com">百度</a>。
2. 內部鏈接：網站內部頁面之間的相互鏈接，直接鏈接內部頁面名稱即可，例如<a href="index.html">首頁</a>。
3. 空鏈接：如果當時沒有確定鏈接目標時，<a href="#">首頁</a>。
4. 下載鏈接：如果href裡面地址是一個文件或者壓縮包，會下載這個文件。
5. 網頁元素鏈接：在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接。
6. 錨點鏈接;點我們點擊鏈接，可以快速定位到頁面中的某個位置。
（1）在鏈接文本的href屬性中，設置屬性值為#名字的形式，如<a href="#two">第二集</a>。
（2）找到目標位置標簽，裡面添加一個id屬性=剛纔的名字，如：<h3 id ="two">第二集介紹</h3>。
6. HTML中的註釋和特殊字元
6.1 註釋
如果需要在HTML文檔中添加一些便於理解和閱讀但又不需要顯示在頁面中的註釋文字，就需要使用註釋標簽。
HTML中的註釋以"<!--"開頭，以”-->"結束。
<!--註釋語句--> 快捷鍵：ctrl + /
一句話：註釋標簽裡面的內容是給程式員看的，這個代碼是不執行不顯示到頁面中的。
添加註釋是為了更好地解釋代碼的功能，便於相關開發人員理解和閱讀代碼，程式是不會執行註釋內容的。
6.2 特殊字元
在HTML頁面中，一些特殊的符號很難或者不方便直接使用，此時我們就可以使用下麵的字元代替。
|
特殊字元 |
描述 |
字元的代碼 |
|
|
空格符 |
 ； |
|
< |
小於號 |
<； |
|
> |
大於號 |
>； |
