HTML基礎之HTML常用標簽

TML是一種用來描述網頁的標記性語言。學習HTML可能并不難，主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況，整理出平時常用的HTML標簽。

HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客

1、最基本的HTML結構

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

2、最常用的HTML標簽

a、布局標簽

div標簽定義文檔中的分區或節（division/section），可以把文檔分割為獨立的、不同的部分，主要用于布局。

aside標簽的內容可用作文章的側欄，<span style="color: #ff0000;">html5新增標簽</span>。

header標簽定義頁面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標簽</span>。

section標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標簽</span>。

footer 標簽定義文檔或節的頁腳，通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等，<span style="color: #ff0000;">html5新增標簽</span>。

article標簽規定文章獨立的其他內容，比如：標題、內容、評論，<span style="color: #ff0000;">html5新增標簽</span>。

b、文本標簽

h1-h6標簽可定義標題

p標簽定義段落

b/strong標簽加粗

em標簽來表示強調的文本，斜體

strong標簽表示重要文本

u標簽下劃線

s標簽刪除線

br標簽表示回車換行

hr標簽表示水平線

span標簽被用來組合文檔中的行內元素。

blockquote標簽表示塊引用

pre標簽可定義預格式化的文本，保持原有格式的一種標簽。

sub標簽下標，

sup>標簽上標

 表示一個空格

©表示版權符

<表示<

>表示>

c、a標簽定義超鏈接，指定頁面間的跳轉。鏈接可以指向外部鏈接或者頁面內部id錨點，可以在當前頁面打開，新開窗口。

d、多媒體標簽

img標簽主要在網頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設置，否則圖像會變形。

audio標簽定義聲音，比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。

<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>

video標簽定義視頻，比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。

<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>

e、序列化標簽

ul和li無序列表標簽

<ul>

</ul>

ol和li有序列表標簽，可以使用type屬性規定有序列表符號的類型。1 按數字有序排列，為默認值，（1、2、3、4）；a 按小寫字母有序排列，（a、b、c、d）；A 按字母大寫有序排列，（A、B、C、D）。i 按小寫羅馬字母有序，（i, ii, iii, iv）；I 按小寫羅馬字母有序，（I, II, III, IV）。

<ol>

</ol>

dl標簽定義了定義列表（definition list），dl標簽用于結合 dt（定義列表中的項目）和 dd（描述列表中的項目）。

<dl>

<dd>用來計算的儀器 ... ...</dd>

</dl>

f、表格標簽

table標簽和tr標簽，th標簽和td標簽，合并單元格。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

g、表單標簽

form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼，需要提交的表單一定要放在form標簽內。

input標簽用于搜集用戶信息

密碼，輸入的字符會被掩碼（顯示為星號或原點）

文件類型的表單，上傳文件時，form表單一定要設置為enctype="multipart/form-data"

隱藏表單

提交

重置

radio單選

<input name="sex" type="radio" value="1" />男

<input name="sex" type="radio" value="2" checked="checked" />女

checkbox多選

<input name="skill" type="checkbox" value="1" checked="checked" />PHP

<input name="skill" type="checkbox" value="2" />前端

<input name="skill" type="checkbox" value="2" />數據庫

<span style="color: #ff0000;">注：checked="checked"可以簡寫成checked</span>

label標簽為input元素定義標注，如果您點擊label元素文本，就會觸發此input控件。

textarea標簽，設置文本區內的可見行數和寬度

<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>

button標簽定義一個按鈕

提交按鈕

重置按鈕

select標簽和option標簽下拉列表

單選菜單列表框

<option value="2" selected="selected">raykaeso</option>

</select>

多選列表下拉框，shift加鼠標單擊，可以連續選擇多個選擇，CTRL+鼠標點擊，可以點擊多個。

<option value="3">raykaeso</option>

</select>

注:selected="selected"可簡寫成selected，表示選中

3、其他HTML事項

a、HTML標簽和屬性是不區分大小寫的，建議HTML標簽和屬性都小寫，屬性值必須用雙引號包圍。

b、HTML標簽都是以開始標簽起始，以結束標簽終止。大部分HTML標簽都是成對出現的，稱為雙標簽，比如：p標簽、div標簽，也有的HTML標簽在開始標簽中結束的標簽，稱為單標簽，比如：hr標簽、br標簽。大多數 HTML 元素可擁有屬性，文本內容都是寫在開始標簽與結束標簽之間。

c、HTML標簽之間盡量縮進與換行，每行代碼不要過長，方便閱讀和維護。

d、HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽，p標簽嵌套div標簽。

e、建議不使用HTML已經廢棄的或者不贊成使用的標簽，少使用table布局、iframe框架嵌套以及flash播放器。

來源：PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽（http://www.leixuesong.cn/2045）

文本標記語言(外國語簡稱:HTML)標記標簽通常被稱為HTML標簽，HTML標簽是HTML語言中最基本的單位，HTML標簽是HTML(標準通用標記語言下的一個應用)最重要的組成部分

HTML標簽的大小寫無關的，例如"主體"<body>跟<BODY>表示的意思是一樣的，不過還是推薦大家使用小寫。

