HTML常用標簽、form表單、標簽分類

標簽： html

一、HTML

1.HTML簡介

HTML（HyperText Markup Language）就是超文本標記語言。"超文本"就是表示?面內可以包含非文字元素，如：圖片、鏈接、音樂等等。

1.1 基礎語法

1.1.1 標簽

HTML 標記是由"<“和”>"所括住的指令標記，用于向瀏覽器發送標記指令。

主要分為：單標記指令、雙標記指令（由"<起始標記>“＋內容＋”</結束標記>"構成）。

1.1.2 整體結構

<!-- 聲明當前HTML的版本是HTML5 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--主體內容-->
	</body>
</html>

2.常用標簽

HTML?面是由標簽組成，不同的標簽瀏覽器對其進行不同樣式和內容的渲染，我們需要記憶常用的標簽即可。大致可分為如下幾類：標題、水平線、段落、換行、圖片、表格、超鏈接、列表、表單、下拉列表、div 和 span等。

2.1 標題和水平線

2.1.1 標題

h1 - h6 標簽可定義標題，標題依次遞減，由于 h 元素擁有確切的語義，因此請慎重地選擇恰當的標簽層級來構建文檔的結構。請不要利用標題標簽來改變同一行中的字體大小。

h999這樣的標簽不產生錯誤，但是不具有標題的效果。

h1標簽可以為搜索引擎獲取，便于?面在被搜索的時候檢索到，但是一個?面最好只有一個h1標簽，否則可能進入搜索引擎的黑名單。

<!--標題（塊級元素：元素會自動換行）h1~h6,依次遞減-->
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
...

2.1.2 水平線

hr 標簽在 HTML ?面中創建一條水平線（horizontal rule）可以在視覺上將文檔分隔成各個部分。在 HTML 中，hr 標簽沒有結束標簽。

<!--hr 水平線-->
<hr />
<hr>
<hr width="80%" />
<hr width="80%" align="left" size="5" />
<hr width="80%" align="left" size="5" color="red" />

常用屬性：
在這里插入圖片描述

2.2 段落和換行

2.2.1 段落

p標簽定義段落。p 元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規定。

<!--p 段落，行之間會有間隙 
屬性：align對齊方式 
	center 居中對齊 
	left 居左對齊（默認） 
	right 居右對齊
-->
<p align="center">p 元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規定。</p>
<p align="right">p 元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規定。</p>

常用屬性：
在這里插入圖片描述

2.2.2 換行

br標簽為換行符號 br 標簽是空標簽（意味著它沒有結束標簽，因此這是錯誤的：<br></br>）。

注意：br 標簽只是簡單地開始新的一行，而當瀏覽器遇到 p 標簽時，通常會在相鄰的段落之間插入一些垂直的間距。請使用br 來輸入空行，而不是分割段落。

<!--br 換行，單標簽
<br> 
<br/>
-->
你好<br />
HELLO

2.3 列表

2.3.1 無序列表

由 ul 和 li 標簽組成。

<!--列表：
無序列表
  		<ul>
  			<li></li>
  		</ul>
可以改變無序列表前面點的形狀 type
dise：實心圓（默認）circle：空心圓square：方塊
-->
<ul type="circle">
	<li>好好學習</li>
	<li>天天向上</li>
	<li>天天向上</li>
</ul>

常用屬性：
在這里插入圖片描述

2.3.2 有序列表

由 ol 和 li 標簽組成。

<!--列表：
有序列表
     	<ol>
     		<li></li>
     	</ol>
可以改變有序列表前的數字type
a,A,1,i,I
-->
<ol type="a">
	<li>好好學習</li>
	<li>天天向上</li>
	<li>天天向上</li>
</ol>

常用屬性：
在這里插入圖片描述

2.4 div和span

2.4.1 div

div是一個塊級元素，通常與css配合使用，用于布局。

