html簡單歸納

HTML5

格式：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> html5文檔類型 </title>
    </head>
    <body></body>
</html>

二、排版標籤

2.1 標題標籤

h1元素表示標題。HTML定義了標題元素的層次結構，其中h1是排名最高的。

其它標題元素是h2，h3到h6。

相同排名的標題會分解內容，以便每個主題都在其自己的部分。

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

2.2 段落標籤

標籤是段落標籤，可以將HTML文檔分割爲若干段落。瀏覽器會自動在段落前後添加空行。

常用屬性：

align:用於設定對齊方式可選值 left 、right 、center 默認值是left.

<p> 段落的內容 <p>
<p> 段落的內容 <p>

2.3 水平線標籤

<hr>標籤會生成一條水平線。

常用屬性:

align:設置水平線對齊方式可選值 left right center
size:設置水平線厚度以像素爲單位。默認爲2
width:設置水平線長度.可以是絕對值或相對值。默認爲100%
color:設置水平線顏色.默認爲黑色

3.1 div 標籤

用於在文檔中設定一個塊區域（層+塊）。塊級元素。

常用屬性：

align: left center right

3.2 span 標籤

塊級元素：block.寬度默認100%，塊的前後有換行。p，h1-h6，div

內聯元素（inline.行內元素）：無法設置寬高，前後沒有空格。span,label

label有“焦點”指引功能

點擊用戶名就會跳轉到輸入框，這就是焦點指引的功能

4. 鏈接標籤

<a>標籤用於定義超連接，用於從一個頁面鏈接到另一個頁面。

anchor–錨

常用屬性:

href:用於設定鏈接指向頁面的url.
name:用於設定錨的名稱。錨點。
target:用於設定在何處打開鏈接頁面。
- _new 在固定的新窗口中打開鏈接
- _blank 在新窗口中打開鏈接
- _parent 在父窗體中打開鏈接
- _self 在當前窗體打開鏈接,【此爲默認值】
- _top 在當前窗體打開鏈接，並替換當前的整個窗體(框架頁)
- iframe的name 在指定name的iframe中打開。

new:是在固定的新窗口打開

blank:不斷打開新窗口

圖片動態標籤

5. 圖片標籤

<img>是一個圖片標籤，用於在頁面上引入圖片.

常用屬性：

src:用於設定要引入的圖片的url
alt:用於設定圖像的替代文字。新瀏覽器不支持。
width:用於設定圖片的寬度
height:用於設定圖片的高度
border：圖片邊框厚度

圖片鏈接：

<a href="">
	<img src="" >
</a>

6. 列表標籤

6.1 ul 標籤

<ul>標籤表示的是一個無序列表。

常用屬性:

type:規定列表的項目符號類型,可取值 disc,square,circle.默認值爲disc

6.2 li 標籤

<li>標籤表示的是一個列表項

常用屬性:

type:這個屬性只適用於無序列表，用於設定項目符號，默認值爲disc
value:這個屬性只適用於有序列表，用於設定列表的項目數字

6.3 ol 標籤

<ol>表示的是一個有序列表。

常用屬性:

type:這個屬性規定列表中使用的標記類型。可取值1 A a I i.
start:這個屬性規定列表的起始值

7. 表格標籤-對齊

7.1 table 標籤

定義表格

<table></table>

常用屬性：

align:用於設定表格的對齊方式
bgcolor:用於設定表格的背景顏色。
border:用於設定表格邊框的寬度
width:用於規定表格的寬度。

7.2 tr 標籤

定義表格的行

<table>
	<tr></tr>
</table>

<tr>標籤用於定義表格的行,包含一個或多個th或td元素。

常用屬性:

align:用於設定表格中行的內容對齊方式。
bgcolor:用於設定表格中行的背景顏色。

7.3 th 標籤

定義表格的表頭

內部的文本通常呈現爲居中加粗文本。

Html表格中有兩種類型的單元格：

表頭單元格th:包含表頭信息。
標準單元格td:包含數據。
兩種單元格的屬性一致

7.4 td 標籤-格子

定義表格的列格子

