2.2 HTML5保留的常用标签

news2025/1/13 7:30:08

2.2.1 基础标签

1. 段落标签<p>

    段落标签<p>和</p>用于形成一个新的段落，段落与段落之间默认为空一行进行分割。 

2. 标题标签<h1>-<h6>

    HTML5使用<hn>和</hn>来标记文本中的标题，其中n需要替换为数字，从1至6共有6级。<h1>标签所标记的字体最大，标签使用的数字越大则字体越小，直至<h6>标签所标记的字体最小。标题标签的默认状态为左对齐显示的黑体字。标题标签中的字母h来源于英文单词heading（标题）的首字母。

3. 水平线标签<hr>

    水平线标签<hr>用于在网页上画一条水平线，从而在视觉上将文本分段。<hr>标签没有结束标签，可以单独使用，默认情况下是一条宽度为1像素的黑色水平线。标签中的元素名称hr来源于英文单词horizontal rule（水平线）的首字母简写。

4. 换行标签<br>

    换行标签<br>用于在当前位置产生一个换行，相当于一次回车键所产生的效果。该标签单独使用，无结束标签。建议使用该标签代替回车键，因为回车键所产生的多个连续换行会被浏览器自动省略。<br>标签每次只能换一行，如需多次换行，必须写多个<br>标签。

2.2.2 文本格式标签

1. 斜体字标签<i>

    斜体字标签<i>用于将其首尾标签之间的文本内容显示为斜体字型效果。

2. 粗体字标签<b>和<strong>

    粗体字标签<b>和<strong>均可以将其首尾标签之间的文本内容显示为粗体字型效果。区别在于使用<strong>标签的文本内容被认为是重要的内容。

3. 上标标签<sup>和下标标签<sub>

    标签<sup>和</sup>标记的文本内容将显示为上标的样式，例如数字上X的平方可以写成X2；标签<sub>和</sub>标记的文本内容将显示为下标的样式，例如二氧化碳的化学方程式可以写成CO2。

4. 修订标签<del>和<ins>

    修订标签有<del>和<ins>两种，分别用于为文本内容添加删除线和下划线。删除线标签<del>可将其首尾标签之间的文字上显示一条水平贯穿线，该标签一般用于定义被删除的文本内容，标签中的元素名称del来源于英文单词delete（删除）。

    下划线标签<ins>用于将其首尾标签之间的文字加上下划线效果，标签中的元素名称来源于英文单词（）。由于<ins>标签的下划线效果容易和网页上的超链接效果混淆，往往需要和<del>标签配合使用。

    HTML4.01版本中另有删除线标签<strike>和下划线标签<u>显示同样的效果，在HTML5中均已不再被支持，建议使用<del>和<ins>代替旧版标签用于表示修订文本。

5. 预格式化标签<pre>

    预格式化标签<pre>和</pre>可以将所标记的文本内容在显示时保留换行与空格的排版效果。在没有使用该标签的普通情况下，浏览器将把多次回车键形成的换行默认为一次换行，并且把多次空格键形成的连续空格默认为单个空格，在段落开头的连续空格甚至会被忽略。当需要多次使用<br>和nbsp;符号分别进行换行和空格时，可以考虑使用此标签提高效率。

2.2.3 列表标签

1. 有序列表标签<ol>

    有序列表标签<ol>和</ol>用于定义带有编号的有序列表，需要和列表项目标签<li>配合使用。列表项目标签<li>需标记在每个表项的开头，默认为缩进显示效果。标签中的元素名称ol来源于英文单词ordered list（有序列表）的首字母简写。

有序列表的基本格式如下：

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
.......
</ol>

    有序列表标签<ol>默认的起始数值为1，可使用start属性重新定义编号起始值，格式为：<ol start=”n”>。其中n需要替换成指定的编号数值，例如需要从3开始编号，则写成：<ol start=”3”>。 

    有序列表标签<ol>默认的编号样式为标准阿拉伯数字（1，2，3，4，...），如需使用其他编号样式，可使用type属性进行声明，格式为<ol type=”类型值”>。 

2. 无序列表标签<ul>

    无序列表标签<ul>和</ul>用于定义不带编号的无序列表，标签中的元素名称ul来源于英文单词unordered list（无序列表）的首字母简写。该标签也需要和列表项目标签<li>配合使用。列表项目标签<li>需标记在每个表项的开头，默认为缩进显示效果。 

