【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)

本文属于HTML/CSS专栏文章,适合WEB前端开发入门学习,详细介绍HTML/CSS如果使用,如果对你有所帮助请一键三连支持,对博主系列文章感兴趣点击下方专栏了解详细。


  • 博客主页:Duck Bro 博客主页
  • 系列专栏:HTML/CSS专栏
  • 关注博主,后期持续更新系列文章
  • 如果有错误感谢大家批评指出,一定及时修改
  • 感谢大家点赞👍收藏⭐评论✍

【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)

本文关键字:标题、段落、换行、文本格式化、注释及特殊字符

文章目录

  • 【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)
    • 一、什么是标签语义
    • 二、标题标签 (h1- h6)
    • 三、段落和换行标签
    • 四、文本格式化标签
    • 五、div 和 span标签
    • 六、注释和特殊字符


一、什么是标签语义

标签语义是指对标签的含义进行描述和解释,使其更易于被理解和使用。标签是指用户为网页、文章、图片等内容所添加的关键词或短语,它们用于描述内容的主题、性质、特征或分类,有助于用户对内容进行搜索、过滤和组织。标签语义的目的是通过对标签的语义进行描述,使搜索引擎和其他应用程序能够更好地理解标签所表示的含义,提高搜索和推荐的准确性和效率。例如,如果一个图片被标记为“风景”,那么标签语义可以对风景的含义进行解释,包括山水、海景、城市景色等,从而为用户提供更为精准的搜索结果。

简单理解就是指标签的含义,即这个标签是用来干嘛的。


二、标题标签 (h1- h6)

HTML 提供了 6 个等级的网页标题,即<h1> - <h6>

标签语义:作为标题使用,并且依据重要性递减。

代码:

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

效果图:
在这里插入图片描述


三、段落和换行标签

1. 段落标签
在 HTML 标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。

标签语义: 可以把 HTML 文档分割为若干段落。

代码:

<p> 我是一个段落标签 我是一个段落标签 我是一个段落标签 我是一个段落标签 </p>
<p> 我是下一个段落标签 我是下一个段落标签 我是下一个段落标签 我是下一个段落标签 </p>

效果图:
在这里插入图片描述


2. 换行标签
如果需要某段文本强制换行显示,就需要使用换行标签 <br />

标签语义: 强制换行。

代码:

换行标签换行标签换行标签<br />换行标签换行标签换行标签

效果图:
在这里插入图片描述


四、文本格式化标签

在网页中,有时需要为文字设置粗体斜体下划线 等效果,这时就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示

标签语义: 突出重要性, 比普通文字更重要

语义标签说明
加粗<strong></strong>或者<b></b>更推荐使用<strong> 标签加粗语义更强烈
倾斜<em></em>或者 <i></i>更推荐使用<em> 标签加粗 语义更强烈
删除线<del></del> 或者 <s></s>更推荐使用<del>标签加粗 语义更强烈
下划线<ins></ins> 或者 <u></u>更推荐使用<ins> 标加粗 语义更强烈

代码:

    <strong>加粗</strong><b>加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u>

效果图:
在这里插入图片描述


五、div 和 span标签

<div><span> 是没有语义的,它们就是一个盒子,用来装内容的。

标签语义:1. <div> 标签用来布局,但是现在一行只能放一个<div>。 大盒子 2. <span> 标签用来布局,一行上可以多个 <span>。小盒子

代码:

<div> div  大盒子 </div> 
<span> span  小盒子1 </span>
<span> span  小盒子2 </span>
<span> span  小盒子3 </span>

效果图:
在这里插入图片描述


六、注释和特殊字符

1. 注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。HTML中的注释以<!--开头,以 -->结束。

标签语义:添加注释是为了更好地解释代码的功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的。
代码:

 <!-- 注释语句 -->    快捷键: ctrl + /

效果图:
在这里插入图片描述


2. 特殊字符

在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。如:大于、小于号、空格等符号

