HTML常用標籤

05-01

HTML是一種標記語言，它通過在不同的內容上添加不同的標籤，實現頁面在瀏覽器中正確展示。HTML語言最大的特點是它的標籤都是語義化的，也就是說我們可以通過標籤對應單詞的含義大致理解它所標記的是何種形式的內容，所以在編寫HTML的時候，一定要使用正確的標籤，避免使用無含義或錯誤含義的標籤。

本文就來介紹一下在編寫HTML時最常用的一些標籤。

1、div和span

這兩個標籤是HTML中唯一的兩個沒有任何特殊含義的標籤，僅僅是對內容的一個劃分，它們沒有默認的樣式，被這兩個標籤標記的部分也不具有任何特殊的形式，因此這兩個標籤是通用型標籤。

區別是<div>是一個塊級元素，常用於對頁面的結構進行劃分，<span>是行內元素，用來標記行內的一小部分內容。

我們在編寫HTML時，除非某部分的內容確實沒有相對應的標籤去標記，否則儘可能不要使用<div>和<span>。

由於沒有任何含義，在用<div>的時候一般要給一個屬性class，以便於對這部分內容進行樣式的修改。

例：<div class="class-name"> <span>xxx</span></div>

2、p

<p>標籤表示一個段落，是文章的內容。

例：<p>這是一段話</p>

3、h1、h2、h3、h4、h5、h6

<h1>~<h6>表示內容的標題，<h1>最大，<h6>最小

例：<h1>一級標題</h1><h2>二級標題</h2>

4、strong

<strong>標籤表示強調

例：<span>這句話<strong>非常</strong>重要</span>

5、img

<img>標籤表示在該位置嵌入一個圖片

例：<img src="#" alt="這是一個圖片">

屬性src是圖片的url，alt是圖片載入失敗時用來替換顯示的文本，通常要寫對這張圖片的說明。

6、ul、ol、li

<ul> unordered list，表示一個無序列表

<ol> ordered list，表示一個有序列表

這兩個標籤都要嵌套<li>標籤使用，表示列表中的一項

例：<ul> <li>內容1</li> <li>內容2</li></ul>

7、dl、dt、dd

<dl> description list ，這是一個描述列表，可以用於構造一個個人信息表，用法和上面類似，用<dl>標籤嵌套<dt> description item和<dd> description definition

例：<dl> <dt>姓名</dt> <dd>張三</dd> <dt>性別</dt> <dd>男</dd></dl>

8、nav

<nav> navigation，表示一個導航欄

9、main

<main>，表示頁面的主要部分

10、section

<section>標籤表示一個部分，但不是主要的部分

11、footer

<footer>標籤表示一個頁腳

12、br

<br>標籤表示

13、hr

<hr>標籤表示一個水平分割線

常用的標籤中有幾個用法比較複雜的標籤，以下來介紹一下幾個複雜標籤的用法：

1、iframe

例：<iframe src="#" frameborder="0" name="xxx"></iframe><a href="http://qq.com" target="xxx">QQ</a>

2、a

<a> anchor，用於發起一個GET請求，跳轉頁面。

常用屬性：

target：

_self: 在當前窗口打開，這個為默認值
_blank: 在一個新的窗口或標籤頁打開頁面
_parent: 在父級窗口中打開，<iframe>的父級窗口為原窗口
_top: 在頂層窗口打開，即無論嵌套幾層，都在最外層即原窗口打開
其他窗口name屬性的值：在指定的窗口打開

download: 此為布爾屬性，點擊後下載URL，將其保存為本地文件

（註：下載URL一般有兩種方法：1、在HTTP的響應頭中作出說明；2、在<a>標籤中加入download屬性）

href：指定鏈接目標的URL，它的值有以下幾種寫法

相對地址，如xxx.html、xxxxxx等
http、https協議的URL，如http://qq.com（註：http://qq.com是錯誤的，它僅僅表示一個相對路徑）
無協議形式，如//http://qq.com，這將會使用當前文件的協議
#xxx，加上錨點，不發請求，只做頁內跳轉
?name=xxx，加入查詢參數，會發起GET請求
偽協議javascript:alert(1); 點擊後執行JS代碼，若寫為javascript:; 則點擊後頁面不做任何動作，用來滿足類似的奇葩需求
若值為空，則表示當前頁面本身，相當於刷新了頁面

3、form

<form>標籤主要用於發起POST請求，向伺服器提交表單數據。

要提交數據，必須在form標籤中嵌套一個提交按鈕，有兩種選擇：1、<input type="submit">；2、若form下只有一個按鈕，則<button>元素（不添加type屬性）也可以用於提交數據

常用屬性：

action：指定數據提交到的URL，要用HTTP協議，file協議不支持POST

method：指定請求的類型，可選post或get. 若用get，表單數據會附加在 action 屬性的URI中，並以 ? 作為分隔符（一般，用<a>GET，用<form>POST）

target：和<a>類似，不再贅述

4、input

<input>標籤通常嵌套在<form>中使用，為表單創建互動式控制項，用於讓用戶輸入、提交等。

常用屬性：

value: 控制項的初始值，此屬性是可選的，除非 type 屬性是 radio 或 checkbox

name：指定<input>控制項的名稱，會與表單數據一起提交，輸入數據的<input>必須要指定name，否則數據無法提交

type：

text: 輸入框，它是type屬性的默認值
password: 密文輸入框
button: 無默認動作的按鈕，不能用它提交數據
submit: 用於提交表單數據的按鈕
checkbox: 創建複選框，必須使用 value 屬性定義此控制項被提交時的值
radio: 單選框，如果多個單選框的name相同，則只能選中其中一個，必須使用 value 屬性定義此控制項被提交時的值

（tip: 可以將選框與選框的文字關聯起來，這樣用戶點擊文字時也可以選中選框，方法有下面兩種）

<label><input type="radio">選我</label><input type="radio" id="xxx"><label for="#xxx">選我</label>

5、select、option

<select>標籤可以創建一個下拉選擇菜單，嵌套<option>來創建選項。

<select>的屬性：

name：必須
multiple：表示可以多選（按住Ctrl鍵）

<option>的屬性：

value：必須
selected：表示默認選中
disabled：表示不可選

6、textarea

<textarea>標籤創建一個多行純文本編輯控制項，它默認輸入區的大小可以讓用戶拉動，通常用CSS使其大小固定，resize:none

屬性：

name：必須

cols：列數

rows：行數

form綜合示例：

<form action="users" method="POST"> <label>用戶名<input type="text" name="username"></label> <label>密碼<input type="password" name="password"></label> 喜歡的水果 <label><input type="checkbox" name="fruit" value="apple">蘋果</label> <label><input type="checkbox" name="fruit" value="orange">橘子</label> 愛我嗎 <label><input type="radio" name="loveme" value="yes">Yes</label> <label><input type="radio" name="loveme" value="no">No</label> <select name="group" multiple> <option value="">-</option> <option value="1">第一組</option> <option value="2">第二組</option> <option value="3" disabled>第三組</option> <option value="4" selected>第四組</option> </select> <hr> <textarea style="resize: none;" name="xxx" cols="30" rows="10"></textarea> <input type="submit" value="提交"></form>

效果：

7、table

<table>標籤用於創建一個數據表格，不是很常用。

子元素：

<colgroup>：用來控制每一列，嵌套<col>表示某一列
<thead> table head：表格頭部
<tbody> table body：表格數據部分，子元素同上
<tfoot> table foot：表格總結部分，子元素同上

<thead><tbody><tfoot>的子元素：

<tr> table row：表示一行
<th> table header：項目
<td> table data：項目的數據

table示例：

效果：