div 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 div 固有的唯一格式表現。可以通過 div 的 class 或 id 應用額外的樣式。

<!--div
層，默認寬度占父元素的總寬度（默認含一行）
屬性：
對齊方式 align
寬度 width
高度 height
-->
<div style="width: 200px;">你好</div>
<div>Hello</div>

常用屬性：
在這里插入圖片描述

2.4.2 span

span標簽被用來組合文檔中的行內元素，span 沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。

<!--span
塊，默認是有多少內容占多少地方
-->
<span>你好</span>
<span>Hello</span>

2.5 格式化標簽

2.5.1 font

規定文本的字體、字體尺寸、字體顏色。

<!--font
規定文本的字體，字體尺寸，字體顏色
-->
<font color="red" size="4" face="楷體">規定文本的字體、字體尺寸、字體顏色</font>

2.5.2 pre

定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體（原樣輸出）。

<!--pre
定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體
-->
<pre>
	定義預格式化的文本。
	被包圍在 pre 元素中的文本通常會保留空格和換行符。 而文本也會呈現為等寬字體
</pre>

2.5.3 文本標簽

<!--
<b>（粗文本）、<i>（斜體文本）、<u>（下劃線文本）、 
?< del >（中劃線文本）、<sub>（下標文本）、<sup>（上標文本）
-->
你好<br />
<b>你好</b>
<strong>你好</strong>
<i>你好</i>
<u>你好</u>
<del>你好</del><br />
H<sub>2</sub>O
2<sup>3</sup>

3.a標簽

a標簽定義超鏈接，用于從一張?面鏈接到另一張?面。

a元素最重要的屬性是 href 屬性，它指示要鏈接的目標位置，同時沒有href屬性a標簽內的內容與普通文本沒有區別，也就失去了超鏈接的功能。

若是想要跳轉到當前?面，那么href的值為#。被鏈接?面通常顯示在當前瀏覽器窗口中，除非您規定了另一個目標（target 屬性）。

<!-- 
a標簽
超鏈接，用來從一個頁面鏈接到另一個頁面
屬性：
href：需要鏈接的頁面地址 （如果不設置這個標簽，則和普通的文本沒有區別）
target：打開的方式
	_self：當前窗口（默認）
	_blank：新開空白窗口
 -->
<a href="http://www.baidu.com">百度</a><br>
<a href="http://www.baidu.com" target="_self">百度</a><br>
<a href="http://www.baidu.com" target="_blank">百度</a><br>

常用屬性：
在這里插入圖片描述
錨點的實現：

<!-- 錨點的實現
設置錨點：
1. a標簽
	設置name屬性值
2.其他標簽（包含a標簽）
	設置id屬性值
錨點定位：
<a href="#name屬性值或id屬性值"></a>
-->

4.圖片

img 元素向網?中嵌入一幅圖像。

注意：從技術上講，img 標簽并不會在網?中插入圖像，而是從網?上鏈接圖像。img 標簽創建的是被引用圖像的占位空間。

<!-- img標簽
圖片標簽，引入一張圖片 （圖片的地址）
屬性：
src：需要引入的圖片的地址
width：寬度
height：高度
title：當鼠標懸停在圖片上時，顯示的文字
-->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
<img src="img/test.jpg" width="200px" height="200px" border="3" alt="新安" title="雨后新安江薄霧輕罩 樓閣若隱若現如仙境"  />

必須屬性：
在這里插入圖片描述常用屬性：

5.表格

table 標簽定義 HTML表格。

tr 標簽定義表格的行。tr元素包含一個或多個th或td元素

td 標簽定義 HTML 表格中的標準單元格。

th 定義表格內的表頭單元格。th元素內部的文本通常會呈現為居中的粗體文本，而 td 元素內的文本通常是左對?的普通文本。

簡單的HTML表格由table元素以及一個或多個tr、th、或td元素組成。

理解：table相當于一個表格的外框，tr為行，td為一個一個單元格，th為有標題作用的單元格，th中的內容同時有加粗的效果。