align:用於設定單元格內容的對齊方式。
bgcolor:用於設定單元格背景顏色。
height:用於設定單元格的高度。
width:用於設定單元格的寬度。
colspan:用於設定列合併。跨列數。
rowspan:用於設定行合併。跨行數。

colspan 屬性

colspan: colspan屬性用在td或th標籤中，用來指定單元格橫向跨越的列數

在瀏覽器中將顯示如下：

rowspan 屬性

rowspan ： colspan屬性用在td或th標籤中，用來指定單元格縱向跨越的行數

上例中的單元格1，其rowspan被設爲“3”，這表示該單元格必須跨越三行（本身一行，加上另外兩行）。因此，單元格1和單元格2在同一行，而單元格3和單元格4形成獨立的兩行。

7.5 caption 標籤

定義表格標題

<caption>標籤必須緊隨<table>標籤之後，一個表格只能有一個標題。通常這個標題會被居中於表格之上。

	<table border="1">
			<caption>111</caption>
			<tr><td>2</rd><td>3</td></tr>
			<tr><td>2</td><td>3</td></tr>
		</table>

7.6 thead 標籤

定義表格的頁眉

<thead>標籤用於組合HTML表格的表頭內容。
<thead>元素應該與<tbody>和<tfoot>元素結合起來使用。

注意:<thead>內部必須有<tr>標籤。

7.7 tbody 標籤

定義表格的主體

<tbody>標籤用於組合HTML表格的主體內容

7.8 tfoot 標籤

定義表格的頁腳

<tfoot>標籤用於組合HTML表格中的表注內容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>

		<table border="1">
			<thead bgcolor="#009900">
				<tr>
					<td>2</rd>
					<td>3</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>2</td>
					<td>3</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</thead>
			<tbody bgcolor="red">
				<tr>
					<td>2</rd>
					<td>3</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>2</td>
					<td>3</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>2</rd>
					<td>3</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</tbody>
			<tfoot bgcolor="yellow">
				<tr>
					<td>2</td>
					<td>3</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>2</td>
					<td>3</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

8. 表單標籤-提交

8.1 form 標籤

form標籤代表一個表單，表單用於向服務器傳輸數據。

form 標籤能夠包含，可以是文本字段，複選框，單選框或提交按鈕等。

還可以包含等。

常用屬性:

name:用於定義表單的名稱
action:用於規定提交表單時向何處發送表單數據。服務器的地址。
method:用於規定提交的方式。一般取值 POST或GET

提交數據：name1=value1&name2=value2…

name–>服務器使用。可以重複。如：多選框。

id–>前端技術使用。不重複。

POST與GET方式區別:

get方式<255字節只能傳輸少量數據,而post可以攜帶大數據。文件上傳只能用post。
get方式提交時，數據會在地址欄上顯示，安全性差。Post方式提交不會在地址欄上顯示數據，更加安全。

get採用請求報文的head 裝數據。post採用請求報文的body裝數據。

8.2 input 標籤

標籤用於蒐集用戶信息。

根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。

關於標籤type屬性值說明 :

text（默認）

定義單行的輸入字段，用戶可在其中輸入文本。默認寬度爲 20 個字符。

其它常用屬性:

name:定義標籤名稱
value:定義標籤值
size:定義輸入字段的長度
maxlength:定義可輸入最大字符個數
minlength:定義可輸入最小字符個數
placeholder：輸入提示

password

定義密碼字段。該字段中的字符被掩碼.

其它常用屬性:

name:定義標籤名稱
value:定義標籤值
size:定義輸入字段的長度
maxlength:定義可輸入最大字符個數
minlength:定義可輸入最小字符個數

radio

定義單選按鈕。

其它常用屬性:

name:定義標籤名稱.
- 注意，對於單選按鈕，如果要想做到單一選擇，多個radion的name值必一樣。
value:定義標籤值
checked:定義該標籤默認被選中。

checkbox

定義複選框。

其它常用屬性:

name:定義標籤名稱.注意，一組的checkbox它們的name值應該是一樣的。
value:定義標籤值
checked:定義該標籤默認被選中。

button

定義可點擊按鈕（多數情況下，用於通過 JavaScript 啓動腳本）

