HTML常用布局標(biāo)簽：提升網(wǎng)頁顏值！不可不知的HTML布局技巧全解析

HTML的世界里，一切都是由容器和內(nèi)容構(gòu)成的。容器，就如同一個(gè)個(gè)盒子，用來裝載各種元素；而內(nèi)容，則是這些盒子里的珍寶。理解了這一點(diǎn)，我們就邁出了探索HTML布局的第一步。

在HTML中，布局標(biāo)簽主要用于控制頁面的結(jié)構(gòu)和樣式。本文將介紹一些常用的布局標(biāo)簽及其使用方法，并通過代碼示例進(jìn)行演示。

一、理解布局的重要性

布局在我們前端開發(fā)中擔(dān)任什么樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那里。

而你的任務(wù)，就是將這些積木按照圖紙拼裝成一個(gè)精美的模型。HTML布局標(biāo)簽的作用就像那張圖紙，它指導(dǎo)瀏覽器如何正確、有序地顯示內(nèi)容和元素，確保網(wǎng)頁的結(jié)構(gòu)和外觀既美觀又實(shí)用。

下面我們就來看看在HTML中常用的基礎(chǔ)布局標(biāo)簽有哪些，如何使用這些布局標(biāo)簽完成我們的開發(fā)目標(biāo)。

二、常用的布局標(biāo)簽

1、div標(biāo)簽

div標(biāo)簽是一個(gè)塊級元素，它獨(dú)占一行，用于對頁面進(jìn)行區(qū)域劃分。它可以包含其他HTML元素，如文本、圖片、鏈接等。通過CSS樣式可以設(shè)置div的布局和樣式。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div>這是一個(gè)div元素

</div>

</body>
</html>

運(yùn)行結(jié)果：

2、span標(biāo)簽

span標(biāo)簽是一個(gè)內(nèi)聯(lián)元素，它不獨(dú)占一行，用于對文本進(jìn)行區(qū)域劃分。它主要用于對文本進(jìn)行樣式設(shè)置，如字體、顏色等。與div類似，span也可以包含其他HTML元素。
示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>這是一個(gè)<span>span元素</span>。</p>

</body>
</html>

運(yùn)行結(jié)果：

3、table標(biāo)簽

table標(biāo)簽用于創(chuàng)建表格，它包含多個(gè)tr（行）元素，每個(gè)tr元素包含多個(gè)td（單元格）或th（表頭單元格）元素。

<table> 定義一個(gè)表格，<tr> 定義表格中的行，而 <td> 則定義單元格。通過這三個(gè)標(biāo)簽，我們可以創(chuàng)建出整齊劃一的數(shù)據(jù)表，讓信息的展示更加直觀明了。

需要注意的是：

<table>和</table>標(biāo)記著表格的開始和結(jié)束。
<tr>和</tr>標(biāo)記著行的開始和結(jié)束，幾組表示該表格有幾行。
<td>和</td>標(biāo)記著單元格的開始和結(jié)束，表示這一行中有幾列。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
</body>
</html>

運(yùn)行結(jié)果：

4、form標(biāo)簽

<form>標(biāo)簽的主要作用是定義一個(gè)用于用戶輸入的HTML表單。這個(gè)表單可以包含各種輸入元素，如文本字段、復(fù)選框、單選按鈕、提交按鈕等。

<form>元素可以包含以下一個(gè)或多個(gè)表單元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    display: flex;
    flex-direction: column;
  }
</style>
</head>
<body>

<form>
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密碼：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

運(yùn)行結(jié)果：

5、列表標(biāo)簽

1）無序列表

指沒有順序的列表項(xiàng)目
始于<ul>標(biāo)簽，每個(gè)列表項(xiàng)始于<li>
type屬性有三個(gè)選項(xiàng)：disc實(shí)心圓、circle空心圓、square小方塊。默認(rèn)屬性是disc實(shí)心圓。

示例代碼：

<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認(rèn)的無序列表</li>
<li>默認(rèn)的無序列表</li>
<li>默認(rèn)的無序列表</li>
</ul>
<ul>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
</ul>
<ul>
<li type = "square">添加square屬性</li>
<li type = "square">添加square屬性</li>
<li type = "squaare">添加square屬性</li>
</ul>
</body>
</html>

