燈塔：HTML筆記

?網頁由哪些部分組成？

*文字圖片音頻視頻超鏈接

程序員寫的代碼是通過瀏覽器轉換成網頁的

五大瀏覽器有哪些？

*IE瀏覽器

*火狐瀏覽器（Firefox）

*谷歌瀏覽器（Chrome）

*Safari瀏覽器

*歐朋瀏覽器（Opera）

相同的網頁在不同的瀏覽器中的顯示效果不會完全一致，因為不同瀏覽器渲染引擎不同，解析的效果會存在差異

前端工程師日常推薦使用谷歌瀏覽器

Web標準的構成有哪些？分別通過什么語言表示？

*結構：HTML -> 頁面元素

*表現：CSS -> 頁面樣式

*行為：JavaSccript -> 頁面交互的動態效果

HTML骨架結構由哪些標簽組成？

*html標簽：網頁的整體

*head標簽：網頁的頭部

*body標簽：網頁的身體

*title標簽：網頁的標題

HTML標簽的結構：

標簽的結構圖：

<strong>文字要變粗</strong>^        ^        ^|        |        |
開始標簽  包裹的內容  結束標簽

結構說明：

1.標簽由< .> ./ .英文單詞或字母組成。并把標簽中 < > 包括起來的英文單詞或字母稱為標簽名

2.常見的標簽由兩部分組成，我們稱之為：雙標簽。前部分叫開始標簽，后部分叫結束標簽，兩部分之間包裹內容

3.少數標簽由一部分組成，我們稱之為：單標簽。自成一體，無法包裹內容。

HTML標簽與標簽之間的關系可分為：

*父子關系(嵌套關系)，如

<head><title> <title>
<head>

*兄弟關系（并列關系），如

<head> <head>
<body> <body>

標題標簽：

h系類標簽：

<h1>1級標簽</h1>
<h2>2級標簽</h2>
<h3>3級標簽</h3>
<h4>4級標簽</h4>
<h5>5級標簽</h5>
<h6>6級標簽</h6>

特點：

*文字都有加粗

*文字都有變大，但是從h1->h6文字逐漸變小

*獨占一行

段落標簽：

<p>此處為文字</p>

特點：

*段落之間存在間隙

*獨占一行

換行標簽：

<br>

特點：單標簽讓文字強制換行

水平線標簽：

<hr>

特點：單標簽在頁面中顯示一條水平線

文本格式化標簽的介紹：

代碼：

????????????????????????標簽	????????????????????????說明
????????????????????????b	????????????????????????加粗
????????????????????????u	????????????????????????下劃線
????????????????????????i? ? ? ??	????????????????????????傾斜
????????????????????????s	????????????????????????刪除線

為突出重要語境用：

????????????????????????????????標簽	????????????????????????說明
????????????????????????????????strong	????????????????????????加粗
????????????????????????????????ins	????????????????????????下劃線
????????????????????????????????em	????????????????????????傾斜
????????????????????????????????del	????????????????????????刪除線

圖片標簽的介紹：

場景：在網頁中顯示圖片

代碼：

<img src ="" alt="">

特點：

*單標簽

*img標簽需要展示對應的效果，需要借助標簽的屬性進行設置

標簽的完整結構圖：

<img src="" alt="">^      ^|      |屬性名 + 屬性值 ->標簽屬性
屬性名="屬性值"

屬性注意點：

1.標簽的屬性寫在開始標簽內部

2.標簽上可以同時存在多個屬性

3.屬性之間以空格隔開

4.標簽名與屬性之間必須以空格隔開

5.屬性之間沒有順序之分

圖片標簽的src屬性

屬性名：src

屬性值：目標圖片的路徑

注意點：

*當前網頁和目標圖片在同一個文件夾中，路徑直接寫目標圖片的名字即可（包括后綴名）

*路徑的情況有很多

圖片標簽的title屬性：

屬性名：title

屬性值：提示文本

*當鼠標懸停時，才顯示的文本

注意點：title屬性不僅僅可以用于圖片標簽，還可以用于其他標簽

圖片標簽的alt屬性：