特殊字符描述字符的代码
空格符&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
人民币&yen;
©版权&copy;
®注册商标&reg;
°摄氏度&deg;
±正负号&plusmn;
×乘号&times;
÷除号&divide;
²平方2(上标2)&sup2;
³立方3(上标3)&sup3;

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在VScode中如何将界面语言设置为中文

VSCode安装后的默认界面是只有英文的&#xff0c;如果想用中文界面&#xff0c;那么就需要安装对应的插件&#xff0c;vscode插件可以从扩展中心去搜索并安装。 安装vscode后打开vscode&#xff0c;点击左侧的扩展按钮。 在搜索框中输入chinese&#xff0c;弹出chinese&#x…

2023高教社杯数学建模国赛C题思路解析+代码+论文

如下为C君的2023高教社杯全国大学生数学建模竞赛C题思路分析代码论文 C题蔬菜类商品的自动定价与补货决策 在生鲜商超中&#xff0c;一般蔬菜类商品的保鲜期都比较短&#xff0c;且品相随销售时间的增加而变差, 大部分品种如当日未售出&#xff0c;隔日就无法再售。因此&…

nmp ERR! code ERR SOCKET TIMEOUT nmp ERR!network npmSocket timeout(已解决)

当安装vue-cli时&#xff0c;出现超时错误 npm ERR! code ECONNRESET npm ERR! network This is a problem related to network connectivity npm ERR! code ECONNRESET npm ERR! network aborted npm ERR! network This is a problem related to network connectivity. npm E…

用go实现一个循环队列

目录 队列数组队列的“假溢出”现象循环队列三种判断队列空和满的方法无下标&#xff08;链式&#xff09;有下标&#xff08;顺序&#xff09;长度标记 go用顺序表实现一个循环队列队列的链式存储结构 队列 队列&#xff08;queue&#xff09;是只允许在一端进行插入操作&…

Python—下载清华大学鹏城实验室遥感数据

当想下载清华大学鹏城实验室10m土地利用数据的时候&#xff0c;发现他们的下载方式很奇怪&#xff0c;只能一页页的点名称全选 &#xff0c;然后批量下载&#xff0c;再一个个的加入浏览器下载&#xff0c;当一次下载过多就回卡顿和下载失败&#xff0c;所以就有了想用python进…

C++项目实战——基于多设计模式下的同步异步日志系统-①-项目介绍

文章目录 专栏导读项目介绍开发环境核心技术环境搭建日志系统介绍1.为什么需要日志系统2.日志系统技术实现2.1同步写日志2.2异步写日志 专栏导读 &#x1f338;作者简介&#xff1a;花想云 &#xff0c;在读本科生一枚&#xff0c;C/C领域新星创作者&#xff0c;新星计划导师&a…

Java23种设计模式之【单例模式】

目录 一.单例模式的起源&#xff0c;和应用场景 1.单例模式的前世今生&#xff01; 2.什么是单例模式&#xff1f; 2.1使用单例模式的注意事项 2.2如何理解单例模式&#xff1f; 2.3单例模式的优势以及不足&#xff01; 2.4使用场景 二.实现 1.实现思路 1.1创建一个 S…

基于SSM的网络游戏公司官方平台

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

python实现zscore归一化和minmax标准化

zscore归一化&#xff1a; minmax from sklearn import preprocessing from sklearn.preprocessing import StandardScaler import numpy as np# 数据 x np.array([[1.,-1.,2.],[2.,0.,0.],[0.,1.,-1.]]) print(----------------minmaxscaler标准化-------------) # 调用minma…

初始化一个 vite + vue 项目

创建项目 首先使用以下命令创建一个vite项目 npm create vite然后根据提示命令 cd 到刚创建的项目目录下&#xff0c;使用npm install安装所需要的依赖包&#xff0c;再使用npm run dev即可启动项目 配置 vite.config.js 添加process.env配置&#xff0c;如果下面 vue-route…

mysql课堂笔记 mac

