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

news2024/10/5 12:59:51

本文属于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.coloradmin.cn/o/992412.html

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

相关文章

线程的常用方法及六种状态

一、线程核心执行流程方法 -- run&#xff08;&#xff09; run方法是Runnable接口中定义的。所有实现Runnable的接口的子类都需要覆写run方法。 run方法是线程的核心执行流程方法&#xff0c;也就是说&#xff0c;run方法决定了线程启动后要干什么&#xff0c;当run方法执行完…

2.11 PE结构:添加新的节区

在可执行PE文件中&#xff0c;节&#xff08;section&#xff09;是文件的组成部分之一&#xff0c;用于存储特定类型的数据。每个节都具有特定的作用和属性&#xff0c;通常来说一个正常的程序在被编译器创建后会生成一些固定的节&#xff0c;通过将数据组织在不同的节中&…

微信小程序接入隐私弹窗说明及详细过程

相信各位做小程序的小伙伴在微信小程序后台应该都接到了官方通知的小程序隐私新规&#xff0c;如果还未收到的小程序可以看一下&#xff1a; 为规范开发者的用户个人信息处理行为&#xff0c;保障用户合法权益&#xff0c;自2023年9月15日起&#xff0c;对于涉及处理用户个人信…

OpenCV 09(形态学)

一、形态学 形态学指一系列处理图像 形状特征 的图像处理技术. 形态学的基本思想是利用一种特殊的结构元(本质上就是卷积核)来测量或提取输入图像中相应的形状或特征&#xff0c;以便进一步进行图像分析和目标识别。这些处理方法基本是对二进制图像进行处理, 即黑白图像卷积核…

JUC编程中锁引发的“见解”

JUC编程中锁引发的“见解” 一大早就在想锁是干嘛的&#xff1f;什么情况下要用锁&#xff1f;想了很多&#xff0c;下面的所有表述都是就是我的思考流程&#xff0c;欢迎所有人一起讨论、更正。 文章目录 JUC编程中锁引发的“见解”1、什么是JUC编程?2、JUC编程中什么情况下需…

C/C++之链表的建立

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂。 目录 1.头插 1.1简介 1.2代码实现头插 …

二维数组前缀和(JAVA)

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 暴力 双层for循环&#xff0c;遍历子矩阵。 前缀和算法&#xff1a; class NumMatrix {private int sum[][];private int matrix[][];public NumMatrix(int[][] matrix) {this.matrixmatrix;int row…

AI 帮我写代码——Amazon CodeWhisperer 初体验

文章作者&#xff1a;游凯超 人工智能的突破和变革正在深刻地改变我们的生活。从智能手机到自动驾驶汽车&#xff0c;AI 的应用已经深入到我们生活的方方面面。而在编程领域&#xff0c;AI 的崭新尝试正在开启一场革命。Amazon CodeWhisperer&#xff0c;作为亚马逊云科技的一款…

【高德地图】 覆盖物/画点/画折线/画多边形/画矩形/画圆

官方示例 https://lbs.amap.com/demo/javascript-api/example/mouse-operate-map/mouse-draw-overlayers <!doctype html> <html lang"en"><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content…

07_瑞萨GUI(LVGL)移植实战教程之LVGL对接EC11旋转编码器驱动

本系列教程配套出有视频教程&#xff0c;观看地址&#xff1a;https://www.bilibili.com/video/BV1gV4y1e7Sg 7. LVGL对接EC11旋转编码器驱动 本次实验我们向LVGL库中对接EC11旋转编码器驱动&#xff0c;让我们能通过EC11旋转编码器操作UI。 7.1 复制工程 上次实验得出的工…

一文读懂Swin-Transformer

系列文章目录 记录CV领域大模型的学习历程&#xff0c;欢迎大家一起讨论&#xff0c;互相学习。 ViT,DETR(一),DETR(二)DETR(三) 文章目录 系列文章目录前言一、整体框架1.Patch Embedding2.Patch Merging3.Swin Transformer Block3.1 Window Partition/Reverse3.2 Window-MSA…

