03-HTML、CSS

unit 03-HTML、CSS

HTML: 用于开发网页的一门技术

CSS: 用于修饰、渲染网页的一门技术

HTML+CSS可以开发一个非常美观、非常漂亮的网页

开发网页 盖房子

HTML标签搭建网页的结构 砖块(搭建房子的结构)

CSS属性 石灰、油漆等涂料

HTML概述

HTML是什么

HTML(Hyper Text Markup Language): 超文本标记语言

超文本: 超级文本、超过文本（其中可以包含除了文本以外的其他数据，例如图片、音频、视频等各种格式）

标记：也叫标签、元素、节点等，就是用尖括号(<>)括起来的一组内容，例如：

1
<head> <body> <div> <span> <table>等

HTML是最基础的开发网页的语言。

HTML由W3C组织提供(CSS/xml)

关于HTML的细节:

(1)使用HTML开发的网页文件通常以 .htm或.html 为后缀!

(2)使用HTML开发的网页文件由浏览器负责解析并显示（浏览器就是一个html解析器）

(3)HTML是文档的一种(txt/word/ppt/pdf等)

总结: HTML就是用于开发网页的一门语言!!

HTML的结构

1、案例：编写我的第一个HTML网页，并用浏览器打开

新建一个txt文档，将后缀名改为.html，代码实现如下：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
	<head>
		<title>网页的标题</title>
	</head>
	<body>
		Hello CGB1808...
	</body>		
</html>

2、HTML结构详解

1
2
3
4
5
6
(1)<!DOCTYPE HTML> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本
	上面是html5.0的声明, 也是目前最常用的版本
(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3)<body></body> 体部分, 用来存放网页可视化数据. 即真正的网页数据
(4)<title></title> 声明网页的标题
(5)<meta charset="utf-8"/> 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.

HTML语法(了解)

1、html标签

标签：也叫做标记、元素等，标签分为开始标签，例如：

1
<head>、<body>

和结束标签，例如:

1
</head>、</body>

开始标签和结束标签之间还可以包含其他内容。

有些标签开始标签和结束标签之间没有内容要包裹，通常可以写成自闭标签，例如：

1
<meta/> <br/> <hr/> <input/> <img/>等

2、html属性

在标签上可以声明属性(属性不能独立存在,必须声明在标签上)

1
2
<div id="d1" class="c1" style="color:red;">
</div>

标签上可以声明多个属性，多个属性之间用空格分隔

标签上的属性的值可以使用单引号或者双引号引起来

1
2
<meta charset="UTF-8" id="m1"/>
<meta charset='UTF-8' id='m1'/>

3、html注释

格式:

注释的作用: (1)为代码添加解释说明

(2)将一些暂时不需要执行的代码注释

浏览器对于注释中的内容不会解析，也不会显示！

4、html空格和换行

在浏览器中，多个连续的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。那么：

如何在网页中做一个换行：可以使用 <br/> 标签做换行

如何在网页中做一个空格：可以使用&nbsp;或&emsp;做空格

补充: HTML中是不区分大小写的！

HTML中对语法要求非常不严格！（比如大小写混用，或者标签只有开始没有结束，或者标签的不合理嵌套），但是我们在书写HTML时要按照规范来写。

HTML标签

图像标签

通过img标签可以在网页中插入一副图像

1
<img src="imgs/meinv.jpg" width="50%"/>

其中src属性用于指定图片的路径

width属性用于指定图片的宽度

height属性用于指定图片的高度

超链接标签

超链接就是a标签，通过a标签可以在网页中创建指向另外一个文档的超链接

点击超链接可以跳转到另外一个网页(图片/下载路径等)，示例:

1
2
3
4
5
6
7
8
9
<!-- 跳转到本地的一个网页 -->
<a href="01-第一个网页.html">01-第一个网页.html</a>
<!-- 跳转到百度首页 -->
<a href="http://www.baidu.com">百度一下，你就不知道</a>
<br/>
<!-- 点击图片跳转到tmooc -->
<a target="_blank" href="http://www.tmooc.cn">
<img alt="tmooc" src="imgs/tmooc.png" />
</a>