屬性名：替換文本

*當圖片加載失敗時，才會顯示alt的文本

*當圖片加載成功時，不會顯示alt的文本

圖片標簽的width和height屬性

屬性名：width和height

屬性值：寬度和高度（數字）

注意點：

*如果只設置了width或height中的一個，另一個沒設置的會自動等比例縮放（圖片不會變形）

*如果同時設置了width和height兩個，若設置不當此圖片可能會變形

絕對路徑：

指目錄下的絕對位置，可直接到達目標位置，通常從盤符開始的路徑

相對路徑（常用）：

*當前文件：當前的html網頁

*目標文件：要找到的圖片

相對路徑：從當前文件開始出發找目標文件的過程

相對路徑的分類：

*同級目錄

*下級目錄

*上級目錄

相對路徑-同級目錄

代碼步驟：直接寫目標文件的名字即可

方法一：

<img src="目標圖片.jpg" >

方法二：

<img src="./目標圖片.jpg" >

相對路徑-下級目錄

代碼步驟：

1.先知道在哪個文件夾里面-> 文件夾名字

2.進入這個文件夾-> /

3.此時看到目標文件直接寫出目標文件的名字

音頻標簽：

場景：在頁面中插入音頻

代碼：

<audio src="./music.mp3" controls></audio>

常見屬性：

屬性名	功能
src	音頻的路徑
controls	顯示播放的控件
autoplay	自動播放（部分瀏覽器不支持）
loop	循環播放

注意點：音頻標簽目前支持三種格式：MP3 Wav Ogg

視頻標簽：

場景：在頁面中插入視頻

代碼：

<video src="./video.mp4" controls></video>

常見屬性：

屬性名	功能
src	視頻的路徑
controls	顯示播放的控件
autoplay	自動播放（谷歌瀏覽器中需配合muted實現靜音播放）
loop	循環播放

?注意點：視頻標簽目前支持三種格式：MP4 WebM Ogg

鏈接標簽的介紹：

場景：點擊之后，從一個頁面跳轉到另一個頁面

稱呼：a標簽超鏈接錨鏈接

代碼：

<a href ="./目標網頁.html">超鏈接</a>

特點：

*雙標簽內部可以包裹內容

*如果需要a標簽點擊之后進去指定頁面，需要設置a標簽的href屬性

鏈接標簽的target屬性：

屬性名:target

屬性值：目標網頁的打開方式

取值	效果
_self	默認值，在當前窗口中跳轉（覆蓋原網頁）
_blank	在新窗口中跳轉（保留原網頁）

列表：

無序列表：

場景：在網頁中表示一組無順序之分的列表，如：新聞列表

標簽組成:

標簽名	說明
ul	表示無序列表的整體，用于包裹li標簽
li	表示無序列表的每一項，用于包含每一行的內容

顯示特點：

列表的每一項前默認顯示圓點標識

注意點：

*ul標簽中只允許包含li標簽

*li標簽可以包含任何內容

有序列表

場景：在網頁中表示一組有順序之分的列表，如：排行榜

標簽組成：

標簽名	說明
ol	表示有序列表的整體，用于包裹li標簽
li	表示有序列表的每一項，用于包含每一行的內容

顯示特點：列表的每一項前默認顯示序號標識

注意點：

*ol標簽中只允許包含li標簽

*li標簽可以包含任意內容

自定義列表

場景：在網頁的底部導航中通常會使用自定義列表實現。

標簽組成：

標簽名	說明
dl	表示自定義列表的整體，用于包裹dt/dd標簽
dt	表示自定義列表的主題
dd	表示自定義列表的針對主題的每一項內容

顯示特點：dd前會默認縮進效果

注意點：

*dl標簽中只允許包含dt/dd標簽

*dt/dd標簽可以包含任意內容

表格的基本標簽

場景：

在網頁中以行+列的單元格的方式整齊展示數據，如：學生成績

基本標簽：

標簽名	說明
table	表格整體，可用于包裹多個tr
tr	表格每行，可用于包裹td
td	表格單元格，可用于包裹內容

注意點：標簽的嵌套關系：table>tr>td

