零基础学习HTML(10)——striong标签、b标签、em标签、i标签、del标签、ins标签、s标签、u标签、mark标签、sup标签、sub标签、samll标签
零基础学习HTML(10)——striong标签、b标签、em标签、i标签、del标签、ins标签、s标签、u标签、mark标签、sup标签、sub标签、samll标签
Dragon水魅
发布于 2026-01-23 14:57:43
发布于 2026-01-23 14:57:43
注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php
官方资料
鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/
学习正文
strong标签：https://man.ilovefishc.com/pageHTML5/strong.html b标签：https://man.ilovefishc.com/pageHTML5/b.html em标签：https://man.ilovefishc.com/pageHTML5/em.html i标签：https://man.ilovefishc.com/pageHTML5/i.html del标签：https://man.ilovefishc.com/pageHTML5/del.html ins标签：https://man.ilovefishc.com/pageHTML5/ins.html s标签：https://man.ilovefishc.com/pageHTML5/s.html u标签：https://man.ilovefishc.com/pageHTML5/u.html mark标签：https://man.ilovefishc.com/pageHTML5/mark.html sup标签：https://man.ilovefishc.com/pageHTML5/sup.html sub标签：https://man.ilovefishc.com/pageHTML5/sub.html small标签：https://man.ilovefishc.com/pageHTML5/small.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十二节课</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<!--strong标签用于定义表示重要的文本-->
<p>这是普通文本，<strong>这是加粗文本</strong></p>
</html>
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十二节课</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<!--b标签用于定义表示粗体的文本-->
<p>b元素也能使文本<b>变粗</b>，但它没有附带任何表示重要的语义。</p>
</html>
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十二节课</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<!--em标签用于定义表示强调的文本-->
<p>学习编程中最重要的是<em>练习</em>！</p>
</html>
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十二节课</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<!--i标签用于定义表示斜体的文本-->
<p>i标签也可以让内容<i>倾斜</i>，只不过它没有附带任何表示强调的语义。</p>
</html>
在这里插入图片描述
强烈建议通过CSS来实现加粗和倾斜：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十二节课</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
<style type="text/css">
.bold {font-weight: bolder;}
.italic {font-style: italic;}
</style>
</head>
<body>
<!--使用CSS代替b和i元素-->
<p class="bold">这里的内容都加粗会比较好看！</p>
<p class="italic">这里的内容还是倾斜的好……</p>
</html>
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十二节课</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<!--del标签用于定义文已被删除的文本，ins标签用于定义新插入的文本-->
<p><del>我喜欢三上悠亚</del>，不，<ins>我只是单纯的喜欢搞黄色</ins>。</p>
</html>
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十二节课</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<!--s标签用来定义那些不正确的文本，不能和del标签混用-->
<p><s>我喜欢三上悠亚</s>，不，我只是单纯的喜欢搞黄色。</p>
</html>
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十二节课</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<!--u标签定义与常规文本风格不同的文本（例如像拼写错误的单词或者汉语中的专有名词）-->
<p>我喜欢<u>三上悠亚</u>。</p>
</html>
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十二节课</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<!--mark标签用于定义带有标记的文本-->
<p><mark>可乐</mark>、<mark>雪碧</mark>、<mark>柠檬茶</mark>，请问客官喝点啥？</p>
</html>
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十二节课</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<!--sup标签用于定义上标文本，sub标签用于定义下标文本-->
<p>E = MC<sup>2</sup></p>
<p>Mg + ZnSO<sub>4</sub> = MgSO<sub>4</sub> + Zn</p>
</html>
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十二节课</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<!--small标签用于定义更小字体的文本（比如旁注）-->
<h1>送钱啦！</h1>
<p>细节不重要，反正就是送钱啦！！</p>
<p><small>本活动最终解释权归XXX所有</small></p>
</html>
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2026-01-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号