HTML常用標(biāo)簽詳解

時(shí)間：2023-10-03 07:30:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-03 07:30:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

HTML常用標(biāo)簽詳解：HTML常用的一些標(biāo)簽不是很多，主要包括：

<div> <a> <img>

<h1>-<h6> <p>

<table> <form> <ul> <ol> <dl>




HTML屬性




在介紹具體標(biāo)簽之前，我先介紹一下標(biāo)簽的屬性，標(biāo)簽是可以設(shè)置屬性的，屬性一般設(shè)置在開始標(biāo)簽里，一個(gè)標(biāo)簽可以設(shè)置多個(gè)屬性，多個(gè)屬性用空格隔開，屬性包括兩部分，名稱和值，格式為：名稱="值"。




舉個(gè)例子，<a href="http://www.baidu.com" target="_blank">我是劉小妞<a>。




<a>標(biāo)簽里設(shè)置了兩個(gè)屬性，href和target是名稱，后面雙引號(hào)里面的內(nèi)容是對(duì)應(yīng)的值。




<div>

<div>這個(gè)標(biāo)簽沒什么含義，就是一個(gè)空白標(biāo)簽，可以理解為一個(gè)空盒子，所有的標(biāo)簽都可以理解為空盒子，只不過(guò)，有的標(biāo)簽有具體用途或者具體含義。

<div>主要用于網(wǎng)頁(yè)布局，最初人們寫網(wǎng)頁(yè)的時(shí)候，特別愛用<table>布局，但是<table>相比較div+css布局，不是很靈活，也不利于網(wǎng)頁(yè)渲染，所以，現(xiàn)在都是用div+css來(lái)布局，關(guān)于網(wǎng)頁(yè)布局，我們?cè)诤竺娼榻Bcss的時(shí)候再說(shuō)。




<a>

<a>標(biāo)簽是鏈接標(biāo)簽，大部分網(wǎng)頁(yè)是有鏈接的，通過(guò)點(diǎn)擊一段文字或者一張圖片跳轉(zhuǎn)到別的頁(yè)面，就是用到的<a>標(biāo)簽。

<a>標(biāo)簽比較常用的兩個(gè)屬性就是上面提到的，href和target，href設(shè)置跳轉(zhuǎn)的鏈接地址，地址可以是相對(duì)的，也可以是絕對(duì)的。target設(shè)置打開新頁(yè)面的方式，默認(rèn)是在當(dāng)前頁(yè)面打開，我上面設(shè)置的_blank是在新窗口打開。

<a>標(biāo)簽的內(nèi)容可以是文字也可以是圖片，文字就像我們上面的例子，圖片的話，就是包含一個(gè)<img>標(biāo)簽。

比如，<a href="http://www.baidu.com"><img src="1.png"><a/>。


<img>

<img>標(biāo)簽是圖像標(biāo)簽，它是個(gè)單標(biāo)簽，單標(biāo)簽的意思就是只有開始標(biāo)簽，沒有結(jié)束標(biāo)簽，設(shè)置圖像地址的屬性是src，圖像地址可以是相對(duì)地址，也可以是絕對(duì)地址。一般我們還會(huì)給圖像標(biāo)簽設(shè)置寬(width)高(height)屬性，這個(gè)圖片顯示的時(shí)候，就會(huì)按照我們?cè)O(shè)置的寬高來(lái)顯示，還有一個(gè)可用可不用的屬性alt，它是用來(lái)描述圖片的，當(dāng)瀏覽器無(wú)法載入圖片時(shí)，會(huì)顯示alt里設(shè)置的內(nèi)容。

舉個(gè)例子，<img src="1.jpg" alt="我是劉小妞" width="30" height="30">，會(huì)顯示一個(gè)寬30像素，高30像素的圖片，當(dāng)圖片加載不出來(lái)的時(shí)候，圖片的位置會(huì)顯示“我是劉小妞”這五個(gè)字。


<h1>-<h6>

<h1>-<h6>這6個(gè)標(biāo)簽是標(biāo)題標(biāo)簽，這6個(gè)標(biāo)簽的字號(hào)依次變小，h1的最大，h6的最小，默認(rèn)都是加粗字體，字號(hào)具體多大，我也沒測(cè)過(guò)，實(shí)際運(yùn)用的時(shí)候，一般是按照設(shè)計(jì)稿的字號(hào)大小，來(lái)匹配標(biāo)簽設(shè)置字號(hào)大小。


<p>

<p>段落標(biāo)簽，一般網(wǎng)頁(yè)里成段的文字都是被這個(gè)標(biāo)簽標(biāo)記。<p>和<h1>-<h6>這兩種標(biāo)簽主要是為了增強(qiáng)網(wǎng)頁(yè)的可讀性，其實(shí)，如果不嚴(yán)謹(jǐn)?shù)脑挘?lt;div>都可以替代它們，用這兩種標(biāo)簽的時(shí)候不用太糾結(jié)。不過(guò)，隨著HTML5的興起，越來(lái)越提倡網(wǎng)頁(yè)的可讀性了。




<table>

<table>表格標(biāo)簽，先來(lái)看一個(gè)表格的示例，如下圖。





表格是由若干行若干列組成的，我們?cè)趯懕砀竦臅r(shí)候，先寫行，再寫列。

舉個(gè)例子。


