前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML布局标记和列表标记

HTML布局标记和列表标记

作者头像
端碗吹水
发布2020-09-23 11:03:18
4.2K0
发布2020-09-23 11:03:18
举报
文章被收录于专栏:程序猿的大杂烩

布局标记

首先要介绍的布局标记是div标记,div可以做网页的层也可以做网页的分区。当div做网页的层时可以实现漂浮在网页上的效果,就像我们经常可以在网站里看见的那些漂浮广告。div做网页的分区时,则是可以布置网页的格局,把一个网页分为多个模块,由这些模块结构来构建出一个网页。

div里有一个style属性这个属性是用来控制样式的,比如可以调整背景颜色、组件的宽高、组件的位置等等,基本和样式相关的都可以使用style属性来控制。

示例:

3511
3511

运行结果:

3512
3512

从运行结果就可以看出,一个div就占它所设定的大小,每个div都是分开的,将网页分成了一个个的块。

我们查看一下百度搜索的源码就可以看到,这个页面用的最多的标记就是div,所以也就可以知道这个页面是使用div标签来布局的:

3513
3513

我们来简单分析一下这个页面的布局,从整体页面可以看出这个页面是用一个div来套住整个页面,然后在这个div里面则是采用了上中下的布局方式:

头div,也就是套住整个页面的div:

3514
3514

里面大体的上中下布局:

上:

3515
3515

中:

3516
3516
3517
3517

下:

3518
3518
3519
3519

整个网页就是这样一个大体的布局方式:

3520
3520

从以上简单的分析中可以发现,每个div里几乎都嵌套着div再继续布局,一个网页就像堆积木一样,将这些div结合起来构建出了一个页面,这就是div分区的一个应用。

我们也可以模仿这样一个布局方式做出一个“百度”,代码示例:

3522
3522
3523
3523

运行结果:

3524
3524

表单的提交网页使用百度的接收页面就可以实现搜索了:

3525
3525

实现搜索的功能很简单先使用百度随便搜索一下,就可以获取到它的服务器接收页面的地址和表示搜索关键字的属性:

3526
3526

然后在form的action属性里把服务器接收页面的地址填上,然后再把文本框的name属性赋值为wd就可以利用百度的服务器接收页面实现搜索功能:

3527
3527

以上就是div分区的一个应用,下面简单介绍一下div层的实现方式,实际上div的分区就像是行,而div的层则像是列,代码示例:

3528
3528

运行结果:

3529
3529

从运行结果可以看到div是一列一列的,当缩放窗口时会自动改变位置:

3530
3530

table标记和div标记一样都是属于网页布局的标记,table主要是用来做表格,table里常用的属性是:border表格的边界线、cellpadding 表格的填充程度、cellspacing 内间距距离,table要嵌套thead、tbody、tfood、tr、th、td等标签来实现表格。

thead是用来表示表格的头部分的,tbody是用来表示表格的内容部分的,tfood是用来表示表格的尾部分的。这三个标签并没有实际的效果,只是为了爬取数据的时候好辨认某段内容是表格的什么部分。

tr实现表格的行,th实现表格的表头,td实现表格的单元格,表格主要是使用这三个标签来完成的,代码示例:

代码语言:javascript
复制
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<table border="1">
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>手机号码</th>
					<th>住址</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>小明</td>
					<td>12</td>
					<td>男</td>
					<td>135****1582</td>
					<td>天涯海角</td>
				</tr>
				<tr>
					<td>小红</td>
					<td>11</td>
					<td>女</td>
					<td>135****5233</td>
					<td>m78星云</td>
				</tr>
				<tr>
					<td>亚洲舞王赵四</td>
					<td>35</td>
					<td>男</td>
					<td>135****0000</td>
					<td>不明</td>
				</tr>	
			</tbody>
			<tfoot>
				<tr>
					<td colspan="5" align="right">
						<a href="">[首页]</a>
						<a href="">[上一页]</a>
						<a href="">[下一页]</a>
						<a href="">[尾页]</a>
					</td>
				</tr>
			</tfoot>
		</table>
	</body>

</html>

运行结果:

3531
3531

td标签里有个colspan属性,可以让列合并,这个属性的数字代表合并几列,注意这个数字得算上此属性本身所在的那一列,代码示例:

3532
3532

运行结果:

3533
3533

从运行结果可以看到有一个单元格的内容被挤到表格外面去了,这是因为没有对应的去删除一个单元格,合并多少列就得对应的删除多少个单元格:

3534
3534

运行结果:

3535
3535

cellpadding属性的数值可以改变表格的填充程度,数值越大表格就越大,cellspacing 属性的数值可以改变表格的内间距距离,代码示例:

3536
3536

运行结果:

3537
3537

border可以去掉表格的边界线,代码示例:

3538
3538

运行结果:

3539
3539

我们可以使用style属性来调整表格的颜色,代码示例:

3540
3540

运行结果:

3541
3541

以上就把table制作表格的基本用法介绍完了,接下来介绍一下nav:导航条和footer:网页尾部,实际上这两个标记只是起到一个说明的作用而已没有什么实际效果,也是为了在爬取数据的时候让别人知道这是个导航条这是个网页尾部,代码示例:

3542
3542

运行结果:

3543
3543

以上就是网页布局类标签的内容,思维导图总结:

3544
3544

列表标记

首先要介绍的第一个列表是ul无序列表,无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记,ul需要嵌套li实现列表效果。无序列表始于 <ul> 标签,每个列表项则始于 <li>,代码示例:

3545
3545

运行结果:

3546
3546

这种无序列表是使用得最多的列表,别看无序列表的原始效果不好看,这是因为没有使用样式。无序列表的特性适合做导航条的多项列表和列表框,例如这个网页就是使用了ul无序列表制作的导航条:

3547
3547

接下来是ol有序列表同样,有序列表也是一列项目,列表项目使用自增的数字进行标记,所以称为有序列表。有序列表始于 <ol> 标签,每个列表项也是始于 <li> 标签,代码示例:

3548
3548

运行结果:

3549
3549

最后是dl自定义列表,自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始,每个自定义列表项则以 <dt> 开始,每个自定义列表项的定义以 <dd> 开始,代码示例:

3550
3550

运行结果:

3551
3551

常用列表标签:

3552
3552
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/10/30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档