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

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

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

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

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

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



一、什么是标签语义

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

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


二、标题标签 (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;

目录
相关文章
|
7天前
|
存储 移动开发 前端开发
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
10 0
|
12天前
|
前端开发 搜索推荐 UED
HTML基础-文本格式化标签:美化网页内容
【6月更文挑战第1天】本文介绍了HTML的文本格式化标签,包括`<b>`、`<strong>`、`<i>`、`<em>`、`<u>`、`<s>`、`<mark>`、`<small>`、`<sub>`和`<sup>`等,强调了语义化使用和避免常见错误的重要性。示例代码展示了这些标签的用法,帮助提升网页内容的可读性和吸引力。
|
14天前
|
前端开发 UED
HTML 文本格式化
HTML 文本格式化
|
15天前
|
搜索推荐 SEO
HTML文本格式化标签的深入解析与应用
HTML文本格式化标签的深入解析与应用
16 0
|
15天前
|
前端开发
HTML段落标签与换行标签的详解与应用
HTML段落标签与换行标签的详解与应用
15 0
|
SQL 前端开发 JavaScript
JavaWeb学习之路(15)--HTML之注释
本文目录 1. 注释 2. 程序注释 3. HTML注释 4. 注释的作用 5. 小结
168 0
|
15天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
24 0
|
23小时前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
6 0
|
23小时前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
9 0
|
1天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
9 2