HTML常用標簽

最常用的HTML標簽
a、布局標簽

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

aside標簽的內(nèi)容可用作文章的側欄,

header標簽定義頁面的頭部(介紹信息),

section標簽定義文檔中的節(jié)(section、區(qū)段)。比如章節(jié)、頁眉、頁腳或文檔中的其他部分,

footer 標簽定義文檔或節(jié)的頁腳,通常包含文檔的作者、版權信息、使用條款鏈接、聯(lián)系信息等等,
article標簽規(guī)定文章獨立的其他內(nèi)容,比如:標題、內(nèi)容、評論,
b、文本標簽

h1-h6標簽可定義標題

p標簽定義段落

b/strong標簽加粗

em標簽來表示強調(diào)的文本,斜體

strong標簽表示重要文本

u標簽下劃線

s標簽刪除線

br標簽表示回車換行

hr標簽表示水平線

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

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

<a href="指向的鏈接地址或者網(wǎng)址#ID名" target="_blank|_self|_top|_parent">百度</a>

d、多媒體標簽

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

<img src="圖片地址" alt="替換文本,圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />

audio標簽定義聲音,比如音樂或其他音頻流。

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

video標簽定義視頻,比如電影片段或其他視頻流。

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

e、序列化標簽

ul和li無序列表標簽

<ul>

<li>HTML</li>

<li>JS</li>

<li>PHP</li>

</ul>

ol和li有序列表標簽,可以使用type屬性規(guī)定有序列表符號的類型。1 按數(shù)字有序排列,為默認值,(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>

<li>HTML</li>

<li>JS</li>

<li>PHP</li>

</ol>

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

<dl>

<dt>計算機</dt>

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

</dl>

f、表格標簽

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

<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">

<tr>

<th>標題</th>

<th>標題</th>

</tr>

<tr>

<!-- 合并橫向單元格 -->

<td colspan="2" nowrap="nowrap">&nbsp;</td>

</tr>

<tr>

<td></td>

<!-- 合并縱向單元格 -->

<td rowspan="2"> </td>

</tr>

<tr>

<td height="16"> </td>

</tr>

</table>

g、表單標簽

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

<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>

input標簽用于搜集用戶信息

<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />

密碼,輸入的字符會被掩碼(顯示為星號或原點)

<input name="pwd" type="password" maxlength="5" size="100" value="" />

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

<input type="file" name="file" />

隱藏表單

<input type="hidden" name="country" value="China" />

提交

<input type="submit" name="Submit" value="提交" disabled="disabled" />

重置

<input type="reset" name="Submit2" value="重置" />

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ù)庫

注:checked="checked"可以簡寫成checked</span>

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

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

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

button標簽定義一個按鈕

提交按鈕

<button type="submit" value="提交">提交</button>

重置按鈕

<button type="reset" value="重置">重置</button>

select標簽和option標簽下拉列表

單選菜單列表框


<option value="1">ray</option>

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

</select>```

多選列表下拉框,shift加鼠標單擊,可以連續(xù)選擇多個選擇,CTRL+鼠標點擊,可以點擊多個。

```<select name="user" size="10" multiple="multiple">

<option value="1">雷雪松</option>

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

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

</select>

注:selected="selected"可簡寫成selected,表示選中```
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 1、最基本的HTML結構 <!DOCTYPE html> 網(wǎng)頁標題 2、最常用的HTML標簽 a、布局標簽 div...
    饑人谷_徐濤閱讀 419評論 0 0
  • HTML 常用標簽 div 標簽 div 標簽用于組合其他 HTML 元素,本身無實在意義。常用于頁面的布局,比如...
    zenyangcode閱讀 137評論 0 0
  • 本文將繼續(xù)上文接著介紹一些HTML常用標簽 1:HTML全局屬性 在介紹常用常見的HTML標簽之前,先以最簡單的方...
    憨憨二師兄閱讀 445評論 0 0
  • HTML標簽及屬性 1.HTML5頭部結構 【!DOCTYPE html】 聲明文檔類型為HTML5文件。 文檔聲...
    Sur_lee閱讀 2,501評論 0 1
  • 1、標簽:<!DOCTYPE>作用:聲明是文檔中的第一成分,位于 標簽之前。2、標簽: 作用:此元素可告知瀏覽器其...
    冉奇閱讀 443評論 0 0

友情鏈接更多精彩內(nèi)容