整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
HTML的世界里，一切都是由容器和内容构成的。容器，就如同一个个盒子，用来装载各种元素；而内容，则是这些盒子里的珍宝。理解了这一点，我们就迈出了探索HTML布局的第一步。
在HTML中，布局标签主要用于控制页面的结构和样式。本文将介绍一些常用的布局标签及其使用方法，并通过代码示例进行演示。
布局在我们前端开发中担任什么样的角色呢？想象一下，你面前有一堆散乱的积木，无序地堆放在那里。
而你的任务，就是将这些积木按照图纸拼装成一个精美的模型。HTML布局标签的作用就像那张图纸，它指导浏览器如何正确、有序地显示内容和元素，确保网页的结构和外观既美观又实用。
下面我们就来看看在HTML中常用的基础布局标签有哪些，如何使用这些布局标签完成我们的开发目标。
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>
运行结果：
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>
运行结果：
table标签用于创建表格，它包含多个tr（行）元素，每个tr元素包含多个td（单元格）或th（表头单元格）元素。
<table> 定义一个表格，<tr> 定义表格中的行，而 <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>
运行结果：
<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>
运行结果：
示例代码：
<!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无序列表样式。
想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！「链接」
示例代码：
<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有序列表样式。
<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常用布局标签，你已经拥有了构建网页的基础工具。记住，好的布局不仅需要技术，更需要创意和对细节的关注。现在，打开你的代码编辑器，开始你的布局设计之旅吧！
本标签: 32
例:
<dl>
<dt>标题1</dt>
<dd>内容11</dd>
<dd>内容12</dd>
<dt>标题2</dt>
<dd>内容21</dd>
<dd>内容22</dd>
</dl>
target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);
rel="...",发送链接的类型;
rev="...",保存链接的类型;
accesskey="...",指定该元素的热键;
shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);
coord="...",使用像素或者长度百分比来定义形状的尺寸;
tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).
action="...",接收数据的服务器的URL;
method="...",HTTP的方法(get,,post),其中get是被反对使用的;
enctype="...",指定MIME(Internet媒体类型);
onsubmit="...",当提交表单时发生的内部事件;
noreset="...",在重新设置表单时发生的内部事件;
target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)
disabled="...",把按钮的状态设置为不能;
name="...",按钮的控制名,value="...",按钮的值;
type="...",按钮的类型(button,,submit,,reset);
type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一个单选钮设置为选中的状态;
disabled="...",把控件的状态设置为不能使用;
readonly="...",只对输入密码的文本框使用;
size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;
src="...",一个图像控件的URL;
maxlength="...",指定可以输入的最多的字符数目;
alt="...",另外一种文本描述;
usemap="...",到客户端图形镜像的URL;
align="...",被反对.控制对齐方式(left,,center,,right,,justify);
tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;
onfocus="...",当元素获得焦点时发生的事件;
onblur="...",当元素失去焦点时发生的事件;
onselect="...",当元素被选中时发生的事件;
onchang="...",当元素状态被改变时发生的事件;
accept="...",允许上载的文件类型.
scr="...",定义在帧中显示的内容的来源;
frameborder="...",定义帧之间的边界(0或1);
align="...",被反对,控制对齐方式(left,,center,,right,,justify);
height="...",帧的高度,width="..."帧的宽度;
一下html中文件标签和文本标签的使用
目的是学会使用，所以借助工具可以省好多时间
1.文件标签：构成html最基本的标签
html:html文档的根标签
head：头标签。用于引入html文档的一些属性。引入外部的一些资源
title：标题标签
body：体标签
<!DOCTYPE html>:html5中定义该文档是html
2.文本标签：和文本有关的标签
注释:<!-- 注释内容 –->
<h1> 到<h6>:标题标签自带换行的效果
<p>：表示段落的标签
<br>：换行标签<br/>和<br>的写法都不会报错
<hr>：显示一条水平线（也是一个自闭和标签）水平线有一些属性我们可以控制它的样式。hr里面表示高度是size而不是height.对齐方式默认是居中的。
<b>：字体加粗
<i>：斜体
<font>:字体标签（通过属性来修改字体的字号，大小，颜色，以及字体的样式）
<center>:文本居然标签
这里讲下网页下面的版权标签是如何写出来的。
3.图片标签：用来展示图片的（图片也是一个自闭合标签）
属性:src:用来指定图片的位置
什么都不写默认就是./的形式
../表示上一级目录
4.列表标签：
有序列表:ol,li(li表示的是列表的每一项)
无序列表:ul,li
5.链接标签：
a:定义一个超链接
属性：
href:指定访问资源的URL(统一资源定位符，就是路径的表示形式)
target：（是目标的意思）指定打开资源的方式
_self:在当前页面打开
_blank:在空白页面打开
6.表格标签：在HTML中的表格只有行的概念，没有列的概念，将表格以行的形式进行分割，然后再对行进行操作。
table:定义表格
width:表格的宽度
border:边框
cellpadding:单元格内容左对齐（定义内容和单元格的距离）
cellspacing:边框合并(定义单元格之间的距离，如果指定为0，单元格的线会合为一条)
bgcolor:背景色
align:表格的对齐样式
tr:定义行
bgcolor:背景色
align:表格的对齐样式(是用来修改文本的对齐方式的)
td:定义单元格
colspan:合并列
rowspan:合并行
th:定义表头单元格
<caption>:表格标题
<thread>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分
7.块标签：div和span是结合css使用的
span:文本信息在一行显示，行内标签，内联标签(意思就是它不会换行)
div:是会换行的。每一个div占满一整行。块级别的标签
8.语义化标签：html5中为了提高程序的可读性，提高了一些标签
<header>
<footer>
*请认真填写需求信息，我们会在24小时内与您取得联系。