下面是我給大家整理的六種HTML常用標簽，希望可以對大家有用。

一、頁面標簽

<!DOCTYPE> 定義文檔類型

<html></html> 定義html文檔

<head></head>定義關于文檔的信息

<title></title>定義文檔標題

<body></body>定義文檔內容

二、格式標簽

<h1></h1>~<h6></h6>標題

<p></p> 段落

<strong></strong>語氣更為強烈的強調文本/粗體

<em></em>強調文本

<i></i>斜體文本

<big></big>大號字體

<small></small>小號字體

<sup></sup>上標文本

<sub></sub>下標文本

<ins></ins>被插入文本

<time></time>定義日期/時間

<br>換行

<hr>水平線

三、表格標簽

<table></table> 定義表格

<caption></caption> 定義標題

<thead></thead> 定義表頭部（眉）

<tbody></tbody> 定義主體

<tfoot></tfoot> 定義表尾部（腳）

<tr></tr>定義行

<td></td>定義單元格（列）

<th><th>定義表標題行

四、列表標簽

<ul></ul>定義無序列表

<ol></ol>定義有序列表

<li></li>定義無序列表/有序列表的列表項

<dl></dl>定義自定義列表

<dt></dt>定義自定義列表項

<dd></dd>定義自定義的描述

五、布局&語義化標簽

<div></div>塊級元素

<span></span>行元素

<header></header>頁眉

<footer></footer>頁腳

<section></section>文檔中的區塊

<article></article>文章

<nav></nav>導航

<aside></aside>內容之外的內容

六、表單標簽

<form>表單

<input>輸入域

<textarea>文本域

<label>標簽

<fieldset>域

<legend>域的標題

<select>選擇列表

<optgroup>選擇組

<option>下拉列表選項

<button>按鈕

<fieldset>圍繞表單中元素的邊框

<legend> fieldset 元素的標題

七、其它

<img>圖像

<a>超鏈接

<figure> 媒介內容的分組

<figcaption> <figure> 元素的標題

<audio>聲音

<video>視頻

<source>媒介源

<canvas>圖形容器

<svg>添加svg

如果對前端web感興趣，想了解更多的前端入門知識，加微信(858568103），更多更全的資料讓你的IT之路暢通無阻！

跳轉到郵箱：

 <a href="mailto:someone@microsoft.com?subject=Hello%20again">發送郵件</a>
 <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發送郵件！</a>

圖像映射：

創建圖像映射需要img、map、area三個標簽同時存在，img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性，area中coords屬性為設置或返回圖像映射中可點擊區域的坐標,area標簽可以設置多個。相關文檔推薦：https://www.w3school.com.cn/html/html_images.asp


 <body>
        <img src="img.PNG" usemap="#buhuo" alt="捕獲" />
        <map name="buhuo" id="buhuo">
            <area shape="circle" coords="10,10,100,100" href ="上次閱讀位置.PNG" target ="_self"alt="沒有圖片！" />
            <area shape="circle" coords="10,10,100,100" href ="上次閱讀位置.PNG" target ="_self"alt="沒有圖片！" />
        </map>
    </body>

特殊字符：標簽會被解析，采用特殊字符代碼可以代替特殊字符

錨點定位：

通過錨點鏈接，用戶可以快速的定位到目標。


 <a href="#two">定位到標題2</a><!-- 使用<a href="#id名">鏈接文本</a>，注意#的使用 --> 
    
  <h3>標題1</h3>
  <h3 id="two">標題2</h3><!-- 使用id名進行標注供錨點鏈接使用 -->
  <h3>標題3</h3>
  <h3>標題4</h3>

路徑：

相對路徑：

分為三種情況：1、同級目錄 2、上一級目錄 3、下級目錄


   <img src="picture.jpg"/> <!-- 同級目錄下的文件直接寫文件名引入即可 -->
    <img src="images/picture.jpg"/> <!-- 下級目錄中的文件需要先進入下一級目錄，然后/找到文件后寫文件名即可 -->
    <img src="../images/picture.jpg"/> <!-- 上級目錄中的文件需要先../進入上級目錄，再使用同級目錄的方法查找文件 -->

絕對路徑：

絕對路徑是相對于計算機或者網站(網址)而言的，一般很少使用絕對路徑


 <img src="C:\Users\17121\Desktop\picture.jpg"/> <!-- 電腦上面絕對路徑幾乎沒人使用，因為換電腦后，文件就無法使用 -->
    <img src="http://webimages/picture.jpg"/> <!-- 網上的絕對路徑經常會被使用，但是文件一旦消失或者主機和域名過期，將無法使用 -->

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯系本人咨詢：
QQ：810665436
微信：ConstancyMan

在線咨詢

上一篇：Python爬蟲進階（六）：爬取Ajax內容
下一篇：html中滾動字體的設置

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML基礎之HTML常用標簽

1、最基本的HTML結構

2、最常用的HTML標簽

3、其他HTML事項

您的項目需求

1、最基本的HTML結構

2、最常用的HTML標簽