HTML常用布局标签：提升网页颜值！不可不知的HTML布局技巧全解析

HTML的世界里，一切都是由容器和内容构成的。容器，就如同一个个盒子，用来装载各种元素；而内容，则是这些盒子里的珍宝。理解了这一点，我们就迈出了探索HTML布局的第一步。

在HTML中，布局标签主要用于控制页面的结构和样式。本文将介绍一些常用的布局标签及其使用方法，并通过代码示例进行演示。

一、理解布局的重要性

布局在我们前端开发中担任什么样的角色呢？想象一下，你面前有一堆散乱的积木，无序地堆放在那里。

而你的任务，就是将这些积木按照图纸拼装成一个精美的模型。HTML布局标签的作用就像那张图纸，它指导浏览器如何正确、有序地显示内容和元素，确保网页的结构和外观既美观又实用。

下面我们就来看看在HTML中常用的基础布局标签有哪些，如何使用这些布局标签完成我们的开发目标。

二、常用的布局标签

1、div标签

div标签是一个块级元素，它独占一行，用于对页面进行区域划分。它可以包含其他HTML元素，如文本、图片、链接等。通过CSS样式可以设置div的布局和样式。

示例代码：

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

<div>这是一个div元素

</div>

</body>
</html>

运行结果：

2、span标签

span标签是一个内联元素，它不独占一行，用于对文本进行区域划分。它主要用于对文本进行样式设置，如字体、颜色等。与div类似，span也可以包含其他HTML元素。
示例代码：

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

<p>这是一个<span>span元素</span>。</p>

</body>
</html>

运行结果：

3、table标签

table标签用于创建表格，它包含多个tr（行）元素，每个tr元素包含多个td（单元格）或th（表头单元格）元素。

<table> 定义一个表格，<tr> 定义表格中的行，而 <td> 则定义单元格。通过这三个标签，我们可以创建出整齐划一的数据表，让信息的展示更加直观明了。

需要注意的是：

<table>和</table>标记着表格的开始和结束。
<tr>和</tr>标记着行的开始和结束，几组表示该表格有几行。
<td>和</td>标记着单元格的开始和结束，表示这一行中有几列。

示例代码：

<!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>

运行结果：

4、form标签

<form>标签的主要作用是定义一个用于用户输入的HTML表单。这个表单可以包含各种输入元素，如文本字段、复选框、单选按钮、提交按钮等。

<form>元素可以包含以下一个或多个表单元素：<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>

运行结果：

5、列表标签

1）无序列表

指没有顺序的列表项目
始于<ul>标签，每个列表项始于<li>
type属性有三个选项：disc实心圆、circle空心圆、square小方块。默认属性是disc实心圆。

示例代码：

<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--无序列表</title>
</head>
<body>
<ul>
<li>默认的无序列表</li>
<li>默认的无序列表</li>
<li>默认的无序列表</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>

运行结果：

也可以使用CSS list-style-type属性定义html无序列表样式。

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！「链接」

2）有序列表

指按照字母或数字等顺序排列的列表项目。
其结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整。
始于<ol>标签，每个列表项始于<li>。

示例代码：

<ol>
<li>默认的有序列表</li>
<li>默认的有序列表</li>
<li>默认的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li value ="20">第四项</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ol>

运行结果：

同样也可以使用CSS list-style-type属性定义html有序列表样式。

3）自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。
基本语法：

<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>计算机</dt>
<dd>用来计算的仪器</dd>

<dt>显示器</dt>
<dd>以视觉方式显示信息的装置</dd>
</dl>

运行结果：

以上就是HTML中常用的布局标签及其使用方法。在实际开发中，还可以结合CSS和JavaScript来实现更复杂的布局和交互效果。

掌握了这些HTML常用布局标签，你已经拥有了构建网页的基础工具。记住，好的布局不仅需要技术，更需要创意和对细节的关注。现在，打开你的代码编辑器，开始你的布局设计之旅吧！

表标签

在html中列表分为无序列表、有序列表和自定义列表（项目列表）。接下来就看看他们有什么不同吧！

作用：如果说table标签是用来显示数据的，那么列表标签就是用来进行html页面布局的。

无序列表

语法：

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

<ul></ul>标签中只能且必须嵌套<li></li>标签。li标签之间没有先后顺序，是并列存在的。li标签里可以容纳文本、数据、图片、超链接等内容。跟table一样，列表标签也自带样式属性，但为了代码统一，我们还是会使用css来设置。

代码示例：

<h2>无序列表：</h2>
    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>

运行界面：

有序列表

语法：

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

<ol></ol>标签里面只能嵌套<li></li>标签，在这里li标签是有顺序的。

代码示例：

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

运行界面：

自定义列表

语法：

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

<dl></dl>标签：定义列表

