2.2 HTML5保留的常用标签

2.2.1 基础标签

1. 段落标签<p>

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

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

    HTML5使用<hn></hn>来标记文本中的标题,其中n需要替换为数字,从16共有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>默认的编号样式为标准阿拉伯数字(1234...),如需使用其他编号样式,可使用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>用于定义表格行中的一个数据单元格,其中字母tdtable 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),与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认在同一行显示。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

R语言数据挖掘-关联规则挖掘(1)

一、分析目的和数据集描述 要分析的数据是美国一区域的保险费支出的历史数据。保险费用数据表的每列分别为年龄、性别、体重指数、孩子数量、是否吸烟、所在区域、保险收费。 本文的主要目的是分析在年龄、性别、体重指数、孩子数量、是否吸烟、所在区域中这些因素中&#xf…

第二十四节 Java 异常处理

什么是异常&#xff1f; 程序运行时&#xff0c;发生的不被期望的事件&#xff0c;它阻止了程序按照程序员的预期正常执行&#xff0c;这就是异常。异常发生时&#xff0c;是任程序自生自灭&#xff0c;立刻退出终止&#xff0c;还是输出错误给用户&#xff1f;或者用C语言风格…

WordPress网站启用cloudflare的CDN加速后,网站出现多重定向无法访问

这是一个使用Hostease的Linux虚拟主机的客户反馈的问题&#xff0c;Hostease的虚拟主机使用的也是cPanel面板&#xff0c;客户使用的是cPanel的softaculous安装的WordPress&#xff0c;但是在安装完成后&#xff0c;并且解析了域名之后&#xff0c;发现网站无法访问&#xff0c…

编译原理学习之-一个简单的语法制导翻译器

第二章 一个简单的语法制导翻译器 将具有代表性的程序设计语言语句翻译为三地址码&#xff08;一种中间表示形式&#xff09;&#xff0c;本章的重点是编译器的前端&#xff0c;特别是词法分析&#xff0c;语法分析和中间代码生产。 建立一个中缀算术表达式转换为后缀表达式的…

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

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

【计算机视觉】二、图像形成:2、几何基元和几何变换:2D变换

文章目录 一、向量和矩阵的基本运算二、几何基元和变换1、几何基元(Geometric Primitives)2、几何变换(Geometric Transformations)1. 各种变换的关系2. 变换公式3. 2D变换的层次4. python实现 一、向量和矩阵的基本运算 【计算机视觉】二、图像形成&#xff1a;1、向量和矩阵…

工业物联网平台在水务环保、暖通制冷、电力能源等行业的应用

随着科技的不断发展&#xff0c;工业物联网平台作为连接物理世界与数字世界的桥梁&#xff0c;正逐渐成为推动各行业智能化转型的关键力量。在水务环保、暖通制冷、电力能源等行业&#xff0c;工业物联网平台的应用尤为广泛&#xff0c;对于提升运营效率、降低能耗、优化管理等…

【C++设计模式】UML图的介绍及其画法

文章目录 前言一、UML图的介绍1.1 UML图是什么1.2 UML图的作用 二、UML图的画法2.1 最简单的UML图2.2 继承的UML图2.3 关联关系2.4 聚合关系2.5 组合关系2.6 依赖关系 总结 前言 在软件开发过程中&#xff0c;设计模式是一种被广泛应用的方法&#xff0c;它为解决特定问题提供…

利用数据驱动的MEG分析方法提取fMRI静息态网络

摘要 静息态网络(RSN)的电生理基础仍存在争议。特别是&#xff0c;尚未确定一个能够同样有效解释所有静息态网络的原理性机制。虽然脑磁图(MEG)和脑电图(EEG)是确定RSN电生理基础的首选方法&#xff0c;但目前没有标准的RSN分析流程。本文比较了从MEG数据中提取RSNs的两种现有…

Profinet转CC-Link网关操作技巧及功能

