HTML常見(jiàn)標(biāo)簽

標(biāo)題

  • h1~h6代表標(biāo)題,逐層弱化

    h1代表頁(yè)面最大的標(biāo)題
    h2代表二級(jí)標(biāo)題
    h3代表三級(jí)標(biāo)題
    h4代表四級(jí)標(biāo)題
    h5代表五級(jí)標(biāo)題
    h6代表六級(jí)標(biāo)題
    

段落

p代表段落封断,表示大段文字
瀏覽器會(huì)自動(dòng)地在段落的前后添加空行坡疼。
使用空的段落標(biāo)記 <p></p> 去插入一個(gè)空行是個(gè)壞習(xí)慣柄瑰,用 <br /> 標(biāo)簽代替它!

鏈接

a代表鏈接蒲跨,鏈接到一個(gè)地址

//打開(kāi)一個(gè)新的頁(yè)面顯示鏈接內(nèi)容
<a  target="_blank" title="baidu">百度.com</a>
//不會(huì)跳轉(zhuǎn)
<a href = "#">百度.com</a>  
//跳轉(zhuǎn)到id為about的頁(yè)面上          
<a href = "#about">百度.com</a>
//跳轉(zhuǎn)到相對(duì)于根路徑下的id為getCourse的頁(yè)面  
<a href ="/getCourse">百度.com</> 

圖片

img代表展示一張圖片或悲,src是其必備屬性巡语,代表了圖片的名稱(chēng)及地址淮菠,alt屬性是指當(dāng)圖片顯示不出來(lái)時(shí),它就會(huì)顯示理澎,起到一個(gè)占位說(shuō)明的作用糠爬。

![](a.png)      //只閉合標(biāo)簽  最后不用加/
![圖片](http://js.jirengu.com/images/dave.min.svg)

分塊

div,語(yǔ)義為“一大塊”,其一大作用就是文檔布局执隧,可用于給頁(yè)面劃分區(qū)塊户侥,讓結(jié)構(gòu)更清晰蕊唐,它取代了使用表格定義布局的老式方法替梨。
div是塊級(jí)元素装黑,它是可用于組合其他 HTML 元素的容器恋谭,且沒(méi)有特定的含義挽鞠,瀏覽器會(huì)在其前后顯示折行信认。如果與 CSS 一同使用狮杨,<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。

<div id = "header">...</div>  //頭部
<div id = "content">...</div> //內(nèi)容
<div id = "footer">...</div>  //底部

ul li

  • ul: unsort list 無(wú)序列表橄教,其直接子元素是li护蝶,用于表示并列的內(nèi)容,而且可以嵌套盔夜。

    <ul class="nav'>
      <li><a href="#">首頁(yè)</a></li>
      <li><a href="#">關(guān)于</a></li>
      <li>
        <a href="#">更多</a>
        <ul>
          <li>聯(lián)系</li>
          <li>地址</li>
        </ul>
       </li>
    </ul>
    

ol li

  • ol: order list 有序列表 用于表示帶步驟或者編號(hào)的并列內(nèi)容喂链,ol的直接子元素只能是li椭微,而且可以嵌套盲链。

    <h2>把大象關(guān)到冰箱的步驟</h2>
    <ol>
      <li>把大象變小</li>
      <li>打開(kāi)冰箱</li>
      <li>把大象塞進(jìn)去</li>
    </ol>
    

dl dt dd

自定義列表,用于展示一系列"標(biāo)題:內(nèi)容..."的場(chǎng)景本慕。
dl:自定義列表侧漓,dt:自定義標(biāo)題布蔗,dd:自定義描述何鸡。

<dl>
<dt>商品名稱(chēng):</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圓口</dd>
<dt>商品介紹:</dt>
<dd>這是一個(gè)久遠(yuǎn)的瓷器,很貴淆游,易碎</dd>
</dl>

button

按鈕犹菱。

  <button>點(diǎn)我</button>

strong em span

span:是內(nèi)聯(lián)元素腊脱,可用作文本的容器陕凹,也沒(méi)有特定的含義鳄炉,當(dāng)與 CSS 一同使用時(shí)拂盯,<span> 元素可用于為部分文本設(shè)置樣式屬性谈竿。
em:是內(nèi)聯(lián)元素空凸,可用作文本的容器,表示其范圍內(nèi)的文本需要被強(qiáng)調(diào)顯示劫恒。
strong :是內(nèi)聯(lián)元素丛楚,可用作文本的容器憔辫,表示其范圍內(nèi)的文本很重要贰您,強(qiáng)調(diào)性更強(qiáng)

<p>優(yōu)惠<strong>100</strong>元</p>
<p>小谷<em>2</em>歲了</p>

iframe

在當(dāng)前頁(yè)面上嵌入一個(gè)頁(yè)面,注意跨域操作問(wèn)題

<iframe src="http://baidu.com" name="myPager"></iframe>
<p><a  target="myPager">W3Cschool.cc</a></p>

表格

table用于展示表格令境,每個(gè)表格均有若干行(由 <tr> 標(biāo)簽定義)舔庶,每行被分割為若干單元格(由 <td> 標(biāo)簽定義)惕橙。字母 td 指表格數(shù)據(jù)(table data)弥鹦,即數(shù)據(jù)單元格的內(nèi)容爷辙。數(shù)據(jù)單元格可以包含文本苍鲜、圖片玷犹、列表歹颓、段落巍扛、表單撤奸、水平線吠昭、表格等等。
不要用table來(lái)做布局胧瓜,使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法矢棚,<table> 元素的作用是顯示表格化的數(shù)據(jù),且thread府喳、tbody蒲肋、tfoot可省略,瀏覽器會(huì)自動(dòng)添加borader-collapse,用于合并邊框兜粘。

<table>
<tr>
<th>name</th>
<th>sex</th>
</tr>
<tr>
<th>小米</th>
<th>22</th>
</tr>
<tr>
<th>小花</th>
<th>20</th>
</tr>

</table>

hr

<hr> 或<hr />申窘,畫(huà)一條直線。

注釋

<!--  這是一段注釋?zhuān)跒g覽器中不會(huì)顯示 -->