<dt></dt>标签：列表标题

<dd></dd>标签：列表内容

一个dd标签是对dt标签标题的说明。这两个标签中可以包含任何标签。

代码示例：

<h2>自定义列表：</h2>
    <!-- dl：外层标签  dt：项目标题  dd：项目内容 -->
    <dl>
        <dt>水果种类</dt>
        <dd>苹果</dd>
        <dd>橘子</dd>
        <dd>香蕉</dd>
    </dl>

运行界面：

表单标签

作用：收集用户信息。一般用在注册界面等。

组成：一个完整的表单中包含表单域（整个填写界面所有信息）、表单控件（表单元素）和提示信息（表单控件的提示作用）3个部分。

表单域

表单域：是一个包含表单元素的区域。

<form>标签用于定义表单域，实现用户信息的收集和传递。

作用：将其区域范围内的信息收集并传送给服务器。

语法：

<form action=”url地址” method=”提交方式” name=”表单域名称”>
各种表单控件
</form>

注：action：url地址，指定接收并处理表单数据的服务器程序的url地址。

method：用于设置表单数据的提交方式。

method=”get”：提交数据时，地址栏可查看到数据。数据量少且安全级别不高时使用。

method=”post”：提交数据时，地址栏数据是加密的。

name：表单域的名称。用于区分同一页面下的不同表单域。

表单控件

1.input输入表单元素：

语法：<input type=””>，依据type属性值不同区分不同控件。

文本框：<input type=”text”>。单行输入字段，默认宽度20个字符。输入的文字可见。

密码框：<input type=”password”>。输入内容默认不可见。

单选框：<input type=”radio”>，默认情况下选中后无法取消。

注：为实现多选一状态，需要将所有的单选框控件具有同一个name名。

复选框：<input type=”checkbox”>，选中后可以更改可以取消。

提交按钮：<input type=”submit”>，默认按钮中的提示文字是提交，可以通过value值进行更改内容。点击提交按钮后会把表单数据发送到服务器。

重置按钮：<input type=”reset”>，默认按钮中的提示文字是重置，可以通过value值进行更改内容。点击后会清楚表单中的所有数据。

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

文件域：<input type=”file”>，用来选择文件，一般适用于文件上传。

label标签：标注标签，配合input控件一起使用

作用：绑定表单控件，扩大点击范围。

当点击label标签的内容时，系统会自动选中该表单控件。

代码示例：

<h1>label标签</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>

运行界面：

Input控件属性：

name:用户自定义，提示input元素的名称。给后台工作人员的提示。

value：用户自定义，提示input元素的内容值。给后台的提示。在文本框控件中会显示该内容，单选框和复选框则显示不出来。

checked：默认选中状态。主要用于单选按钮和复选按钮中。

maxlength：正整数，规定输入字段中的字符最大长度。

input代码示例：

<h2>表单标签</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>
        <!-- 后期结合js搭配使用 -->
        <!-- 按钮选框在默认情况下是没有文字内容的，需要添加value值设置文字内容 -->
        <input type="button" value="获取短信验证码"><br>
        上传头像：<input type="file">
    </form>

运行界面：

2.select下拉表单元素：

使用场景：地址选择、职业分类、学校分类等。

select标签：定义下拉列表。

语法：

<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>

运行界面：

3.textrea文本域表单控件

使用场景：留言、介绍、评论等。

语法：

<textrea rows=”” cols=””>文本内容</textrea>

跟文本框控件不同，它是多行文本输入框，可以自行设定行数以及一行容纳多少字数。

rows=“每行可输入的字符数”，

cols=“显示的行数”。

这两个样式属性实际开发中大多使用css就可以改变操作。

代码示例：

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

运行界面：

关于HTML基础内容就学习到这里了，明天练习一个综合案例。对了，现在跟学的是黑马前端的pink老师发布的基础视频，明天做的案例按照老师讲解的案例去做。

SS列表属性作用如下：

设置不同的列表项标记为有序列表

同的列表项标记为无序列表

设置列表项标记为图像

列表

在HTML中，有两种类型的列表：

无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）

有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

不同的列表项标记

list-style-type属性指定列表项标记的类型是：

无序列表

（1）编辑代码

打开记事本，编写代码，并保存为HTML格式文件。代码如下。

（2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。

在线咨询

上一篇：元旦，年会抽奖模板页面送给你
下一篇：HTML+CSS+JS，20行代码的贪吃蛇

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML常用布局标签：提升网页颜值！不可不知的HTML布局技巧全解析

一、理解布局的重要性

二、常用的布局标签

1、div标签

2、span标签

3、table标签

4、form标签

5、列表标签

1）无序列表

2）有序列表

3）自定义列表

表标签

表单标签

不同的列表项标记

无序列表

您的项目需求