谈谈HTML的短语标签及其作用

2023-05-16

在HTML中,短语标签是专用标签,用于指示文本块具有结构意义,执行与文本格式标签类似的特定操作。例如,abbr标签表示该短语包含缩写词。短语标签的一些例子有:abbr、strong、mark.....等等。

下面我们就给大家介绍在HTML中的一些重要的短语标签极其作用:

1、强调文本<em>标签

<em>标签用于强调文本,此标签在浏览器中显示斜体字体;这意味着在em标签中编写的任何内容都会显示为强调文本。

语法:

<em> 文字内容 </em>

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>强调文本</title>
		<style> 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
    	<p>Welcome to here!</p> 
        <p><em>Welcome to here!</em></p> 
    </body>  
</html>

效果图:

61d7d11a943364f343d6bf4bdb06a6a.png

2、文字缩写<abbr>标签

要在HTML中缩写文本,请使用abbr标记。在开始和结束abbr标签内写入文本的缩写。

语法:

<abbr title = "超文本标记语言">HTML</abbr>

示例:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<style> 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
    	<p><abbr title = "超文本标记语言">HTML</abbr>语言</p>  
    </body>  
</html>

输出:

1.gif

3、<acronym>标签

<acronym>标签用于指示<acronym>和</acronym>标签中写入的内容是一个首字母缩略词,是用于显示突出显示的文本的,但某些浏览器仅显示普通文本。

语法:

<acronym> 文字内容 </acronym>

示例:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<style> 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
    	<p>本篇文章给大家介绍<acronym>HTML</acronym>里的短语标签。</p> 
    </body>  
</html>

输出:

0044aba36a875fefe07e24d09d1b554.png

4、文字方向<bdo>标签

<bdo>标签表示双向重写(覆盖),它用于覆盖当前文本方向。默认文本方向是从左到右,但是它可以通过使用bdo标签重写当前文本方向。

● ltr:从左到右指定文本方向。

● rtl:从右到左指定文本方向。

● auto:在此标签中,浏览器根据内容(仅在文本方向未知的情况下推荐)确定文本方向。

语法:

<bdo dir = "ltr/rtl/auto"> 文字内容 </bdp>

示例:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<style> 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
    	<p>此文本是从左到右。</p>
		<p><bdo dir = "rtl">此文本将从右到左。</bdo></p> 
    </body>  
</html>

输出:

1045625877bfaaeccbd9e217c4db8c8.png

5、短引号<q>标签

要在句子中添加双引号,请使用q标签。<q></q>标签内的内容将用双引号输出。

语法:

<q> 文本内容</q>

示例:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<style> 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
    	<p>测试文字, <q>测试文字</q>!</p> 
    </body>  
</html>

输出:

c65ca6152cdf4d03415a9feaa6cbce6.png

6、标记文本<mark>标签

在<mark>和</mark>标签内写入的内容将显示为黄色标记。基本上,它像荧光笔一样工作,用来突出句子中的一些单词。

语法:

<mark>文本内容</mark>

示例:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<style> 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
    	<p>测试文字, <mark>测试文字</mark>!</p> 
    </body>  
</html>

输出:

633f454fa92319d9657bd6d9a2dd7b6.png

7、<strong>标签

<strong>标签用于显示在一个句子中重要的词;<strong>和</ strong>标签内写入的内容将显示为重要单词。

语法:

<strong> 文字内容 </strong>

示例:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<style> 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
    	<p>Welcome to here!</p> 
        <p><strong>Welcome to here!</strong></p> 
    </body>  
</html>

输出:

422cd77cc609723b2aff8cd5d4ca026.png

8、引用文字<blockquote>标签

<blockquote>标签用于引号语句。<blockquote> ... </ blockquote>标签之间写入的内容将被视为引用文本。

语法:

<blockquote>文本内容</blockquote>

示例:

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8">
    </head> 
    <body> 
    	<p>以下测试文字:<blockquote>这里是blockquote标签的测试文字测试文字</blockquote></p>
    </body>  
</html>

输出:

 

9、编程代码<code>标签

使用HTML <code>标签来表示编程代码。在<code>和</code>标签中写入的内容被视为编程代码。通常,<code>元素的内容以等宽字体显示,就像大多数编程书籍中的代码一样。

语法:

<code>文字内容</code>

示例:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<style> 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
    	<p>常规文字。 <code>代码:padding:10px;</code>常规文字。</p>
    </body>  
</html>

输出:

965d3dc7b881d70b53939a2316f10cc.png

10、程序输出<samp>标签

用samp标签编写的程序的输出。<samp>和</samp>标签中写入的内容将打印样本输出。

语法:

<samp>文本内容</samp>

