網頁

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>

</head>

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 路徑（前期鋪墊知識）

實際作業中，我們的檔案不能隨便亂放，否則用起來很難快速找到他們，因此我們需要一個檔案夾來管理他們，

目錄檔案夾：就是普通檔案夾，里面只不過存放了我們做頁面所需要的相關素材，比如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="https://www.cnblogs.com/cherry0420/p/跳轉目標"target=“目標視窗的彈出方法”>文本或影像</a>

單詞cnchor的縮寫，意為：錨，

兩個屬性的作用如下：

屬性	作用
href	用于指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它就具有了超鏈接的功能，
target	用于指定鏈接頁面的打開方式，其實_self為默認值，_blank為在新視窗中打開方式，

5.1超鏈接標簽

鏈接分類：

1. 外部鏈接：例如<a href="http://www.baidu.com">百度</a>，

2. 內部鏈接：網站內部頁面之間的相互鏈接，直接鏈接內部頁面名稱即可，例如<a href="https://www.cnblogs.com/cherry0420/p/index.html">首頁</a>，

3. 空鏈接：如果當時沒有確定鏈接目標時，<a href="https://www.cnblogs.com/cherry0420/p/#">首頁</a>，　　

4. 下載鏈接：如果href里面地址是一個檔案或者壓縮包，會下載這個檔案，

5. 網頁元素鏈接：在網頁中的各種網頁元素，如文本、影像、表格、音頻、視頻等都可以添加超鏈接，

6. 錨點鏈接;點我們點擊鏈接，可以快速定位到頁面中的某個位置，

（1）在鏈接文本的href屬性中，設定屬性值為#名字的形式，如<a href="https://www.cnblogs.com/cherry0420/p/#two">第二集</a>，

（2）找到目標位置標簽，里面添加一個id屬性=剛才的名字，如：<h3 id ="two">第二集介紹</h3>，

6. HTML中的注釋和特殊字符

6.1 注釋

如果需要在HTML檔案中添加一些便于理解和閱讀但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽，

HTML中的注釋以""結束，

 快捷鍵：ctrl + /

一句話：注釋標簽里面的內容是給程式員看的，這個代碼是不執行不顯示到頁面中的，

添加注釋是為了更好地解釋代碼的功能，便于相關開發人員理解和閱讀代碼，程式是不會執行注釋內容的，

6.2 特殊字符

在HTML頁面中，一些特殊的符號很難或者不方便直接使用，此時我們就可以使用下面的字符代替，

特殊字符	描述	字符的代碼
	空格符	&nbsp；
<	小于號	&lt；
>	大于號	&gt；

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546638.html

標籤：Html/Css

上一篇：Vue——Vue初始化【三】

下一篇：web

初識web

網頁

1. 什么是網頁

1.1 什么是HTML

2. 常用瀏覽器

2.1 瀏覽器內核

3. Web標準

3.1 為什么需要Web標準

3.2 Web標準的構成

HTML語法規范

1. 基本語法概述

1.1 標簽關系

2. HTML基本結構標簽

2.1 第一個HTML網頁

2.2 網頁的書寫規范

2.3 定義與說明

2.4 網頁開發工具

2.5 VS Code插件安裝

3. 檔案型別宣告標簽

3.1 lang語言種類

3.2 字符集

4. HTML常用標簽

4.1 標簽語意

4.2 標題標簽<h1>-<h6>

4.3 段落和換行標簽

4.3.1 <p>標簽

4.3.2 <br />標簽

4.4 文本格式化標簽

4.5 <div>和</spen>標簽

4.6 影像標簽和路徑

4.6.1 影像標簽

4.6.2 路徑（前期鋪墊知識）

4.6.3 路徑

4.6.4 路徑之相對路徑

4.6.5 路徑之絕對路徑

5. 鏈接的語法格式

5.1超鏈接標簽

6. HTML中的注釋和特殊字符

6.1 注釋

6.2 特殊字符