【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.rhkb.cn/news/130710.html

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

相关文章

人脸签到系统 pyQT+数据库+深度学习

一、简介 人脸签到系统是一种基于人脸识别技术的自动签到和认证系统。它利用计算机视觉和深度学习算法来检测、识别和验证个体的面部特征&#xff0c;以确定其身份并记录其出现的时间。这个系统通常用于各种场景&#xff0c;包括企业、学校、会议、活动和公共交通等&#xff0c…

10个值得收藏的3D任务角色下载网站

每个人都喜欢免费的东西。 无论是免费的 3D 角色还是游戏资产&#xff0c;我们都喜欢它们。 以下是可以为你的游戏获取免费 3D 角色的前 10 个网站的列表。 你可以将它们用于多种用途&#xff0c;例如 3D 打印或动画剪辑。 如果需要将下载的3D模型转换为其他格式&#xff0c;可…

学生信息系统(python实现)

#codingutf-8 import os.path filenamestudent.txtdef menm():#菜单界面print(学生管理系统)print(-----------------------------功能菜单-----------------------------)print(\t\t\t\t\t\t1.录入学生信息)print(\t\t\t\t\t\t2.查找学生信息)print(\t\t\t\t\t\t3.删除学生信息…

超越代码行数!如何看待Python在大型项目中的真正价值?

在软件开发的世界里&#xff0c;Python是一门备受喜爱的编程语言&#xff0c;它以其简洁、易读和强大的特性而闻名。然而&#xff0c;就像所有备受关注的事物一样&#xff0c;Python也有其争议性话题。其中之一是关于Python在大型项目中的表现。有些人认为Python并不适合处理大…

探索珠宝商城小程序:商家如何实现线上卖珠宝

近期&#xff0c;微信小程序的发展势头强劲&#xff0c;各行各业都在积极开发自己的小程序&#xff0c;以适应这个数字化的时代。珠宝行业也不例外&#xff0c;许多珠宝品牌都已经推出了自己的小程序&#xff0c;为用户提供了更加便捷、个性化的购物体验。因此&#xff0c;制作…

K8s 多集群实践思考和探索

作者&#xff1a;vivo 互联网容器团队 - Zhang Rong 本文主要讲述了一些对于K8s多集群管理的思考&#xff0c;包括为什么需要多集群、多集群的优势以及现有的一些基于Kubernetes衍生出的多集群管理架构实践。 一、为什么需要多集群 随着K8s和云原生技术的快速发展&#xff0c…

error:03000086:digital envelope routines::initialization error

项目背景 前端vue项目启动突然报错error:03000086:digital envelope routines::initialization error 我用的开发工具是vscode&#xff0c;node版本是v18.17.0 前端项目版本如下↓ 具体报错如下↓ 报错原因 node版本过高 解决方法 1输入命令 $env:NODE_OPTIONS"--op…

安卓绘制原理之 MeasureCache优化了什么?

安卓绘制原理概览_油炸板蓝根的博客-CSDN博客 搜了一下&#xff0c;全网居然没有人提过 measureCache。 在前文中提到过&#xff0c;measure的时候&#xff0c;如果命中了 measureCache&#xff0c;会跳过 onMeasure&#xff0c;同时会设置 PFLAG3_MEASURE_NEEDED_BEFORE_LAYOU…

腾讯云centos7.6安装部署备忘

1.Mysql 1.1 安装mysql wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release-el7-5.noarch.rpm yum install mysql-community-server 1.1.1 安装后重启 service mysqld restart 1.1.2 初次安装mysql&#xff0c;root账…

c语言练习题52:写一个函数判断当前机器是大端还是小端

代码&#xff1a; #include<stdio.h> int check_sys() {int a 1;return *(char*)&a;//小端retrun 1 大端return 0&#xff1b; } int main() {if (check_sys() 1) {printf("小端\n");}elseprintf("大端\n"); } 这里首先取a的地址&#xff0c…

