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

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

news 2025/11/7 17:10:28

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

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/10/23 14:31:06

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/11/7 14:02:16

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/10/30 22:13:49

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/10/30 22:15:39

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/10/30 22:15:43

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2025/11/7 0:58:25

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/10/4 17:23:01

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05