示例:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<style> 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
    	<p>常规文字。 代码:<samp>padding:10px;</samp>常规文字。</p>
    </body>  
</html>

输出:

8d91f5c6d7e06e6db1f549e8cc664d1.png

11、地址文字<address>标签

<address>标签用于在web浏览器中显示地址。在<address>和</address>标签中编写的内容被认为是HTML中的地址。

语法:

<address> 文字内容 </address>

示例:

<!DOCTYPE html>
<html>
   <head>
	<meta charset="utf-8">
    </head> 
    <body> 
    	<address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
    </body>  
</html>

输出:

c5e192ca316992d0156c26b3b861065.png

更多web开发知识,请查阅 HTML中文网 !!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

谈谈HTML的短语标签及其作用 的相关文章

  • 如何使用用户标签解析?

    什么是用户标签 xff1f 标签是认为规定的特征符号 xff0c 是将用户的属性 行为等进行高度提炼的特征描述 xff0c 比如按照年龄划分为90后 xff0c 按照性别有男女之分等 每个标签都是用户画像的一个角度 xff0c 大量的标签数
  • 手机中的功耗设计介绍(一)

    最近在找新工作 xff0c 对某大厂的功耗工程师的职位比较感兴趣 于是整理一下网络上查到的和之前基带工作中与功耗相关的知识 不同的公司可能会有不同的责任划分 xff0c 上份工作 xff0c 硬件部分的功耗是由基带负责 主要接触到的是整机的
  • 树莓派原生系统安装ROS(含网络代理,ROS编译安装以及ROS小车制作过程)

    本文将自主搭建树莓派ROS自主导航小车 目前已经完成的有 xff1a 1 树莓派初始化配置 2 树莓派局域网网络代理 3 树莓派ros安装 4 hector slam安装 5 自制阿克曼底盘控制 python 以下为全文链接 xff1a 树
  • 阿里云服务器修改主机名即ID(登陆时root@后显示名)【图文】详细

    首先你得在你电脑安装Xshell这一类的终端模拟软件去登陆你的远程阿里云服务器 我用的是Xshell xff0c 觉得界面超级清爽好看 xff0c 免费下载安装地址 https blog csdn net qq 43012792 artic
  • 虚拟机VMware和Ubuntu的安装与配置教程(超详细,实验可行)

    网上各类教程很多 xff0c 但总有缺漏的地方 在这里我参考了一个比较详细的教程 xff0c 并针对我第一次安装时遇到的问题 xff0c 对该教程进行补充 xff08 主要在安装源的部分及其他细节 xff09 文章目录 一 安装虚拟机和Ub
  • 【Pytorch图像分类】搭建卷积神经网络(CNN)和使用迁移学习(Transfer Learning)实现图片识别

    1 摘要 图像分类 xff0c 也可以称作图像识别 xff0c 顾名思义 xff0c 就是辨别图像中的物体属于什么类别 核心是从给定的分类集合中给图像分配一个标签的任务 实际上 xff0c 这意味着我们的任务是分析一个输入图像并返回一个将图
  • 基于STM32F407四旋翼无人机(一)

    第一次写博客 xff0c 可能有很多地方写的不好 xff0c 请大家见谅 xff0c 这次想分享一下毕业做的一个毕业设计 基于STM32F407四旋翼无人机控制系统 的一些过程 我会最开始的模块程序编写来较为详细的讲解 刚开始先说一下飞控都
  • 关于线性卡尔曼滤波详细讲解(二)--GPS融合IMU数据

    上次我们说了卡尔曼最核心的五个公式 xff0c 还有一些上次没有说的东西 xff0c 这次也补全 xff0c 其实在我们实际需求中 xff0c 只知道这五个公式 xff0c 却不知道怎么去根据自己的需求去初始化各种状态转移矩阵之类的 xff
  • 基于STM32F407四旋翼无人机---MS5611气压计(三)

    基于STM32F407四旋翼无人机 MS5611气压计 xff08 三 xff09 1 关于MS5611的基本介绍2 通过IIC获取气压计数据3 转化为相对高度 1 关于MS5611的基本介绍 2 通过IIC获取气压计数据 3 转化为相对高
  • mavlink协议从入门到放弃(一)

    mavlink协议从入门到放弃 xff08 一 xff09 什么是MAVLINK协议网站和参考资料MAVLINK简介 MAVLINK协议包结构协议结构mavlink协议解析 最近比较忙 xff0c 搞了个项目用到了mavlink协议 xff
  • VSCode如何上传代码到git

    VSCode新建分支方式 先看一下结构 这里是一个改动后上传git时的目录 xff1a 修改代码放入暂更改区 结果如下图 此时 xff1a 更改 下面修改的内容已经移到了 暂存的更改 下面 代码Commit 代码推送到远程分支 注意 xff
  • C++中运算符重载需要遵循的规则

    一 C 43 43 中运算符重载需要遵循的规则 1 并不是所有的运算符都可以重载 能够重载的运算符包括 xff1a 43 amp 61 lt gt 43 61 61 61 61 61 61 amp 61 61 lt lt gt gt lt
  • novnc+vncserver访问docker容器桌面

    https blog csdn net u012829611 article details 72576493 utm medium 61 distribute pc relevant t0 none task blog BlogComme
  • Apache阶段二-

    一 Apache 主要配置文件注释 Apache的主配置文件 xff1a etc httpd conf httpd conf 默认站点主目录 xff1a var www html Apache服务器的配置信息全部存储在主配置文件 etc h
  • FreeRTOS基本教程零:STM32 FReeRTOS 移植流程

    一 资料准备 FreeRTOS源码下载地址 xff1a https github com FreeRTOS FreeRTOS https github com FreeRTOS FreeRTOS 我移植的是FreeRTOSv9 0 0 st
  • ROS自学实践(4):使用GAZEBO进行物理仿真

    rviz中的仿真只是视觉上的仿真 xff0c 不能称得上物理仿真 xff0c gazebo是真正意义上的三维物理仿真平台 xff0c 可以在里面创建环境等相关信息 xff0c 方便以后的建模和导航 1 向xacro模型文件中添加惯性矩阵和碰
  • ROS自学实践(5):GAZEBO建模及添加相机和激光雷达传感器并进行仿真

    在搭建完机器人小车的模型之后 xff0c 需要向其添加传感器 xff0c 以便提取传感器的数据 xff0c 进行后续的工作 一 相机 1 添加camera gazebo xacro文件 同添加机器人模型一样 xff0c 添加一个相机也需要进
  • 使用CSS禁用链接

    想要使用CSS禁用链接 xff0c 可以使用pointer events属性 xff0c 该属性设置在单击元素时页面中的元素是否必须响应 下面本篇文章就来给大家介绍一下pointer events属性 xff0c 希望对大家有所帮助 CSS
  • 使用CSS将文字显示在水平线中间

    如何使用CSS将文字显示在水平线中间 xff1f 下面本篇文章就来给大家介绍使用CSS实现文字显示在水平线中间效果的方法 xff0c 希望对大家有所帮助 CSS提供了在网页中间制作包含文字或图像的水平线以使其具有吸引力的功能 xff0c 这
  • 使用CSS使文本输入不可编辑

    在HTML中可以使用readonly属性创建不可编辑的文本输入 而在CSS的情况下 xff0c 可以使用pointer events属性使文本输入不可编辑 下面本篇文章就来给大家介绍一下 xff0c 希望对大家有所帮助 CSS pointe