喜讯连连!疆程重磅发布全球独家3.6 TFT- LCD AR-HUD及CMS产品及解决方案,并斩获年度TOP10供应商

9月7日至8日&#xff0c;2023世界显示产业大会在成都盛大启幕&#xff0c;同期由BOE&#xff08;京东方&#xff09;承办的“Define the Future 智能座舱生态论坛”&#xff0c;合肥疆程技术有限公司创始人兼总经理康栋受邀出席并发布两款重磅座舱解决方案。 本次论坛以“智能座…

【css | loading】好看的loading特效

示例&#xff1a; https://code.juejin.cn/pen/7277764394618978365 html <div class"pl"><div class"pl__dot"></div><div class"pl__dot"></div><div class"pl__dot"></div><div c…

前端面试经典题--页面布局

题目 假设高度已知&#xff0c;请写出三栏布局&#xff0c;其中左、右栏宽度各为300px&#xff0c;中间自适应。 五种解决方式代码 浮动解决方式 绝对定位解决方式 flexbox解决方式 表格布局 网格布局 源代码 <!DOCTYPE html> <html lang"en"> <…

数据结构算法-分而治之算法

引言 在茫茫人海中找寻那个特定的身影&#xff0c;犹如在浩瀚的星海中寻找那一颗独特的星辰。小森&#xff0c;一个平凡而真实的男孩&#xff0c;此时正在人群中寻找他的朋友&#xff0c;温迪。 小森运用了一种“分而治之”的算法策略&#xff0c;将周围的人群分成两组&#…

c++day4

仿照string类&#xff0c;完成myString 类 #include <iostream> #include<cstring>using namespace std; class myString {private:char *str; //记录c风格的字符串int size; //记录字符串的实际长度public://无参构造myString():size(10){str…

mysql技术文档--之与redo log(重做日志)庖丁解析-超级探索!!!

阿丹&#xff1a; 在刚开始写本文章的是还不太清楚要如何去细啃下这两个体系&#xff0c;在查阅资料的过程中。发现大厂阿里的庖丁解InnoDB系列&#xff0c;详细了的写了很多底层知识&#xff0c;于是基于这个这两个文章才有了阿丹的这篇文章。 整体认知&#xff1a; 在 MySQ…

nVisual光纤资源管理软件,亮相第24届光博会

第24届中国国际光电博览会&#xff08;CIOE&#xff09;于9月6日至8日在深圳国际会展中心盛大开幕。作为行业领先的网络基础设施管理软件供应商&#xff0c;耐威迪携nVisual光纤资源管理软件亮相9号馆C001、C002展位&#xff0c;全方位展示室外网络基础设施管理、光纤资源管理、…

2022年全国研究生数学建模竞赛华为杯E题草原放牧策略研究求解全过程文档及程序

2022年全国研究生数学建模竞赛华为杯 E题 草原放牧策略研究 原题再现&#xff1a; 一、背景介绍   草原作为世界上分布最广的重要的陆地植被类型之一&#xff0c;分布面积广泛。中国的草原面积为3.55亿公顷&#xff0c;是世界草原总面积的6%~8%&#xff0c;居世界第二。此外…

CSP-J初赛复习大题整理笔记

本篇全是整理&#xff0c;为比赛准备. 在这里插入代码片 #include<cstdio> using namespace std; int n, m; int a[100], b[100];int main() {scanf_s("%d%d", &n, &m);for (int i 1; i < n; i)a[i] b[i] 0;//将两个数组清0&#xff0c;这…

MySQL与ES数据同步的四种方案及实践演示

文章目录 一、同步双写优点缺点双写失败风险项目演示 二、异步双写&#xff08;MQ方式&#xff09;优点缺点项目演示 三、基于Datax同步核心组件架构图支持的数据源及操作项目演示 四、基于Binlog实时同步实现原理优点缺点项目演示 一、同步双写 也就是同步调用&#xff0c;这…