<!-- table表格						
style="border-collapse: collapse;"
邊框的顯示效果
collapse 合并邊框
separate 分離邊框（默認）
 -->
<table border="1" width="600px" height="300px" align="center" style="border-collapse: collapse;">
	<tr>
		<th>姓名</th>
		<th>密碼</th>
		<th>年齡</th>
	</tr>
	<tr align="center" valign="top" bgcolor="aquamarine">
		<td>張三</td>
		<td>123456</td>
		<td>18</td>
	</tr>

常用屬性：
在這里插入圖片描述 tr常用屬性：
td 的colspan和rowspan分別規定單元格橫跨的列數和行數。

6.表單

6.1 form

form 標簽用于為用戶輸入創建 HTML 表單。

表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。還可以包含 textarea等元素。

表單用于向服務器傳輸數據。form 元素是塊級元素，其前后會產生折行。

<form action="" method="get">

</form>

常用屬性：
在這里插入圖片描述 method：表單提交方式：get、post。

get：默認，主動的獲取方式，數據放在url上，數據的容量有限，安全性差，有緩存。

post：數據放在請求實體中，數據量理論上沒有限制，相對安全，沒有緩存。

6.2 input

input 標簽用于搜集用戶信息。

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

<!-- 文本框 text -->
用戶名稱：<input type="text" id="uname" name="uname" value="zhangsan" readonly="readonly" /> <br />
<!-- 密碼框 password -->
用戶密碼：<input type="password" name="upwd" maxlength="6" /> <br />

<!-- 單選框 radio  注：一組單選框必須設置相同的name屬性值 -->
用戶性別：<input type="radio" name="usex" value="man" checked="checked"  />男  
		 <input type="radio" name="usex" value="woman" />女
		 <input type="radio" name="usex" value="unknown" disabled="disabled" />未知

是否已婚： <input type="radio" name="isMarried"  />是
		  <input type="radio" name="isMarried"  />否

<!-- 復選框 checkbox  注：一組復選框必須設置相同的name屬性值  -->
興趣愛好：<input type="checkbox" name="hobbys" value="sing" checked="checked"  /> 唱歌
		 <input type="checkbox" name="hobbys" value="dance" /> 跳舞
		 <input type="checkbox" name="hobbys" value="rap" /> Rap

<!-- 文件域 file -->
上傳頭像：<input type="file" name="uhead" />

<!-- 普通按鈕 button  -->
<input type="button" value="普通按鈕" />

<!-- 重置按鈕 reset 注：不能重置默認值-->
<input type="reset" value="重置按鈕" />

<!--  圖片提交按鈕 image -->
<input type="image" src="img/test.jpg" width="20px" height="20px" />

<!-- 隱藏域 hidden-->
<input type="hidden" name="uId" value="1" />

常用屬性：
在這里插入圖片描述若上傳文件，請求方式為post，且表單添加一個屬性:enctype=“multipart/form-data”

注意：

沒有name屬性的屬性是無法提交到后臺的！！！！
Radio單選按鈕以name相同為一組。
Checkbox復選按鈕以name相同為一組。

6.3 textarea

該標簽定義多行的文本輸入控件。文本區中可容納無限數量的文本，可以通過 cols 和 rows 屬性來規定 textarea 的尺寸。cols規定文本區內的可?寬度。rows規定文本區內的可?行數。

<!--textarea 文本域 -->
個人簡介：
<textarea cols="50" rows="10" name="uremark"></textarea>

6.4 label

label 標簽為input 元素定義標注（標記）。

label元素不會呈現任何的特殊效果。

label標簽的for屬性應當與相關元素的id屬性相同，此時點擊label標簽會自動為元素聚焦。

<label for="uname">用戶名稱：</label><input type="text" id="uname" name="uname" value="zhangsan" readonly="readonly" /> <br />

6.5 button

