目录
重要的H标签
主要标签
h系列标签主要用来做标题。h1到h6 依次缩小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>1</h1>
<h2>1</h2>
<h3>1</h3>
<h4>1</h4>
<h5>1</h5>
<h6>1</h6>
</body>
</html>
运行结果
p标签：段落。
p 元素会自动在其前后创建一些空白（段间距）。浏览器会自动添加这些空间，您也可以在样式表中规定。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
<p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
<p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
<p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
<p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
</body>
</html>
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
让这个可爱的宝藏女孩在努力的道路上与你一起同行！
如有转载，请注明出处（如不注明，盗者必究）
div标签：表示大的容器。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。
注意：
Div span两个标签没有特殊的功能，只是作为一个内容容器，但使用频率很高，主要与CSS配合使用。
Div：块标签(它会独占一行，主要用于布局)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="ooo">
周杰伦的情歌不只有R&B，《彩虹》就是证明。
</div>
<div id="ooo">
周杰伦的情歌不只有R&B，《彩虹》就是证明。
</div>
<div id="ooo">
周杰伦的情歌不只有R&B，《彩虹》就是证明。
</div>
<div id="ooo">
周杰伦的情歌不只有R&B，《彩虹》就是证明。
</div>
</body>
</html>
运行结果
span:放一些文本。
Span:行内标签(不会独占一行)
标签被用来组合文档中的行内元素。
注意：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span> 哪里有彩虹告诉我
能不能把我的愿望还给我
为什么天这么安静
所有的云都跑到我这里
有没有口罩一个给我
释怀说了太多就成真不了
也许时间是一种解药
</span>
<span> 也是我现在正服下的毒药
看不见你的笑 我怎么睡得着
你的声音这么近我却抱不到
没有地球太阳还是会绕
没有理由我也能自己走
你要离开 我知道很简单
你说依赖 是我们的阻碍
</span>
<span>
就算放开 但能不能别没收我的爱
当作我最后才明白
有没有口罩一个给我
释怀说了太多就成真不了
也许时间是一种解药
也是我现在正服下的毒药
看不见你的笑 我怎么睡得着
</span>
</body>
</html>
运行结果
a标签：超链接。
- 页面的切换：一个网站一般由很多个页面组成，这些页面之间的切换是通过超链接来完成的。
- 超链接可以链接到站点内部的页面，也可以链接到外面站点的页面。
- 如果要链接到站点下面某个子目录里面的文件，需要加上路径的名称。
- 如果要从当前页面链接到上一级目录里面的页面，需要用到…/ 表示回到上一级目录，如果还有再上一级 …/…/
- 在新的页签打开页面，需要给a标签添加一个target属性。_blank：新页签打开。_parent：在父窗口打开。 _self:表示在当前窗口打开（默认）。_top:在顶层窗口打开。
- 在网页中添加一个锚点，给这个锚点取一个name属性 ，就可以在其他地方添加一个锚点链接，点击链接就可以打开一个页面的指定的锚点。
注意：锚点所在的位置，前面和后面都要有距离。 - mailto:后面跟上一个邮箱地址，当点击链接的时候，会自动打开发邮件的软件（前提是你的电脑已经安装了发邮件的软件）。
- < a href=“javascript:void(0);”>点击我< /a> ：这种写法，就屏蔽了a标签默认的行为（链接）。就相当于是一个独立的按钮。
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.qq.com">腾讯(外部站点)</a>
<a href="index.html">首页(内部站点)</a> <!--我在同级目录中有index.html-->
<a href="admin/login.html">登录</a><!--某个文件夹下的子目录-->
<a href="http://www.qq.com" target="_blank">打开新的页签访问腾讯(外部站点)</a> <!--在新标签页打开外部站点-->
<a href="#aa">去购买住房</a> <!--链接到其他的锚点-->
<a href="mailto:123@qq.com">123@qq.com</a><!--自动打开发邮件的软件-->
<a href="javascript:void(0);">点击我</a> <!--独立按钮-->
<div style="height: 2600px; background-color: seagreen;"></div>
<a name="aa">住房层</a>
<div style="height: 2600px; background-color: red;"></div>
</body>
</html>
这个不好演示，你去运行一下就知道啦！
img标签：增加背景图片
比如说，我在同级目录img下面增加了一张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/dog.jpg" alt="这是alt内容" title="这是一张背景图片"/>
<!--
通过img标签在网页中加入一张图片。
title：当鼠标移动到图片上的时候，显示title里面的文字内容。
alt：当图片加载失败的时候，显示alt属性中的内容。
table / form
-->
</body>
</html>
运行效果
当图片加载错误的时候回提示
块级标签和行内标签
任何一个标签都相当于一个容器。不管是块级的还是行内的，都可以通过display这个属性去设置它。
块级元素：独占一行，div p ul 块级元素可以设置它的宽高。
行内元素：都排在一行，一行排满之后，再从第二行开始排列。span a 行内元素不能设置它的宽高，设置了宽高也没有效果。 注意：行内元素如果设置了浮动属性，也可以对它设置宽高。
eg:
Div：块标签(它会独占一行，主要用于布局)
Span:行内标签(不会独占一行)
块标签与行内标签的区别：
块标签独占一行，宽度默认为100%；
行内标签多个并排一行，宽高为内容大小。
行内元素和块级元素是可以相互转换的。
display: inline; 这个元素就是行内元素。
display: block; 这个元素就是一个块级元素。
例如看下面的代码来理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 100px;
background-color: red;
display: inline;
}
#box2{
width: 200px;
height: 150px;
background-color: salmon;
display: inline;
}
span{
display: block;
}
</style>
</head>
<body>
<div id="box1">
我是
</div>
<div id="box2">
周杰伦
</div>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
<span>我是行内元素，但display: block了</span>
</body>
</html>
运行结果
补充
br换行符
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>宝藏女孩的成长日记</p>
<br>标签是单标签（意味着它没有结束标签，因此这是错误的<!-- <br></br> -->）
<p>宝藏女孩的成长日记</p>
</body>
</html>
运行结果
hr水平线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>宝藏女孩的成长日记</p>
<hr><!-- 我是一条水平线 -->
<p>宝藏女孩的成长日记</p>
</body>
</html>
style标签
定义和用法
style标签用于为 HTML 文档定义CSS样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
background-color: #FFDD33;
}
</style>
</head>
<body>
<p style="background-color: #FFC0CB;">宝藏女孩的成长日记</p>
<hr><!-- 我是一条水平线 -->
<p>宝藏女孩的成长日记</p>
</body>
</html>
这个就会引入一个优先级的知识
优先级 ：!important 绝对优先
CSS优先级：!important > 行内样式 > id选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
background-color: #FFDD33 !important;
}
</style>
</head>
<body>
<p style="background-color: #FFC0CB;">宝藏女孩的成长日记</p>
<hr><!-- 我是一条水平线 -->
<p>宝藏女孩的成长日记</p>
</body>
</html>
文本标签
b标签和 strong标签
<b> <strong>标签呈现粗体文本效果。
就这样记嘛：b是big的缩写 s是strong的缩写
i标签和 em 标签
<i> <em>标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
small标签
<small>标签呈现小号字体效果。
注意：如果被包围的字体已经是浏览器所支持的最小字号，那么 标签将不起任何作用。
big标签
标签呈现大号字体效果。
u标签
<u>标签可定义下划线文本。
del标签
<del>定义文档中已被删除的文本。
sub标签
<sub> 定义文档中的下标文本。
sup标签
<sup>定义文档中的上标文本。
https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
创作不易，如有转载，请注明出处
803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
