HTML基礎(chǔ)之HTML常用標(biāo)簽

TML是一種用來描述網(wǎng)頁的標(biāo)記性語言。學(xué)習(xí)HTML可能并不難，主要是要記一些HTML標(biāo)簽和標(biāo)簽代表的含義。下面PHP程序員雷雪松根據(jù)使用的情況，整理出平時(shí)常用的HTML標(biāo)簽。

HTML基礎(chǔ)之HTML常用標(biāo)簽-PHP程序員雷雪松的博客

1、最基本的HTML結(jié)構(gòu)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

2、最常用的HTML標(biāo)簽

a、布局標(biāo)簽

div標(biāo)簽定義文檔中的分區(qū)或節(jié)（division/section），可以把文檔分割為獨(dú)立的、不同的部分，主要用于布局。

aside標(biāo)簽的內(nèi)容可用作文章的側(cè)欄，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

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

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

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

article標(biāo)簽規(guī)定文章獨(dú)立的其他內(nèi)容，比如：標(biāo)題、內(nèi)容、評論，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。

b、文本標(biāo)簽

h1-h6標(biāo)簽可定義標(biāo)題

p標(biāo)簽定義段落

b/strong標(biāo)簽加粗

em標(biāo)簽來表示強(qiáng)調(diào)的文本，斜體

strong標(biāo)簽表示重要文本

u標(biāo)簽下劃線

s標(biāo)簽刪除線

br標(biāo)簽表示回車換行

hr標(biāo)簽表示水平線

span標(biāo)簽被用來組合文檔中的行內(nèi)元素。

blockquote標(biāo)簽表示塊引用

pre標(biāo)簽可定義預(yù)格式化的文本，保持原有格式的一種標(biāo)簽。

sub標(biāo)簽下標(biāo)，

sup>標(biāo)簽上標(biāo)

 表示一個(gè)空格

©表示版權(quán)符

<表示<

>表示>

c、a標(biāo)簽定義超鏈接，指定頁面間的跳轉(zhuǎn)。鏈接可以指向外部鏈接或者頁面內(nèi)部id錨點(diǎn)，可以在當(dāng)前頁面打開，新開窗口。

d、多媒體標(biāo)簽

img標(biāo)簽主要在網(wǎng)頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設(shè)置，否則圖像會(huì)變形。

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

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

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

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

e、序列化標(biāo)簽

ul和li無序列表標(biāo)簽

<ul>

</ul>

ol和li有序列表標(biāo)簽，可以使用type屬性規(guī)定有序列表符號的類型。1 按數(shù)字有序排列，為默認(rèn)值，（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標(biāo)簽定義了定義列表（definition list），dl標(biāo)簽用于結(jié)合 dt（定義列表中的項(xiàng)目）和 dd（描述列表中的項(xiàng)目）。

<dl>

</dl>

f、表格標(biāo)簽

table標(biāo)簽和tr標(biāo)簽，th標(biāo)簽和td標(biāo)簽，合并單元格。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

g、表單標(biāo)簽

form標(biāo)簽定義提交方式、提交地址、表單字符集以及如何對其進(jìn)行編碼，需要提交的表單一定要放在form標(biāo)簽內(nèi)。

input標(biāo)簽用于搜集用戶信息

密碼，輸入的字符會(huì)被掩碼（顯示為星號或原點(diǎn)）

文件類型的表單，上傳文件時(shí)，form表單一定要設(shè)置為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" />數(shù)據(jù)庫

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

label標(biāo)簽為input元素定義標(biāo)注，如果您點(diǎn)擊label元素文本，就會(huì)觸發(fā)此input控件。

textarea標(biāo)簽，設(shè)置文本區(qū)內(nèi)的可見行數(shù)和寬度

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

button標(biāo)簽定義一個(gè)按鈕

提交按鈕

重置按鈕

select標(biāo)簽和option標(biāo)簽下拉列表

單選菜單列表框

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

</select>

多選列表下拉框，shift加鼠標(biāo)單擊，可以連續(xù)選擇多個(gè)選擇，CTRL+鼠標(biāo)點(diǎn)擊，可以點(diǎn)擊多個(gè)。

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

</select>

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

3、其他HTML事項(xiàng)

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

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

c、HTML標(biāo)簽之間盡量縮進(jìn)與換行，每行代碼不要過長，方便閱讀和維護(hù)。

d、HTML標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。禁止a標(biāo)簽嵌套a標(biāo)簽，p標(biāo)簽嵌套div標(biāo)簽。

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

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

過web前端開發(fā)的都知道，每個(gè)標(biāo)簽都自帶樣式，比如body自帶margin，a標(biāo)簽自帶下劃線，li標(biāo)簽自帶小圓點(diǎn)，但是你知道更具體的嗎？以下的文檔還原了w3c對每個(gè)標(biāo)簽最初的定義，收藏一下，對你一定有幫助。

@charset "utf-8";/*@charset "gb2312";*//**
*============================================================================* 版權(quán)所有: 切版
* 網(wǎng)站地址: http://www.qieban.cn
* 該文件為W3C為標(biāo)簽賦予最原始樣式規(guī)則、制作參考無實(shí)際作用
* ----------------------------------------------------------------------------
**/ 
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block } li { display: list-item } head { display: none } table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } th { font-weight: bolder; text-align: center } caption { text-align: center } body { margin: 8px } h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .75em 0 } h3 { font-size: 1.17em; margin: .83em 0 } h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } h5 { font-size: .83em; margin: 1.5em 0 } h6 { font-size: .75em; margin: 1.67em 0 } h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } blockquote { margin-left: 40px; margin-right: 40px } i, cite, em, var, address { font-style: italic } pre, tt, code, kbd, samp { font-family: monospace } pre { white-space: pre } button, textarea, input, select { display: inline-block } big { font-size: 1.17em } small, sub, sup { font-size: .83em } sub { vertical-align: sub } sup { vertical-align: super } table { border-spacing: 2px; } thead, tbody, tfoot { vertical-align: middle } td, th { vertical-align: inherit } s, strike, del { text-decoration: line-through } hr { border: 1px inset } ol, ul, dir, menu, dd { margin-left: 40px } ol { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } u, ins { text-decoration: underline } br:before { content: "\A" } :before, :after { white-space: pre-line } center { text-align: center } :link, :visited { text-decoration: underline } :focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed } @media print { h1 { page-break-before: always } h1, h2, h3,
h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid } }

切版，切圖網(wǎng)旗下靠譜的web前端外包服務(wù)切圖客群體。http://www.qieban.cn/

收藏篇】HTML基礎(chǔ) 及其更詳細(xì)介紹

水平線:hr

width:寬度

color:顏色

align:對齊方式

size:高度

noshade:陰影單一屬性

列表

自定義列表 dl

dt:標(biāo)題

dd:內(nèi)容

有序列表：ol li

type：1 a A i I

無序列表：ul li

在線咨詢

上一篇：vue.js修改css樣式
下一篇：0權(quán)限的良心小工具！安卓尺子App體驗(yàn)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML基礎(chǔ)之HTML常用標(biāo)簽

1、最基本的HTML結(jié)構(gòu)

2、最常用的HTML標(biāo)簽

3、其他HTML事項(xiàng)

您的項(xiàng)目需求