无序列表的基本格式如下：

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
.......
</ul>

    无序列表标签<ul>默认的编号样式为实心圆形，嵌套在其他列表中的二级列表编号样式默认为空心圆形。如需自定义编号样式，可使用type属性进行声明，格式为<ul type=”类型值”>。

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无序列表标签的应用</title>
    </head>
    <body>
        <h3>无序列表标签的基本应用</h3>
        <ul>
            <li>第一条</li>
            <li>第二条</li>
            <li>第三条</li>
            <li>第四条</li>
        </ul>
        <hr>

        <h3>无序列表标签的type属性设置</h3>
        <ul type="square">
            <li>第一条</li>
            <li>第二条</li>
            <li>第三条</li>
            <li>第四条</li>
        </ul>
        <hr>

        <h3>无序列表标签嵌套显示效果</h3>
        <ul>
            <li>第一条</li>
            <li>第二条
                <ul>
                    <li>第一条</li>
                    <li>第二条</li>
                    <li>第三条</li>
                    <li>第四条</li>
                </ul>
			</li>
            <li>第三条</li>
            <li>第四条</li>
        </ul>
    </body>
</html>

 

3. 定义列表标签<dl>

    定义列表标签<dl>和</dl>是用于进行词条定义的特殊列表，每条表项需要结合词条标签<dt>和定义标签<dd>一起使用。词条标签<dt>需要标记在每个词条的开头。定义标签<dd>则需要标记在每个定义部分的开头，默认为全文缩进显示。标签中的元素名称dl来源于英文单词definition list（定义列表）的首字母简写。

定义列表的基本格式如下：

<dl>
<dt>第一个词条
<dd>第一个词条的定义
<dt>第二个词条
<dd>第二个词条的定义
.......
</dl>

 

2.2.4 图像标签

    图像标签<img>用于在网页中嵌入图片，该标签无需结束标签，可单独使用。标签中的元素名称img来源于英文单词image（图像）。

    <img>标签有两个常用属性：src属性和alt属性。src属性是英文单词source（来源）的简写，用于指明图像的存储路径，通常是URL形式。alt属性是英文单词alternative（替代的、备选的）的简写，用于无法找到图像时显示替代文本，该属性可省略不写。

其基本格式如下：

<img src="图像文件URL" />

其中图像文件URL替换为图片存储的路径，例如图片文件为starrynight.jpg，并存放于本地的images文件夹中，则可以写成：

<img src="http://localhost/images/starrynight.jpg" />

如果图片和该网页文件在同一个目录中，则可以直接写图片名称即可。 

<img src="starrynight.jpg" />

 

2.2.5 超链接标签

    超链接标签<a>用于在网页中标记文本或图像从而形成超链接，用户点击后将跳转另一个指定的页面，从而实现浏览空间的跨越。标签中的元素名称a来源于英文单词anchor（锚）的首字母简写，因此超链接按照标准叫法又称为锚链接。

    超链接可以用于指向其他任何位置，包括Internet上的其他网页、本地其他文档甚至当前页面中其他位置。适用于制作网页的导航菜单或列表，也可以用于发送邮件或下载文件等。默认状态下，未被访问的链接文本显示为带有下划线的蓝色字体，鼠标悬浮在上面会变成手形，点击访问后链接文本会变成带有下划线的紫色字体。

超链接标签有如下两个重要属性：

  • href：目标内容的URL地址。
  • target：目标内容的打开方式，其属性值如表所示。
1. 外部链接

    其基本格式如下：

<a href=”URL地址”>链接文本或图片</a>

     外部链接可包含文本内容或者图片内容。例如：

文本示例：
<a href=”https://www.baidu.com”>百度</a>
 
图片示例：
<a href=”https://www.baidu.com”><img src=”logo.png” /></a>

2. 内部链接

    超链接标签也可以通过点击跳转同一页面的指定区域，其语法格式如下：

<a href="#指定区域名">链接文本或图像</a>

    这里的“指定区域名”可以自定义，但是同时目标区域也必须标记出对应

<a name="区域名">目标内容</a>

2.2.6 表格标签

   表格标签由<table>和</table>定义，每个表格中包含若干行（由单元行标签<tr>和</tr>表示），每一行又被分为若干单元格（由单元格标签<td>和</td>表示）。

1. 表格标签<table>

    表格标签<table>和</table>用于中定义一个完整的表格。

2. 表格行标签<tr>

    表格行标签<tr>和</tr>用于定义表格中的一行。

3. 单元格标签<td>

    单元格标签<td>和</td>用于定义表格行中的一个数据单元格，其中字母td为table data（表格数据）的简写。数据单元格中可以包含表单、文本、水平线、图片、列表、段落甚至新的表格等内容。默认状态下，单元格的内容为左对齐。

4. 表头标签<th>

    表头标签<th>和</th>用于定义表格的第一行表头，默认为粗体字、居中对齐。

5. 表格标题标签<caption>

    表格标题标签<caption>和</caption>可用于为表格添加标题，该标题默认为居中对齐并显示在表格的顶部。

