本文已参与「新人创作礼」活动，一起开启掘金创作之路。
块级标签：宽度和内容有关
1）每一个块级标签独占一行，可以实现自动换行
2）有多个块级标签存在时，默认的排列方式从上往下
3）设置宽高有效
4）可以容纳内联元素或者其他元素
内联标签：内联标签在不设置宽度的情况下，宽度始终和浏览器宽度保持一致
1）不会自动换行
2）出现多个内联标签时，默认的排列方式是从左往右
3）设置宽高无效
4）只能容纳内联元素
常见的块级标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.标题标签:h1——h6-->
<!--1-6级逐渐变小-->
<h1>标题标签</h1>
<!--2.段落标签-->
<p>段落标签</p>
<!--3.序列标签：有序标签和无序标签-->
<!--1）有序标签-->
<!--默认是1，2，3序号排列，改变加type属性-->
<!--快捷方式：ol>li*3 Tab键补全-->
<ol type="A">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<!--2）无序标签-->
<!--默认是小黑点，去掉type="none" 实心默认值type="disc" 空心type="circle" 实心方块type="square"-->
<ul type="square">
<li>小红</li>
<li>小李</li>
<li>小明</li>
</ul>
<!--4.定义列表-->
<!--dt：总的分类-->
<dl>
<dt>食物</dt>
<dd>饺子</dd>
<dd>鸡腿</dd>
<dd>鸡蛋</dd>
</dl>
<!--5.盒子-->
<div style="width: 300px;height: 300px;border: 1px solid red">
</div>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「JiayinX」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_51453764/article/details/123648138
常见的内联标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.图片标签-->
<img src="图片路径" alt="图片报错信息">
插入图片路径介绍：
<!--1）相对路径：上一层路径../ 同级路径./01.jpg 或01.jpg 下一级路径 /-->
<img src="闭眼拥抱.jpg" alt="图片报错信息">
<!--2）绝对路径：从磁盘位置开始找-->
<!--1在文件夹中选中图片上面的文件路径 2复制过来，修改最后的打开的图片名称 3右击代码文件选择copy path 复制绝对路径 在浏览器打开（直接打开不了，必须复制路径在浏览器打开）-->
<img src="C:\Users\30349\Desktop\图片\犬夜叉\瞪眼.jpeg" alt="图片打开失败">
<!--3）网络路径:在网页中右击图片，选择复制图片地址，即可复制图片路径-->
<img src="http://static.zongheng.com/upload/recommend/7a/a0/7aa0441162cceff097792e9a00514b3b.jpeg" alt="图片报错信息">
<!--4）title标签：鼠标在图片上的时候会显示title中的内容-->
<img src="闭眼拥抱.jpg" alt="图片报错信息" title="犬薇">
<!--2.加粗标签 <b></b>-->
<span>我是文本标签</span>
<b>我是加粗标签</b>
<!--3.超链接标签 <a href="跳转网址"></a>-->
<!--target="_blank" 新增页面跳转百度，不是在当前页面跳转-->
<a href="https://www.baidu.com" target="_blank">点击百度</a>
<!--a标签还有 锚点功能：回到顶部 底部-->
<!-- href=""内填的是 #+对方的name 点击后就找到对方的标签位置-->
<a href="#button" name="top">回到底部</a>
<div style="width: 300px;height: 300px;border: 1px solid red"></div>
<div style="width: 300px;height: 300px;border: 1px solid red"></div>
<div style="width: 300px;height: 300px;border: 1px solid red"></div>
<div style="width: 300px;height: 300px;border: 1px solid red"></div>
<div style="width: 300px;height: 300px;border: 1px solid red"></div>
<div style="width: 300px;height: 300px;border: 1px solid red"></div>
<a href="#top" name="button">回到顶部</a>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「JiayinX」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_51453764/article/details/123648138