運(yùn)行結(jié)果：

也可以使用CSS list-style-type屬性定義html無序列表樣式。

想要快速入門前端開發(fā)嗎？推薦一個(gè)前端開發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！「鏈接」

2）有序列表

指按照字母或數(shù)字等順序排列的列表項(xiàng)目。
其結(jié)果是帶有前后順序之分的編號,如果插入和刪除一個(gè)列表項(xiàng)，編號會自動調(diào)整。
始于<ol>標(biāo)簽，每個(gè)列表項(xiàng)始于<li>。

示例代碼：

<ol>
<li>默認(rèn)的有序列表</li>
<li>默認(rèn)的有序列表</li>
<li>默認(rèn)的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1項(xiàng)</li>
<li>第2項(xiàng)</li>
<li>第3項(xiàng)</li>
<li value ="20">第四項(xiàng)</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1項(xiàng)</li>
<li>第2項(xiàng)</li>
<li>第3項(xiàng)</li>
</ol>

運(yùn)行結(jié)果：

同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。

3）自定義列表

自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。
以<dl>標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以<dt>開始。每個(gè)自定義列表項(xiàng)的定義以<dd>開始。
用于對術(shù)語或名詞進(jìn)行解釋和描述，自定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號。
基本語法：

<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>

<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>

<dl>即“definition list（定義列表）”，
<dt>即“definition term（定義名詞）”，
而<dd>即“definition description（定義描述）”。

示例代碼：

<dl>
<dt>計(jì)算機(jī)</dt>
<dd>用來計(jì)算的儀器</dd>

<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>

運(yùn)行結(jié)果：

以上就是HTML中常用的布局標(biāo)簽及其使用方法。在實(shí)際開發(fā)中，還可以結(jié)合CSS和JavaScript來實(shí)現(xiàn)更復(fù)雜的布局和交互效果。

掌握了這些HTML常用布局標(biāo)簽，你已經(jīng)擁有了構(gòu)建網(wǎng)頁的基礎(chǔ)工具。記住，好的布局不僅需要技術(shù)，更需要?jiǎng)?chuàng)意和對細(xì)節(jié)的關(guān)注。現(xiàn)在，打開你的代碼編輯器，開始你的布局設(shè)計(jì)之旅吧！

表標(biāo)簽

在html中列表分為無序列表、有序列表和自定義列表（項(xiàng)目列表）。接下來就看看他們有什么不同吧！

作用：如果說table標(biāo)簽是用來顯示數(shù)據(jù)的，那么列表標(biāo)簽就是用來進(jìn)行html頁面布局的。

無序列表

語法：

<ul>
	<li></li>  
</ul>

<ul></ul>標(biāo)簽中只能且必須嵌套<li></li>標(biāo)簽。li標(biāo)簽之間沒有先后順序，是并列存在的。li標(biāo)簽里可以容納文本、數(shù)據(jù)、圖片、超鏈接等內(nèi)容。跟table一樣，列表標(biāo)簽也自帶樣式屬性，但為了代碼統(tǒng)一，我們還是會使用css來設(shè)置。

代碼示例：

<h2>無序列表：</h2>
    <ul>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>

運(yùn)行界面：

有序列表

語法：

<ol>
 	<li></li> 
 </ol>

<ol></ol>標(biāo)簽里面只能嵌套<li></li>標(biāo)簽，在這里li標(biāo)簽是有順序的。

代碼示例：

<h2>有序列表：</h2>
    <ol>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ol>

運(yùn)行界面：

自定義列表

語法：

<dl>
	<dt></dt>
	<dd></dd>
</dl>

<dl></dl>標(biāo)簽：定義列表

<dt></dt>標(biāo)簽：列表標(biāo)題

<dd></dd>標(biāo)簽：列表內(nèi)容

一個(gè)dd標(biāo)簽是對dt標(biāo)簽標(biāo)題的說明。這兩個(gè)標(biāo)簽中可以包含任何標(biāo)簽。

代碼示例：

