<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>元素显示模式</title>
<style>
/* 什么是元素显示模式
作用:网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素以什么样的方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型 */
/* 2.2.1块元素 */
/* 常见的块元素有h1~h6,p,div,ul,ol,li 其中div标签是最典型的块元素
块元素的特点1.比较霸道，独自占一行
2.高度，宽度，外边距以及内边距都可以控制
3，宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或者块元素 */
/* 注意点
1.文字类的元素不能使用块元素
2.p标签主要用于存放文字，因此p标签里面不能放块元素，特别是不能放div
3.h1~h6等都是文字类块级标签，里面不能放其他块级元素 */
div {
width: 200px;
height: 200px;
background-color: yellow;
}
/* 2.2.2行内元素 */
/* 常见的行内元素有a，strong，b，em，i，del，s，ins，u，span等
span标签是最典型的行内元素，有的地方也将行内元素称为内联元素。 */
/* 行内元素的特点1.相邻行内元素再一行上，一行可以显示多花个
2.高，宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素 */
/* 注意1.链接里面不能再放链接
2.特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全 */
span {
/* 改的宽度和高度是不是没有用运行一下试试看 */
width: 500px;
height: 500px;
background-color: red;
}
/* 行 内 块 元素*/
/* 再行内元素中有几个特殊的标签，img，input，td 它们同时具有块元素和行内元素的特点
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2.默认宽度就是它本身内容的宽度（这是上面讲的行内元素的特点）
3.高度，行高，外边距以及内边距都可以控制（这是上面讲的块级元素的特点吧） */
</style>
</head>
<body>
<div>呀呵，你整挺霸道啊</div>
<h5>我不服</h5>
<!-- 下面一个错误示例 -->
<p>
<div>呀呵，竟然错了</div>
</p>
<span>小王你怎么穿着品如的衣服呢</span><strong>品如的衣服</strong>
<span>小王</span><strong>品如的衣服</strong><br>
<inputtype="text">
<inputtype="text">
</body>
</html>
