html中布局标记与列表标记的图文详解

布局标记

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

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

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

里面大体的上中下布局：

上：

中：

下：

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

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

运行结果：

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

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

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

运行结果：

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

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

以上就是html中布局标记与列表标记的图文详解的详细内容，更多请关注php中文网其它相关文章！