<h2>自定義列表：</h2>
    <!-- dl：外層標(biāo)簽  dt：項(xiàng)目標(biāo)題  dd：項(xiàng)目內(nèi)容 -->
    <dl>
        <dt>水果種類</dt>
        <dd>蘋果</dd>
        <dd>橘子</dd>
        <dd>香蕉</dd>
    </dl>

運(yùn)行界面：

表單標(biāo)簽

作用：收集用戶信息。一般用在注冊界面等。

組成：一個(gè)完整的表單中包含表單域（整個(gè)填寫界面所有信息）、表單控件（表單元素）和提示信息（表單控件的提示作用）3個(gè)部分。

表單域

表單域：是一個(gè)包含表單元素的區(qū)域。

<form>標(biāo)簽用于定義表單域，實(shí)現(xiàn)用戶信息的收集和傳遞。

作用：將其區(qū)域范圍內(nèi)的信息收集并傳送給服務(wù)器。

語法：

<form action=”url地址” method=”提交方式” name=”表單域名稱”>
各種表單控件
</form>

注：action：url地址，指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。

method：用于設(shè)置表單數(shù)據(jù)的提交方式。

method=”get”：提交數(shù)據(jù)時(shí)，地址欄可查看到數(shù)據(jù)。數(shù)據(jù)量少且安全級別不高時(shí)使用。

method=”post”：提交數(shù)據(jù)時(shí)，地址欄數(shù)據(jù)是加密的。

name：表單域的名稱。用于區(qū)分同一頁面下的不同表單域。

表單控件

1.input輸入表單元素：

語法：<input type=””>，依據(jù)type屬性值不同區(qū)分不同控件。

文本框：<input type=”text”>。單行輸入字段，默認(rèn)寬度20個(gè)字符。輸入的文字可見。

密碼框：<input type=”password”>。輸入內(nèi)容默認(rèn)不可見。

單選框：<input type=”radio”>，默認(rèn)情況下選中后無法取消。

注：為實(shí)現(xiàn)多選一狀態(tài)，需要將所有的單選框控件具有同一個(gè)name名。

復(fù)選框：<input type=”checkbox”>，選中后可以更改可以取消。

提交按鈕：<input type=”submit”>，默認(rèn)按鈕中的提示文字是提交，可以通過value值進(jìn)行更改內(nèi)容。點(diǎn)擊提交按鈕后會把表單數(shù)據(jù)發(fā)送到服務(wù)器。

重置按鈕：<input type=”reset”>，默認(rèn)按鈕中的提示文字是重置，可以通過value值進(jìn)行更改內(nèi)容。點(diǎn)擊后會清楚表單中的所有數(shù)據(jù)。

普通按鈕：<input type=”button”>

文件域：<input type=”file”>，用來選擇文件，一般適用于文件上傳。

label標(biāo)簽：標(biāo)注標(biāo)簽，配合input控件一起使用

作用：綁定表單控件，擴(kuò)大點(diǎn)擊范圍。

當(dāng)點(diǎn)擊label標(biāo)簽的內(nèi)容時(shí)，系統(tǒng)會自動選中該表單控件。

代碼示例：

<h1>label標(biāo)簽</h1>
    <form>
        <label for="text">用戶名：</label>
        <input type="text" name="用戶名" id="text"><br>
        <label for="password">密碼：</label>
        <input type="password" id="password"><br>
        <label for="男">男</label>
        <input type="radio" name="sex" id="男">
        <label for="女">女</label>
        <input type="radio" name="sex" id="女"><br>
    </form>

運(yùn)行界面：

Input控件屬性：

name:用戶自定義，提示input元素的名稱。給后臺工作人員的提示。

value：用戶自定義，提示input元素的內(nèi)容值。給后臺的提示。在文本框控件中會顯示該內(nèi)容，單選框和復(fù)選框則顯示不出來。

checked：默認(rèn)選中狀態(tài)。主要用于單選按鈕和復(fù)選按鈕中。

maxlength：正整數(shù)，規(guī)定輸入字段中的字符最大長度。

input代碼示例：

