3. HTML中的容器标签

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

列表标签

 1 <!-- 无序列表 -->
 2 <ul>
 3     <li>无序列表-1</li>
 4     <li>无序列表-2</li>
 5     <li>无序列表-3</li>
 6     <li>无序列表-4</li>
 7     <li>无序列表-5</li>
 8 </ul>
 9 <!-- 实心圆标记 -->
10 <ul type="disc">
11     <li>无序列表-1</li>
12     <li>无序列表-2</li>
13     <li>无序列表-3</li>
14     <li>无序列表-4</li>
15     <li>无序列表-5</li>
16 </ul>
17 <!-- 空心圆 -->
18 <ul type="circle">
19     <li>无序列表-1</li>
20     <li>无序列表-2</li>
21     <li>无序列表-3</li>
22     <li>无序列表-4</li>
23     <li>无序列表-5</li>
24 </ul>
25 <!-- 实心方块 -->
26 <ul type="square">
27     <li>无序列表-1</li>
28     <li>无序列表-2</li>
29     <li>无序列表-3</li>
30     <li>无序列表-4</li>
31     <li>无序列表-5</li>
32 </ul>
33 <!-- 有序列表 -->
34 <ol>
35     <li>有序列表</li>
36     <li>有序列表</li>
37     <li>有序列表</li>
38     <li>有序列表</li>
39     <li>有序列表</li>
40 </ol>
41 <!-- 数字标记 -->
42 <ol type="1">
43     <li>有序列表</li>
44     <li>有序列表</li>
45     <li>有序列表</li>
46     <li>有序列表</li>
47     <li>有序列表</li>
48 </ol>
49 <!-- 大写罗马数字 -->
50 <ol type="I">
51     <li>有序列表</li>
52     <li>有序列表</li>
53     <li>有序列表</li>
54     <li>有序列表</li>
55     <li>有序列表</li>
56 </ol>
57 <!-- 小写罗马数字 -->
58 <ol type="i">
59     <li>有序列表</li>
60     <li>有序列表</li>
61     <li>有序列表</li>
62     <li>有序列表</li>
63     <li>有序列表</li>
64 </ol>
65 <!-- 大写英文字母 -->
66 <ol type="A">
67     <li>有序列表</li>
68     <li>有序列表</li>
69     <li>有序列表</li>
70     <li>有序列表</li>
71     <li>有序列表</li>
72 </ol>
73 <!-- 小写英文字母 -->
74 <ol type="a">
75     <li>有序列表</li>
76     <li>有序列表</li>
77     <li>有序列表</li>
78     <li>有序列表</li>
79     <li>有序列表</li>
80 </ol>
81 <!-- 自定义列表 -->
82 <dl>
83     <dt>自定义列表</dt>
84     <dd>内容</dd>
85     <dt>自定义列表</dt>
86     <dd>内容</dd>
87     <dt>自定义列表</dt>
88     <dd>内容</dd>
89 </dl>
90 <dl>
91     <dt>自定义列表</dt>
92     <dd>内容</dd>
93     <dt>自定义列表</dt>
94     <dd>内容</dd>
95     <dt>自定义列表</dt>
96     <dd>内容</dd>
97 </dl>
View Code

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

表格标签

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

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

框架标签

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

<framset>标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>2-3 容器标签 框架</title>
 6 </head>
 7 <!-- 没有<body>标签 -->
 8 <frameset rows="10%,80%,*">
 9     <frame src="./background.html" name="top"></frame>
10     <frameset cols="25%,*">
11         <!-- 关联窗口的实现 -->
12         <frame src="./left_main.html"></frame>
13         <frame src="./background.html" name="main"></frame>
14     </frameset>
15     <frame src="./background.html" name="bottom"></frame>
16 </frameset>
17 </html>
View Code

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

<iframe>标签

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

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

布局标签

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