随机推荐

  • 将数组转换为JSON数据

    如何将数组转换为JSON数据 xff1f 下面本篇就来给大家介绍一下将数组转换为JSON对象的方法 xff0c 希望对大家有所帮助 方法一 xff1a 使用Object assign Object assign 方法将枚举的所有属性的值从源
  • CSS设置链接的样式

    链接是从一个网页到另一个网页的连接 xff0c CSS可通过不同属性以各种不同方式来设置链接的样式 下面本篇文章就来给大家介绍一下CSS设置链接的样式的方法 xff0c 希望对大家有所帮助 在讨论CSS属性之前 xff0c 先了解链接的状态
  • 任务切换

    任务切换的方法 第一个方法就是借助中断来进行任务切换 xff0c 这是现代抢占式多任务的基础 在实模式下 xff0c 内存最低端1KB是中断向量表 xff0c 保存着256个中断处理过程的段地址和偏移地址 在保护模式下 xff0c 处理器不
  • 操作无法完成,因为该文件已在system中打开

    一 操作无法完成 xff0c 因为该文件已在system中打开 1 同时按下键盘上的Ctrl 43 Shift 43 ESC组合键 xff0c 打开 任务管理器 xff0c 2 切换到 性能 选项卡下 xff0c 并点击 资源管理器 xff
  • Ai智能时代即将到来,替代程序员还是相辅相成,我们拭目以待

    AI是否会替代前端程序员 xff1f 这是一个让很多人感到担忧的问题 随着AI技术的发展 xff0c 越来越多的工作被自动化 前端开发是否也会面临被取代的危机呢 xff1f 前端开发是指使用HTML CSS JavaScript等技术 xf
  • HTML使用onmouseover属性更改背景颜色

    HTML如何使用onmouseover属性更改背景颜色 xff1f 下面本篇文章就来给大家介绍一下在HTML中使用onmouseover属性更改背景颜色的方法 xff0c 希望对大家有所帮助 HTML的onmouseover属性在鼠标指针移
  • 使用CSS更改PNG图像的颜色

    给定一个图像 xff0c 如何使用CSS更改PNG图像的颜色 xff1f 下面本篇文章就来给大家使用CSS更改PNG图像颜色的方法 xff0c 希望对大家有所帮助 在CSS中使用Filter属性 xff0c 利用滤镜功能来更改png图像颜色
  • 使用CSS更改hr标签的厚度

    下面本篇文章就来给大家介绍一下使用CSS更改hr标签的厚度的方法 xff0c 希望对大家有所帮助 HTML lt hr gt 标签在 HTML 页面中创建一条水平线 xff1b 水平分隔线 xff08 horizontal rule xff
  • 使用CSS设置文本或图像的透明度

    如何使用CSS设置文本或图像的透明度 xff1f 下面本篇文章就来给大家介绍一下使用CSS设置文本或图像的透明度的方法 xff0c 希望对大家有所帮助 想要使用CSS设置文本或图像的透明度 xff0c 可以使用opacity属性来设置 op
  • 使用CSS垂直居中文本

    CSS的常见任务是垂直居中文本或图像 xff1b 虽然CSS2不支持垂直对齐 xff0c 但我们可以通过组合一些属性来垂直居中块 下面本篇文章就来给大家介绍一下使用CSS垂直居中文本的方法 xff0c 希望对大家有所帮助 方法一 xff1a
  • CSS删除内联块元素之间空格的方法

    如何删除内联块元素之间的空格 xff1f 下面本篇文章就来给大家介绍一下使用CSS删除内联块元素之间的空格 xff0c 希望对大家有所帮助 要想删除内联块元素之间的空格 xff0c 可以使用margin right属性 xff1b 此属性用
  • 使用CSS在元素后面添加空格

    在CSS中 xff0c 可以使用 after选择器在元素后面添加空格 xff08 34 34 xff09 after选择器用于在其他元素的内容之后多次添加相同的内容 xff1b 它在每个选定元素的内容后面插入一些内容 下面本篇文章就来给大家
  • CSS在页面加载时创建淡入效果

    下面本篇文章就来给大家介绍一下使用CSS在页面加载时创建淡入效果的方法 xff0c 希望对大家有所帮助 想要使用CSS在页面加载上创建淡入效果 xff0c 可以使用css的animation属性或transition属性在页面加载时创建淡入
  • CSS设置文本和边框(图像)阴影

    在CSS中可以使用阴影效果属性在HTML文档中添加文本和边框 xff08 图像 xff09 阴影 下面本篇文章就来给大家介绍一下CSS的阴影效果属性 xff0c CSS添加阴影效果的方法 xff0c 希望对大家有所帮助 1 添加文本阴影 在
  • 使用JavaScript清除div的内容

    JavaScript提供清除div内容的功能 xff0c 想要执行此功能有两种方法 xff1a 一种是使用innerHTML属性 xff0c 另一种是使用firstChild属性和removeChild 方法 下面本篇文章就来给大家介绍一下
  • 大话pixhawk运行Ardu:Copter启动过程

    1 xff1a 了解启动过程有什么帮助 xff1f 2 xff1a 硬件连接 3 xff1a 启动过程 amp 分析 rgbled on I2C bus 2 at 0x55 bus 100 KHz max 100 KHz init look
  • JavaScript将Set(集合)转换为Array数组

    在JavaScript中 xff0c 想要将Set xff08 集合 xff09 转换为Array数组 xff0c 可以通过以下方式实现 方法1 xff1a 使用Array from 方法 Array from 方法从对象或可迭代对象 xf
  • 使用CSS将图像进行模糊处理

    给定一个图像 xff0c 如何使用CSS将图像进行模糊处理 xff0c 转换为模糊图像 xff1f 下面本篇文章就来给大家介绍一下使用CSS模糊处理图像的方法 xff0c 希望对大家有所帮助 在CSS中 xff0c 可以使用filter属性
  • CSS设置占位符文本的对齐方式

    HTML的placeholder属性指定一个简短提示 xff0c 用于描述input字段或文本区域 xff08 textarea xff09 的预期值 xff0c 即占位符文本 短提示在用户输入值之前显示在字段中 在大多数浏览器中 xff0
  • 谈谈HTML的短语标签及其作用

    在HTML中 xff0c 短语标签是专用标签 xff0c 用于指示文本块具有结构意义 xff0c 执行与文本格式标签类似的特定操作 例如 xff0c abbr标签表示该短语包含缩写词 短语标签的一些例子有 xff1a abbr strong