關於學習html的一點總結

時間 2020-11-30

標籤 css html web 瀏覽器服務器工具佈局 post 網站編碼欄目 HTML 简体版

原文原文鏈接

web標準

web標準的構成css

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

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

HTML的語法規範

全部的標籤都包含在<>中間，而且大部分標籤都是成對出現，稱爲雙標籤

例：—>開始標籤web

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

2.標籤關係瀏覽器

雙標籤關係能夠分爲兩類：包含關係和並列關係服務器

包含關係工具

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

並列關係佈局

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

2.HTML基本結構標籤

2第一個HTML的網頁

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

<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	名稱	用於指定表單的名稱，以區分同一個頁面中的多個表單域