關於學習html的一點總結

阿新 • • 發佈：2020-11-22

web標準

web標準的構成

主要由結構、表現、行為三個方面組成

標準	說明
結構	結構用於對網頁元素進行整理和分類，現階段主要學的是HTML。
表現	表現用於設定網頁元素的版式、顏色、大小等外觀樣式，主要指的是css
行為	行為是指網頁模型的定義及互動的編寫，現階段主要學的是Javascript

HTML的語法規範

所有的標籤都包含在<>中間，並且大部分標籤都是成對出現，稱為雙標籤

例：—>開始標籤

		</html>—>結束標籤（有反斜槓）

2.標籤關係

雙標籤關係可以分為兩類：包含關係和並列關係

包含關係

<head>       父親
	<title></title>   兒子
</head>

並列關係

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

2.HTML基本結構標籤

2第一個HTML的網頁

每個網頁都會有都會有一個基本的結構標籤（即骨架標籤），頁面內容也是在這些基本標籤上寫

<html>
	<head>
		<title>我的第一個頁面</title>
	</head>
	<body>
		姜宇，許諾百年好合
	</body>
</html>

標籤名	定義	說明
	HTML的標籤	頁面中最大的標籤，我們稱為根標籤
	文件的頭部	注意在head標籤中我們必須要設定的標籤是title
	文件的標題	讓頁面擁有一個屬於自己的網頁標題
	文件的主體	元素包含文件的所有內容，頁面內容基本都是放到Body裡面

3 . vscode工具生成骨架標籤新增程式碼

3.1<！DOCTYPE>標籤

必須放到最前面，宣告標籤、

3.2 lang 語言種類

用來定義當前文件顯示的語言

en定義語言為英語
zh-CN定義語言為中文

en就是英文網站，zh—CN為中文網站

3.3 字符集

字符集（Character set）是多個字元的集合

在標籤內，可以通過標籤的charset屬性來規定HTML文件應該使用哪種字元編碼。

<meta charset="UTF-8"/>

4.HTML常用標籤

4 .1標籤語義

根據標籤的語義，在合適的地方給一個最為合理的標籤，可以讓頁面結構清晰

4.2 標題標籤《h1》 -《h6》(重要)

HTML提供了6個等級的網頁標題，即

-

<body>
<h1> 我是一級標題 </h1>
</body>

是單詞head的縮寫

標籤語義：作為標題使用，並且依據重要性遞減。（一級比二級重要）

特點：

1.加了標題的文字會變得加粗，字號會依次變小

2.一個標題獨佔一行

4.3 段落和換行標籤（重要）

4.3.1 分段標籤 p

網頁中，將文字分段顯示，需要用標籤

，用於定義段落，可以將整個網頁分成若干個段落

<p> 我是一個段落標籤 </p>

特點：

文字在一個段落會根據瀏覽器視窗大小自動換行。
段落與段落之間保有空隙

4.3.2 換行標籤 br/

強制換行break縮寫，只有這一個單標籤

標籤語義：強制換行。

特點：

br/ 是個單標籤
br/標籤只是簡單的另起一行，跟段落不一樣，段落之間會插入一些垂直的間距

4.4 文字格式化標籤

《strong》《/strong》加粗標籤
《b》《/b》也是加粗的標籤

strong比b語氣更加強烈
《em》《/em》或者《i》《/i》是傾斜

em語義更強烈
《del》《/del》或者《s》《/s》是刪除線，del語義更強烈
《ins》《/ins》或者《u》《/u》是下劃線，ins語義更強烈
《hr/》分割線

4.5《div》和《span》標籤（盒子）

兩個標籤沒有語義，僅僅是盒子，裝內容（雙標籤）

特點：

1.div是division的縮寫，表示分割、分割槽。span意為跨度，跨距。

2.《div》標籤用來佈局，一行只能放一個《div》。大盒子

3.《span》標籤用來間隔，小盒子，一行可以很多個

4.6影象標籤和路徑（重點）img

影象標籤

在HTML標籤中，《img》標籤用於定義HTML頁面中的影象。

《img src=“影象URL（這裡寫的是圖片的路徑）”/》為單標籤

src是《img》標籤的必須屬性 ，它用於指定影象檔案的路徑和檔名

所謂屬性：就是屬於這個影象標籤的特性

屬性	屬性值	說明
src	圖片路徑	必須屬性
alt	文字	替換文字，圖片不能顯示的文字
title	文字	提示文字，滑鼠放到影象上，顯示的文字
width	畫素	設定影象的寬度
height	畫素	設定影象的高度
border	畫素	設定影象的邊框粗細

4.6.1 影象標籤的注意點

