HTML
1、HTML简介
HTML是一个网页的主体部分，也是一个网页的基础。因为一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容。所以HTML部分是整个前端的基础。
静态页面是没有与用户进行交互
HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。
<!DOCTYPE HTML> <html> 根节点 <head>...</head> 子节点，容器的盒子 <body>...</body> 子节点，被浏览器所查看到的 </html>
<!-- 声明文档的类型 标记该文档为HTML5的文件 --> <!DOCTYPE html> <!-- 页面的根节点 --> <!-- html中的标签都是闭合标签 闭合标签包含 双闭合和单闭合 双闭合：<html></html> 单闭合：<meta /> -->
<html> <head> <!-- 声明头部的元信息 对我们文档 规定编码格式 --> <meta charset="utf-8" /> <!-- 包含头部的信息 是一个容器 包含 style title meta script link等 --> </head> <body> <!-- 包含浏览器显示的内容标签 div p a img input等等 --> 这是我们的文档结构 </body> </html>
文件后缀一般使用.html或.htm .html与.htm均是静态网页后缀名，网页文件没有区别与区分，html与htm后缀网页后缀可以互换，对网页完全没有影响同时也没有区别。可以认为html与htm没有本质区别，唯一区别即多与少一个“l”。
HTML标签
1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签。 2. HTML中标签**通常**都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，如`<p>标签内容</p>`和`<div>标签内容</div>`。
开始标签和结束标签之间的就是标签的内容。 3. 标签之间是可以嵌套的。例如：div标签里面嵌套p标签的话，那么`</p>`必须放在`</div>`的前面。 4. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，因为大部分程序员都以小写为准。
HTML文档结构
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。 1.<html></html> 称为根标签，所有的网页标签都在<html></html>中。 2.<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍。 3.在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。 HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。
注释
<!--这里是注释的内容-->
2、header标签相关内容
title标签
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。
meta标签
元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
常用的meta标签：
- http-equiv属性
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
- name属性
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
其他标签
<link rel="icon" href="fav.ico"> icon是图标，定义网站的图标；
<link rel="stylesheet" href="mystyle.css"> 引入外部样式表文件
<script src="myscript.js"></script> 引入JavaScript文件<style type="text/css"> 定义内部样式表
<!DOCTYPE html> <html lang="en"> <!--lang是语言的意思，lang="en"表默认用英文去打开，可以翻译；--> <head> <!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） --> <!-- 文档的标题,在网站那显示出来 --> <title>路飞学城</title> <!-- meta标签常用两个属性 http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 --> <!--指定文档的内容类型和编码类型 content=“ ” 表示编码类型为html,编码格式为utf-8 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- 5秒之后 重定向 到路飞学城的网站 --> <!-- <meta http-equiv="refresh" content="5;URL=https://www.luffycity.com"/> --> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge">
<!--name属性主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用","隔开，与之对应的属性值也是content； 为了我们的SEO优化 工作的时候下面这两句 要写--> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="路飞学城"> <!-- 定义我们的网站图标 --> <link rel="icon" href="./fav.ico"> <!-- 引入外部样式表；下面这个是链接css的 --> <link rel="stylesheet" type="text/css" href="./index.css"> <!-- 定义内部样式表 --> <style type="text/css"> </style> <!-- 定义内容脚本文件 --> <script type="text/javascript"> </script> <script src="./index.js"></script> </head> <body> </body> </html>
3、body标签相关内容
标题标签 h1~h6
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用css来定义来达到漂亮的显示效果。 标题标签通常用来制作文章或网站的标题。
h1~h6标签的默认样式：
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飞学城</title>
</head>
<body>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
请看上面代码 <h1>和<h2>书写在一行上展示，但是在浏览器的效果却是换行了。
文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等...
1. `<b></b>`：加粗
2. `<i></i>`：斜体
3. `<u></u>`：下划线
4. `<s></s>`：删除线
5. `<sup></sup>`：上标
6. `<sub></sub>`：下标
现在如果想在一段文字中特别强调某几个字，这时候就可以用到`<em>`或`<strong>`标签。
这两个标签都是表示强调，但是两者在强调的语气上有区别:`<em>`表示强调，`<strong>`表示更强烈的强调。
在浏览器中`<em>`默认会用斜体表示，`<strong>`会用粗体来表示。两个标签相比，我们通常会推荐大家使用`<strong>`表示强调
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <body> <h1>一级标题</h1> <h6>六级标题</h6> <b>给我加粗</b> <i>给我斜体</i> <sup>上标</sup> <sub>下标</sub> <u>下划线</u> <s>删除线</s> <strong> 这里需要强调下</strong> </body> </html> 浏览器中展示（效果不明显，请自行测试）： 一级标题 六级标题 给我加粗 给我斜体 上标 下标 下划线 删除线 这里需要强调下
补充：
text-decoration 属性规定添加到文本的修饰。修饰的颜色由 "color" 属性设置。
<html> <head> <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration:blink} a {text-decoration: none} </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p> </body> </html>
段落标签 p
<p>,paragraph的简写。定义段落
<body>
<p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
<p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
</body>
浏览器展示特点：
- 跟普通文本一样，但我们可以通过css来设置当前段落的样式
- 是否又独占一行呢？ 答案是的 块级元素
span标签
<span> 标签被用来组合文档中的行内元素。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。 <span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
HTML:
<p class="tip"><span>提示：</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
<label>
标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
<textarea>
<textarea>标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
超链接标签 a
超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像
target:_blank 在新的网站打开链接的资源地址 target：_self 在当前网站打开链接的资源地址 title: 表示鼠标悬停时显示的标题
链接其他表现形式：
- 目标文档为下载资源 例如：href属性值，指定的文件名称，就是下载操作(rar、zip等)
- 电子邮件链接 前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。 例如：
<ahref="mailto:zhaoxu@tedu.cn">联系我们</a> - 返回页面顶部的空链接或具体id值的标签 例如：
<a href="#">内容</a>或<a href="#id值">内容</a> - javascript:是表示在触发
<a>默认动作时，执行一段JavaScript代码。 例如：<ahref="javascript:alert()">内容</a> - javascript:;表示什么都不执行，这样点击
<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a
列表标签ul，ol
网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容
<ul>:unordered lists的缩写 无序列表 <ol>:ordered listsde的缩写 有序列表
ol标签的属性：
type：列表标识的类型 ；列表标示的起始编号默认为1
- 1：数字
- a：小写字母
- A：大写字母
- i：小写罗马字符
- I：大写罗马字符
ul标签的属性： type：列表标识的类型
- disc：实心圆(默认值)
- circle：空心圆
- square：实心矩形
- none：不显示标识
盒子标签div
<div>可定义文档的分区 division的缩写 译：区 <div> 标签可以把文档分割为独立的、不同的部分
我们将文档放在一个父级的区（div）中，它里面包含几个块区（div）域，浏览器查看效果,你会发现每小块区域都是独占一行的，所以div是块级元素。另外，每块区域表示独立的一块，id属性和class属性其实很简单，你可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id，跟身份证号码一样，class可以设置同样的属性值，并且可以设置多个，例如class=’para n1‘
图片标签img
我们使用<img/>标签在网页中插入图片。语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
注意：
- src设置的图片地址可以是本地的地址也可以是一个网络地址。
- 图片的格式可以是png、jpg和gif。
- alt属性的值会在图片加载失败时显示在网页上。
- 还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
<div> <span>与行内元素展示的标签<span> <span>与行内元素展示的标签<span> <img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px"> <img src="./finance-right.png" alt="人工智能实战" style="width: 200px;height: 200px"> </div> - 与行内元素在一行内显示
- 可以设置宽度和高度
- span标签可以单独摘出某块内容，结合css设置相应的样式
其他标签
换行标签<br>
<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。
分割线<hr>
<hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容
特殊符号
浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格
特殊字符
要想输入空格，需要用特殊符号 --
HTML特殊符号对照表http://tool.chinaz.com/Tools/HtmlChar.aspx
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>常用标签一</title> </head> <body> 带你逐步提升技能 更有Linux运维工程师，带来最极致的成长体验。 <div class="p1"> <p style="height: 2000px" id="p1">顶部</p> </div> <!-- body相关标签 --> <!-- heading :标题 h1~h6 没有h7标题--> <div class="heading"> 不仅有独家<h3>Python全栈开发课程</h3>，带你逐步提升技能。更有Linux运维工程师，带来最极致的成长体验。 <!--h、p 块级元素 ： 1.只能独占一行 2.可以设置宽高--> <h1>路飞学城</h1><h2>路飞学城</h2> <h3>路飞学城</h3> <h4>路飞学城</h4> <h5>路飞学城</h5> <h6>路飞学城</h6> <h7>路飞学城</h7> </div> <div class="p1"> <!-- 段落标签 --> <!--br表示换行；hr是分割线 span内容可以单独摘抄出来结合css设置相应的样式--> <p><strong>路飞学城</strong>立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<br>金融分析,<span>人工智能</span>等互联网最前沿技术,开启职业生涯新可能</p> <hr> <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<s>金融分析</s>,人工智能等互联网最前沿技术,开启职业生涯新可能</p> </div> <div class="anchor"> <!-- a标签属于行内标签： 在一行内显示 设置宽高 不起作用--> <!-- _self:默认值：在当前网站打开资源，就是在当前页面 _blank:在新的网站打开资源，在新的一个页面 ；title="luffy"是指鼠标移动到这个字体显示的文字 --> <a href="https://www.luffycity.com" target="_blank" title="luffy">路飞学城</a>
<a href="./a.zip">下载压缩包</a> <a href="mailto:zhaoxu@tedu.cn" style="width: 1000px;height: 100px">联系我们</a> <!-- 返回页面顶部的内容 --> <a href="#">跳转到顶部</a> <!-- 返回每个id --> <a href="#p1">跳转顶部的段落标签</a> <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。把a的默认动作取消了 --> <a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a> </div> <div class="lists"> <!-- 无序列表，默认是一行行...; ul和ol、还有li都独占一行，都属于块级标签--> <ul type="none" > <li>我的账户 ></li> <li>我的订单 ></li> <li>我的优惠券 ></li> <li>我的收藏 ></li> <li>退出 ></li> </ul> <!-- ol有序列表，默认阿拉伯数字1234...；style="list-style"是键值对 --> <ol style="list-style: none"> <li>我的账户></li> <li>我的订单></li> <li>我的优惠券></li> <li>我的收藏></li> <li>退出></li> </ol> </div> <div class="image"> <!-- 1.可设宽高 2.在一行内显示 它叫行内块标签--> <img src="./homesmall.png" alt="python的图片" style="width: 200px;height: 200px"> <img src="./homesmall2.png" alt="python2的图片" style="width: 200px;height: 200px"> </div> <!-- html标签有三种： 1.块级元素 独占一行，可设宽高 如果不设置宽度 浏览器的宽度 2.行内元素 在一行内展示 不能设置宽高 它的宽高根据内容去填充 3.行内块元素 在一行内展示 可设宽高 小练习： 展示两张图片 独占一行 鼠标移上去显示小手的状态 --> </body> </html>
常用标签2
表格table标签
表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。th表格头里的单元格（默认加粗并且居中）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 表格标签；有表格头thead、表格主题tbody、表格尾部tfoot等; border是把表格周围的边框设置为1；cellspacing是用来设置单元格间距（表格间距）/cellpadding表格填充 --> <table border="1" cellspacing="0"> <!-- 表格头 --；表每一行；表格头用th加粗居中> <thead> <tr> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!-- 表格主题 --> <tbody> <!-- 表格主体的每一行；rowspan表格单元横跨2行的表格； tr在tbody、thead、tfoot中表示的都是每一行；显示内容tbody中用td，thead中用th，tfoot中用td--> <tr> <td rowspan="3">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> </tbody> <tfoot> <tr> <th colspan="6">课程表</th> </tr> </tfoot> </table> </body> </html>
表单标签form
表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）
表单用于显示、手机信息，并将信息提交给服务器 <form>允许出现表单控件</form>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件</title> </head> <body> <div class="form"> <!-- form标签是一个块级元素（标签） 被提交 --> <form action="https://www.baidu.com" method="get"> <p> <!-- label标签行内元素 input是行内块元素； text是明文，password密文显示输入的数据--> <label for='user'>用户名:</label> <input type="text" name="username" id="user" placeholder="请输入用户名"> <!--可以加value="小马"默认用户名；value是要提交给服务端的数据 --> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="请输入密码"> </p> <!-- 单选框 checked会被默认选中，产生互斥的效果 name值要相同--> <p> 用户性别： <input type="radio" name="sex" value="男" checked="">男 <input type="radio" name="sex" value="女">女 </p> <!-- 复选框 --> <p> 用户的爱好: <input type="checkbox" name="checkfav" value="吃" checked="check">吃 <input type="checkbox" name="checkfav" value="喝">喝 <input type="checkbox" name="checkfav" value="玩">玩 <input type="checkbox" name="checkfav" value="乐">乐 </p> <p> <!-- 文件上传 --> <input type="file" name="textFile"> </p> <p> <!-- 文本域 可以输入多个文字；cols列数、rows行数--> 自我介绍： <textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍"></textarea> </p> <p> <!-- 下拉列表 --> <select name="sel" size="3" multiple=""> <option value="深圳" selected>深圳</option> <option value="北京">北京</option> <option value="沙河">沙河</option> <option value="山东">山东</option> <option value="福建">福建</option> </select> </p> <p> <!-- 显示普通的按钮；button按钮与form表单没有任何关系 ；disabled是禁用的--> <input type="button" name="btn" value="提交" disabled="disabled"> <!-- 重置按钮 恢复默认状况 --> <input type="reset" name=""> <!-- 提交form表单使用 type=submit按钮，负责将表中的表单控件提交给服务端 --> <input type="submit" name="btn" value="submit"> </p> </form> <button type="button">按钮</button> </div> </body> </html>
4、HTML标签分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
常用的块状元素：
<div> <p> <h1>-<h6> <ol> <ul> <table><form> <li>
常用的行内元素
<a> <span> <br> <i> <em> <strong> <label>
常用的行内块状元素：
<img> <input>块级元素特点：display:block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：display:inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签分类</title> </head> <body> <div class="wrapper"> <!-- 块级元素 ：div p h1~h6 ol ul table form li 1.独占一行 2.可以设置宽度和高度，如果设置了宽度和高度，则就是当前的宽高，如果宽度和高度没有设置，宽度是父盒子的宽度，高度根据内容填充 --> <div class="left"> 这是路飞学城的战场 <div>这是我的区域 <!-- <div style="width: 500px;height: 100px">这是我的爱好</div> --> <ul> <li> <h2>抽烟</h2> </li> <li> <ol> <li>喝酒</li> <li>烫头</li> </ol> </li> </ul> </div> </div> <div class="right"> <!-- a span br i em strong label 行内元素：在一行内展示，不能设置宽度和高度，宽度和高度根据内容填充 --> <a href="#" style="width: 200px;height: 100px">百度</a> <a href="#">路飞</a> <span style="width: 100px;height: 200px">一些文本</span> <span>一些文本</span> </div> <div class="inline-block"> <!-- 行内块 : 1.在一行内展示 2.可设置宽高 在下面input这个例子，有个display:inline-block;而行内标签就没有 --> <img src="./homesmall.png" alt="一张图片"> <input type="text" name="username" style="width: 200px;height: 50px"> </div> <!-- 标签嵌套规则 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是h1~h6 p --> </div> </body> </html>
标签嵌套规则
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️
<a href=”#”><span></span></a> ✔️
<span><div></div></span> ❌
块级元素不能放在p标签里面，比如
<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p
li元素可以嵌入ul，ol，div等标签