C#__文件操作之FileInfo和DirectoryInfo

// 代码&#xff08;含注释&#xff09; class Program{static void Main(string[] args){// FileInfo 文件操作FileInfo myFile new FileInfo("D:\C#编程\文件操作之FileInfo和DirectoryInfo\TextFile1.txt");// 实例方法// myFile.CopyTo("D:\C#编程\文件操作…

空中跳一跳

欢迎来到程序小院 空中跳一跳 玩法&#xff1a; 跳一跳长按鼠标左键&#xff0c;松开鼠标进行跳跃&#xff0c;跳到下一个格子中&#xff0c;进行分数统计&#xff0c;三次生命机会&#xff0c;格子中也会有爱心出现&#xff0c;吃掉安心增加一次生命哦^^。开始游戏https://ww…

第19章 并发与竞争实验(iTOP-RK3568开发板驱动开发指南 )

在前面章节的学习中&#xff0c;相信大家已经对用户空间与内核空间数据传递进行了实验&#xff0c;假如要传递的数据被存放在了全局变量&#xff0c;该数据就可以作为共享资源被多个任务共同读写&#xff0c;从而造成数据的错误传输&#xff0c;多个程序同时访问一个共享资源产…

取个好名,是一生中极为重要之事

我们每十年一大运&#xff0c;五年一小运。每交次大运时&#xff0c;就会改变一次你身边的一切环境。每个大运&#xff0c;都会把你带入不同的风景&#xff0c;人生想要须尽欢&#xff0c;就不要太在意外在的一切&#xff0c;永远向内求。有志同道合的人就一起上路&#xff0c;…

《Tree of Thoughts: Deliberate Problem Solving with Large Language Models》中文翻译

《Tree of Thoughts: Deliberate Problem Solving with Large Language Models》- 思维树&#xff1a;用大型语言模型有意识地解决问题 论文信息摘要1. 介绍2. 背景3. 思想树&#xff1a;用 LM 有意识地解决问题4. 实验4.1 24 人游戏4.2 创意写作4.3 迷你填字游戏 5. 相关工作6…

语音芯片NRK3302 在按摩仪上的应用

在当今生活节奏快&#xff0c;生活压力大的现代社会。按摩仪已逐渐成为人们生活中不可或缺的日常用品&#xff0c;人们需要一个能够随时放松身体的工具。智能按摩仪应运而生&#xff0c;在按摩仪中加入语音芯片&#xff0c;让按摩仪变得更加智能&#xff0c;使用起来更加便利化…

私有云不是真正的云计算!

大数据产业创新服务媒体 ——聚焦数据 改变商业 中国云计算遇到困境&#xff0c;IaaS层面&#xff0c;阿里云、腾讯云等增长乏力&#xff1b;SaaS没有发展起来。反观美国&#xff0c;整个云计算蓬勃发展&#xff0c;AWS、微软云、谷歌云体量更大&#xff0c;增速却不低&#x…

YOLO目标检测——工地安全帽识别检测数据集+已标注yolo格式标签下载分享

实际项目应用&#xff1a;目标检测工地安全帽识别检测数据集在工地安全监测、工地管理、安全培训和教育、违规检测和预警以及安全统计和分析等领域都有着广泛的应用。通过准确识别和检测工人是否佩戴安全帽&#xff0c;可以帮助提高工地的安全性和管理效率&#xff0c;减少事故…

通过finalshell快速在ubuntu上安装jdk1.8

这篇文章主要介绍一下怎么通过finalshell连接ubuntu&#xff0c;然后在ubuntu上安装jdk1.8&#xff0c;让不熟悉linux操作系统的童鞋也能快速地完成安装。 目录 一、准备一台虚拟机 二、安装finalshell远程连接工具 三、获取ubuntu虚拟机的ip地址 四、通过finalshell连接u…