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

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


  • 博客主页:Duck Bro 博客主页
  • 系列专栏: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;

在这里插入图片描述

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
以下是一个简单的商品专栏 HTML 案例: ```html <!DOCTYPE html> <html> <head> <title>商品专栏</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 20px; } .item { width: 300px; height: 400px; margin: 20px; padding: 10px; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); text-align: center; } .item img { width: 100%; height: 250px; object-fit: cover; } .item h2 { font-size: 24px; margin-top: 10px; margin-bottom: 5px; } .item p { font-size: 16px; margin-top: 5px; margin-bottom: 10px; color: #666; } .item button { background-color: #3498db; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease-in-out; } .item button:hover { background-color: #2980b9; } </style> </head> <body> <div class="container"> <div class="item"> <img src="https://via.placeholder.com/250x150" alt="Product 1"> <h2>Product 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button>Add to Cart</button> </div> <div class="item"> <img src="https://via.placeholder.com/250x150" alt="Product 2"> <h2>Product 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button>Add to Cart</button> </div> <div class="item"> <img src="https://via.placeholder.com/250x150" alt="Product 3"> <h2>Product 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button>Add to Cart</button> </div> <div class="item"> <img src="https://via.placeholder.com/250x150" alt="Product 4"> <h2>Product 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button>Add to Cart</button> </div> <div class="item"> <img src="https://via.placeholder.com/250x150" alt="Product 5"> <h2>Product 5</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button>Add to Cart</button> </div> <div class="item"> <img src="https://via.placeholder.com/250x150" alt="Product 6"> <h2>Product 6</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <button>Add to Cart</button> </div> </div> </body> </html> ``` 在这个案例中,我们使用了 flexbox 布局来创建一个商品专栏。每个商品包含一个图片、标题、描述和一个“添加到购物车”按钮。我们还使用了一些 CSS 样式,如阴影、圆角和过渡效果,来使商品专栏看起来更加漂亮。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Duck Bro

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值