<!-- 提交按鈕 submit-->
<input type="submit" value="提交" />

<!-- button按鈕 -->
<button type="button">普通按鈕</button>

常用屬性：
在這里插入圖片描述

6.6 select

<!-- select 下拉框-->
選擇顏色：<select name="color" multiple="multiple" size="3">
			<option value="red">紅色</option>
			<option value="green">綠色</option>
			<option value="blue" selected="selected">藍色</option>
			<option value="black">黑色</option>
			<option value="white">白色</option>
		 </select>

		 <select name="color"  >
			<option >紅色</option>
			<option value="green">綠色</option>
			<option value="blue" selected="selected">藍色</option>
			<option value="black" disabled="disabled">黑色</option>
			<option value="white">白色</option>
		 </select>

select常用屬性：
在這里插入圖片描述 option常用屬性：

7.常用字符實體

在 HTML 中，某些字符是預留的。

在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認為它們是標簽。

如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。

實體名稱對大小寫敏感！

在這里插入圖片描述

8.標簽的分類

HTML中標簽元素三種不同類型：塊狀元素，行內元素，行內塊狀元素。

8.1 塊級元素

元素都從新的一行開始，并且其后的元素也另起一行；元素的高度、寬度、行高以及頂和底邊距都可設置；元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

8.2 行內元素

和其他元素都在一行上；元素的高度、寬度及頂部和底部邊距不可設置；元素的寬度就是它包含的文字或圖片的寬度，不可改變。

8.3 行內塊狀元素

和其他元素都在一行上；元素的高度、寬度、行高以及頂和底邊距都可設置。

本文鏈接：https://blog.csdn.net/qq_43647383/article/details/107215537

智能推薦

表單標簽<form>

表單主要用于收集網頁瀏覽者的相關信息，其標簽為<form></form>。表單標簽的基本語法格式如下。實現后的結果如下所示。...

html（六）：form表單之select標簽、textarea標簽、lable標簽、select標簽

一、form表單之下拉選項標簽<select></select> 上面的html頁面中，下拉選項select標簽固定格式：效果截圖：提交之后，server端接收到的值：二、select是否可以多選？可以，并且可以設置選擇的個數，也可以不設置選擇的個數 server端接收的數據：三、optgroup屬性，selected屬性效果截圖：四、textarea標簽五、...

html HTML的form表單的基礎標簽和使用

form標簽 form 表單標簽可以提交 form action="#" method=“get”> action提交的路徑 method提交的方法 get/post input標簽文本框 text 填入內容的密碼框 password 填入密碼單選框 radio 只能選一種多選框 checkbox 能夠進行多選隱藏框 hidden 不顯...

二、html常用標簽、表格、表單

Html常用標簽排版標簽標題標簽 h1,h2,h3,h4,h5,h6 段落標簽水平線換行標簽 div span標簽 div+span網頁布局文本格式化標簽` 標簽顯示效果 < b>< /b> < strong>< /strong> 粗體 < i>< /i>< em>< /em> 斜體 <...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

HTML常用標簽、form表單、標簽分類

HTML

一、HTML

1.HTML簡介

1.1 基礎語法

1.1.1 標簽

1.1.2 整體結構

2.常用標簽

2.1 標題和水平線

2.1.1 標題

2.1.2 水平線

2.2 段落和換行

2.2.1 段落

2.2.2 換行

2.3 列表

2.3.1 無序列表

2.3.2 有序列表

2.4 div和span

2.4.1 div

2.4.2 span

2.5 格式化標簽

2.5.1 font

2.5.2 pre

2.5.3 文本標簽

3.a標簽

4.圖片

5.表格

6.表單

6.1 form

6.2 input

6.3 textarea

6.4 label

6.5 button

6.6 select

7.常用字符實體

8.標簽的分類

8.1 塊級元素

8.2 行內元素

8.3 行內塊狀元素

智能推薦

猜你喜歡