<table border="1" cellpadding="10" cellspacing="10">

<tr>

<th>First Name</th><th>Last Name</th><th>Points</th>

</tr>


<tr>

<td>Jill</td> <td>Smith</td> <td>50</td>

</tr>


</table>


以上是一個(gè)兩行三列的表格。




<tr>標(biāo)簽是標(biāo)記行的。

<th>是標(biāo)記表頭的，表頭默認(rèn)居中加粗。

<td>是標(biāo)記列的，也叫單元格。




說(shuō)一下表格常用的幾個(gè)屬性。

border 邊框?qū)傩?，如果不設(shè)置，表格默認(rèn)是沒有邊框的；border="1"，是有邊框的。


cellpadding 單元格邊沿與其內(nèi)容之間的空隙。

cellspacing 單元格之間的空隙。

cellpadding 和 cellspacing，HTML5已經(jīng)不支持了，可以用css來(lái)設(shè)置。







<form>

<form> 表單標(biāo)簽。表單標(biāo)簽一般不會(huì)單獨(dú)使用，它里面會(huì)包含各種表單標(biāo)簽。最常用的包括<input>、<textarea>、<select>、<option>、<button>。

<input>輸入框，用的最多的一個(gè)表單標(biāo)簽。它有一個(gè)屬性type，可以通過(guò)設(shè)置type值，來(lái)得到想要的輸入框。最常用的type值有 checkbox（復(fù)選框）、file（文件上傳）、hidden（隱藏輸入框）、password（密碼輸入框）、radio（單選框）、text（默認(rèn)輸入框）。

<input>為單標(biāo)簽，它還有個(gè)常用屬性是placeholder，輸入框的提示信息。

<textarea>多行文本輸入框，一般需要輸入的文字比較多的時(shí)候，會(huì)用到它，<input>只能輸入一行。


<textarea>常用的屬性有cols（文本區(qū)域內(nèi)可見的寬度）、rows（文本區(qū)域內(nèi)可見的行數(shù)）、readonly(文本區(qū)域內(nèi)為只讀)。

<select>下拉列表，它也不會(huì)單獨(dú)使用，它會(huì)包含著<option>（下拉列表項(xiàng)）使用。


寫個(gè)例子。

<select name='zhushi'>

<option value='mianbao'>面包</option>

<option value='pisa'>比薩</option>

</select>

所有的表單標(biāo)簽都有name和value屬性。表單的數(shù)據(jù)是要提交給服務(wù)器的，所以，服務(wù)器那邊需要知道每個(gè)表單項(xiàng)對(duì)應(yīng)的值，name屬性是告訴服務(wù)器每個(gè)表單項(xiàng)的名字，value是告訴服務(wù)器每個(gè)表單項(xiàng)對(duì)應(yīng)的值。

<button>按鈕標(biāo)簽。在一個(gè)完整的表單里，通常會(huì)有一個(gè)提交按鈕，就是用的<button>。它有一個(gè)type屬性，type的值為submit（提交按鈕）、reset（重置按鈕）、button（默認(rèn)普通按鈕）。

寫個(gè)表單的示例吧。

<form action="" method="post">

<input name="phone" value="" placeholder="請(qǐng)輸入手機(jī)號(hào)">


<input type="password" name="pwd" value="" placeholder="請(qǐng)輸入密碼">

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


</form>

form的兩個(gè)屬性，action是表單提交時(shí)的服務(wù)器地址，method是提交數(shù)據(jù)的HTTP方法，一般是post或者get。

如果表單中有文件上傳，還需要在form標(biāo)簽上設(shè)置enctype="multipart/form-data"。




<ul>、<ol>、<dl>

先看一張圖片示例

<ul>無(wú)序列表，<ol>有序列表。他們倆也不會(huì)單獨(dú)使用，都會(huì)包含列表項(xiàng)<li>。


寫個(gè)示例。

無(wú)序列表

<ul>

<li>第一項(xiàng)</li>


<li>第二項(xiàng)</li>

</ul>




有序列表

<ol>

<li>第一項(xiàng)</li>


<li>第二項(xiàng)</li>

</ol>

有序列表項(xiàng)前面會(huì)自動(dòng)生成1、2、3數(shù)字，無(wú)序列表項(xiàng)前面會(huì)顯示一個(gè)小圓點(diǎn)。

<dl>自定義列表，它也不會(huì)單獨(dú)使用，它的列表項(xiàng)比前兩個(gè)多一個(gè)標(biāo)簽，它的每個(gè)列表項(xiàng)包含兩個(gè)標(biāo)簽，<dt>(自定義列表項(xiàng))、<dd>（自定義列表項(xiàng)的描述），多了一個(gè)描述項(xiàng)。<dd>的字號(hào)要比<dt>的字號(hào)小。




寫個(gè)小示例。
<dl>

<dt>劉小妞</dt>


<dd>喜歡記錄生活的小女生</dd>

<dt>劉工</dt>

<dd>苦逼程序員</dd>

</dl>

這三個(gè)標(biāo)簽，常用程度依次為ul > ol > dl。


好了，大概就是這樣，稍微麻煩點(diǎn)的是表單標(biāo)簽。不過(guò)，也不用怕，不是所有的頁(yè)面都需要表單的。

長(zhǎng)按下方二維碼，關(guān)注劉小妞的棲息地