当前位置： 首页 > news >正文

HTML入门教程|| HTML 基本标签（2）

news 文章来源：https://blog.csdn.net/m0_69824302/article/details/144869847 2025/5/15 1:19:41

HTML 列表

HTML列表

HTML 无序列表

ul 元素表示无序列表。

ul 元素中的项目使用 li 元素表示。

元素没有在HTML5中定义任何属性，并且您使用CSS控制列表的显示。

HTML5中的 type 和 compact 属性已过时。

您可以在以下代码中查看正在使用的 ul 元素。

<!DOCTYPE HTML>
<html>
<body>I like:<ul><li>HTML</li><li>CSS</li><li>Javascript</li></ul>
</body>
</html>

每个列表项都显示一个项目符号。您可以通过 list-style-typeCSS属性来控制要使用哪个样式项目符号。

例2

以下代码显示了如何创建嵌套列表。


<!DOCTYPE HTML>
<html>
<body><ul><li>HTML</li><li>CSS<ul><li>Introdunction</li><li>CSS attributes</li></ul></li><li>Javascript</li></ul>
</body>
</html>

HTML 有序列表

ol 元素表示有序列表。列表中的项目使用 li 元素表示。

已在HTML5中添加reversed属性。 compact 属性现在在HTML5中已过时。

以下代码显示了用于创建简单有序列表的 ol 元素。

<!DOCTYPE HTML>
<html>
<body>I like:<ol><li>HTML</li><li>CSS</li><li>XML</li></ol>
</body>
</html>

属性

您可以使用 ol 元素定义的属性来控制列表中的项目。

start 属性定义列表中第一个项目的序数值。如果未定义此属性，则为第一个项目分配序号值1。

您可以使用 type 属性来指示每个项目旁边应显示哪个标记。

下表显示此属性支持的值。

值描述例子
1小数(默认)1., 2., 3., 4.
a小写拉丁字母a., b., c., d.
A大写拉丁字母A., B., C., D.
i小写罗马数字i., ii., iii., iv.
I大写罗马数字I., II., III., IV.

例3

以下代码显示了如何创建嵌套排序列表。

<html>
<body>
<p>Here is a nested ordered list:</p><ol><li>Item one</li><li>Item two</li><li>Item three</li><li>Item four<ol><li>Item 4.1</li><li>Item 4.2</li><li>Item 4.3</li></ol></li><li>Item Five</li>
</ol></body>
</html>

例4

以下代码显示如何使用大写字母并从点4开始创建有序列表。


<html>
<body><p>Here is an ordered list using capital letters and starting at point 4, which is a letter D:</p><ol type="A" start="4"><li>Point number one</li><li>Point number two</li><li>Point number three</li>
</ol>
</body>
</html>

HTML 自定义列表

描述列表由一组术语/描述分组组成。

您使用三个元素来定义描述列表: dl ， dt 和 dd 元素。

  • dl 表示描述列表。
  • dt 表示描述列表中的术语。
  • dd 表示描述列表中的定义。

多个 dd 元素可用于单个 dt 元素，这允许您为单个术语提供多个定义。

以下代码创建说明列表。

<!DOCTYPE HTML>
<html>
<body>I like:<dl><dt>CSS</dt><dd>Cascading Style Sheets</dd><dd><i>a style sheet language used fordescribing the look and formattingof a document written in a markup language</i></dd><dt>HTML</dt><dd>The mark language</dd><dt>Javascript</dt><dd>The coding logic</dd></dl>
</body>
</html>

HTML figure

HTML figure

figure 和 figcaption 元素

figure标签规定独立的流内容（图像、图表、照片、代码等等）。

figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

figcaption元素被用来为figure元素定义标题。

例子

你可以在下面的代码中看到一起使用的 figure 和 figcaption 元素。


<!DOCTYPE HTML>
<html>
<body>I like XML and CSS.<figure><figcaption>Listing 01. Using the code element</figcaption><code>var fruits = ["CSS", "HTML", "CSS", "Javascript"];<br>document.writeln("I like " + fruits.length + " fruits");</code></figure>
</body>
</html>

上面的代码渲染如下:

HTML 图像

HTML图像

img 元素允许您将图像嵌入到HTML文档中。

它有局部属性: src，alt，height，width，usemap，ismap 。

HTML5中的border，longdesc，name，align，hspace 和 vspace 属性已过时。

要嵌入图像，您需要使用 src 和 alt 属性，如下所示。

