什么是容器标签?在HTML开发中我们常常会使用一类标签作为容器放置一些内容,我们把这类标签称之为容器标签,可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签,在这里我们就来总结下这些内容。

列表标签

 <!-- 无序列表 -->
<ul>
<li>无序列表-1</li>
<li>无序列表-2</li>
<li>无序列表-3</li>
<li>无序列表-4</li>
<li>无序列表-5</li>
</ul>
<!-- 实心圆标记 -->
<ul type="disc">
<li>无序列表-1</li>
<li>无序列表-2</li>
<li>无序列表-3</li>
<li>无序列表-4</li>
<li>无序列表-5</li>
</ul>
<!-- 空心圆 -->
<ul type="circle">
<li>无序列表-1</li>
<li>无序列表-2</li>
<li>无序列表-3</li>
<li>无序列表-4</li>
<li>无序列表-5</li>
</ul>
<!-- 实心方块 -->
<ul type="square">
<li>无序列表-1</li>
<li>无序列表-2</li>
<li>无序列表-3</li>
<li>无序列表-4</li>
<li>无序列表-5</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 数字标记 -->
<ol type="1">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 大写罗马数字 -->
<ol type="I">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 小写罗马数字 -->
<ol type="i">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 大写英文字母 -->
<ol type="A">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 小写英文字母 -->
<ol type="a">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>自定义列表</dt>
<dd>内容</dd>
<dt>自定义列表</dt>
<dd>内容</dd>
<dt>自定义列表</dt>
<dd>内容</dd>
</dl>
<dl>
<dt>自定义列表</dt>
<dd>内容</dd>
<dt>自定义列表</dt>
<dd>内容</dd>
<dt>自定义列表</dt>
<dd>内容</dd>
</dl>

在HTML中提供了三种列表形式,即无序列表、有序列表以及自定义列表。其中无序列表的应用场景最多,自定义列表几乎没有被使用,有序列表只是在特殊的场合中使用。而且在使用有序列表的时候会遇到一个特别有意思的情况,就是有序列表的标记可以是数字,而数字足够我们使用,但是英文字母的数量是有限的,那么在列表项超过了26个英文字母的时候会遇到什么情况呢?

表格标签

<table  align=”表格对齐方式”>
<tr>
<td align=”单元格水平对齐方式”>单元格内容</td>
<td valign=”单元格垂直对齐方式”>单元格内容</td>
<td colsspan=”单元格所跨列数”>单元格内容</td>
<td rowspan=”单元格所跨行数”>单元格内容</td>
</tr>
</table>

表格结构在互联网早期被用作实现网页的布局,但是现在表格只是用来呈现一些数据,因为表格结构会产生大量的标签,而且一旦网页结构改变,那么整个网页的结构就需要改变,这点对于开发人员来说会特别的痛苦,所以后来就逐渐的抛弃了这种方式。在这里我们只要熟悉表格结构就好。

框架标签

框架是互联网早期的标签,现在开发中基本上已经不再使用了,但是在一些早期的网站中还可以看到这些内容,所以有必要了解这些内容。常见的框架标签包括<frameset>、<iframe>两种,下表是我们整理的一些框架相关的代码。

<framset>标签

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-3 容器标签 框架</title>
</head>
<!-- 没有<body>标签 -->
<frameset rows="10%,80%,*">
<frame src="./background.html" name="top"></frame>
<frameset cols="25%,*">
<!-- 关联窗口的实现 -->
<frame src="./left_main.html"></frame>
<frame src="./background.html" name="main"></frame>
</frameset>
<frame src="./background.html" name="bottom"></frame>
</frameset>
</html>

这个标签可以十分方便的让我们实现菜单目录的功能,对于页面的重复利用非常方便,所以很受欢迎。

<iframe>标签

<iframe src="http://www.sina.com.cn/" width="100%" height="1000px"></iframe>

这种标签可以十分方便的在我们的网站中嵌入一些其他网站的页面。

布局标签

所谓布局标签,很简单就是用来实现网页布局的<div>、<span>这些标签,是现在设计网页中重要的HTML标签。不过值得说明的是这些标签没有实际的语义,只是作为容器来放置一些内容,所以建议在实际开发中不要滥用,否则的话HTML的结构会特别复杂,代码也会特别多。