其它常用屬性:

name:定義標籤名稱
value:按鈕顯示名稱

hidden

定義隱藏的輸入字段。

其它常用屬性:

name:定義標籤名稱
value:定義標籤值

file

定義輸入字段和 "瀏覽"按鈕，供文件上傳。

其它常用屬性:

name:定義標籤名稱

submit

定義提交按鈕。提交按鈕會把表單數據發送到服務器。

其它常用屬性:

name:定義標籤名稱
value:按鈕顯示名稱

reset

定義重置按鈕。重置按鈕會清除表單中的所有數據。

其它常用屬性:

name:定義標籤名稱
value:按鈕顯示名稱

image

定義圖像形式的提交按鈕。

這個標籤主要是用了替換submit按鈕，因爲默認產生的提交按鈕並不漂亮，這個標籤允許你採用指定的圖片做爲提交按鈕。

其它常用屬性:

name:定義標籤名稱
src:定義作爲提交按鈕顯示的圖像的url
alt:定義作用圖像的替代文本。

8.3 select和option標籤

select

用於定義一個下拉列表

常用屬性:

name:定義下拉列表的名稱
size:定義下拉列表中可見選項的數目
multiple:定義可選擇多個選項

option

用於定義下拉列表中的選項。

需要位於標籤內部

常用屬性:

value:定義送往服務器的選項值
selected:定義選項爲選中狀態。

8.4 textarea 標籤

<textarea>標籤用於定義一個多行文本輸入控件(多行文本框,文本域)

常用屬性:

name:定義多行文本框名稱
cols:定義多行文本框可見寬度
rows:定義多行文本框可見行數

9. 框架標籤

所謂框架就是將頁面劃分成幾個窗框，就可以讓我們在同一個瀏覽器中顯示不止一個頁面。

9.1 frameset 標籤

<frameset>是框架結構標籤，它定義如果將窗口分割爲框架.

注意:不能與 <frameset></frameset> 標籤一起使用<body></body> 標籤。

常用屬性:

cols:垂直切割
rows:橫向切割
frameborder:定義框架的邊框，其值可以有0和 1，0表示不要邊框，1表示要顯示邊框。
border:定義框架的邊框厚度
bordercolor:定義框架的邊框顏色
framespacing:定義框架與框架之間的距離。

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>

9.2 frame 標籤

frame 是框架標籤，它定義放置在每個框架中的頁面。

常用屬性:

src:定義此框架要顯示的頁面url
name:定義此框架的名稱
frameborder:定義框架的邊框，其值可以有0和 1，0表示不要邊框，1表示要顯示邊框。
framespacing:定義框架與框架之間的距離
bordercolor:定義框架的邊框顏色
scrolling:定義是否顯示卷軸，YES表示要顯示，NO表示不顯示，AUTO視情況而定。
noresize:定義框架大小不可以改變。
marginhight:定義框架高度部分邊緣所保留的空間。
marginwidth:定義框架寬度部分邊緣所保留的空間。

如果瀏覽器不支持框架，我們可以使用

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-agZtQ4e7-1592031198693)(assets/1554022716979.png)]

9.3 iframe 標籤

iframe 標籤會創建包含另外一個文檔的內聯框架（即行內框架）

常用屬性:

src:定義些框架要顯示的頁面url
name:定義些框架的名稱
width:定義些框架的寬度
height:定義些框架的高度
marginwidth:定義插入的頁面與框邊所保留的寬度
marginheight: 定義插入的頁面與框邊所保留的高度
frameborder:定義框架的邊框，1表示顯示邊框，0表示不顯示
scrolling:定義是否允許捲動，YES允許，NO不允許。

10. meta -元數據標籤

屬性	示例	描述
charset	`<meta charset="UTF-8">`	定義文檔的字符編碼。
name	description keywords	把 content 屬性關聯到一個名稱。

定義文檔的字符集編碼

<meta charset="UTF-8">

定義針對搜索引擎的關鍵詞：seo必備。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

定義對頁面的描述：

<meta name="description" content="免費的 web 技術教程。" />

去除緩存

link href=“css/1.css?v=2222"

