HTML之常用標(biāo)簽總結(jié)

???????做完HTML的相關(guān)任務(wù),覺得自己得好好總結(jié)一下,總結(jié)一下一些標(biāo)簽的用法。

HTML結(jié)構(gòu)

???????一個完整的 HTML 文檔的結(jié)構(gòu)如下所示,主要由兩大部分組成:<head></head>標(biāo)簽組成的頭部和<body></body>標(biāo)簽組成的主體。

<html >
  <head >
    <title></title>
  </head>
  <body>
  </body>
</html>

文字

標(biāo)題
標(biāo)題 標(biāo)簽
一級標(biāo)題 <h1></h1>
二級標(biāo)題 <h2></h2>
三級標(biāo)題 <h3></h3>
四級標(biāo)題 <h4></h4>
五級標(biāo)題 <h5></h5>
六級標(biāo)題 <h6></h6>
加粗和斜體

通過<b></b>標(biāo)簽實(shí)現(xiàn)字體的加粗,<i></i><em></em><cite></cite>標(biāo)簽實(shí)現(xiàn)斜體。下面舉個例子

<html>
<head>
    <title></title>
</head>
<body>
    <b>我是粗體</b>
    <br />
    <i>我是斜體1號</i>
    <br />
    <cite>我是斜體2號</cite>
    <br />
    <em>我是斜體3號</em>
</body>
</html>

看一下效果:


列表

???????列表主要分為兩種有序列表和無序列表。有序列表使用一對<ol></ol>標(biāo)簽,無序列表使用一對<ul></ul>標(biāo)簽,不管是有序列表還是無序列表列表的每一項(xiàng)都要使用<li></li>標(biāo)簽。主要語法如下:

<ul>
   <li>無序列表第一項(xiàng)</li>
   <li>無序列表第二項(xiàng)</li>
</ul>

<ol>
   <li>有序列表第一項(xiàng)</li>
   <li>有序列表第二項(xiàng)</li>
</ol>

文章HTML之列表生成就是對使用HTML生成列表的一個運(yùn)用。

鏈接、圖片和多媒體

鏈接

??????? 鏈接使用<a></a>標(biāo)簽定義,鏈接地址在href屬性中指定?;菊Z法為:
??????? <a href=‘URL’>鏈接文字</a>
???????<a></a>標(biāo)簽中有一個target屬性,用來設(shè)定鏈接的窗口:

target 含義
_parent 在上一級窗口中打開
_blank 在新窗口中打開
_self 在同一窗口中打開。(默認(rèn))
_top 在瀏覽器的整個窗口中打開
圖片

???????html 中插入圖片使用<img>標(biāo)簽,舉例子說明:

<html>
  <body>
    <img src="picture/123.jpeg"  alt=""/>   
  </body>
</html>

???????效果如下:


???????我們可以把鏈接和圖片進(jìn)行結(jié)合,設(shè)置圖片的鏈接,基本語法:
???????<a href=”目標(biāo)地址”><img src=”圖片路徑” /> </a>

多媒體

???????通過<embed ></embed>標(biāo)簽可以在網(wǎng)頁中可播放MP3音樂、電影、flash動畫等多媒體內(nèi)容。<embed >是 html5 中的新標(biāo)簽,還是通過例子來說明:

<html >
<body>
    <embed src="Video/smallVideo.avi"></embed>
</body>
</html>

???????看一下效果:


表格

???????HTML中創(chuàng)建表格由<table></table> <tr></tr> <td></td>這三對標(biāo)簽組成, <tr></tr>為行標(biāo)簽,<td></td>為單元格標(biāo)簽。

<html>
<body>
  <table border="1">
    <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
    </tr>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
    </tr>
  </table>   
</body>
</html>

看一下效果:


???????還可以合并表格中的行或列,可以查看文章HTML之創(chuàng)建表格

input標(biāo)簽

???????input標(biāo)簽功能比較強(qiáng)大,既可以生成文本框又可以生成按鈕等,基本的語法結(jié)構(gòu)為:<input type=“…” name=“…” value=“…” > 不同的type的值代表不同的含義。

type值 含義
text 文本框
password 密碼框
file 文件輸入框
button 普通按鈕
submit 提交按鈕
reset 重置按鈕
image 使用圖片顯示按鈕
radio 單選框
checkbox 多選框

button標(biāo)簽

???????除了上述所說的通過<input />標(biāo)簽創(chuàng)建按鈕外,還可以通過<button></button>標(biāo)簽來創(chuàng)建?;菊Z法:<button type=" "> </button>,type值可以為button 、resetsubmit,分別代表普通按鈕、重置按鈕、提交按鈕。由于<button></button>標(biāo)簽含有關(guān)閉標(biāo)簽,因此可以對其進(jìn)行樣式化,使用它創(chuàng)建的按鈕具有更豐富的表現(xiàn)功能。

div 和 span 標(biāo)簽

???????還是先通過例子來感受一下 div 標(biāo)簽和 span 標(biāo)簽

<html >
<body>
    <div>我是div 1號</div>
    <div>我是div 2號</div>
    <span>我是span 1號</span>
    <span>我是span 2號</span>
</body>
</html>

效果:


???????通過上面的例子,我們可以看到<div>標(biāo)簽占一行,而<span>標(biāo)簽則為文字內(nèi)容有多少,就占多少空間。所以<div>一般用于排版,<span>一般用于局部文字的樣式。

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

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

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,530評論 1 41
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,155評論 1 92
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,878評論 32 459
  • 由于每個人習(xí)慣不大一樣,我個人喜歡先在簡書上碼字,然后抽空再去微信公眾號平臺上做推送。 昨天晚上在編輯推文的時(shí)候,...
    北漂媽媽郭鏘鏘閱讀 2,827評論 45 36
  • 車間要開始做哎撇撇了! 這次是做社交 有新的項(xiàng)目要啟動我還是蠻興奮的~~~~~~(曾經(jīng)被老板逼著要求三天做個app...
    liouu閱讀 345評論 0 2

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