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> 开始,代码示例:
运行结果:
常用列表标签:
- PHP调用Go服务的正确方式 - Unix Domain Sockets
- 一条看似平常的报警邮件所做的分析(r8笔记第9天)
- 55. 上传文件(Web版) | 厚土Go学习笔记
- R语言与机器学习学习笔记(分类算法
- 54. 心跳的实现 | 厚土Go学习笔记
- 通过错误的sql来测试推理sql的解析过程(二) (r8笔记第7天)
- 53. Socket服务三次握手的示例 | 厚土Go学习笔记
- R分词继续,"不|知道|你在|说|什么"分词添加新词
- Java开发Spring第一天
- 关于R安装中文分词包安装不上的问题install.packages("tm")
- dataguard备库的数据文件的迁移实战(r8笔记第24天)
- Hive的left join、left outer join和left semi join三者的区别
- 52. Socket Server 自定义协议的简单实现 | 厚土Go学习笔记
- dataguard备库的数据文件的迁移(r8笔记第22天)
- 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 实例
- 收割腾讯等十几个Offer后,揭秘进大厂的秘诀和Android技术面试题汇总!
- Flutter BLoC 异步通信、BlocBuilder的基本使用、BlocProvider的初探
- Android设备获取扫码枪扫描的内容与可能遇到的问题解决
- 3分钟短文:胆儿真肥!Laravel在命令行问用户要数据!
- 实战矿马:数据异常牵出的挖矿木马(.systemd-service.sh)
- leetcode之两个相同字符之间的最长子字符串
- 面试阿里被P8质问:ConcurrentHashMap真的线程安全吗?
- 腾讯云TKE-搭建prometheus监控(二)
- Qt音视频开发41-人脸识别嵌入式
- 浅析Android Studio 3.0 升级各种坑(推荐)
- Android EasyPermissions官方库高效处理权限相关教程
- 关于Android 6.0权限的动态适配详解
- 详解android 人脸检测你一定会遇到的坑
- Android实战RecyclerView头部尾部添加方法示例
- android实现多线程断点续传功能