目录 启动mac上的mysql 进入mysql mac windows 创建数据库 创建表 修改字段数据类型 修改字段名 增加字段 删除字段 启动mac上的mysql sudo /usr/local/mysql/support-files/mysql.server start 直接输入你的开机密码即可。 编辑 进入mysql mac sudo /usr/local…

Java认识异常(超级详细)

目录 异常的概念和体系结构 异常的概念 异常的体系结构 异常的分类 1.编译时异常 2.运行时异常 异常的处理 防御式编程 LBYL EAFP 异常的抛出 异常的捕获 异常声明throws try-catch捕获并处理 finally 异常的处理流程 异常的概念和体系结构 异常的概念 在Java中…

一篇文章教会你如何降低代码的冗余度——探索指针数组,数组指针,函数指针,函数指针数组,回调函数的奥妙

前言&#xff1a;人们总说指针是c语言的灵魂&#xff0c;是因为指针的使用技巧是“千姿百态”的&#xff0c;程序员可以通过指针来直接访问内存&#xff0c;这就赋予了它功能的多样性以及更多意想不到的编程技巧与方式&#xff0c;在本篇文章中&#xff0c;笔者就给大家带来指针…

嵌入式Linux驱动开发(LCD屏幕专题)(二)

一、结合APP分析LCD驱动程序 1、open app: open("/dev/fb0", ...) 主设备号: 29, 次设备号: 0 -------------------------------------------------------------- kernel:fb_open // fbmem.cstruct fb_info *info;info get_fb_info(fbidx);if (info->fbop…

VB:顺序查找

VB&#xff1a;顺序查找 Private Sub Command1_Click()Dim i%, m%Dim x(1 To 10) As SingleFor i 1 To 10x(i) Val(InputBox("请输入"))Next im seqSearch(x, 10)If (m 1) ThenPrint "已找到"ElsePrint "未找到"End If End Sub Function se…

Altium 高级技巧 在扁平原理图中创建多个ROOM

Altium 的 ROOM 这个特性非常有用&#xff0c; 使用ROOM在编辑PCB时&#xff0c;可以很方便的整体拖动局部器件和电路图&#xff0c;为模块化电路设计提供便利 常规的设计模式应该采用垂直模式&#xff0c; 由顶层-中间层-底层&#xff0c; 顶层设计整体的框图连接&#xff…

JavaSE【 String 类】(2)(

一、字符串的不可变性 1.String本身不可变 字符串修改 注意&#xff1a;尽量避免直接对 String 类型对象进行修改&#xff0c;因为 String 类是不能修改的&#xff0c;所有的修改都会创建新对象&#xff0c;效率 非常低下。 public static void main(String[] args) {/*** S…

sublime编辑latex 出现参考文献无法编译报错:citation “...” undefined

问题描述 使用sublime编译latex文件时&#xff0c;参考文献按照常规的方式放好&#xff0c;ctrl B 编译的时候&#xff0c;显示找不到参考文献&#xff0c;编译出的pdf文件也没有references&#xff1a; 但是把文件放到overleaf上就可以直接编译出来&#xff0c;说明是本地编…

向量数据库,能让AI再次起飞吗?

9月7-8日&#xff0c;深圳国际会展中心18号馆 来了&#xff0c;来了&#xff0c;腾讯面向产业互联网领域规格最高、规模最大、覆盖最广的年度科技盛会 -——- 腾讯全球数字生态大会。 9 月 7 日&#xff0c;我们将聚焦产业未来发展新趋势&#xff0c;针对云计算、大数据、人工…

滴滴:二季度中国出行营收同比增长57%,6月日均单量超3000万单

9月9日&#xff0c;滴滴在其官网发布2023年第二季度业绩报告&#xff0c;二季度滴滴实现总收入488亿元&#xff0c;同比增长52.6%&#xff1b;归属于滴滴普通股股东的净亏损为3亿元&#xff0c;经调整EBITA亏损1000万元。 分业务来看&#xff0c;二季度滴滴中国出行&#xff0…