換行

使用 <br /> 標(biāo)簽孔轴,在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行(新行)剃法!
<br />和<br />效果一致,但在 XHTML趣斤、XML 以及未來(lái)的 HTML 版本中,不允許使用沒(méi)有結(jié)束標(biāo)簽(閉合標(biāo)簽)的 HTML 元素,因此使用 <br /> 是更長(zhǎng)遠(yuǎn)的保障。

樣式

style提供了一種改變所有 HTML 元素的樣式的通用方法。
style是 HTML 4 引入的没隘,它是一種新的首選的改變 HTML 元素樣式的方式赶熟。通過(guò) HTML 樣式,能夠通過(guò)使用 style 屬性直接將樣式添加到 HTML 元素,或者間接地在獨(dú)立的樣式表中(CSS 文件)進(jìn)行定義。

<html>
<body>
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red">This text is in Verdanda and  red</p>
<p style="font-family:times;color:green">This text is sys </p>
<p style="font-size:30px">This is 20 pixels height</p>
</body>
</html>

文本格式化標(biāo)簽

Paste_Image.png

引用

HTML中通過(guò)<q>定義短的引用狡相,且瀏覽器通常會(huì)為 <q> 元素包圍引號(hào)滔悉。

  <p>WWF 的目標(biāo)是:<q>構(gòu)建人與自然和諧共存的世界。</q></p>
  WWF 的目標(biāo)是:"構(gòu)建人與自然和諧共存的世界。"

HTML中通過(guò)<blockquote> 元素定義被引用的節(jié)(長(zhǎng)引用)弯屈,且瀏覽器通常會(huì)對(duì) <blockquote> 元素進(jìn)行縮進(jìn)處理蔬顾。