2.2.7 框架标签

   框架标签用于在网页的框架内定义子窗口。 由于框架标签对于网页的可用性有负面影响，在HTML5中不再支持HTML4.01中原有的框架标签<frame>和<frameset>。只保留了内联框架标签<iframe>。

该标签在HTML5中仅支持src属性，用于指定框架内部的网页来源。例如：

<iframe src="news.html"></iframe>

2.2.8 容器标签

1. <div>标签

    标签<div>可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。标签中的元素名div来源于英文单词division（区域）的简写。该标签是一个块级元素（block level element），浏览器会自动在<div>和</div>所标记的区域前后自动放置一个换行符。每个标签可有一个独立的id号。同样属于块级元素的还有段落标签<p>、表格标签<table>、标题标签<h1>-<h6>等。

2. <span>标签

    标签<span>通常作为文本的容器，它没有特定的含义和样式，只有与CSS同时使用才可以为指定文本设置样式属性。该标签是一个内联元素（inline element），与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

关于OPC-UA客户端调用服务端方法CallMethod节点的问题

关于OPC-UA客户端调用服务端方法CallMethod节点的问题

在OpcUaClient中可以通过CallMethodByNodeId调用方法节点 //// 摘要:// call a server method//// 参数:// tagParent:// 方法的父节点tag//// tag:// 方法的节点tag//// args:// 传递的参数//// 返回结果:// 输出的结果值public object[] CallMetho…
阅读更多...
淘宝商品详情数据采集（商品属性，规格，价格，详情图等）

淘宝商品详情数据采集（商品属性，规格，价格，详情图等）

淘宝商品详情数据采集是一个涉及多个步骤的过程&#xff0c;主要目的是获取商品的各种详细信息&#xff0c;如商品属性、规格、价格、详情图等。以下是一个基本的采集流程&#xff1a; 确定采集目标&#xff1a;首先&#xff0c;需要明确要采集的淘宝商品范围&#xff0c;例如…
阅读更多...
Filter实现请求日志记录

Filter实现请求日志记录

将锁有得外部访问都记录在日志文件里面&#xff0c;设计这个功能是为了&#xff08;为什么&#xff09;&#xff1a; 1. 在不引入Promentheus进行接口监控时&#xff0c;基于日志文件就可以实现整个项目得监控。 2. 当出现问题时&#xff0c;可以基于此进行流量重放。 效果如…
阅读更多...
数据结构知识点汇总（持续更新版）

数据结构知识点汇总（持续更新版）

数据结构 一、绪论 检测知识&#xff1a; 1.1基本概念 以前的计算机 弹道计算机 现如今 主要运用于非数值的计算 基本概念和术语 数据&#xff1a;是信息的载体&#xff0c;描述客观事物属性的值&#xff0c;字符以及所有能输入到计算机中并被计算机程序识别和处理的符号的…
阅读更多...
如何发布新闻稿？如何让媒体记者报道自己的企业？

如何发布新闻稿？如何让媒体记者报道自己的企业？

目前&#xff0c;很多企业和个人创业者都知道用新闻稿或软文来做宣传&#xff0c;但是一般只可以发布到自己的微信公众号、百家号等自媒体平台&#xff0c;往往收效甚微。有企业找到小马识途营销顾问咨询原因&#xff0c;小马识途营销顾问分析自媒体上发软文效果不明显的原因主…
阅读更多...
NFT交易市场（二）

NFT交易市场（二）

编写脚本文件进行测试 nft合约代码 // SPDX-License-Identifier: MIT pragma solidity ^0.8.24;import "openzeppelin/contracts/interfaces/IERC20.sol"; import "openzeppelin/contracts/interfaces/IERC721.sol";contract Market {//将erc20初始化为一…
阅读更多...
C++进阶之路---手把手带你学习AVL树

C++进阶之路---手把手带你学习AVL树

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、AVL树的概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#…
阅读更多...
2024年腾讯云新用户优惠活动4核8G12M配置15个月和一年费用

2024年腾讯云新用户优惠活动4核8G12M配置15个月和一年费用

腾讯云轻量4核8G12M服务器配置446元一年&#xff0c;646元12个月&#xff0c;腾讯云轻量应用服务器具有100%CPU性能&#xff0c;系统盘为180GB SSD盘&#xff0c;12M带宽下载速度1536KB/秒&#xff0c;月流量2000GB&#xff0c;折合每天66.6GB流量&#xff0c;超出月流量包的流…
阅读更多...
访问者模式（Visitor Pattern）

访问者模式（Visitor Pattern）

访问者模式 说明 访问者模式&#xff08;Visitor Pattern&#xff09;属于行为型模式&#xff0c;表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作。 该模式是将数据结构与数据操作分离的设计模式&#xff0c;是…
阅读更多...
蓝牙系列十三：协议栈L2CAP层

