`
l4432848
  • 浏览: 252891 次
  • 性别: 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
分享到:
评论

相关推荐

    HTML语言之文字布局标记

    HTML语言之文字布局标记 详细代码解析

    html语言基本标记

    7. `&lt;ul&gt;`与`&lt;li&gt;`:创建无序列表,`&lt;ol&gt;`与`&lt;li&gt;`创建有序列表。 8. `&lt;div&gt;`:分隔内容,用于布局和样式控制。 9. `&lt;span&gt;`:用于对文本进行精细化控制,如改变部分文字的颜色或大小。 10. `&lt;strong&gt;`与`&lt;em&gt;`:...

    HTML标记完全版

    HTML,全称HyperText Markup Language,是用于创建网页的标准标记语言。HTML标记是构成HTML文档的基本元素,它们告诉浏览器如何组织和展示网页内容。本文将详细介绍HTML标记的完全版,帮助网页开发者更好地理解和...

    HTML常用标记 HTML常用标记

    HTML(HyperText Markup Language)是用于创建网页的标准标记语言,它的基本结构由一系列特定的标记组成,这些标记告诉浏览器如何组织和展示网页内容。在HTML中,常用的标记是构建网页内容和样式的基石。 首先,...

    HTML常用代码标记

    43. `&lt;FRAMESET&gt;`:框架标记,用于创建多窗口的布局。 44. `frameborder`:框架边框的厚度,如`frameborder=0`表示无边框。 45. `framespacing`:框架间的间距,如`framespacing="0"`表示无间距。 46. `face`:...

    html标记与属性速查表.pdf

    ### HTML标记与属性详解 HTML,即超文本标记语言(HyperText Markup Language),是用于创建网页的标准标记语言。本文将基于“html标记与属性速查表.pdf”中的内容,深入解析其中的关键标记及其属性,帮助读者更好地...

    html标记总结

    HTML标记(或称为标签)是构建网页结构的基础,通过不同的标记来定义文本、图像、链接等网页元素的格式与布局。以下是对HTML标记的详细总结,旨在帮助学习者更好地理解和运用这些标记,从而提高网页设计能力。 ####...

    HTML+CSS网页设计与布局从入门到精通

    全书遵循Web标准,强调“表现”与“内容”的分离,抛弃了那些过时的HTML标记和属性,从更规范的角度全面、系统地介绍了网页设计制作方法与技巧。附录收录了网站发布与管理的知识和160个应用CSS时出现频度较高的英文...

    HTML标记大全.txt

    #### 三、布局与分隔标记 **3.1 文档布局** - `&lt;DIV&gt;`:通用容器元素,用于对页面进行布局。 - `ALIGN`属性:控制`DIV`元素内的内容对齐方式。 - `&lt;HR&gt;`:创建水平线。 - `ALIGN`属性:设置水平线的对齐方式。 ...

    JSP定制标记使用手册

    - **GETASSTRING标记**:此标记与GET类似,但它将返回的值转换为字符串形式,便于在页面上直接输出。 - **USEATTRIBUTE标记**:USEATTRIBUTE标记检查是否存在指定的请求或页面范围的属性,并将其绑定到一个局部...

    精通HTML之标记大整理

    - ****:框架集标记,用于定义页面布局的框架结构。 - ****:框架标记,用于定义页面中的一个独立窗口或框架。 - ****:内联框架标记,用于在文档中嵌入另一个HTML文档。 - ****:非框架标记,用于提供一个替代文本...

    C#课件-XML是一种类似于HTML的标记语言

    XML还允许创建数据岛(Data Islands)嵌入到HTML页面中,使页面能够与后台数据进行交互,而不会破坏页面的布局和显示。此外,XML可以用于存储大量数据,无论是文件还是数据库,都可以方便地进行读取和写入,简化了...

    HTML标记大全参考手册.txt

    以上是根据给定文件内容整理出的一些HTML基础知识点,这些知识点覆盖了HTML的基本结构、文本格式化、列表、链接、图像、表格、布局以及多媒体元素等方面,对于初学者来说是非常实用的基础知识。

    HTML标记表 精华版

    除此之外,HTML还有许多其他标记,如链接`&lt;A&gt;`、图像`&lt;IMG&gt;`、列表`&lt;UL&gt;`和`&lt;OL&gt;`、表格`&lt;TABLE&gt;`、表单`&lt;FORM&gt;`等,这些都是构建网页的基本组件。学习HTML时,理解这些标记的作用和使用方法是至关重要的。通过实践...

    HTML语言剖析之HTML标记一览

    #### 文档流与布局标记 1. **`&lt;p&gt;`**:段落标记,用于表示一个独立的段落。 - 示例:`这是一个段落。&lt;/p&gt;` 2. **` `**:换行标记,用于强制换行而不形成新的段落。 - 示例:`这是第一行。 这是第二行。` ...

    HTML标记查询软件

    HTML(HyperText Markup Language)是用于创建网页的标准标记语言,它是互联网内容呈现的基础。这个“HTML标记查询软件”显然是为了帮助用户更方便地理解和使用HTML标签。HTML标签是HTML中的核心元素,它们定义了...

    初学者接触HTML了解一些HTML标记(1)

    这只是HTML标记的冰山一角,还有许多其他标记,如段落 `&lt;P&gt;`,标题 `&lt;H1&gt;` 至 `&lt;H6&gt;`,列表 `&lt;UL&gt;`,`&lt;OL&gt;` 及 `&lt;LI&gt;`,图像 `&lt;IMG&gt;`,表格 `&lt;TABLE&gt;`,等等。每种标记都有其特定的用途,理解它们可以帮助构建出结构...

    HTML实用标记 绝对是初学者的好文档

    在网页设计中,CSS(Cascading Style Sheets)通常与HTML结合使用,以控制元素的样式和布局。HTML负责结构,CSS负责外观。 通过阅读《HTML实用标记》这样的文档,初学者可以学习到如何创建有效的HTML结构,理解各个...

    常用HTML标记和格式

    ### 常用HTML标记和格式详解 #### 标题标记 HTML中的标题标记是用于定义文档中的各级标题,从`&lt;h1&gt;`至`&lt;h6&gt;`,共六级,其中`&lt;h1&gt;`表示最高级别的标题,字体最大,`&lt;h6&gt;`则表示最低级别的标题,字体最小。这些标记...

    HTML(超文本标记语言)网页设计

    HTML(超文本标记语言)是用于创建网页的标准标记语言,它是互联网内容呈现的基础。了解HTML的基本知识和如何创建一个简单的HTML文件是Web开发的入门步骤。 1. HTML基础: HTML由一系列的标记组成,这些标记通常是...

Global site tag (gtag.js) - Google Analytics