影象標籤有多個屬性，必須寫在標籤名的後面
屬性之間不分前後順序，標籤名和屬性、屬性和屬性之間均以空格分開
屬性採取形式為，屬性=“屬性值”

4.7路徑（重點）

4.7.1相對路徑

相對路徑分類	符號	說明
同一級路徑		影象檔案位於HTML檔案同一級，如《img src=“baidu.gif”/》
下一級路徑	/	影象檔案位於HTML檔案下一級，如《img src=“images/baidu.gif”/》
上一級路徑	../	影象檔案位於HTML檔案上一級，如《img src=“../baidu.gif”》

4.7.2 絕對路徑

不多說了

4.8 超連結標籤《a》（重點）

《a》標籤用於定義超連結，作用是從一個網頁連結到另一個網頁

4.8.1 連結的語法格式

《a href="跳轉目標" target=“目標視窗的彈出方式”》文字或影象《/a》

屬性	作用
href	用於指定連結目標的url地址，（必須屬性）當為標籤應用href屬性時，他就具有了超連結的功能
target	用於指定連結頁面的開啟方式，其中 _self為預設值, _blank為新視窗的開啟方式

4.8.2 連結分類

外部連結：例如《a href=“http://www.baidu.com”>百度《/a》
內部連結：網站內部網頁之間的相互連結，直接連線內部頁面名稱即可，例如《a href=“index.html”》首頁《/a》
空連結：如果當時沒有明確連結目標時，《a href=“#”》首頁《/a》
下載連結：如果href裡面地址是一個檔案或者壓縮包，會下載這個檔案。
網頁元素的連結：在網頁中的各種網頁元素，如文字、影象、表格、音訊、、視訊等都可以新增超連結。

《a href="http:bababa"》<img src="圖片檔案"/>《/a》

6.錨點連結：點我們的點選連結，可以迅速定位到某個位置。

在連結文字的href屬性中，設定屬性值為#名字的形式，如《a href=“#two”》第二集《/a》
找到目標位置標籤，裡面新增一個id屬性=剛才的名字，如：《h3 id=“two”》第二季介紹《/h3》

自己總結一點：如果在《a》《/a》之間放的是一段話，直接把那段話打在中間就行

如果是一個圖片檔案或者其他檔案，用相應的標籤來引入

4.9HTML中的註釋《！----》

註釋標籤

以《！--》開頭，以“--》”結束
快捷鍵ctrl+/

4.10表格標籤《table》

4.10.1 表格主要作用

主要用於展示資料，佈局頁面

4.10.2表格基本用法

<table>
	<tr>
		<td>單元格內的文字</td>
	</tr>
</table>

《table》是用於定義表格的標籤
《tr》標籤使用預定義表格中的行，必須巢狀在《table》中
《td》用於定義表格中的單元格（可以認為是列），必須巢狀在《tr》中
字母td指表格資料，即資料單元格的內容

4.10.3 表頭單元格標籤

位於表格第一行或者第一列，居中加粗顯示

《th》《/th》

跟td一個等級

4.10.4表格屬性

屬性名	屬性值	描述
align	left、center、right	規定表格相對周圍元素的對齊方式
border	1或“”	規定表格單元是否擁有邊框，預設為“”，表示沒有邊框
cellpadding	畫素值	規定單元邊沿與其內容之間的空白，預設1畫素
cellspacing	畫素值	規定單元格之間的空白，預設2畫素
width	畫素值或百分比	規定表格的寬度

這些屬性要寫到《table 這裡》

4.10.5表格結構標籤《thead》《tbody》

《thead》標籤表示表格頭部區域，《tbody》標籤表示表格的主體區域

4.10.6 合併單元格《colspan和rowspan》

例：《td colspan=“幾個”》《/td》

跨列合併：colspan=“合併單元格的個數”

跨行合併：rowspan=”合併單元格的個數“

4.11 列表標籤《ul》《li》《dl》

分為三大類：無序列表《ul》列表項《li》、有序列表《ol》列表項《li》

自定義列表《dl》

<dl>
	<dt>名詞1</dt>
	<dd>小弟</dd>
<dl>

注：列表標籤中只能放li（自定義除外），但《li》可以放其他元素

4.12表單標籤

包括（表單域、表單控制元件、提示資訊）

4.12.1表單域《form》

《form》標籤

<form action="url地址"> methon="提交方式" name="表單域名稱">
	各種表單元素控制元件
</form>

屬性	屬性值	作用
action	url地址	用於指定接受並處理表單資料的伺服器程式的url地址
method	get/post	用於設定表單資料的提交方式，其取值為get或post
name	名稱	用於指定表單的名稱，以區分同一個頁面中的多個表單域