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常用布局标签,你已经拥有了构建网页的基础工具。记住,好的布局不仅需要技术,更需要创意和对细节的关注。现在,打开你的代码编辑器,开始你的布局设计之旅吧!
天为大家带来了HTML中的表格与列表、块及类与ID的基础知识,首先为大家介绍的是HTML中的表格与列表。
一、HTML中的表格与列表:
相信大家都知道在office、Excel等办公软件中如何制作表格,那大家知道如何在网页上制作表格呢?同时网页上面的注册和登陆表又是怎么制作出来的呢?今天将会为大家详细讲解。
1、表格:
① 了解<table>标签
在网页上的表格制作是用<table>标签来定义的。
② table中的<tr>和<td>标签
l 每个表格有若干行,即用<tr>标签来定义。
l 每行被分割为若干单元格,即用<td>标签来定义。
示例图
运行结果:
③ 在<table>元素中添加border属性就可以显示边框,示例:
运行结果:
④ 表单的表格用<th>标签表示,示例:
运行结果:
2、列表
列表分为无序列表、有序列表和定义列表
① 无序列表
l 无序列表是一个项目的列表,此列表项目使用粗体圆点进行标记。
l 无序列表始于<ul>标签,每个列表始于<li>,示例:
运行结果:
l 在<ul>标签中使用type属性可以改变列表前面的符号,示例:
运行结果:
② 有序列表
l 与无序列表不同的是,有序列表使用的是<ol>标签,示例:
运行结果:
在<ol>标签中添加type属性,可以改变列表前面的符号,示例:
运行结果:
③ 定义列表
l 定义列表就是自定义列表,是项目及其注释的组合。
l 自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始,示例:
运行结果:
二、HTML中的块:
1、大多数HTML元素被定义为块级元素或内联元素
① 块级元素在浏览器显示时,通常以新行来开始(和结束),例如:<h1>、<p>、<ul>、<table>等。
② 内联元素在显示时通常不会以新行开始,例如:<b>、<td>、<a>、<img>等。
2、HTML中的<div>元素
HTML<div>元素是块级元素,是可以组合其他HTML元素的容器,简单来说<div>元素一般被用在HTML布局上面,示例:
运行结果:
3、HTML中的<span>元素
HTML<span>元素是内联元素可用作文本的容器,当与css一同使用时,<span>元素可用于为部分文本设置样式属性,示例:
运行结果:
三、HTML中的CLASS和ID:
在上面的示例中我们有看到id标签,在学习过程中很多人搞不懂class类和id标签的区别,现在开始教大家如何区分class类和id标签。
CLASS:
1、Class就我们口中所说的类
2、在css中引用时以“.”开头,并且可以被多个元素调用,例如:
3、在使用中,可以先设置出一个样式,然后被多个元素引用。
ID:
1、id是一种标签
2、在css中引用时以“#”开头,只能定义一个元素,例如:
3、在使用时,只能先确定一个元素,然后才能设置其样式,无法被其它元素引用,是唯一的标签。
希望大家能够从这篇文章学习到HTML的部分知识~
.列表(对相同类型的数据进行合理的展示)
列表分为有序、无序和自定义列表。
a、无序列表(ul):
ul 标签用来声明无序列表 ,所有的列表项(li)都要包含在ul标签当中
<ul>
<li> xx</li>
<li> xx</li>
</ul>
标识符类型样式:改变type属性值来控制当前列表的标识符类型。
circle 实心圆样式
square 实心正方形
disc 默认值实心圆
<ul type="none"> <!--无标识符-->
<li>吃饭</li>
</ul>
<ul type="square">
<li>睡觉</li>
</ul>
<ul type="circle">
<li>看电视</li>
</ul>
注意:li 标签中一般不能出现样式,比如 <li type = "circle">XX</li>写法不是很规范:
ul标签当中只能出现 li 标签,不能出现其他标签和文字,列表内容写在li标签中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul type="none">
<!--li列表项-->
<li>吃饭1</li>
<li>吃饭2</li>
<li>吃饭3</li>
<li>吃饭4</li>
</ul>
</body>
</html>
b、有序列表(ol):
<ol>
<li> xx</li>
<li> xx</li>
</ol>
修改标识符:改变type属性值
1 数字1 2 3 ......
a/A 小/大写字母
i/I 小/大写的罗马数字
<ol type="none">XX</ol> 无标识符
注意:同样,ol标签和li标签是配合使用的,不能单独使用,而且ol标签内部不能存在 任何其他标签,一般情况下只能存在li标签。
有序列表
c、自定义列表(dl):
<dl>标签和<dt><dd>标签是配合使用,不能单独使用,而且<dl>标签内部不能存在
任何其他标签。(dt是标题,dd是列表内容)
<dl>
<!--自定义列表的标题-->
<dt>广东省</dt>
<!--可以写自定列表的内容-->
<dd>广州</dd>
<dd>潮汕</dd>
<dd>中山</dd>
<dt>广西省</dt>
<dd>南宁</dd>
<dd>柳州</dd>
<dd>桂林</dd>
</dl>
小结:
列表有三种表现形式;
有序列表和无序列表必须配合li标签使用;
列表的type属性可以改变列表标识符;
2.表格
<table>XX</table> 声明表格
<tr>XX</tr> 行
<td>XX</td> 列
<th>XX</th> 表头单元格,粗体居中
<caption>XX</caption> 表格的标题,写在table下面
<table border = "2"> <!--border 表格边框粗细-->
<caption>XX</caption>
<tr>
<td>吃饭1</td>
<td>吃饭2</td>
</tr>
<tr>
<td>吃饭3</td>
<td>吃饭4</td>
</tr>
</table>
补充:W3C:万维网联盟 ,制定web标准。
web标准分为结构(html)、 表现(css)、行为(js)
标签名称、属性名称必须小写
标签必须严格嵌套,并且必须闭合,即使空元素标签也必须闭合
属性值必须用引号引起来
*请认真填写需求信息,我们会在24小时内与您取得联系。