蓝牙系列十三：协议栈L2CAP层

L2CAP 全称为逻辑链路控制与适配协议(Logical Link Control and Adaptation Protocol)&#xff0c;位于基带层之上&#xff0c;将基带层的数据分组交换为便于高层应用的数据分组格式&#xff0c;并提供协议复用和服务质量交换等功能。 该层属于主机的内容&#xff0c;位于HCI层…
阅读更多...
3.3 ss-sp寄存器，栈的push和pop指令

3.3 ss-sp寄存器，栈的push和pop指令

汇编语言 1. 栈 栈是一种具有特殊的访问方式的存储空间它的特殊性就在于&#xff0c;最后进入这个空间的数据&#xff0c;最先出去。即先进后出 1.1 栈的基本操作 入栈&#xff1a;入栈就是将一个新的元素放到栈顶出栈&#xff1a;出栈就是从栈顶取出一个元素栈顶的元素总是…
阅读更多...
电磁场与电磁波——恒定磁场

电磁场与电磁波——恒定磁场

阅读更多...
汽车电子零部件（4）：行泊一体ADAS

汽车电子零部件（4）：行泊一体ADAS

前言： 现阶段智能汽车行业正在大规模力推无限接近于L3的L2++或L2.9自动驾驶量产落地，类似于当初智能手机替换传统手机的行业机会期。智能汽车常见的智能驾驶功能包括： 行车场景：自适应巡航控制ACC；自动变道辅助ALC；交通拥堵辅助TJA；车道居中LCC；领航辅助NOA； 泊车场…
阅读更多...
如何在代理的IP被封后立刻换下一个IP继续任务

如何在代理的IP被封后立刻换下一个IP继续任务

目录 前言 1. IP池准备 2. 使用代理IP进行网络请求 3. 处理IP被封的情况 4. 完整代码示例 总结 前言 当进行某些网络操作时&#xff0c;使用代理服务器可以帮助我们隐藏真实IP地址以保护隐私&#xff0c;或者绕过一些限制。然而&#xff0c;经常遇到的问题是代理的IP可能…
阅读更多...
AI新工具(20240313) 用户输入提示词创建任何GIF； 将任意人脸图片转换为另一幅图像的模型

AI新工具(20240313) 用户输入提示词创建任何GIF； 将任意人脸图片转换为另一幅图像的模型

✨ 1: GifShift 用户输入提示词创建任何GIF gifshift是一种工具&#xff0c;可以帮助用户创建任何GIF的新版本。使用gifshift的步骤如下&#xff1a; 上传一个GIF文件或者使用库中的一个GIF。 提供您想要的场景描述&#xff0c;最好选择一些具有代表性的角色&#xff0c;并进…
阅读更多...
Android cmdline tools安装

Android cmdline tools安装

打开AS 进入SDK Tools 看到了吗?那个打着勾的就是
阅读更多...
从零开始搭建医保购药APP：技术选择与开发流程

从零开始搭建医保购药APP：技术选择与开发流程

医保购药APP作为一种创新的医疗服务工具&#xff0c;为用户提供了便捷的医保购药流程&#xff0c;同时也为医疗机构提供了更高效的管理和服务方式。今天小编将为大家讲解如何从零开始搭建一款医保购药APP&#xff0c;包括技术选择和开发流程。 一、技术选择 在搭建医保购药APP…
阅读更多...
DS进阶：二叉搜索树

DS进阶：二叉搜索树

创作不易&#xff0c;感谢三连&#xff01; 一、二叉搜索树的概念 思考&#xff1a; 为什么二叉搜索树也叫做二叉查找树和二叉排序树呢&#xff1f;&#xff1f; 1、 本身树形结构用来存储数据相比顺序表和链表来说并不占有优势&#xff0c;他的最大优势就在于查找优势&…
阅读更多...
Python面向对象构造函数：手把手教你如何玩转对象初始化

Python面向对象构造函数：手把手教你如何玩转对象初始化

我们都知道&#xff0c;Python是一个面向对象的语言&#xff0c;这意味着我们可以用类来定义对象的属性和方法。而构造函数&#xff0c;就是当我们创建一个新的对象时&#xff0c;会自动调用的特殊方法。那么&#xff0c;如何玩转这个构造函数呢&#xff1f; 首先&#xff0c;…
阅读更多...
DOM事件event/冒泡/委派/取消默认行为/dataset属性

DOM事件event/冒泡/委派/取消默认行为/dataset属性

1DOM获取CSS样式表里的样式: <head><meta charset"UTF-8"><title>Title</title><link rel"stylesheet" href"css/style.css"><style>body{color: red;}h1::after{content: hello;color: red;}</style&g…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023