2020 10 29日

網站由具有特定服務的網頁組成

網頁由影像文字聲頻視訊連結等元素組成，以瀏覽器檢視的HTML檔案
HTML：超文字標記語言

網頁的形成
1.前端工程師用開發工具寫程式碼 —— 標籤及內容；
2.瀏覽器解釋和渲染程式碼： 1.解釋：讀取 HTML 並分析 HTML 結構和內容；
2.渲染：生成最後的頁面並顯示結果；
3.使用者在瀏覽器中瀏覽頁面的展示結果。

常用瀏覽器
1.谷歌瀏覽器 Chrome
2.火狐瀏覽器 Firefox
3.Safari（蘋果電腦） / iPhone / iPAD
4.IE / Edge（微軟）
5.歐朋瀏覽器 Opera

Web標準
結構：HTML 網頁元素的結構和內容
表現：CSS 網頁元素的外觀和位置，包括：版式、顏色、大小等
行為：JavaScript 網頁模型的定義與互動
【HTML結構最重要】
為什麼需要 Web 標準？
讓不同的瀏覽器按照相同的標準顯示結果，展示統一內容
HTML 語法規範
標籤的書寫規範是什麼？
1.所有標籤都包含在 <> 中間，例如：；
2.大多標籤都是成對出現的（雙標籤），例如：，其中： 1. 開始標籤；2. 結束標籤，結束標籤在標籤名前有一個 /（斜線）；

3.單標籤不需要結束標籤，例如：
。
雙標籤和單標籤的特點是什麼？
1.雙標籤是成對出現的，有開始標籤和結束標籤；
2.單標籤不需要結束標籤。

html 根標籤，是頁面中最大的標籤
head 設定頁面資訊，例如網頁標題 title 以及其他告訴瀏覽器或爬蟲的資訊
title 網頁標題，顯示在瀏覽器標籤上
body 網頁文件內容，供使用者瀏覽

1. 標籤的作用是什麼？

告訴瀏覽器當前頁面是 H5 的網頁；

必須寫在頁面的第一行 的上方；
不是 HTML 標籤，是文件型別的宣告標籤。

2.lang 的作用是什麼？
lang 用來定義當前文件顯示的語言；
en 英語；
zh-CN 中文。

3.charset 字符集應該用哪一個字符集？
charset=“UTF-8”；
網頁中一定要寫，否則有可能會出現亂碼的情況；
UTF-8（萬國碼）以前常用的字符集； GB2312：常用漢字；
GBK：國標漢字；
BIG5：繁體中文（臺灣）。

HTML 提供了幾個等級的標題？
標題共有 6 個等級，從<h1.>到 <h6.>
重要性依次遞減
字號依次遞減
獨佔一行

「段落標籤和換行標籤」

1.段落標籤和換行標籤的作用是什麼？
◦段落標籤負責顯示一段文字；
◦換行標籤會把文字強制換行。

2.段落標籤的是什麼？有什麼特點？
◦段落標籤是 p 標籤；
◦特點： ◾是雙標籤，段落內容包含在開始標籤和結束標籤之間；
◾文字在一個段落中會根據瀏覽器視窗的大小自動換行；
◾段落和段落之間有一定的空隙。

3.換行標籤是什麼？有什麼特點？
◦換行標籤 是 br 標籤；
◦特點： ◾是個單標籤；
◾換行後只是另起一行，不像 p 標籤會有明顯的間距。

4.在 VSCode 中看到的文字排列方式和瀏覽器中的一樣嗎？
◦瀏覽器在顯示頁面時，會把 HTML 檔案中多個空格或換行合併成一個空格顯示。

「文字格式化標籤」

1.文字格式化標籤的作用是什麼 ？
◦突出顯示，比普通文字重要。

2.文字格式化標籤
strong 或 b 加粗，更推薦 strong
em 或 i 傾斜，更推薦 em
del 或 s 刪除線，更推薦 del
ins 或 u 下劃線，更推薦 ins

3.為什麼推薦使用單詞較長的標籤？
◦使用 strong、em、del、ins 語義更清晰、更強烈。

「div 和 span 標籤」

1.div 和 span 標籤的語義是什麼 ？
◦div 和 span 沒有語義；
◦是在佈局時用來裝東西的盒子

2.div 和 span 的區別是什麼？
div 大盒子，一行一個
span 小盒子，一行多個

「影像標籤」

1.在 HTML 中，用哪一個標籤來定義影像？
◦影像標籤：img，是英文單詞 image 的縮寫