Profinet转CC-Link网关&#xff08;XD-PNCR20&#xff09;是一款可有效连接CCLINK总线和Profinet网络的通讯网关。Profinet转CC-Link网关主要功能是将各种CCLINK总线和Profinet网络连接起来&#xff0c;实现各种总线的互联通信。 Profinet转CC-Link网关连接到Profinet总线中做…

电源常用通讯电路详解

数字电源的采样和PWM驱动电路原理&#xff0c;通过这些技术&#xff0c;数字电源可以在内部形成控制闭环。但是要实现电源的控制和管理&#xff0c;还是需要与数字控制核心建立通讯连接。本期将带领大家了解数字电源常用的通讯电路。 一、常用的通讯方式 在前面数字电源与模拟…

Could not transform the global plan to the frame of the controller

报错&#xff1a; [ERROR] [1710509295.679888409, 296.695000000]: Extrapolation Error: Lookup would require extrapolation 0.003000000s into the future. Requested time 295.747000000 but the latest data is at time 295.744000000, when looking up transform from…

详解C++运算符重载

目录 运算符重载 1.运算符重载概念的回顾 2. 运算符重载 3. < 运算符重载 4. 赋值运算符 4.1赋值运算符和拷贝构造的区别 4.2赋值运算符重载格式 4.3 默认赋值重载 运算符重载 1.运算符重载概念的回顾 C为了增强代码的可读性引入了运算符重载&#xff0c;运…

力扣题目训练(21)

2024年2月14日力扣题目训练 2024年2月14日力扣题目训练605. 种花问题617. 合并二叉树628. 三个数的最大乘积289. 生命游戏299. 猜数字游戏149. 直线上最多的点数 2024年2月14日力扣题目训练 2024年2月14日第二十一天编程训练&#xff0c;今天主要是进行一些题训练&#xff0c;…

fortran,进坟墓了吗?新型快速开发工具突现,该何去何从?

在C、Python等流行语言风头正劲的时候&#xff0c;Fortran对于新一代开发者而言&#xff0c;却显得陌生甚至闻所未闻。 然而&#xff0c;Fortran作为计算机领域首个被广泛推广的高级语言&#xff0c;自1956年诞生至今已逾60载&#xff0c;承载着无数程序员的青春记忆。 在许多…

蓝桥杯 - 大石头的搬运工 C++ 前缀和 算法 附Java python

题目 思路和解题方法 这段代码的目标是计算给定点集的最小总移动成本&#xff0c;使得所有点都在同一直线上。它通过计算每个点左边和右边的移动成本&#xff0c;然后在所有可能的分割点中选择最小成本。具体步骤如下&#xff1a; 读取输入的点集&#xff0c;每个点表示为 (y, …

十三、项目相关方管理

十三、项目相关方管理 1、项目相关方管理 ​ 识别相关方是定期识别相关项目方&#xff0c;分析和记录他们的利益、参与度、相互依赖性、影响力和对项目成功的潜在影响的过程。 ** 1.1 关键技术 数据表现 相关方分析会产品相关方清单和关于相关方的各种信息&#xff0c;例如…

【机器学习】走进监督学习:构建智能预测模型的第一步

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

沃通SSL证书证券行业应用案例

金融证券行业作为现代经济体系中的重要组成部分&#xff0c;其安全性直接关系到国家经济的稳定和广大投资者的利益。沃通SSL证书基于密码技术保护传输数据的机密性、完整性&#xff0c;通过权威身份认证确保服务器身份真实性&#xff0c;已持续为众多知名证券行业客户提供服务&…

【图像分类】基于深度学习的人脸表情识别(开心、悲伤、生气三个类别,ResNet网络)

写在前面: 首先感谢兄弟们的关注和订阅,让我有创作的动力,在创作过程我会尽最大能力,保证作品的质量,如果有问题,可以私信我,让我们携手共进,共创辉煌。(专栏订阅用户订阅专栏后免费提供数据集和源码一份,超级VIP用户不在服务范围之内,不想订阅专栏的兄弟们可以私信…