专栏首页程序猿的大杂烩HTML布局标记和列表标记

HTML布局标记和列表标记

布局标记

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

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

示例:

运行结果:

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

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

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

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

里面大体的上中下布局:

上:

中:

下:

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

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

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

运行结果:

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

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

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

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

运行结果:

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

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

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

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

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

运行结果:

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

运行结果:

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

运行结果:

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

运行结果:

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

运行结果:

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

运行结果:

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

运行结果:

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

列表标记

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

运行结果:

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

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

运行结果:

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

运行结果:

常用列表标签:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 大数据平台 —— 调度系统之Azkaban

    其中AzkabanWebServer可以说是整个Azkaban工作流系统的主要管理者,它负责project管理、用户登录认证、定时执行工作流、跟踪工作流执行进度...

    端碗吹水
  • MySQL-锁02

    之前我们介绍了行级锁,顾名思义行级锁就只是锁住一行或多行数据,因为针对的是行去锁的,因为一个表格内会有很多行数据,要在这些数据中去锁定其中几行数据,是比较耗费资...

    端碗吹水
  • 关于领域模型转换的那些事儿

    我们在软件开发设计及开发过程中,习惯将软件横向拆分为几个层。比如常见的三层架构:表现层(VIEW/UI)、业务逻辑层(SERVICE/BAL)、数据访问层(DA...

    端碗吹水
  • CSS快乐星球

      在CSS交流网站上看到了这个效果,在赞叹别人伟大的同时自己也想动手试一试,的确是一个十分花哨的效果,主要考察的是 transform 的运用。   让我们...

    我不是费圆
  • golang goquery selector(选择器) 示例大全

    最近研究Go爬虫相关的知识,使用到goquery这个库比较多,尤其是对爬取到的HTML进行选择和查找匹配的内容时,goquery的选择器使用尤其多,而且还有很多...

    飞雪无情
  • 谈谈出入React框架踩过的坑

    1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop value ...

    外婆的彭湖湾
  • JQuery选择器(中)

    HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

    HTML5学堂
  • Vue中$refs的理解

    $refs是一个对象,持有注册过ref attribute的所有DOM元素和组件实例。

    WindrunnerMax
  • Java常见排序算法详解——快速排序

    通过一趟排序将待排序记录分割成独立的两部分,其中一部分记录的关键字均比另一部分小,则可分别对这两部分记录继续进行排序,直到整个序列有序。

    Demo_Yang
  • iOS开发中的WKWebView与JS的交互

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

    用户1451823

扫码关注云+社区

领取腾讯云代金券