HTML5笔记

最新推荐文章于 2022-04-22 17:42:34 发布

小关同学喜欢吃汉堡

最新推荐文章于 2022-04-22 17:42:34 发布

阅读量98

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_45784666/article/details/107462574

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML骨架格式及文档类型

<!DOCTYPE html> 
<html lang="en">  				<!--根标签-->
<head>                  		<!--头标签-->
	<meta charset="UTF-8">
	<title>Title</title>  		<!--标题标签-->
</head>
<body>                  		<!--主体标签-->
	
</body>
</html>

HTML标签

1、标题标签

<!DOCTYPE html>
<html lang="en">            <!--根标签-->
<head>                      <!--头标签-->
    <meta charset="UTF-8">
    <title>小关同学爱吃汉堡</title>    <!--标题标签-->
</head>
<body>                      <!--主体标签-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

演示结果如下：
在这里插入图片描述
注意：

可以发现最小只有六级标题，不存在七级标题
标题前后会有空行，并且会自动换行

2.段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小关同学爱吃汉堡</title>
</head>
<body>
    <!--段落标签-->
    段落一
    段落二
    <p>段落一</p>
    段落二
</body>
</html>

演示结果如下：
在这里插入图片描述
注意：

段落标签用于定义一个段落，不在标签内部的将会另起一段
浏览器会自动地在段落的前后添加空行
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数

3.水平线标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小关同学爱吃汉堡</title>
</head>
<body>
    <p>段落1段落1段落1段落1段落1段落1
    段落1段落1段落1段落1段落1段落1段落1段落1</p>
    <hr />    <!--水平线标签-->
    <p>段落2段落2段落2段落2段落2段落2
    段落2段落2段落2段落2段落2段落2段落2段落2</p>
</body>
</html>

演示结果如下：
在这里插入图片描述

4.换行标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小关同学爱吃汉堡</title>
</head>
<body>
    <!--换行标签-->
    在编辑器中进行
    手动换行是没有作用的！<br />
    编辑器中的换行变成了网页中的空格。 <br />
    这里需要用到换行标签才能实现换行，但是不会分段！ <p></p>
    使用分段标签会在前后添加空行！！
</body>
</html>

演示结果如下：
在这里插入图片描述
注意：

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格
要区分 和所带来的不同，分段会在段落的前后添加空行。而使用换行标签不会有多余的空行。不能用代替

小关同学喜欢吃汉堡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5笔记

HTML骨架格式及文档类型<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8"> <title>Title</title> </head><body>
复制链接

扫一扫

专栏目录