3. HTML中的容器标签的更多相关文章

  1. html5中的容器标签和文本标签

    html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...

  2. html标签,格式控制标签,内容容器标签,超链接标签,图片标签,表格

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...

  3. Winform容器标签 打印标签 对话框控件

    一.容器标签 布局: Anchor:锁定位置,指定与窗口容器的边缘位置,会随着窗口大小的改变而改变: Dock:填充窗口的位置.一般与容器标签同时使用. 1.Panel:对控件进行分组.可以独立布局, ...

  4. html body的属性 格式控制标签 内容容器标签 超链接标签 图片标签 表格

    一.body的属性 <body  bgcolor  页面背景色 background 背景壁纸.图片 text文字颜色 topmargin上边距 leftmargin左边距 rightmargi ...

  5. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  6. HTML之body标签中的相关标签

    一 字体标签   字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...

  7. ng-repeat不添加容器标签

    如UL中的循环, 我们不期望添加额外的div之类的容器标签, 使用ng-repeat-start和ng-repeat-end可以实现 <li class="item item-icon ...

  8. Firefox 新增容器标签:可同时登录多个用户

    Mozilla昨天在Firefox夜间构建版50.0a1中增加了一个名为“容器标签Container Tabs”的实验性功能. Mozilla的工程师称,该功能可以将用户的浏览会话分到不同的容器中.这 ...

  9. 如何在 js 代码中使用 jsp 标签或 Java 代码

    JSP 标签还是很方便的,比如 Struts.Spring 等提供给我们的 JSP 标签,可以用它们来获取变量或进行一些计算.比如 struts2 的 <s:url value="/a ...

随机推荐

  1. 制作rpm安装包

    1.安装rpmbuild软件 sudo apt-get install rpmbuild2.配置工作路径 在制作 rpm 包之前,首先要配置工作路径,也就是制作 rpm 包所在的目录.制作 rpm 包 ...

  2. Maximum Subarray解题报告zz

    http://fisherlei.blogspot.com/2012/12/leetcode-maximum-subarray.html Find the contiguous subarray wi ...

  3. eclipse通过maven进行打包并且对hdfs上的文件进行wordcount

    在eclipse中配置自己的maven仓库 1.安装maven(用于管理仓库,jar包的管理) -1.解压maven安装包 -2.把maven添加到环境变量/etc/profile -3.添加mave ...

  4. js数组 标签: javascript 2016-08-03 14:15 131人阅读 评论(0) 收藏

    数组排序 reverse()方法 reverse()方法会反转数组的顺序. sort()方法 默认情况下sort()方法按升序排列数组项.为实现排序sort()方法调用每项的toString(),然后 ...

  5. February 7 2017 Week 6 Tuesday

    It does not do to dwell on dreams, and forget to live. 人不能只生活在梦里,只依靠虚幻的东西而忘记了生活. Don't forget to liv ...

  6. 如何用jstl的select标签做二级联动下拉列表框??

    下拉列表框的多级联动早就会了.但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题.主要问题在用Ajax查询到的数据如何拼成下拉选项的时候.其实很简单,但我还是折腾了好久.所 ...

  7. Perl入门(七) Perl脚本的调试

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/sunshoupo211/article/details/32711165 编程中错误不可避免.调试可 ...

  8. git及github配置入门

    github是一个有海量开源代码库的网站,同时也是一个软件开发管理软件,作为软件来说它集成了git这个分布式的版本控制系统,可以上传.下载和管理自己的代码. 笔者刚接触不久,把认为入门应该知道的东西稍 ...

  9. Kali-linux枚举服务

    枚举是一类程序,它允许用户从一个网络中收集某一类的所有相关信息.本节将介绍DNS枚举和SNMP枚举技术.DNS枚举可以收集本地所有DNS服务和相关条目.DNS枚举可以帮助用户收集目标组织的关键信息,如 ...

  10. 使用Nginx 做负载均衡

    Nginx可以作为一个非常高效的负载均衡系统,通过分发HTTP请求到多个应用服务器来提高整个系统的吞吐量,性能和可用性. 负载均衡的算法/机制 下面是Nginx支持的机制 轮询机制 轮询算法 最少连接 ...