其中 href 属性用于指定点击超链接后将要跳转到的URL地址

target属性用于指定以何种方式打开超链接

_self：默认值, 表示在当前窗口中打开超链接

_blank：表示在新的窗口中打开超链接

表格标签

1.案例：在网页中插入一个3*3的表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<h1>案例：在网页中插入一个3*3的表格</h1>
<table><!-- 用于在网页中定义一个表格 -->
    <tr><!-- 用于定义一个表格行 -->
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>11</td><!-- 用于定义一个单元格 -->
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
    </tr>
</table>

在浏览器中显示效果如下：

image-20200315184602647

image-20200315184602647

在head标签内添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    /* style标签内只能书写css注释和css代码 */
    table{
        border:*2px solid red; /* 为表格添加边框 */
        border-collapse: collapse; /* 设置边框合并 */
        background-color: pink; /* 为表格设置背景颜色 */
        width: 70%; /* 为表格设置宽度 */
        /* margin-left: 15%; */
        /* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
        margin-left: auto;
        margin-right: auto;
    }
    td,th{
        border:2px solid red; /* 为单元格添加边框 */
        border-collapse: *collapse*; /* 设置边框合并 */
        padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
    }
    h1{
        /* border: 2px solid blue; */
        text-align: *center*; /* 设置元素中的内容水平居中 */
    }
</style>

再次刷新浏览器显示效果为：

1ddd002a483c10386ecb086b0a9d3cc3

1ddd002a483c10386ecb086b0a9d3cc3

2、表格标签介绍

1
2
3
4
table -- 用于在网页中定义一个表格
tr -- 用于定义表格中的行
td -- 用于定义表格中的单元格
th -- 用于定义表头行中的单元格（th中的文本默认居中，并且加粗）

3、练习：使用表格标签在网页中生成一个表格，如下图：

要求如下:

1
2
3
4
(1) 表格内容如下图, 并设置表格边框
(2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px
(3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%
(4) 设置表格在网页中居中显示, 并为表格添加表头以及标题

9c1b6d984a6bbc1686b06afbe3f7c9eb

9c1b6d984a6bbc1686b06afbe3f7c9eb

表单标签

1、表单的作用: 用于向服务器提交数据

向服务器提交数据的两种方式：

(1)通过表单向服务器提交数据

7ce4e5ec4aad8a37b48b07bf89e1fc81

7ce4e5ec4aad8a37b48b07bf89e1fc81

表单中可以包含表单项标签，在表单项中可以填写数据（比如用户名、密码等），填写完成后通过提交表单，可以将表单中的数据提交给相应的服务器。

(2)通过超链接向服务器提交数据

1
http://www.baidu.com?username=张三&pwd=123&like=篮球

在地址栏URL地址的后面通过问号(?)可以拼接参数，参数可以有多个，多个参数之间用&分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如:张三/123/篮球)，在回车后访问百度服务器的同时，就可以将问号后面拼接的参数一并带给百度服务器。

2、表单标签

1
2
<form action="地址" method="提交方式">
</form>

其中action属性用于**指定表单的提交地址，**例如，将action指向百度服务器，就意味着将来填写完表单后，提交表单将会把表单中的数据提交给百度服务器。

method=”GET/POST” 属性是用于指定表单的提交方式，常用的就是GET和POST提交。

表单项标签

1、input元素：

(1)普通文本输入框(比如:用户名/昵称/邮箱/验证码等)

1
<input type="text" name="username"/>

(2)密码输入框(比如:密码/确认密码等)

1
<input type="password" name="pwd"/>

(3)单选框(比如:性别/部门等)

1
<input type="radio" name="gender"/>男

(4)复选框/多选框(比如:爱好/岗位等)

1
<input type="checkbox" name="like"/>

(5)普通按钮(比如:换一张图片)

1
<input type="button" value="换一张"/>

普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为

(6)提交按钮(比如:提交/注册/登录)

1
<input type="submit" value="提交/注册/登录"/>

提交按钮用于提交表单中的数据到服务器中!

2、select、option标签：

1
2
3
4
5
6
<select name=*"city"*>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option selected="selected">广州</option>
    <option>深圳</option>
</select>

select用于定义一个下拉选框

option用于定义下拉选框上的选项

selected设置当前option选项默认被选中

3、textarea多行文本输入区域：

1
2
<textarea name=*"description"* cols=*"30"* rows=*"5"*
placeholder=*"请输入描述信息..."*></textarea>

cols属性: 用于设置文本输入框的列数(宽度)

rows属性: 用于设置文本输入框的行数(高度)

placeholder属性: 设置输入框中的提示消息!

表单细节问题

1、提交表单时，表单中的数据为什么没有被提交？

对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会别忽略。例如：

1
2
<input type="text" name="username"/>
<input type="password" name="pwd"/>

2、如何让多个单选框只能有一个被选中？

要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！

1
2
3
4
5
<td>性别:</td>
<td>
    <input type="radio" name="gender"/>男
    <input type="radio" name="gender"/>女
</td>

3、为什么单选框、复选框选择某一项后提交的值都是on?

因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。

因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)，例如：

