HTML入门（四）基本标签学习

最新推荐文章于 2021-06-18 23:02:59 发布

程序猴jwang

最新推荐文章于 2021-06-18 23:02:59 发布

阅读量339

点赞数 1

分类专栏： Html 文章标签： html

本文链接：https://blog.csdn.net/qq_21046965/article/details/83446231

版权

Html 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

前言

通过前面的学习，我们知道了head标签用来描述浏览器的信息，那么我们在网页上看到的字以及图片又是哪里来的呢？这就要说到body标签了，body标签包含的就是网页显示给用户看到的内容，其中包含大量的子标签

特别的：因为我们的学习是为了迎合MVC的设计理念，所以不是搞前端的同学无需深入。

步骤

1.标题标签h1~h6

html通过h1-h6标签展示网页的标题，实例代码及效果如下：

<!DOCTYPE html>
<html>
	<head>
		<title>html文档标题</title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
	</body>
</html>

2. 段落标签p

html通过p标签表示网页中的段落，实例代码以及效果如下：

<!DOCTYPE html>
<html>
	<head>
		<title>html文档标题</title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<h1>一级标题</h1>
		<p>通过前面的学习，我们知道了head标签用来描述浏览器的信息，那么我们
		在网页上看到的字以及图片又是哪里来的呢？这就要说到body标签了，body
		标签包含的就是网页显示给用户看到的内容，其中包含大量的子标签</p>
		<p>这就要说到body标签了，body
		标签包含的就是网页显示给用户看到的内容，其中包含大量的子标签</p>
	</body>
</html>

3.链接标签a

html中用a标签代表网页的链接地址，其属性href记录网页的url.实例代码及效果如下：

链接点击即可访问指定网页

<!DOCTYPE html>
<html>
	<head>
		<title>html文档标题</title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<h1>一级标题</h1>
		<p>这就要说到body标签了，body
		标签包含的就是网页显示给用户看到的内容，其中包含大量的子标签</p>
		<a href="http://www.baidu.com">百度一下，你就知道</a>
	</body>
</html>

4.图片标签img

html通过img标签来在网页上显示图片，其属性src用来指定图片的路径

<!DOCTYPE html>
<html>
	<head>
		<title>html文档标题</title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<h1>一级标题</h1>
		<p>这就要说到body标签了，body
		标签包含的就是网页显示给用户看到的内容，其中包含大量的子标签</p>
		<a href="http://www.baidu.com">百度一下，你就知道</a>
		<img src="timg.jpg" >
	</body>
</html>

5.换行符br以及水平分割线hr

br用来给文本及段落进行换行，水平分割线用来进行分区

特别的：段落及文本所用的空格为 

<!DOCTYPE html>
<html>
	<head>
		<title>html文档标题</title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<h3>标题</h3>
		<p>这就要说到body标签了，body
		标签包含的就是网页显示给用户看到的内容，其中包含大量的子标签</p>
		<hr/>
		<p>这就要说到body标签了，body
		标签包含的就是网页显示给用户看到的内容，其中包含大量的子标签</p>
		我是换行<br/>我是换行
	</body>
</html>

6.其他标签

<!DOCTYPE html>
<html>
	<head>
		<title>html文档标题</title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<b>加粗字体</b>
		<i>斜体字体</i>
		<del>删除字体</del>
		<pre>
			//代码标签
			pubic static void main(String [] args){
				System.out.println("Hello World!"):
			}
		</pre>
	</body>
</html>