<meta HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> 
<meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 
<meta HTTP-EQUIV="expires" CONTENT="0">

11. 顏色值

顏色由紅®、綠(G)、藍(B)組成。

顏色值由十六進制來表示紅、綠、藍（RGB）。
每個顏色的最低值爲0(十六進制爲00)，最高值爲255(十六進制爲FF)。
十六進制值的寫法爲#號後跟三個或六個十六進制字符。
三位數表示法爲：#RGB，轉換爲6位數表示爲：#RRGGBB。

<!DOCTYPE html>
<html>
	<body>
		<p style="background-color:red">
			通過顏色名稱設置背景顏色
		</p>

		<p style="background-color:#FFFF00">
			通過十六進制設置背景顏色
		</p>

		<p style="background-color:rgb(255,255,0)">
			通過 rgb 值設置背景顏色
		</p>
	</body>
</html>

12. 特殊字符

實體名稱	顯示結果	描述
` `		空格
`<`	`<`	小於號
`>`	`>`	大於號
`&`	`&`	和號
`"`	`"`	引號
`'` (IE不支持)	`'`	撇號
`¢`	`￠`	分
`£`	`£`	鎊
`¥`	`¥`	人民幣/日元
`€`	`€`	歐元
`§`	`§`	小節
`©`	`©`	版權
`®`	`®`	註冊商標
`™`	`™`	商標
`×`	`×`	乘號
`÷`	`÷`	除號

實體名稱	顯示結果	描述
` `		空格
`<`	`<`	小於號
`>`	`>`	大於號
`&`	`&`	和號
`"`	`"`	引號
`'` (IE不支持)	`'`	撇號
`¢`	`￠`	分
`£`	`£`	鎊
`¥`	`¥`	人民幣/日元
`€`	`€`	歐元
`§`	`§`	小節
`©`	`©`	版權
`®`	`®`	註冊商標
`™`	`™`	商標
`×`	`×`	乘號
`÷`	`÷`	除號

實體名稱	顯示結果	描述
` `		空格
`<`	`<`	小於號
`>`	`>`	大於號
`&`	`&`	和號
`"`	`"`	引號
`'` (IE不支持)	`'`	撇號
`¢`	`￠`	分
`£`	`£`	鎊
`¥`	`¥`	人民幣/日元
`€`	`€`	歐元
`§`	`§`	小節
`©`	`©`	版權
`®`	`®`	註冊商標
`™`	`™`	商標
`×`	`×`	乘號
`÷`	`÷`	除號

文章目錄

HTML5

二、排版標籤

2.1 標題標籤

2.2 段落標籤

2.3 水平線標籤

3.1 div 標籤

3.2 span 標籤

4. 鏈接標籤

5. 圖片標籤

6. 列表標籤

6.1 ul 標籤

6.2 li 標籤

6.3 ol 標籤

7. 表格標籤-對齊

7.1 table 標籤

7.2 tr 標籤

7.3 th 標籤

7.4 td 標籤-格子

colspan 屬性

rowspan 屬性

7.5 caption 標籤

7.6 thead 標籤

7.7 tbody 標籤

7.8 tfoot 標籤

8. 表單標籤-提交

8.1 form 標籤

8.2 input 標籤

text（默認）

password

radio

checkbox

button

hidden

file

submit

reset

image

8.3 select和option標籤

select

option

8.4 textarea 標籤

9. 框架標籤

9.1 frameset 標籤

9.2 frame 標籤

9.3 iframe 標籤

10. meta -元數據 標籤

11. 顏色值

12. 特殊字符

10. meta -元數據標籤

實體名稱	顯示結果	描述
` `		空格
`<`	`<`	小於號
`>`	`>`	大於號
`&`	`&`	和號
`"`	`"`	引號
`'` (IE不支持)	`'`	撇號
`¢`	`￠`	分
`£`	`£`	鎊
`¥`	`¥`	人民幣/日元
`€`	`€`	歐元
`§`	`§`	小節
`©`	`©`	版權
`®`	`®`	註冊商標
`™`	`™`	商標
`×`	`×`	乘號
`÷`	`÷`	除號