1
2
<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女

4、如何设置单选框或复选框默认选中某一项?

可以在单选框或复选框标签上添加一个checked=”checked”属性，就可以让当前单选框或复选框默认被选中。例如：

1
2
3
4
5
6
<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球

5、如何设置下拉选框默认选中某一项?

在option标签上添加一个selected=”selected”属性，可以让当前option选项默认被选中，例：

1
2
3
4
5
6
<select name=*"city"*>
    <option>北京</option>
    <option>上海</option>
    <option selected="selected">广州</option>
    <option>深圳</option>
</select>

6、下拉选框中option选项上的value属性的作用是什么？

1
2
3
4
5
6
<select name="city">
	<option value="beijing">北京</option>
	<option value="shanghai">上海</option>
	<option selected="selected">广州</option>
	<option>深圳</option>
</select>

如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。

如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容

注册表单案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* style标签内只能书写css注释和css代码 */
table {
	border: 2px solid red; /* 为表格添加边框 */
	border-collapse: collapse; /* 设置边框合并 */
	background-color: lightgrey; /* 为表格设置背景颜色 */
	/* margin-left: 15%; */
	/* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
	margin-left: auto;
	margin-right: auto;
}

td, th {
	border: 2px solid red; /* 为单元格添加边框 */
	border-collapse: collapse; /* 设置边框合并 */
	padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}

h1 {
	/* border: 2px solid blue; */
	text-align: center; /* 设置元素中的内容水平居中 */
}
</style>
</head>
<body>
	<h1>欢迎注册</h1>
	<form action="#">
		<table>
			<tr>
				<!-- 用户名输入框 -->
				<td>用户名:</td>
				<td><input type="text" name="username" /></td>
			</tr>
			<tr>
				<!-- 密码输入框 -->
				<td>密码:</td>
				<td><input type="password" name="pwd" /></td>
			</tr>
			<tr>
				<!-- 性别单选框 -->
				<td>性别:</td>
				<td><input type="radio" checked="checked" name="gender"
					value="male" />男 <input type="radio" name="gender" value="female" />女
				</td>
			</tr>
			<tr>
				<!-- 爱好复选框/多选框 -->
				<td>爱好:</td>
				<td><input type="checkbox" name="like" value="basketball" />篮球
					<input type="checkbox" checked="checked" name="like"
					value="football" />足球 <input type="checkbox" name="like"
					value="volleyball" />排球</td>
			</tr>
			<tr>
				<!-- 城市下拉选框 -->
				<td>城市:</td>
				<td><select name="city">
						<option value="beijing">北京</option>
						<option value="shanghai">上海</option>
						<option selected="selected">广州</option>
						<option>深圳</option>
				</select></td>
			</tr>
			<tr>
				<!-- 自我描述 多行文本输入框 -->
				<td>自我描述:</td>
				<td><textarea name="description" cols="30" rows="5"
						placeholder="请输入描述信息..."></textarea></td>
			</tr>
			<tr>
				<!-- 提交按钮 -->
				<!-- colspan: 设置单元格横跨的列数 -->
				<td colspan="2" style="text-align: center;"><input
					type="submit" value="提交" /></td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS概述