<h2>表單標(biāo)簽</h2>
    <form>
        用戶名：<input type="text" maxlength="15" value="請輸入用戶名"><br>
        密  碼：<input type="password"><br>
        性  別：<input type="radio" name="sex" value="男">男   
				<input type="radio" name="sex" value="女">女<br>
        愛  好：<input type="checkbox" name="like" value="swim">游泳 
				<input type="checkbox" name="like" value="健身">健身 
        <input type="checkbox" name="like" value="run">跑步<br>
        <input type="submit">   
        <input type="reset"><br>
        <input type="submit" value="注冊">
        <input type="reset" value="清空"><br>
        <!-- 后期結(jié)合js搭配使用 -->
        <!-- 按鈕選框在默認(rèn)情況下是沒有文字內(nèi)容的，需要添加value值設(shè)置文字內(nèi)容 -->
        <input type="button" value="獲取短信驗(yàn)證碼"><br>
        上傳頭像：<input type="file">
    </form>

運(yùn)行界面：

2.select下拉表單元素：

使用場景：地址選擇、職業(yè)分類、學(xué)校分類等。

select標(biāo)簽：定義下拉列表。

語法：

<select>
	<option></option>  
</select>

代碼示例：

<h1>下拉表單</h1>
    <form>
        <label for="adress">籍貫：</label>
        <select name="" id="">
            <option value="">北京</option>
            <option value="">河北</option>
            <option value="">上海</option>
            <option value="">廣州</option>
            <option value="">深圳</option>
        </select>
    </form>

運(yùn)行界面：

3.textrea文本域表單控件

使用場景：留言、介紹、評論等。

語法：

<textrea rows=”” cols=””>文本內(nèi)容</textrea>

跟文本框控件不同，它是多行文本輸入框，可以自行設(shè)定行數(shù)以及一行容納多少字?jǐn)?shù)。

rows=“每行可輸入的字符數(shù)”，

cols=“顯示的行數(shù)”。

這兩個(gè)樣式屬性實(shí)際開發(fā)中大多使用css就可以改變操作。

代碼示例：

<h1>文本域表單元素</h1>
    <form action="">
        <label for="textrea">今日反饋：</label><br>
        <textarea name="" id="" cols="15" rows="10">今日反饋</textarea>
    </form>

運(yùn)行界面：

關(guān)于HTML基礎(chǔ)內(nèi)容就學(xué)習(xí)到這里了，明天練習(xí)一個(gè)綜合案例。對了，現(xiàn)在跟學(xué)的是黑馬前端的pink老師發(fā)布的基礎(chǔ)視頻，明天做的案例按照老師講解的案例去做。

SS列表屬性作用如下：

設(shè)置不同的列表項(xiàng)標(biāo)記為有序列表

同的列表項(xiàng)標(biāo)記為無序列表

設(shè)置列表項(xiàng)標(biāo)記為圖像

列表

在HTML中，有兩種類型的列表：

無序列表 - 列表項(xiàng)標(biāo)記用特殊圖形（如小黑點(diǎn)、小方框等）

有序列表 - 列表項(xiàng)的標(biāo)記有數(shù)字或字母

使用CSS，可以列出進(jìn)一步的樣式，并可用圖像作列表項(xiàng)標(biāo)記。

不同的列表項(xiàng)標(biāo)記

list-style-type屬性指定列表項(xiàng)標(biāo)記的類型是：

無序列表

（1）編輯代碼

打開記事本，編寫代碼，并保存為HTML格式文件。代碼如下。

（2)在瀏覽器中瀏覽效果

在瀏覽器中瀏覽效果如圖所示。

在線咨詢

上一篇：元旦，年會抽獎(jiǎng)模板頁面送給你
下一篇：HTML+CSS+JS，20行代碼的貪吃蛇

您的項(xiàng)目需求

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

整合營銷服務(wù)商

HTML常用布局標(biāo)簽：提升網(wǎng)頁顏值！不可不知的HTML布局技巧全解析

一、理解布局的重要性

二、常用的布局標(biāo)簽

1、div標(biāo)簽

2、span標(biāo)簽

3、table標(biāo)簽

4、form標(biāo)簽

5、列表標(biāo)簽

1）無序列表

2）有序列表

3）自定義列表

表標(biāo)簽

表單標(biāo)簽

不同的列表項(xiàng)標(biāo)記

無序列表

您的項(xiàng)目需求