本文转载于:猿2048➩https://www.mk2048.com/blog/blog.php?id=j1b00jb&title=3. HTML中的容器标签

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370404.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python自带sqlite库_Python标准库之sqlite3使用实例

Python自带一个轻量级的关系型数据库SQLite。这一数据库使用SQL语言。SQLite作为后端数据库&#xff0c;可以搭配Python建网站&#xff0c;或者制作有数据存储需求的工具。SQLite还在其它领域有广泛的应用&#xff0c;比如HTML5和移动端。Python标准库中的sqlite3提供该数据库的…

GitHub上Java的Bloom Bloom实现

布隆过滤器是集数据结构的一种 。 对于那些不了解的对象&#xff0c;“设置数据结构”仅包含一个主要方法。 它仅用于确定特定元素是否包含在一组元素中。 大多数数据结构&#xff08;例如Hash Map &#xff0c; Linked List或Array &#xff09;都可以相当轻松地创建此函数。 …

Hibernate(十五):QBC检索、本地SQL检索和HQL删除

QBC检索QBC查询就是通过使用Hibernate提供的Query By Criteria API来查询对象&#xff0c;这种API封装了SQL语句的动态拼装&#xff0c;对查询提供了更加面向对象的功能接口。 1&#xff09;通过Critera实现具有条件的查询 1 Test2 public void testCriteria00() {3 …

java 创建连接池失败_java-Presto JDBC连接池创建错误“不支持禁用...

我正在尝试使用Spring-JDBC连接到Presto,并且我正在使用Hikari CP作为数据源.这是我的配置&#xff1a;Beanpublic DataSource myDataSource() {HikariDataSource hikariDataSource new HikariDataSource();hikariDataSource.setDriverClassName("com.facebook.presto.jd…

ni软件管理器_NI 技术支持丨我的 NI 硬件设备不能被识别,怎么办?Windows

这篇指南可以帮助您解决在您的 Windows 系统上无法识别您的 NI 硬件有关的问题。症状包括以下几种情况&#xff1a;连接至 USB 端口时&#xff0c;硬件上的 LED 灯不亮/不闪烁。连接至 USB 后已连接设备的 LED 灯持续闪烁。仅限音频接口&#xff1a;该设备在音频应用程序或 Win…

环境搭建相关

1.检测jre运行环境 java -version 没有的话 按照提示安装 default-jre 够用 http://www.linuxidc.com/Linux/2016-11/136958.htm 否则按照上面处理 2.pycharm下载 https://www.jetbrains.com/pycharm/download/ 选择下载一个linux的 3.下载crackjar http://idea.lanyus.com/jar…

在Java应用程序中使用密码学

这篇文章描述了如何使用Java密码体系结构 &#xff08;JCA&#xff09;&#xff0c;该体系结构使您可以在应用程序中使用密码服务。 Java密码体系结构服务 JCA提供了许多加密服务&#xff0c;例如消息摘要和签名 。 这些服务可以通过特定于服务的API来访问&#xff0c;例如Me…

CSS学习笔记-04 a标签-导航练习

个人练习&#xff0c;各位大神勿笑 。。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&qu…

AngularJs简介

AngualrJs是一个javascript框架&#xff0c;它通过<script>标签加到HTML页面中。 Angular通过指令拓展了HTML&#xff0c;且通过表达式绑定数据到HTML。 Angular是一个javascript框架 Angular是一个javascript框架。它是一个以javascript编写的库。 Angular是以一个javas…

java怎样访问servlet_如何访问URL并从java servlet获取响应?