什么是CSS？(了解)

CSS: 层叠样式表，用于修饰、渲染网页的一门技术

使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！

在HTML中引入CSS

方式1：通过style属性引入css（不推荐）

1
2
3
4
5
6
7
<!-- 
	1.通过标签上的style属性给div设置样式 
	边框:2px solid red 
	字体大小:26px
	背景颜色为:pink
-->
<div style="border:2px solid red;font-size:26px;background:pink;">这是一个div...</div>

由于上面这种方式是将css属性代码，直接写在标签上的style属性内部，如果属性太多，容易造成页面结构的混乱，不利于后期的维护。

并且将样式代码写在标签上，样式代码只对当前标签生效，代码无法复用！

因此不推荐使用这种方式！（这种通过style属性添加的样式，叫做行内样式/内联样式）

方式2：通过style标签引入css

在head标签内部可以添加一个style标签，在style标签内部可以直接书写css样式

这种方式是将所有的css属性代码集中在一个style标签内部统一管理，这种方式不会造成页面结构的混乱，并且可以实现代码的复用！

代码示例 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 2.通过style标签给span设置样式如下： 
	边框: 2px solid green
	字体大小: 30px
	字体加粗
-->
<head>
<meta charset="utf-8" />
<style type="text/css">
	/* ****** CSS样式 ****** */
	span{ /* 为当前html中的所有span标签设置样式 */
		border:2px solid green;
		font-size:30px;
		font-weight:bolder; /* bold/bolder */
	}
</style>
</head>

方式3：通过link链接引入外部的css文件

在head标签内部，通过一个link标签可以引入外部的CSS文件

这种方式是将所有的css代码集中在一个单独的css文件中统一管理，真正的实现了将css代码和html代码的分离，实现了代码的复用。

代码示例：html中引入demo.css文件

1
2
3
4
5
6
7
8
<!-- 3.通过link标签引入外部的css文件，为p元素设置样式如下： 
	边框: 2px solid blue;
	字体颜色:red
	字体设置为华文琥珀
	设置首行文本缩进50px
-->
<!-- 引入demo.css文件(中的样式) -->
<link rel="stylesheet"  href="demo.css"  />

demo.css文件

1
2
3
4
5
6
7
@charset "UTF-8";
p{
	border: 2px solid blue;
	color: red;
	font-family: 华文琥珀;
	text-indent: 50px;
}

CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。

标签名选择器

通过元素名称(或标签名称)选中指定名称的所有标签

格式: 元素名/标签名{ css样式… }

1
2
3
4
5
6
7
/* ----- 1.标签名选择器练习 ----- 
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{ /* 选中所有的span元素 */
	background-color:#efbdef; 
	font-size: 22px;
	font-weight: bolder;
}

class选择器

可以为元素添加一个通用的属性 – class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。

格式：.class值{ css样式… }

实例:

1
2
3
4
5
6
7
8
9
10
11
12
/* ----- 2.类选择器练习 ----- 
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e；*/
.s1{ /* 选中所有class值为s1的元素 */
	background: #faf77b;
	border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */
	background: #5eff1e;
	color: #ec0e7e;
}

另外，一个元素也可以设置多个class值，多个class值中间用空格分隔，例如：

