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> 开始,代码示例:
运行结果:
常用列表标签:
- hdu----(5045)Contest(数位dp)
- hdu----(5053)the Sum of Cube(签到题,水体)
- RHEL构建DNS服务器-多区域
- hdu----(5050)Divided Land(二进制求最大公约数)
- 日志分析实战之清洗日志小实例1:使用spark&Scala分析Apache日志
- RHEL构建DNS服务器-单区域
- hdu----(5047)Sawtooth(大数相乘+数学推导)
- hdu----(4522)湫湫系列故事——过年回家(最短路)
- hdu---(1421)搬寝室(dp)
- hdu----(1257)最少拦截系统(dp/LIS)
- nginx安装Fancy美化索引目录
- hdu---(3779)Railroad(记忆化搜索/dfs)
- RHEL下KVM虚拟化部署-安装虚拟化
- hdu--(1025)Constructing Roads In JGShining's Kingdom(dp/LIS+二分)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 双向广搜-HDU1401 Solitaire
- TCP三次握手和四次挥手以及11种状态
- 浙大版《C语言程序设计(第3版)》题目集 题8-9 分类统计各类字符个数
- 迭代加深搜索-POJ 3134 Power Calculus
- 浙大版《C语言程序设计(第3版)》题目集 习题9-2 计算两个复数之积
- 浙大版《C语言程序设计(第3版)》题目集 习题9-6 按等级统计学生成绩
- 实战|用pandas+PyQt5制作一款数据分组透视处理工具
- 带权/种类并查集-POJ 1182食物链
- 浙大版《C语言程序设计(第3版)》题目集 练习10-1 使用递归函数计算1到n之和
- 十分钟快速了解Pandas的常用操作!
- 一行代码如何隐藏 Linux 进程?
- SSH 只能用于远程 Linux 主机?那说明你见识太小了!
- 干货 | Trip.com 机票React Native整洁架构2.0实践
- 干货 | 日均TB级数据,携程支付统一日志框架
- 为什么 HTTPS 是安全的?