你需要做这样的事情import java.io.*;import java.net.URL;import java.net.URLConnection;import javax.servlet.http.*;import javax.servlet.*;public class URLServlet extends HttpServlet {public void doGet(HttpServletRequest req, HttpServletResponse res)throws Se…

深度学习loss值变为0_利用TensorFlow2.0为胆固醇、血脂、血压数据构建时序深度学习模型(python源代码)...

背景数据描述胆固醇、高血脂、高血压是压在广大中年男性头上的三座大山&#xff0c;如何有效的监控他们&#xff0c;做到早发现、早预防、早治疗尤为关键&#xff0c;趁着这个假期我就利用TF2.0构建了一套时序预测模型&#xff0c;一来是可以帮我预发疾病&#xff0c;二来也可以…

在Spring MVC Web应用程序中使用reCaptcha

CAPTCHA是一种程序&#xff0c;可以生成人类可以通过的测试并对其进行评分&#xff0c;而计算机程序“ 不能 ”通过。 所采取的策略之一是向用户显示具有扭曲文本的图像&#xff0c;并且用户应在输入区域中书写文本。 如果显示的文字与用户输入的文字相同&#xff0c;则我们可以…

洛谷 P1757 通天之分组背包

P1757 通天之分组背包 题目背景 直达通天路小A历险记第二篇 题目描述 自01背包问世之后&#xff0c;小A对此深感兴趣。一天&#xff0c;小A去远游&#xff0c;却发现他的背包不同于01背包&#xff0c;他的物品大致可分为k组&#xff0c;每组中的物品相互冲突&#xff0c;现在&a…

课时109.外边距合并现象(掌握)

我们先写一个案例&#xff0c;通过案例来了解 它们之间的水平距离就是两个间距的和 我们看完水平再来看垂直方向 在默认布局的垂直方向上&#xff0c;默认情况下外边距是不会叠加的&#xff0c;会出现合并现象&#xff0c;谁的外边距比较大就听谁的 本文转载于:猿2048➜https:…

纯 CSS实现三角形

最近项目上做评论回复&#xff0c;设计师提高交互性特意设计了小三角&#xff0c;如下&#xff1a; 下面介绍一下实现效果的css方法&#xff1a; 1.border 通过设置上下左右border宽度来实现。 首先查看一下全部设置的效果&#xff1a; <style>   .triangle{     w…

python access_Python3 os.access() 方法

Python3 os.access() 方法概述os.access() 方法使用当前的uid/gid尝试访问路径。大部分操作使用有效的 uid/gid, 因此运行环境可以在 suid/sgid 环境尝试。语法access()方法语法格式如下&#xff1a;os.access(path, mode);参数path -- 要用来检测是否有访问权限的路径。mode -…

小米的java待遇怎么样_【Java工资】小米2021年Java工资待遇-看准网

已经不是面试官迟到的问题了&#xff0c;是约好了面试时间&#xff0c;结果彻底没有然后了&#xff0c;这种言而无信我头一回见。小米运营部门令人困惑的工作作风&#xff0c;简单总结一句就是&#xff1a;敷衍不走心&#xff0c;面试规则内部都不统一。两次面小米&#xff0c;…

Spring MVC表单验证(带批注)

这篇文章提供了一个简单HTML表单验证示例。 它基于带有注释的Spring MVC示例。 该代码可在GitHub的Spring-MVC-Form-Validation目录中找到。 数据 在此示例中&#xff0c;我们将使用bean和JSR303验证批注&#xff1a; public class MyUser {NotNullSize(min1,max20)private …

课时106.边框练习(理解)

让我们做出来如下的样式&#xff1a; 1.首先看下有几个边框&#xff0c;就做几个div&#xff0c;用简单方法div.box$*6 tab键 2.然后给它们设置宽高 3.然后依此来做边框 第一个&#xff1a;有四种方法&#xff0c;第一种最简单 第二个&#xff1a;有两种方法&#xff0c;第二…

Bzoj3998 弦论

物理题目传送门 求第k大的子串&#xff1f;SAM模板题啊 CLJ的论文都讲了怎么做啊&#xff0c;把自动机看成一个后缀Trie求出size让后像多叉平衡树那样乱搞就好了~ 比前两个哈希的题好多了~ &#xff08;顺便&#xff0c;hdu高亮好好看啊&#xff09; #pragma GCC opitmize(&quo…