<!DOCTYPE HTML>
<html>
<body><img src="http://www.www.w3cschool.cn/style/download.png" alt="Triathlon Image" width="200" height="67" />
</body>
</html>

src 属性指定图像的URL。

如果无法显示图片，则 alt 属性定义内容。

width 和 height 属性设置图像大小(以像素为单位)。

img 元素的常见用途是结合 a 元素创建基于图像的超链接。

以下代码显示了如何使用 img 和 a 元素。

<!DOCTYPE HTML>
<html>
<body><p><a href="//www.w3cschool.cn/page.html"><img ismap src="http://www.www.w3cschool.cn/style/download.png"/></a></p>
</body>
</html>

如果将 ismap 属性应用于 img 元素，则可以创建服务器端图像映射，这意味着您在图像上单击的位置将附加到URL。

例如，如果您从图像的顶部点击了4个像素，从左边缘点击了10个像素，浏览器将导航到以下内容：

//www.w3cschool.cn/page.html?10,4

客户端图像映射

您可以创建客户端图像映射：单击图像中的不同区域会导致浏览器导航到不同的URL。

客户端图像映射的关键元素是 map 与局部属性 name 。

如果使用 id 属性，它必须具有与 name 属性相同的值。

map 元素可以有一个或多个 area 元素。

每个区域元素标记图像中可以点击的区域。

area 元素具有局部属性: alt，href，target，rel，media，hreflang，type，shape，coords 。

rel，media和hreflang属性是HTML5中的新特性。nohref属性现在已过时。

  • href - 点击区域时浏览器应加载的网址
  • alt - 替代内容。请参阅img元素上的相应属性。
  • target - 应显示网址的浏览内容。
  • rel - 描述当前文档和目标文档之间的关系。
  • media - 区域有效的介质。
  • hreflang - 目标文档的语言。
  • type - 目标文档的MIME类型。

shape 和 coords 属性一起工作。 coords 属性取决于 shape 属性的值。

  • rect
    该值表示矩形区域。
    coords属性必须由四个逗号分隔的整数组成，表示与以下内容的距离：
    • 图像左边缘到矩形左边
    • 图像顶边到矩形顶边
    • 图像左边缘到矩形右边
    • 图像顶边到矩形底边
  • circle
    该值表示圆形区域。
    coords属性必须由三个逗号分隔的整数组成，表示以下内容：
    • 从图像左边缘到圆心的距离
    • 从图像顶边缘到圆心的距离
    • 圆的半径
  • poly
    此值表示多边形。
    coords属性必须至少为六个逗号分隔的整数，每对表示多边形上的一个点。
  • default
    此值是默认区域，覆盖整个图像的其余部分。
    将此值用于shape属性时，不需要坐标值。

以下代码显示如何使用图像映射。

<!DOCTYPE HTML>
<html>
<body><p><img src="http://www.www.w3cschool.cn/style/download.png" usemap="#mymap"/></p><map name="mymap"><area href="a.html" shape="rect" coords="3,5,68,62" alt="test a" /><area href="b.html" shape="rect" coords="70,5,130,62" alt="test b" /><area href="c.html" shape="default" alt="test c" /></map>
</body>
</html>

img 元素上的 usemap 属性将map元素与图像相关联。

HTML iframe

HTML iframe

iframe 元素在现有元素中嵌入另一个HTML文档。

它有局部属性: src，srcdoc，name，width，height，sandbox，seamless 。

HTML5中的 sandbox 和seamless属性是新增的。

longdesc，align，allowtransparency，frameborder，marginheight，marginwidth 和scrolling属性已过时。

以下代码显示如何使用iframe元素。

<!DOCTYPE HTML>
<html>
<body><a href="http://www.w3cschool.cn" target="myframe">Tutorial</a><iframe name="myframe" width="300" height="300"> </iframe>
</body>
</html>

注意

将创建名称属性值为 myframe 的 iframe 。这将创建一个名为 myframe 的浏览上下文。

然后，这个浏览上下文在其他元素的目标属性中使用 - 特别是a，form，button，input和base。

a 元素来创建一对超链接，这些超链接会将其href属性中指定的网址加载到iframe中。

width和height属性指定大小(以像素为单位)。src属性指定应最初加载并显示在iframe中的网址。

srcdoc属性允许您定义一个内嵌显示的HTML文档。

seamless属性设置浏览器显示iframe，如同它们是主HTML文档的组成部分。