表格相關屬性：

場景：設置表格基本展示效果

常見相關屬性：

屬性名	屬性值	效果
border	數字	邊框寬度
width	數字	表格寬度
height	數字	表格高度

注意點：實際開發針對樣式效果推薦使用CSS設置

表格標題和表頭單元格標簽

場景：在表格中表示整體大標題和一列小標題

其他標簽：

標簽名	名稱	說明
caption	表格大標題	默認在表格整體位置頂部劇中位置顯示
th	表格單元格	表示一列小標題，通常用于表格第一行，默認內部文字加粗并居中顯示

注意點：

*caption標簽書寫在table標簽內部

*th標簽書寫在tr標簽內部（用于替換td標簽）

表格的結構標簽

場景：讓表格的內容結構分組，突出表格的不同部分（頭部主體底部），使語義更加清晰

結構標簽：

標簽名	名稱
thead	表格頭部
tbody	表格主體
tfoot	表格底部

注意點：

*表格結構標簽內部用于包裹tr標簽

*表格的結構標簽可以省略

合并單元格

步驟：

1.明確合并哪幾個單元格

2.通過左上原則，確定保留誰刪除誰

*上下合并 -> 只保留最上的，刪除其他

*左右合并 -> 只保留最左的，刪除其他

3.給保留的單元格設置：跨行合并（rowspan）或者跨列合并（colspan）

屬性名	屬性值	說明
rowspan	合并單元格的個數	跨行合并，將多行的單元格垂直合并
colspan	合并單元格的個數	跨列合并，將多列的單元格水平合并

注意點：只有同一個結構標簽中的單元格才能合并，不能跨結構標簽合并

（不能跨：thead tbody tfoot）

表單標簽：

目標：能夠使用表單相關標簽和屬性，實現網頁中表單類網頁結構搭建

input系列標簽的基本介紹：

場景：在網頁中顯示收集用戶信息的表單效果，如：登錄頁，注冊頁

標簽名：input

*input標簽可以通過type屬性值的不同，展示不同效果

type屬性值：

標簽名	type屬性值	說明
input	text	文本框，用于輸入單行文本
input	password	密碼框，用于輸入密碼
input	radio	單選框，用于多選一
input	checkbox	多選框，用于多選多
input	file	文件選擇，用于之后上傳文件
input	submit	提交按鈕，用于提交
input	reset	重置按鈕，用于重置
input	button	普通按鈕，默認無功能，之后配合js添加功能

input系列標簽 — 文本框

場景：在網頁中顯示輸入單行文本的表單控件

type屬性值：text

常用屬性：

屬性名	說明
placeholder	占位符，提示用戶輸入內容的文本

input系列標簽 — 單選框

場景：在網頁中顯示多選一的單選表單控件

type屬性值：radio

常用屬性：

屬性名	說明
name	分組，有相同name屬性值的單選框為一組，一組中同時只能有一個被選中
checked	默認選中

注意點：

*name屬性對于單選框有分組功能

*有相同name屬性值的單選框為一組，一組中只能同時有一個被選中

input系列標簽 — 按鈕

場景：在網頁中顯示不同功能的按鈕表單控件

type屬性值：

標簽名	type屬性值	說明
input	submit	提交按鈕，點擊之后提交數據給后端服務器
input	reset	重置按鈕，點擊之后恢復表單默認值
input	button	普通按鈕，默認無功能，之后配合js添加功能

注意點：

*如果需要實現以上按鈕功能，需要配合form標簽使用

*form使用方法：用form標簽把表單標簽一起包裹起來即可

button按鈕標簽

場景：在網頁中顯示用戶點擊的按鈕

標簽名：button

type屬性值（同input的按鈕系列）：

標簽名	type屬性值	說明
button	submit	提交按鈕，點擊之后提交數據給后端服務器
button	reset	重置按鈕，點擊之后恢復表單默認值
button	button	普通按鈕，默認無功能，之后配合js添加功能

注意點：

*谷歌瀏覽器中button默認是提交按鈕

*button標簽是雙標簽，更便于包裹其他內容：文字，圖片等