零基础学习HTML(10)——striong标签、b标签、em标签、i标签、del标签、ins标签、s标签、u标签、mark标签、sup标签、sub标签、samll标签

最新推荐文章于 2024-04-20 14:06:29 发布

Dragon水魅

最新推荐文章于 2024-04-20 14:06:29 发布

阅读量1.5k

点赞数 1

分类专栏：零基础学习Web开发文章标签： html web开发

本文链接：https://blog.csdn.net/qq_43650934/article/details/108006717

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

文章目录

- - 官方资料
  - 学习正文

注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

<!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>