HTML文本标签学习记录
HTML:HyperText Markup Language(超文本标志语言)
HTML结构：
一个文档声明：<!DOCTYPE html>表示这是一个HTML页面
一个html标签对：<html></html>作用是告诉浏览器，这个页面是从<html>开始，然后到</html>
一个head标签对：<head></head>
一个body标签对：<body></body>
<!-- 文档声明 -->
<!DOCTYPE html>
<!-- HTML文档 -->
<html>
<!-- 页头信息 -->
<head>
<title>这是网页的标题</title>
</head>
<!-- 页身 -->
<body>
<p>这是网页的内容</p>
</body>
</html>效果如图：
在HTML中，一般来说，只有6个标签能放在head标签内。
title标签
meta标签
link标签
style标签
script标签
base标签
在HTML中，meta标签的http-equiv属性只有两个重要作用：
- 定义网页所使用的编码；
- 定义网页自动刷新跳转。
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>这段代码表示当前页面在6秒后会自动跳转到http://www.baidu.com这个页面。
粗体标签：strong、b
斜体标签：i、em、cite
上标标签：sup
下标标签：sub
中划线标签：s（删除线）
下划线标签：u
小字号标签：small
大字号标签：big
由于 <big> 标签在 HTML5 中已经被弃用，因此在现代浏览器中可能并不推荐使用。尽管它不会导致错误行为，但建议使用 CSS 来控制文本大小。
例如，可以使用如下方式代替：
<span style="font-size: larger;">这是加大的文本</span><br/>不过对于字体大小的改变，我们使用CSS来实现
strong标签和b标签的加粗效果是一样的。不过在实际开发中，如果想要对文本实现加粗效果，尽量使用strong标签，而不要使用b标签。这是因为strong标签比b标签更具有语义性。
在实际开发中，如果想要实现文本的斜体效果，尽量使用em标签，而不是i标签或cite标签。这也是因为em标签比其他两个标签语义性更好。
学了CSS之后，对于删除线效果，一般用CSS来实现，几乎不会用s标签来实现。
在HTML中，块元素在浏览器显示状态下将占据一整行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。
常见的块内元素：
块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。块元素内部可以容纳其他块元素和行内元素。
在HTML中，行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。
常见的行内元素：
难输入的符号需要用代码输入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>特殊符号</title>
</head>
<body>
<p>欧元符号：€</p>
<p>英镑符号：£</p>
</body>
</html>效果图：
练习题：
使用学到的各种文本标签，把图所示的网页效果做出来。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文本练习</title>
</head>
<body>
<h1 style="text-align:center;">各科小常识</h1>
<div>
<h3>语文</h3>
<p> 三国演义是中国四大古典名著之一，《三国演义》是中国古典四大名著之一，作者是明代小说家罗贯中。这部小说以东汉末年到三国时期的历史为背景，通过描绘纷乱的政治斗争和英雄豪杰的壮丽史诗，展现了权力、智谋、忠诚与背叛等主题。三国演义的故事围绕三个主要国家——魏、蜀、吴的兴衰交替，展示了刘备、关羽、张飞、曹操、孙权等众多历史人物的传奇经历。小说的情节复杂，人物性格鲜明，展现了各方势力的斗争，以及士人和庶民在动荡时代的命运。</p>
<hr/>
</div>
<div>
<h3>数学</h3>
<p> 勾股定理直角三角形：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
<hr/>
</div>
<div>
<h3>化学</h3>
<p> H<sub>2</sub>SO<sub>4</sub>是一种重要的工业原料，可用于制作肥料，洗涤剂等。</p>
<hr/>
</div>
<div>
<h3>经济</h3>
版权符号：©<br/>
注册商标：®
<hr/>
</div>
</body>
</html>效果图：（英语部分不写了）
练习过程中的代码：
<!-- 文档声明 -->
<!DOCTYPE html>
<!-- HTML文档 -->
<html>
<!-- 页头信息 -->
<head>
<title>这是网页的标题</title>
<meta name="keywords" content="绿叶学习网，前端开发，后端开发"/>
<meta name="description" content="web技术网站"/>
<meta name="author" content="helicopter"/>
<meta charset="utf-8"/>
<!-- <meta http-equiv="refresh" content="5;url=http://www.baidu.com"/> -->
<style type="text/css">
</style>
<script></script>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<!-- 页身 -->
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<p> 这是网页的内容这是网页的内容这是网页的内容这是网页的内容这是网页的内容这是网页的内容<br/>这是网页的内容这是网页的内容这是网页的内容</p>
<p>这是网页的内容这是网页的内容这是网页的内容这是网页的内容这是网页的内容这是网页的内容</p>
<p>这是网页的内容这是网页的内容这是网页的内容这是网页的内容这是网页的内容这是网页的内容</p>
<strong>这是加粗的文字</strong>
<b>这是加粗的文字</b><br/>
<em>这是斜体的文字</em>
<i>这是斜体的文字</i>
<cite>斜体文本</cite>
<p>(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup></p>
<p>H<sub>2</sub>SO<sub>4</sub></p>
<p>新鲜的新西兰</p>
<p><s>原价：￥6.5/kg</s></p>
<p><strong>现在仅售￥：4.00/kg</strong></p>
<p>普通文本</p>
<span style="font-size: larger;">这是加大的文本</span><br/>
<small>这是缩小的文本</small>
<!-- 水平线 -->
<hr/>
<div>这是div标签</div>
<div>这是div标签
<p>欧元符号：€</p>
</div>
</body>
</html>效果图：
原文地址：https://blog.csdn.net/qq_74474809/article/details/143720652
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！