2.影像標籤的必須屬性是什麼？為什麼？
◦src 屬性是影像標籤的必須屬性；
◦因為只有指定了影像檔案的路徑和檔名，影像標籤才能正確地顯示圖片。

3.幾個影像屬性，作用是什麼？
src 圖片路徑 指定影像檔案的路徑和檔名
alt 文字 替換文字，影像不顯示時顯示
title 文字 提示文字，滑鼠懸停的時候顯示

4.屬性的書寫位置在哪裡？
◦屬性寫在開始標籤中，在標籤的名字後面，語法格式如下：
<標籤名 屬性名1=“屬性值1” 屬性名2=“屬性值2”>
<img src=“路徑” alt="" title=">

5.影像的寬度和高度需要同時指定嗎 ？為什麼？
◦寬度屬性 width / 高度屬性 height；
◦現階段不需要同時指定寬高，瀏覽器會根據已經指定的寬或高，等比例縮放影像。

6.哪一個屬性沒有智慧提示？
◦邊框屬性 border 沒有智慧提示，後續會利用 CSS 設定影像邊框。

7.幾個影像屬性，作用是什麼？

src 圖片路徑 指定影像檔案的路徑和檔名
alt 文字 替換文字，影像不顯示時顯示
title 文字 提示文字，滑鼠懸停的時候顯示
width 畫素 影像的寬度
height 畫素 影像的高度
border 畫素 影像邊框的粗細

「相對路徑」

1.什麼是相對路徑？
◦以檔案所在位置為參考基礎建立的目錄路徑。

2.資料夾之間用什麼符號分隔？(下一級路徑寫法)
◦資料夾之間使用 / 分隔

3。 …/ 是什麼意思？
◦…/ 表示上一級資料夾。

4.一個檔案會有多個上級資料夾嗎？
◦一個檔案最多隻能有一個上級資料夾，不會有多個上級資料夾。

「絕對路徑」
1.什麼是絕對路徑？
◦檔案或資料夾的絕對位置，能夠直接定位。

2.問絕對路徑能夠定位唯一的檔案或者資料夾嗎？
◦絕對路徑能夠定位唯一的檔案或資料夾。

「連結標籤」

1.連結標籤的作用是什麼？
◦從一個頁面連結跳轉到另一個頁面或者頁面的其他位置。

2.連結標籤是單標籤還是雙標籤？為什麼？
◦連結標籤是雙標籤；
◦可以在連結標籤內部包含其他元素（點選誰），href 屬性用來指定跳到哪。

3.連結標籤的語法是什麼？哪一個屬性最重要？
文字或影像
◦href：目標位置
◦target：視窗開啟方式
◾_self（預設）在當前視窗開啟
◾_blank 在新視窗中開啟
◦連結標籤的 href 屬性最重要，指定連結跳轉的目標位置。

4.內部連結會跳轉到哪裡？可以使用相對路徑嗎？
1.外部連結，跳轉到其他網站，跳出當前網站；
2.內部連結，網站內部頁面之間的相互連結，可以使用相對路徑。

5.在開發時時候空連結？空連結有什麼特點？
◦開發過程中，還不能確定連結目標時可以暫時使用空連結。
[空連結會重新重新整理頁面。]

6.下載連結有相比較其他連結有什麼特殊的？
◦下載連結，如果 href 的地址是一個瀏覽器預設不支援的檔案型別，就會下載。

「錨點連結」

1.錨點連結的作用是什麼？
◦錨點連結可以實現頁面內跳轉。

2.目標標籤需要增加什麼屬性，才能實現錨點連結的跳轉？
◦目標標籤需要增加 id 屬性，才能實現錨點連結的跳轉 —— 跳轉到 id 所在位置

3.錨點連結的語法是什麼？
◦錨點連結的語法是：href="#id"

「註釋標籤和特殊字元」

1.VSCode 中註釋的快捷鍵是什麼？
◦ctrl + /。

2.HTML 中的註釋有什麼用處？我們開發的時候要寫註釋嗎？
◦註釋是給程式設計師看的，可以幫助程式設計師閱讀和理解程式碼，註釋不會顯示在頁面中；
◦在開發頁面時，頁面內容通常是從上向下順序排列的，合理使用註釋能夠輔助拆分頁面結構。

3.前端工程師一般記住幾個特殊符號就可以了？
◦空格  ：no break space
◦大於號 >：greater than
◦小於號 <：less than

vxcode快捷鍵：

chrome瀏覽器快捷鍵