Paste_Image.png
Paste_Image.png

類(lèi)

HTML中用class表示類(lèi),對(duì) HTML 進(jìn)行分類(lèi)(設(shè)置類(lèi))材泄,可以使我們能夠?yàn)樵氐念?lèi)定義 CSS 樣式:為相同的類(lèi)設(shè)置相同的樣式辣辫,或者為不同的類(lèi)設(shè)置不同的樣式化戳。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子悦污,更是在濱河造成了極大的恐慌踏枣,老刑警劉巖躬厌,帶你破解...
    沈念sama閱讀 219,039評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件抱虐,死亡現(xiàn)場(chǎng)離奇詭異谣沸,居然都是意外死亡赋除,警方通過(guò)查閱死者的電腦和手機(jī)颁糟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)起惕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)激挪,“玉大人,你說(shuō)我怎么就攤上這事听诸》毫欤” “怎么了动知?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,417評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵讼油,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我校辩,道長(zhǎng),這世上最難降的妖魔是什么概疆? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,868評(píng)論 1 295
  • 正文 為了忘掉前任侦高,我火速辦了婚禮奉呛,結(jié)果婚禮上罗晕,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布切距。 她就那樣靜靜地躺著葡幸,像睡著了一般肤粱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上灸异,一...
    開(kāi)封第一講書(shū)人閱讀 51,692評(píng)論 1 305
  • 那天府适,我揣著相機(jī)與錄音羔飞,去河邊找鬼。 笑死檐春,一個(gè)胖子當(dāng)著我的面吹牛逻淌,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播疟暖,決...
    沈念sama閱讀 40,416評(píng)論 3 419
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼卡儒,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了俐巴?” 一聲冷哼從身側(cè)響起骨望,我...
    開(kāi)封第一講書(shū)人閱讀 39,326評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎欣舵,沒(méi)想到半個(gè)月后擎鸠,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,782評(píng)論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡缘圈,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評(píng)論 3 337
  • 正文 我和宋清朗相戀三年劣光,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片准验。...
    茶點(diǎn)故事閱讀 40,102評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡赎线,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出糊饱,到底是詐尸還是另有隱情垂寥,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評(píng)論 5 346
  • 正文 年R本政府宣布另锋,位于F島的核電站滞项,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏夭坪。R本人自食惡果不足惜文判,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望室梅。 院中可真熱鬧戏仓,春花似錦、人聲如沸亡鼠。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,996評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)间涵。三九已至仁热,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間勾哩,已是汗流浹背抗蠢。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,113評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工举哟, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人迅矛。 一個(gè)月前我還...
    沈念sama閱讀 48,332評(píng)論 3 373
  • 正文 我出身青樓妨猩,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親诬乞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子册赛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說(shuō)明:指定了 HTML 文檔遵循的文檔類(lèi)型定義(D...
    米塔塔閱讀 3,247評(píng)論 1 41
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案震嫉? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • HTML 為由一對(duì)尖括號(hào)(<>)所括起來(lái)的內(nèi)容以特定含義. 這樣的標(biāo)識(shí)稱(chēng)為一個(gè) 標(biāo)簽開(kāi)始標(biāo)簽可能包含一些信息森瘪,這些...
    饑人谷_Shirley閱讀 862評(píng)論 0 1
  • HTML5 標(biāo)簽comment 注釋標(biāo)簽用于在源文檔中插入注釋。注釋內(nèi)容不會(huì)被瀏覽器顯示票堵。為代碼編寫(xiě)注釋的好處是...
    才気莮孒閱讀 4,060評(píng)論 1 25
  • 深夜扼睬,整理期中考試成績(jī),又驚喜又心疼悴势。在高中如此普及的上海窗宇,進(jìn)入中職的孩子是一個(gè)特殊群體,都說(shuō)這里不看分?jǐn)?shù)特纤,但好分...
    我是小曲閱讀 271評(píng)論 0 0