否则，默认情况下会应用边框，如果内容大于width和height属性，则会出现滚动条。

iframe sandbox

sandbox 属性对HTML文档应用限制。当应用没有值的属性时，如下所示：

...
<iframe sandbox  name="myframe" width="300" height="100">
</iframe>
...

以下是禁用:

  • scripts
  • forms
  • plugins
  • 定位其他浏览上下文的链接

您可以通过为sandbox属性定义值来启用各个功能，如下所示：

...
<iframe sandbox="allow-forms" name="myframe" width="300" height="100">
</iframe>
...

可以使用的值的集合在下面的列表中描述。

  • allow-forms - 启用表单
  • allow-scripts - 启用脚本
  • allow-top-navigation - 允许定位到顶级浏览上下文的链接，这样可以将整个文档替换为另一个文档，也可以创建新的标签页或窗口
  • allow-same-origin - 允许将iframe中的内容视为来自与文档其余部分相同的位置

相关文章：

HTML入门教程|| HTML 基本标签（2）

HTML 列表 HTML列表 HTML 无序列表 ul 元素表示无序列表。 ul 元素中的项目使用 li 元素表示。 元素没有在HTML5中定义任何属性&#xff0c;并且您使用CSS控制列表的显示。 HTML5中的 type 和 compact 属性已过时。 您可以在以下代码中查看正在使用的 ul 元素。 <!D…...

编程日记 2025/1/3 1:27:49

MySQL root用户密码忘记怎么办（Reset root account password）

在使用MySQL数据库的的过程中&#xff0c;不可避免的会出现忘记密码的现象。普通用户的密码如果忘记&#xff0c;可以用更高权限的用户&#xff08;例如root&#xff09;进行重置。但是如果root用户的密码忘记了&#xff0c;由于root用户本身就是最高权限&#xff0c;那这个方法…...

编程日记 2025/1/3 1:26:48

groovy：多线程 简单示例

在Groovy中&#xff0c;多线程编程与Java非常相似&#xff0c;因为Groovy运行在Java虚拟机&#xff08;JVM&#xff09;上&#xff0c;并且可以利用Java的所有并发工具。以下是一些在Groovy中实现多线程编程的方法&#xff1a; class MyThread extends Thread {Overridevoid…...

编程日记 2025/1/3 1:18:40

SOME/IP 协议详解——序列化

文章目录 0. 概述1.基本数据序列化2.字符串序列化2.1 字符串通用规则2.2 固定长度字符串规则2.3 动态长度字符串规则 3.结构体序列化4. 带有标识符和可选成员的结构化数据类型5. 数组5.1 固定长度数组5.2 动态长度数组5.3 Enumeration&#xff08;枚举&#xff09;5.4 Bitfield…...

编程日记 2025/1/3 1:15:37

三、GIT与Github推送（上传）和克隆（下载）

GIT与Github推送&#xff08;上传&#xff09;和克隆&#xff08;下载&#xff09; 一、配置好SSH二、在Github创建仓库三、git克隆&#xff08;下载&#xff09;文件四、git推送&#xff08;上传&#xff09;文件到远程仓库 一、配置好SSH Git与Github上传和下载时需要使用到…...

编程日记 2025/1/3 1:10:30

18.2、网络安全评测技术与攻击

目录 网络安全测评技术与工具网络安全测评质量管理和标准 网络安全测评技术与工具 漏洞扫描技术可以用于测评&#xff0c;测评你安不安全&#xff0c;也可以用来风险评估安不安全&#xff0c;风险大不大 漏洞扫描包含网络安全漏洞扫描、主机安全漏洞扫描&#xff0c;还有数据…...

编程日记 2025/1/3 1:09:29

在 ArcGIS Pro/GeoScene Pro 中设计专题地图的符号系统

原始 按颜色对面进行符号化 打开符号系统 选择主符号系统 选择字段及其计算方式 更改临界值</...

编程日记 2025/1/3 1:06:25

CSS2笔记

一、CSS基础 1.CSS简介 2.CSS的编写位置 2.1 行内样式 2.2 内部样式 2.3 外部样式 3.样式表的优先级 4.CSS语法规范 5.CSS代码风格 二、CSS选择器 1.CSS基本选择器 通配选择器元素选择器类选择器id选择器 1.1 通配选择器 1.2 元素选择器 1.3 类选择器 1.4 ID选择器 1.5 基…...

编程日记 2025/1/3 0:59:18

移动端如何实现上拉加载

