`
l4432848
  • 浏览: 253608 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML布局标记与列表标记

    博客分类:
  • java
阅读更多

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。

布局标记

首先要介绍的布局标记是div标记,div可以做网页的层也可以做网页的分区。当div做网页的层时可以实现漂浮在网页上的效果,就像我们经常可以在网站里看见的那些漂浮广告。div做网页的分区时,则是可以布置网页的格局,把一个网页分为多个模块,由这些模块结构来构建出一个网页。
div里有一个style属性这个属性是用来控制样式的,比如可以调整背景颜色、组件的宽高、组件的位置等等,基本和样式相关的都可以使用style属性来控制。
示例:

image

运行结果:

image

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

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

image

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

image

里面大体的上中下布局:

上:

image

中:

image

image

下:

image

image

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

image

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

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

image

image

运行结果:

image

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

image

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

image

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

image

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

image

运行结果:

image

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

image

table标记和div标记一样都是属于网页布局的标记,table主要是用来做表格,table里常用的属性是:border表格的边界线、cellpadding 表格的填充程度、cellspacing 内间距距离,table要嵌套thead、tbody、tfood、tr、th、td等标签来实现表格。
thead是用来表示表格的头部分的,tbody是用来表示表格的内容部分的,tfood是用来表示表格的尾部分的。这三个标签并没有实际的效果,只是为了爬取数据的时候好辨认某段内容是表格的什么部分。
tr实现表格的行,th实现表格的表头,td实现表格的单元格,表格主要是使用这三个标签来完成的,代码示例:

image

image

image

image

image

运行结果:

image

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

image

运行结果:

image

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

image

运行结果:

image

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

image

运行结果:

image

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

image

运行结果:

image

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

image

运行结果:

image

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

image

运行结果:

image

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

image

列表标记

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

image

运行结果:

image

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

image

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

image

运行结果:

image

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

image

运行结果:

image

常用列表标签:

image

0
0
分享到:
评论

相关推荐

    实验室管理系统 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程.zip

    实验室管理系统 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程 项目启动教程:https://www.bilibili.com/video/BV1BfB2YYEnS

    基于java的苹果网吧计费管理系统设计与实现.docx

    基于java的苹果网吧计费管理系统设计与实现.docx

    纸中世界-跳跃游戏.sb3

    纸中世界-跳跃游戏.sb3

    Keysight 网络分析仪新建校准件操作指导

    本操作指导用于在 ENA 系列网络分析仪 E5080B 上自定义校准件。目前 Keysight 网络分析仪的 PNA 系列 N52xxB、P50xx 系列、P937x 系列、PXI 板卡式网分以及 ENA 系列的 E5080B、E5081B 的操作界面均统一到如下界面,操作方式相同。

    调查海域浮游动物各类群栖息密度的空间分布表格.docx

    调查海域浮游动物各类群栖息密度的空间分布表格.docx

    ssm框架Java项目源码-高校毕业生就业管理系统+jsp毕设-大作业.zip

    本项目“高校毕业生就业管理系统”是一套基于SSM框架(Spring+SpringMVC+MyBatis)精心开发的Java Web应用,旨在为高校毕业生、高校就业指导部门以及企业用户提供一个高效、便捷的就业信息管理平台。 系统主要功能包括:学生用户可以查看和发布个人简历,搜索并筛选合适的工作岗位,申请心仪的职位;企业用户可以发布招聘信息,筛选和查看应聘者的简历,进行面试邀请等操作;高校就业指导部门则可以对学生的就业情况进行统计和分析,以更好地提供就业指导服务。 此外,系统采用了B/S架构,用户只需通过浏览器即可访问,无需安装客户端软件,方便快捷。数据库设计合理,数据存储安全,系统性能稳定。 本项目的开发,不仅为计算机相关专业的学生提供了一个实践SSM框架的好机会,帮助他们更好地理解和掌握Java Web开发技术,还能有效提升高校毕业生的就业效率和质量。

    使用 Python 进行视频编辑.zip

    电影剪辑 笔记MoviePy 最近升级到 v2.0,引入了重大的重大变化。有关如何更新 v2.0 代码的更多信息,请参阅本指南。MoviePy(在线文档在此处)是一个用于视频编辑的 Python 库剪切、连接、插入标题、视频合成(又名非线性编辑)、视频处理和创建自定义效果。MoviePy 可以读取和写入所有最常见的音频和视频格式,包括 GIF,并且可以在 Windows/Mac/Linux 上运行,并搭载 Python 3.9+。例子在此示例中,我们打开一个视频文件,选择 10 到 20 秒之间的子剪辑,在屏幕中心添加标题,然后将结果写入新文件# Import everything needed to edit video clipsfrom moviepy import *# Load file example.mp4 and keep only the subclip from 00:00:10 to 00:00:20clip = VideoFileClip("long_examples/example2.mp4").with_subcl

    基于java的视频播放器系统设计与实现.docx

    基于java的视频播放器系统设计与实现.docx

    基于java的车辆出租管理系统设计与实现.docx

    基于java的车辆出租管理系统设计与实现.docx

    mqtt等协议的pcap文件

    mqtt等协议的pcap文件

    小白的Python入门教程部分章节源码.zip

    学习python

    修木工施工规范及流程.docx

    修木工施工规范及流程.docx

    适用于 Windows,Linux 和 Python 3 (3.5,3.6,3.7) 的 Tensorflow Faster R-CNN.zip

    适用于 Windows/Linux 和 Python 3 (3.5/3.6/3.7) 的 Tensorflow Faster R-CNNtf-faster-rcnn使用 Python 3 在 Windows 和 Linux 上使用 Tensorflow Faster R-CNN这是在 Windows 和 Linux 上编译 Faster R-CNN 的分支。它深受这里和这里的出色工作的启发。目前,此存储库支持 Python 3.5、3.6 和 3.7。感谢@morpheusthewhite请注意我没有时间或意图修复此分支的所有问题,因为我不将其用于商业用途。我创建此分支只是为了好玩。如果您想做出任何承诺,我们非常欢迎。Tensorflow 已经发布了一个对象检测 API。请参考它。https: //github.com/tensorflow/models/tree/master/research/object_detection如何使用此分支安装 tensorflow,最好是 GPU 版本。按照说明操作。如果没有安装 GPU 版本,则需要注释掉代码中的所有 GP

    章节2:编程基本概念之python程序的构成

    Python是一种高级、解释型、面向对象的编程语言,以其简洁的语法、强大的功能和广泛的应用领域而著称。它无需事先编译,代码在运行时逐行解释执行,提供了极大的灵活性和快速开发的能力。Python支持多种数据类型,包括整数、浮点数、字符串、布尔值、列表、元组、字典和集合等,以及丰富的操作符和流程控制结构,使得开发者可以编写出复杂且灵活的代码。 Python拥有一个广泛的标准库,涵盖了文件操作、网络通信、文本处理、正则表达式、数学运算等多个领域,为开发者提供了大量的模块和函数。此外,Python还拥有丰富的第三方库,如NumPy、Pandas、Matplotlib等用于数据分析和可视化的库,以及Django、Flask等用于Web开发的框架,这些库和框架进一步扩展了Python的应用领域和功能。 Python在Web开发、数据科学、人工智能、自动化运维和游戏开发等多个领域都有广泛的应用。在Web开发方面,Python提供了Django和Flask等强大的Web框架,使得开发者可以轻松地开发出各种Web应用和网站。在数据科学领域,Python是数据科学家的首选工具,其强大的数据处理能力和丰

    毕设源码-基于python的西西家居全屋定制系统的设计与实现_ijsj--论文-期末大作业+说明文档.rar

    本项目是基于Python语言开发的西西家居全屋定制系统,旨在为家居行业提供一个高效、智能的定制解决方案。项目涵盖了从客户需求分析、设计方案生成、材料选购到最终订单生成的全过程,力求实现家居定制的数字化和智能化。 在主要功能方面,系统具备强大的客户管理模块,能够详细记录和分析客户的定制需求。设计模块则采用先进的三维建模技术,为客户提供直观、真实的家居设计方案预览。此外,系统还整合了丰富的材料数据库,方便客户根据自身喜好和预算进行材料选择。 框架方面,项目采用了B/S架构,确保了系统的稳定性和可扩展性。后端使用Python的Django框架,前端则结合了HTML、CSS和JavaScript等技术,实现了用户界面的友好和响应速度。 开发此项目的目的,不仅是为了满足家居行业对个性化定制的需求,也为计算机相关专业的学生提供了一个实践和学习的平台,有助于提升他们的实际开发能力。

    简单连接到 Binance Public API.zip

    Binance公共API连接器Python 这是一个轻量级库,可作为Binance 公共 API的连接器支持的 API/api/*/sapi/*现货 Websocket 市场动态现货用户数据流现货 WebSocket API包含测试用例和示例可定制的基本 URL、请求超时和 HTTP 代理可以显示响应元数据安装pip install binance-connector文档https://binance-connector.readthedocs.ioRESTful API使用示例from binance.spot import Spotclient = Spot()# Get server timestampprint(client.time())# Get klines of BTCUSDT at 1m intervalprint(client.klines("BTCUSDT", "1m"))# Get last 10 klines of BNBUSDT at 1h intervalprint(client.k

    离线安装eclipse的aptana插件详细中文最新版本

    Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE。 Aptana的特点包括: 1JavaScript,HTML,CSS语言的Code Assist功能。 2Outliner(大纲):显示JavaScript,HTML和CSS的代码结构。

    学习自律养成小程序 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程.zip

    学习自律养成小程序 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程 项目启动教程:https://www.bilibili.com/video/BV1BfB2YYEnS

    认知能力评估表.docx

    认知能力评估表.docx

    数学建模学习资料 粒子群算法 先进算法讲义.pdf

    数学建模学习资料 粒子群算法 先进算法讲义.pdf

Global site tag (gtag.js) - Google Analytics