自学前端(四):body标签之文本标签的运用

230 阅读2分钟

前言

大家好,我是老谷。

今天接着学习html的body标签。

结构内容

body标签是一个HTML静态页面的“身体”,那么这个“身体”一般是以下几种内容组成。

1.文本

2.图片

3.超链接

4.音视频

那么今天老谷将主要学习其中的“文本”标签。

文本标签

1.标题标签

标题标签主要有6级,分别是h1-h6,其中h1书写一次即可,余下的可以多次使用。

<h1>一级标题</h1> 
<h2>二级标题</h2> 
<h3>三级标题</h3> 
<h4>四级标题</h4> 
<h5>五级标题</h5> 
<h6>六级标题</h6>

\

2.段落标签

 <p>段落内容</p>
 <p>段落内容</p>

段落与段落之间会有隔行间隙,如果想要没有隔行,可以使用换行标签

<br/>

1626507016(1).jpg

3.文本标签

  • 粗体标签:strong
  • 斜体标签:em
  • 上标标签:sup
  • 下标标签:sub
  • 中划线标签:s
  • 下划线标签:u
  • 大号字体标签:big
  • 小号字体标签:small

1626507882(1).jpg

4.水平线标签

<hr/>

5.div标签

这个标签主要作用是让结构更清晰,特别是css不同模块之间,可以用div标签

\

<div></div>

6.自闭合标签

<meta/> 定义网页信息
<link/> 引入外部CSS文件
<br/> 换行
<hr/> 水平线
<img/>图片
<input/>表单

7.块元素和行内元素

块元素:block ,块元素是独占一行的。例如标题标签、段落标签、div标签等。在浏览器中,显示的是一行,排斥其他元素\

行内元素:inline,这个是可以在行业兼容的,例如字体加速、加大、下划线等等。

8.特殊符号

html网页中,我们有些时候是没办法直接输入符号的,或者输入了没有办法在浏览器中显示的,其中最明显的就是“空格”符号,所以特殊符号也有自己的代码。但是因为我们在实际中,常使用的特殊符号并不多,那么我们只用记住两个就行。一个是空格,一个是版权符号。

&nbsp; 空格符号
&copy; 版权符号

1626509455(1).jpg

动手作业

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8 />	
	<title>老谷笔记的title</title> 
	<meta name="keywords" content="老谷,笔记,html" />
	<meta name="description" content="这是老谷书写的html网页" />
	<meta name="author" content="老谷" />
	<meta name="copyright content="owzz.com"/>
	<!--刷新跳转页面需要和同属性的间隔开来-->
	<meta  http-equiv="refresh" content="99;url=http://owzz.com"/>
</head>
<body>
	<!--这是第一段标题标签-->
	<div>
	<h1>h1标题</h1>
	<h2>h2标题</h2>
	<h3>h3标题</h3>
	<h4>h4标题</h4>
	<h5>h5标题</h5>
	<h6>h6标题</h6>
	</div>
	<!--这是第二段段落标签-->
	<div>
	<p>这是我书写的标题标签</p>
	<p>这是我书写的段落内容</p>
	<p>如果不想隔行间隙可以使用换行标签<br/>这样就可以没有隔行了</p>
	<!--这是第三段文本标签-->
	</div>
	<strong>字体粗体</strong><br>
	<em>字体变斜体</em><br/>
	<s>字体中划线</s><br/>
	<u>字体下划线</u><br/>
	<p>字体<sup>上标</sup>字体<sub>下标</sub></p>
	<!--这是第四段水平线标签-->
	<div>
	水平线标签<hr/>
	</div>
	<!--这里是特殊符号的运用-->
	<div><p>空格&nbsp;&nbsp;&nbsp;符号,版权&copy;符号</p></div>
	</body>
</html>