1
<span class="s1 s2" >span111</span>

表示当前元素同时属于多个分组，多个分组上设置的样式也会同时作用在当前元素上。

如果多个分组设置了相同的样式（但是值不一样），样式会发生冲突，写在后面的样式会覆盖前面的样式！

id选择器

通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。

格式：#id值{ css样式 }

1
2
3
4
5
6
7
/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
#p1{ /* 选中id值为p1的元素 */
	font-size:24px;
	color: #a06649;
	text-indent: 20px;
}

后代选择器

选中指定元素内部的指定后代元素

格式: 祖先 后代{ css样式… }

1
2
3
4
5
6
7
8
/* ----- 4.后代选择器练习 ----- 
为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{ /* 匹配所有p元素内部的所有span元素 */
	font-size:18px;
	color: red;
	background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */

属性选择器

在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素

格式：选择器[属性条件]…{ css样式 }

1
2
3
4
5
6
7
8
9
10
11
/* ----- 5.属性选择器 ----- 
为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
input[type='text']{ /* 匹配所有的input并且type值为text的元素 */
	background: #FF7CCC;
	font-size: 22px;
	text-indent: 15px;
}
input[type='text'][name='email']{ 
	/* 选中所有的input并且type值为text、并且name为email的元素 */
	background : yellow;
}

常用属性总结

文本属性

1、text-align：设置元素中文本水平对齐方式，其常用取值为:

1
2
3
4
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2、text-decoration：设置文本的下划线样式，其常用取值为:

1
2
underline: 有下划线
none: 没有下划线

3、text-indent：设置文本首行缩进，单位: 像素/百分比

4、letter-spacing：设置字符间隔/间距，其常用取值为:

1
2
normal
像素值

5、text-shadow：设置字体阴影，其取值为:

1
2
像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色

字体属性

font-size：设置字体大小

font-weight：设置字体粗细 bold、bolder、normal 100/200/300../900

font-family：设置字体，比如微软雅黑、黑体、楷体等

color：设置字体颜色

背景属性

background-color：设置背景颜色

background-image：设置背景图片，url(‘图片的路径’);

background-repeat：设置或检索对象的背景图像是否及如何铺排，常用取值：

1
2
3
4
repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)

background-position：设置或检索对象的背景图像位置

background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置

边框（border）

border:2px solid red; – 设置元素的边框(可以同时设置边框的宽度、样式、颜色)

border属性可以拆分为如下设置:

1
2
3
border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色

其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：

1
2
3
4
border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

其他属性

width：设置元素的宽度

height：设置元素的高

补充: 颜色设置

颜色取值方式常见的方式有三种:

方式一：设置颜色名，例如：

1
red、green、blue、yellow、cyan、pink、white、black等

方式二：设置#加上六位的十六进制数值

1
#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等

方式三：设置rgb颜色值

1
2
rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
（red） （green） （blue） （yellow） （cyan）

网页开发实战

完成JT项目中的注册页面!(课下一定要自己独立完成!)

完成JT项目中的登录页面!(选作!)

扩展内容

display属性

display用来设置元素的类型，常用取值：

1
2
3
4
5
6
7
8
9
block：块级元素的默认值
    默认情况下独占一行
    可以设置宽高
inline：行内元素的默认值
    默认情况下多个行内元素可以处在同一行
    一般不能设置宽高
inline-block：行内块元素
    多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素

元素类型(了解)

div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）

p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）

div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。

span：行内元素，默认可以和其他元素显示在同一行。

(1)块级元素（block）

默认情况下，块级元素独占一行

可以设置宽和高，如果设置了就是设置的宽和高

如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)

比如: div/p/h1~h6/form/table 等元素都是块级元素

(2)行内元素（inline）

默认情况下，多个行内元素可以处在同一行

不能设置宽和高

比如: span/input/img/i/b 等元素都是行内元素

(3)行内块元素（inline-block）

既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)

html javaweb css