一、理解上拉加载的原理 上拉加载是一种在移动端很常见的交互方式&#xff0c;其原理是当用户在页面上向上滑动&#xff08;即滚动条接近底部&#xff09;时&#xff0c;触发一个加载更多数据的操作。这通常涉及到对滚动事件的监听以及判断滚动位置是否达到了触发加载的阈值。…...

编程日记 2025/1/3 0:58:16

【mysql】linux安装mysql客户端

参考文章&#xff1a; MySQL系列之如何在Linux只安装客户端 linux下安装mysql客户端client MySQL Community Downloads 查看linux版本方法&#xff1a; lsb_release -a cat /proc/version下载文件&#xff1a; rpm -ivh mysql-community-*可以删除错误的包&#xff1a; RP…...

编程日记 2025/1/3 0:56:14

YOLOv5部署到web端（flask+js简单易懂）

文章目录 前言最终实现效果图后端实现 主界面检测函数检测结果显示 前端实现 主界面(index.html&#xff09;显示图片界面 总结 前言 最近&#xff0c;老板让写一个程序把yolov5检测模型部署到web端&#xff0c;在网页直接进行目标检测。经过1个星期的努力&#xff0c;终于实…...

编程日记 2025/1/3 0:54:12

【机器学习】深度学习（DNN）

文章目录 1. 神经网络结构2. 训练步骤3. 反向传播4. 为什么深&#xff0c;而不是宽&#xff08;模块化&#xff09;5. 初始化参数能否全为0&#xff1f; 1. 神经网络结构 输入层隐藏层&#xff1a;用于特征转换输出层&#xff1a;用于分类技巧&#xff1a;将网络中的参数写成矩…...

编程日记 2025/1/3 0:53:11

12.30-1-5学习周报

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 文章链接摘要Abstract一、方法介绍1.HAT-CIR2.Horde3.DWGRNet 二、实验总结 文章链接 https://arxiv.org/pdf/2405.04101 摘要 本博客介绍了论文《Continual lea…...

编程日记 2025/1/3 0:51:09

【MySQL】数据操作

数据操作 一、INSERT1、介绍2、语法3、语法介绍4、注意事项5、示例 二、插入否则更新1、介绍2、语法3、语法介绍4、示例 三、ROW_COUNT1、介绍2、示例 四、REPLACE1、介绍2、语法3、示例 五、UPDATE1、介绍2、语法3、示例 六、DELETE1、介绍2、语法3、语法介绍 七、TRUNCATE1、…...

编程日记 2025/1/3 0:50:07

python数据分析：使用pandas库读取和编辑Excel表

使用 Pandas&#xff0c;我们可以轻松地读取和写入Excel 文件&#xff0c;之前文章我们介绍了其他多种方法。 使用前确保已经安装pandas和 openpyxl库&#xff08;默认使用该库处理Excel文件&#xff09;。没有安装的可以使用pip命令安装&#xff1a; pip install pandas ope…...

编程日记 2025/1/3 0:48:04

开源轻量级文件分享服务Go File本地Docker部署与远程访问

???欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老…...

编程日记 2025/1/3 0:46:01

异步背后的奥秘：事件循环

异步背后的奥秘&#xff1a;事件循环 复习环节 JavaScript运行时 我们都知道&#xff0c;JavaScript本身是一个单线程的&#xff0c;那JavaScript是如何处理同时发生的多个任务的呢&#xff1f; 首先JavaScript引擎运行在一个容器中&#xff0c;这个容器可能是浏览器或者nod…...

编程日记 2025/1/3 0:42:58

Springboot使用RabbitMQ实现关闭超时订单的一个简单示例

1.maven中引入rabbitmq的依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency> 2.application.yml中进行rabbitmq相关配置&#xff1a; # rabbit…...

编程日记 2025/1/3 0:41:56

小程序基础 —— 07 创建小程序项目

创建小程序项目 打开微信开发者工具&#xff0c;左侧选择小程序&#xff0c;点击 号即可新建项目&#xff1a; 在弹出的新页面&#xff0c;填写项目信息&#xff08;后端服务选择不使用云服务&#xff0c;开发模式为小程序&#xff0c;模板选择为不使用模板&#xff09;&…...

编程日记 2025/1/3 0:38:53

【Golang 面试题】每日 3 题（十五）

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…...

编程日记 2025/1/3 0:36:51

Docker命令（用法说明详解）

一、常见Docker容器命令 #根据image创建一个新容器并运行&#xff08;即使该image已经存在容器&#xff0c;也会再创建一个新容器&#xff09; docker run IMAGE_NAME #根据image创建一个新容器并运行。 #选项-d&#xff1a;指定容器为后台运行&#xff0c;--name自定义该容器…...

编程日记 2025/1/3 0:33:49

leetcode 热题100（131. 分割回文串）c++

链接&#xff1a;131. 分割回文串 - 力扣&#xff08;LeetCode&#xff09; 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 示例 1&#xff1a; 输入&#xff1a;s "aab" 输出&#xff…...

编程日记 2025/1/3 0:32:47

vs2022编译opencv 4.10.0

参考&#xff1a;Windosw下Visual Studio2022编译OpenCV与参考区别在于&#xff0c;没有用cmake GUI&#xff0c;也没有创建build目录&#xff0c;直接用vs2022打开了C:\code\opencv目录&#xff0c;即CMakeLists.txt所在根目录。没有修改默认下载地址&#xff0c;采用手动下载…...

编程日记 2025/1/3 0:27:42

Bash 中的 2＞1 | tee 命令详解

Bash 中的 2>&1 | tee 命令详解 在 Linux 和 Unix 系统中&#xff0c;命令行提供了强大的输出控制功能&#xff0c;能够灵活地处理标准输入&#xff08;stdin&#xff09;、标准输出&#xff08;stdout&#xff09;和标准错误&#xff08;stderr&#xff09;。本文将详…...

编程日记 2025/1/3 0:24:40

MySQL数据库的日志

一、概论 日志&#xff08;log&#xff09;是一种记录系统运行时各种状态和事件的文件。 它通常用于系统监控、故障排查、安全审计和性能分析。日志文件可以记录用户操作、系统错误、应用程序行为等信息。日志文件通常包含时间戳、事件类型、事件描述等关键信息&#xff0c;以…...

编程日记 2025/1/3 0:21:38

DataCap 2024.4.1 版本发布：MongoDB 驱动支持、工作流引擎升级

尊敬的 DataCap 用户&#xff1a; DataCap 2024.4.1 版本现已正式发布。本次更新包含多项重要功能升级和性能优化&#xff0c;现将主要更新内容公布如下&#xff1a; 核心功能升级 数据库功能增强 (实现功能) 新增数据库管理功能&#xff1a;支持创建、删除和切换数据库完善表…...

编程日记 2025/1/3 0:11:22

二十三种设计模式-单例模式

单例模式&#xff08;Singleton&#xff09;&#xff1a;确保一个类只有一个实例&#xff0c;并提供一个全局访问点。 单例模式两种实现方法&#xff1a;懒汉式和饿汉式。 懒汉式&#xff08;Lazy Initialization&#xff09; 懒汉式单例模式在第一次被使用时才创建实例&…...

编程日记 2025/1/3 0:09:19

【微服务】SpringBoot 国际化适配方案使用详解

目录 一、前言 二、国际化概述 2.1 微服务中的国际化是什么 2.1.1 国际化概念 2.1.2 为什么需要国际化 2.2 微服务中常用的国际化方法 2.2.1 资源文件分离 2.2.2 使用国际化框架 2.2.3 使用动态模板 2.2.4 使用数据库存储 2.2.5 API设计结合配置中心 三、SpringBoot…...

编程日记 2025/1/3 0:06:16

太阳能电池板缺陷识别数据集，使用yolo，coco json，pasical voc xml格式标注，可识别旁路二极管,电池故障,热点,2234张原始图片

太阳能电池板缺陷识别数据集&#xff0c;使用yolo&#xff0c;coco json&#xff0c;pasical voc xml格式标注&#xff0c;可识别旁路二极管,电池故障,热点,2234张原始图片 以下是该项目的一些用例&#xff1a; 太阳能发电厂监控&#xff1a;该模型可用于自动化检查和识别大型…...

编程日记 2025/1/3 0:03:12

客户案例：基于慧集通平台集成打通小满CRM+金蝶云星空+钉钉

一、引言 本案例原型公司是一家生物科技公司&#xff0c;公司自开创以来专注于体外诊断生物活性原材料的研究、生产、销售和服务&#xff0c;致力于为全球体外诊断试剂生产企业提供领先且具有竞争力的核心原料和相关辅助产品服务。公司以卓越的产品和优质的服务赢得了客户的广…...

编程日记 2025/1/2 23:57:06