day02_html&css

今日内容介绍

使用html的表单标签编写“注册页面”

今日内容学习目标

能够使用等标签编写注册表单(掌握)

熟悉的CSS样式的3种导入方式

熟悉CSS选择器的使用(理解)

了解CSS基本属性使用

了解CSS盒子模型

今日学习标签总览

今天讲学习表单标签，提供总览方便大家更好的吸收。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Jd156LH-1577025729272)(img/1.bmp)]

1、网站用户注册页面显示

1.1、案例介绍

所有的html标签中，表单标签是最重要的。在实际开发中，最经典的实例就是用户注册，涵盖了表单标签的所有的元素。效果图如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ifZAiJq9-1577025729273)(img/2.bmp)]

当然，大家现在还不知道怎么来完成这个案例，因为这个案例中需要使用很多HTML中的标签。

关于form表单涉及的标签具体的解释大概如下，先了解，我们都会一一进行详细讲解：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bscFSI1t-1577025729273)(img/3.bmp)]

1.2、相关知识点

本案例中使用的标签如下：

表示表单，单独存在没有任何意义。可以理解为父标签。

2)表示输入域。属于form标签的子标签

下拉菜单选择域，比如选择哪个省份和城市时用的就是下拉菜单。属于form标签的子标签
文本域，一般都是用来描述书写文字比较多的文本域，例如商品描述等。属于form标签的子标签

1.2.1、表单相关的标签 (掌握)

1.2.1.1、表单标签：<form>

表单标签的主要功能：它是 把表单中的数据提交给远端的服务器。

<form> 表单标签，在html页面创建一个表单，表单标签在浏览器上没有任何显示。如果数据需要提交到服务器，负责搜集数据的标签必须存放在表单标签体内。

1、action属性：在这个属性中书写请求服务器的路径，确定表单提交到服务器的地址（路径）。

2、method属性：请求方式。常用的取值：GET、POST。

1）GET：默认值

GET请求方式的路径如下所示：

https://www.baidu.com/register.html?username=zhangsan&password=123

a:如果method的属性值什么都不书写，默认就是GET请求方式。

b:提交的数据追加在请求路径上。例如：/1.html?username=suoge&password=1234&age=18，数据格式k/v，追加是使用 ? 连接，之后每一对数据使用&进行连接。

c:由于GET请求会将传递到服务器的数据写在请求路径后面，这样可以显示到浏览器的地址栏中，所以这样会导致数据不安全。使用时要谨慎。

2)POST：

a:提交的数据不在请求路径上追加（即不显示在地址栏上）。

b:提交的数据不显示，所以数据相对get请求来说更安全。

c:开发中一般建议使用post请求，但是随着电商网站越来越多，get请求使用也相对较多。

问题：那么既然get请求方式不安全，那什么情况下使用get？

举例：

例如我们去淘宝买商品，自己不知道商品怎样，想让别人帮忙参考下，此时，我们需要将该商品的的地址栏信息复制分享给好友。但是post请求就不能做分享。

商品地址栏：

https://detail.tmall.com/item.htm?spm=a221t.1476805.6299412507.53.1cac6769bnkEWw&id=564169238856&scm=1003.1.03175.ITEM_564169238856_114332&acm=03175.1003.1.114332&uuid=G5QKWXbU&pos=7&crid=37

以上就是淘宝商品的某一个连接，使用的就是get请求，也就是说get请求可以做这种商品的分享。而post请求还做不到。

具体的表单如下所示：

<body>
	<!--表单-->
	<form action="#" method="post">
		<!--此处的内容可能被提交到服务器-->
	</form>
	<!--此处的内容在<form>标签外部，此处数据不能提交到服务器-->
</body>
ps: action：没有地址可以写一个#，代表当前页，或者不写

1.2.1.2、输入域标签：<input/>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C8YoGd3I-1577025729274)(img/4.bmp)]

1、标签用于获得用户输入信息，type属性值不同，搜集方式不同。最常用的标签。

1）type属性

a:text：文本框，单行的输入字段，用户可在其中输入文本。如果在input标签中不写type，那么默认就是text。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-attQFaGM-1577025729274)(img/5.bmp)]

代码：

用户名<input type="text"/><br/>

b:password：密码框，密码字段。该字段中的字符以黑圆显示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Whl7Vo1z-1577025729275)(img/6.bmp)]

代码：

密码<input type="password"/><br/>

c:radio：单选按钮，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YjxZ7QRf-1577025729276)(img/7.bmp)]

性别
<input type="radio"  name="sex"/>男
<input type="radio"  name="sex"/>女

d:checkbox：复选框,从若干给定的选择中选取一个或者若干个选项。主要让用户选择数据。一般网站让用户选择爱好时，使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WpaLvcXd-1577025729277)(img/8.bmp)]

代码:

<input type="checkbox"/>I have a bike
<input type="checkbox"/>I have a car

e:file：文件上传组件,提供"浏览"按下可以选择需要上传文件.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0xROrF5q-1577025729277)(img/9.bmp)]

代码:

<input type="file"/><br/>

f:hidden：页面上的隐藏域，隐藏字段. 数据会发送给服务器，但浏览器不进行显示。页面看不见，一般在开发中向后台服务器传递id时使用。

<input type="hidden" value="id" name="id"/><br/>

g:reset：重置按钮。将表单恢复到默认值。重置页面上的所有输入项，恢复默认状态。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tNzgfsp3-1577025729278)(img/10.bmp)]

<input type="reset"/><br/>

h:image：图形提交按钮，通过src给按钮设置图片。它是在页面上嵌入一个图片。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xmitTQUz-1577025729279)(img/11.bmp)]

<input type="image" src="img/banner_1.jpg"/><br/>

i:button：普通按钮，显示一个按钮，但点击没有任何效果，常用于与JavaScript结合使用。按钮上的内容需要使用value属性书写。

使用格式：

<input type="button" value="内容"/>

j:submit：提交按钮。提交按钮把当前form标签中的所有输入项中的数据提交给服务器。一般不写name属性，否则将value的值提交到服务器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m7dwbOij-1577025729279)(img/12.bmp)]

使用格式：

<input type="submit" value=”内容”/>

以下是input标签的其他属性：

2)name：属性名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过name属性值获得提交的数据。

注意：这里的name的属性值必须和后台服务器中的Javabean中的成员变量名一致，否则接收不到数据。

使用方式举例：

。

那么在Javabean中的接收年龄的成员变量名也必须是age.这样才可以接收到18这个值。

3)value属性：设置input标签的默认值。submit、reset和button为按钮显示数据

4)size：输入框大小。

5)checked属性：单选框或复选框被选中。使用方式：<input type=“checkbox” checked=“checked”/>。

6)readonly：是否只读

由于这里添加了 readonly="readonly"属性，所以文本框只能读，不能修改

7)disabled：是否可用

<input type=“checkbox” name=“hobby” checked=“checked” disabled=“disabled”/>足球

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8owgVJYK-1577025729280)(img/13.bmp)]

由于给上述标签添加了disabled=“disabled” 所以文本框不能被操作了。

8)maxlength：允许输入的最大长度

语法结构：

<input type=”text” name=”username” />

1.2.1.3、下拉列表标签：<select>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HEW7Tg3O-1577025729281)(img/14.bmp)]

1、下拉列表。可以进行单选或多选。需要使用子标签指定列表项

1）name属性：发送给服务器的名称。服务器通过name属性名获取值。

2）子标签：下拉列表中的一个选项（一个条目）。

a:selected ：勾选当前列表项

b:value ：发送给服务器的选项值。

语法结构：

<select name="city">
        <option value="">-请选择-</option>
        <option value="sh">上海</option>
        <option value="bj" selected="selected">北京</option>
</select>

ps: 一般option需要给value这个属性，如果不给，默认会把option的文本内容发送给服务器.

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rDddKX77-1577025729282)(img/15.bmp)]

3)multiple属性：如果不写默认是单选，取值为“multiple”表示多选。很少用

<select name="city" multiple="multiple">
        <option value="">-请选择-</option>
        <option value="sh">上海</option>
        <option value="bj">北京</option>
</select>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yDSJ4E65-1577025729282)(img/16.bmp)]

4)size属性：可见选项的数目。例如下面只显示2个，那么书写size=2即可。很少用

代码：

<select name="city" size="2">
        <option value="">-请选择-</option>
        <option value="sh">上海</option>
        <option value="bj">北京</option>
        <option value="bj">北京</option>
        <option value="bj">北京</option>
        <option value="bj">北京</option>
</select>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dKf0wICt-1577025729283)(img/17.bmp)]

1.2.1.4、文本域标签：<textarea>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V7MBws5A-1577025729283)(img/18.bmp)]

1、文本域。多行的文本输入控件。

1）cols属性：文本域的列数。

2）rows属性：文本域的行数。

语法结构：

<textarea cols=”50” rows=”3”></textarea>

上述表示50列，3行的文本域。虽然表示50列3行，但是文本域也可以拖动大小的。

1.2.1.5、按钮标签：<button> （了解）

按钮标签一般很少使用，提供“普通|重置|提交”功能。

显示一个按钮，但点击没有任何效果，需要结合后面学习的js一起使用。按钮上的内容需要使用文本来书写。

写value无效(input是写value)

<button type="submit" value="提交">哈哈</button>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NOGolyAa-1577025729285)(img/19.bmp)]

1.3、案例分析

通过观察案例的注册页面，我们发现页面非常工整，所以为了结构更好的显示表单，本案例我们需要使用table表格布局。既然这里使用table表格，那么我们必须指定表格的行、列。一共有10行，然后根据“验证码”我们需要提供3列来显示数据。最终需要创建10*3表格。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tZqcmhM3-1577025729286)(img/20.bmp)]

1.4、案例代码实现

分析：

先书写一个form表单，在form表单中书写table表格，通过分析需要书写10行3列；
标题会员注册一行,跨3列，使用td的属性colspan，设置为3，使用font标签设置字体颜色；
用户名，文本框即输入内容的列跨2列，使用td的属性colspan，设置为2。使用input标签的属性placeholder来设置input标签的默认名字，文本框大小是30；
密码、确认密码、Email和姓名都是第三步一样；
性别，input标签类型是radio,并设置女的input标签为checked=“checked”;
出生日期也和第三步一样；
验证码第2列设置文本框大小是15，第3列引入图片img/checkcode.jpg;
注册按钮的第2列添加一个submit按钮；

具体的代码实现如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
	</head>
	<body>
		<!--书写form表单-->
		<form action="#" method="post">
			<!--书写table表格，通过分析需要书写10行3列-->
			<table>
				<!--标题 一行,跨3列-->
				<tr>
					<td colspan="3">
                     <!--&nbsp;表示空格-->
						<font color="blue">会员注册</font>&nbsp;USER REGISTER
					</td>
				</tr>
				<!--用户名-->
				<tr>
					<td>用户名</td>
					<td colspan="2">
                         <!--placeholder="请输入用户名"  表示输入框中默认就显示 请输入用户名 的字-->
						<input type="text" name="username" size="30" placeholder="请输入用户名"/>
					</td>
				</tr>
				<tr>
					<td>密码</td>
					<td colspan="2">
						<input type="password" name="password" size="30" placeholder="请输入密码"/>
					</td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td colspan="2">
						<input type="password" name="repassword" size="30" placeholder="请输入确认密码"/>
					</td>
				</tr>
				<tr>
					<td>Email</td>
					<td colspan="2">
						<input type="text" name="email" size="30" placeholder="Email" />
					</td>
				</tr>
				<tr>
					<td>姓名</td>
					<td colspan="2">
						<input type="text" name="realname" size="30" placeholder="请输入姓名" />
					</td>
				</tr>
				<tr>
					<td>性别</td>
					<td colspan="2">
						<input type="radio" name="sex" value="男"/>男
						<input type="radio" name="sex" checked="checked" value="女"/>女
					</td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td colspan="2">
						<input type="text" name="birthday" size="30" placeholder="请输入出生日期"/>
					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text" name="checkCode" size="15" />
					</td>
					<td>
						<img src="img/checkcode.jpg"/>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<!--<img src="img/btn.jpg" />-->
						<input type="submit"  value="注册" />
					</td>
					<td></td>
				</tr>
			</table>
			
		</form>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d0EYmltT-1577025729286)(img/21.bmp)]

1.5、 HTML5中新增的type类型

注：不同的浏览器支持上有差异，有些浏览器依然不支持

值	描述
color	定义拾色器
date	定义日期字段（带有 calendar 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分（带有 time 控件）
email	定义用于 e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能
number	定义带有 spinner 控件的数字字段，该文本框只能输入数字，可以对输入的数字进行加1和减1
search	定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。

代码演示如下：

分析：定义一个form表单，然后在form表单中演示上述type类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#">
    拾色器：
    <input type="color" name="color"><br/>
    日期：
    <input type="date"><br/>
    月份：
    <input type="month"/><br/>
    邮箱：
    <input type="email"/><br/>
    数字：
    <input type="number"/><br/>
    搜索：
    <input type="search"/><br/>
    <input type="submit">
</form>
</body>
</html>

效果如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ArOvNw4d-1577025729287)(img/22.bmp)]

2、其它标签div & span(掌握)

div、span标签它们仅仅是用来封装数据，而对数据不做任何的样式效果的设置。本身并没有实际意义。必须借助于我们马上学习的css才能够显示出页面样式效果。

2.1、什么是div

div就是html一个普通标签，进行区域划分。特性：独自占一行。独自不能实现复杂效果。必须结合CSS样式进行渲染。

div属于块级元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5hF4deUG-1577025729287)(img/23.bmp)]

实际开发中：使用div + css用来对页面进行布局和划分。

2.2、什么是span

span 就是html一个普通的标签，也叫行内标签。**特性：共处一行。**用来对行内元素进行美化。span标签不是块级标签，可以和其在同一行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sDgLZDdA-1577025729287)(img/24.bmp)]

实际开发中：使用span + css用来对数据即字体进行样式的修饰。而很少在使用font。

总结：

1）div、span标签它们仅仅是用来封装数据，而对数据不做任何的样式效果的设置。

2）早期的html标签，它既可以封装数据，同时通过标签的属性可以对封装的数据进行样式效果的设置。

出现div和span标签的目的是主要让html标签从负责数据的封装和样式进行分离。

3）后期网页设计中，我们主要使用div和span，以及html中的其他标签完成页面上要显示的数据的封装，

而不再使用html标签的属性来控制页面上数据的样式，把样式交给了新的技术CSS。

4）其实div和span标签在页面上的重点不仅是封装数据，并且还可以对页面进行划分和布局。

2.3、代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>其他标签</title>
	</head>
	<body>
		<!--
			div:属于块级标签，用来作为区域划分的。本身没有实际意义
			特点：独占一行
		-->
		我是div
		<div>我是div1</div>
		<div>我是div2</div>
		<!--
			span标签：用来对数据即字体进行美化的，本身没有任何意义
			特点：可以共处一行
		-->
		我是span
		<span>我是span1</span>
		<span>我是span2</span>
		
		<!--
			div标签和p标签有什么区别？
			p标签属于段落标签，每个段落之间含有空白即留白
			而div标签用来做区域划分的，没有留白
		-->
		我是p
		<p>我是p1</p>
		<p>我是p2</p>
	</body>
</html>

说明：

1）div:属于块级标签，用来作为区域划分的。本身没有实际意义。特点：独占一行

2）span标签：用来对数据即字体进行美化的，本身没有任何意义。特点：可以共处一行

3）div标签和p标签有什么区别？

p标签属于段落标签，每个段落之间含有空白即留白。

而div标签用来做区域划分的，没有留白。

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xxQC06Zg-1577025729288)(img/25.bmp)]

3、使用CSS优化网站注册页面

3.1、 CSS概述

3.1.1、 CSS是什么

CSS 通常称为CSS样式或层叠样式表，又称之为网页的美容师，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。

CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UdmGPhEy-1577025729288)(img/26.bmp)]

3.1.2、 CSS名词解释

CSS (Cascading Style Sheets) ：指层叠样式表

样式：给HTML标签添加需要显示的效果。

层叠：使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。

举例：给同一个标签table添加高度、宽度和背景颜色等。

3.2、怎么书写CSS

一般标签都可以添加一个style属性来书写样式给标签添加一些特殊效果。

CSS使用的基本语法：

<标签名 style="样式名1 : 样式值1；样式名2 : 样式值2；…" ></标签名>

注意点：

1、样式名和样式值之间通过：来隔开。

2、多个样式之间使用 ; 隔开。

3、一般复合样式 (border, font…) 值是多个，而多个值使用空格隔开。例如： border : 1px solid #000；说明：px表示像素，是一种单位。

补充: 样式非常多，具体的样式名和样式值需要在api中去查询。在今天课程的最后我们会介绍一些常见的css样式。

需求：书写div，要求设置：字体为黄色，字体大小100px，边框为 1px 实线边框颜色为红色。

分析：需要使用到的样式：

1)color 设置字体的颜色

2)font-size 设置字体的大小

3)border 设置边框 border:border-width border-style border-color; 分别用来修饰边框的粗细，边框的样式，边框的颜色。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			需求：书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px  实线 边框颜色为红色。
			分析：
			字体颜色：color
			字体大小：font-size
			边框：border：border-width border-style border-color
			注意：这里的像素单位px不能省略，省略，效果就不会出现了。border: 1px solid red;
		-->
		<!--<div style="color:yellow;font-size: 100px;border-width: 1px;border-style: solid;border-color: red;">-->
		<div style="color:yellow;font-size: 100px;border: 1px solid red;">
			我是div
		</div>
	</body>
</html>

注意：上述像素px不能省略，省略就不会出现效果了。

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EIV7F4WT-1577025729289)(img/27.bmp)]

3.3、 CSS和HTML结合的方式

上面我们学会了书写css样式的基本语法，而要知道我们的html页面只能书写html标签。那么css可不可以写到html文件中呢？如果可以，那么css可以写在html文件中的什么地方？如果不写在html文件中，我能在当前html文件使用这些css样式么？而我们接下来要做的就是对于这些问题的解决。也就是学习css样式和我们html文件的结合方式。

3.3.1、方式一：使用HTML标签的style属性（行内）

第一种方式：我们在上面的练习中已经用过了，就是通过标签中使用style属性，在style属性中写css样式。

思考一个问题：我们要知道实际开发中，一个页面中有很多div标签，那么基于这样一个情况，如果说有500个标签都是用如上同样的样式。当我们需要统一修改所有标签的文字颜色为黄色的话，那么需要一个一个的去改，这样是非常麻烦的，不利于后期的维护。

缺点：

1、html代码和css代码耦合在一起,样式过多后，难以维护；

2、冗余代码过多；

3.3.2、方式二：在head标签使用style标签设置（内部）

语法格式：

<head>
<style type=”text/css”>
标签名称 ｛
样式名1：样式值1；
样式名2：样式值2；
｝
</style>
</head>

注意：

1）上述格式为固定格式，书写在head标签中；

2）使用style标签进行设置，type=”text/css”可以省略。

<style type=”text/css”>存放css内容</style >

表示这是层叠样式表,在中间放入css内容。type是它的类型属性，text/css是它的值，表示文本/css,即css文本。表示的是浏览器的解析方式，如果不定义的话，有些CSS效果，不同的浏览器解析的不一样。建议书写type属性。

需求：新建一个html页面，在这个页面中书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px 实线边框颜色为蓝色。

分析：

背景颜色使用background-color属性名表示。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>方式二：内部引入css样式</title>
		<style type="text/css">
			div{
				color:red;
				font-size: 100px;
				background-color: yellow;
				border:1px solid blue;
			}
		</style>
	</head>
	<body>
		<!--
			需求：新建一个html页面，在这个页面中书写多个div，设置样式为: 字体为红色，
			字体大小为100px, 背景色为黄色，边框为 1px  实线 边框颜色为蓝色。
		-->
		<!--方式二：在head标签中使用css-->
		<div>我是div</div>
		<div>我是div1</div>
		<div>我是div2</div>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tsHL5hW9-1577025729290)(img/28.bmp)]

注意：可以发现，通过使用style标签的方式，当前页面如果要修改所有标签的样式的时候，那么只需要修改一处就行了。这样是比较方便的。

但是问题是：我们实际开发中有很多html页面。当项目中所有的html文件都需要使用这个页面中的样式的时候，这时，需要在每个html页面中拷贝一份相同的代码。而且，如果后期需要修改样式，需要每一个html文件都去修改。这样是非常麻烦的。

方式二缺点：

代码的复用性低，无法实现多个页面的复用。

3.3.3、方式三：在head标签中使用link标签（外部）(掌握)

语法格式：

<link rel="stylesheet" type="text/css" href="css文件路径" />

注意：

1）rel="stylesheet"表示调用的是一种样式。告诉浏览器这里将采用一个样式表文件。简单来说就是告诉浏览器将采用什么样式来对下面的内容进行处理。**rel=“stylesheet” **不能省略。

2） href=“css文件路径” 表示引入的外部css文件的路径。

需求：书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px 实线边框颜色为蓝色。

步骤一：首先创建一个css文件。选中css样式文件夹，鼠标右击 New–》Stylesheet。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RORYX4LY-1577025729290)(img/52.bmp)]

创建css文件,取名为demo.css

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z5Jw4TMt-1577025729291)(img/53.bmp)]

步骤二：然后将上面案例中的css样式拷贝到css文件中：

说明：由于直接将样式放入到css文件中，所以这里不需要在css文件中书写：
<style type="text/css"></style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QXJCQ8r6-1577025729291)(img/54.bmp)]

步骤三：在html文件中引入css文件的代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>方式四：使用link从外部引入css文件</title>
		<link rel="stylesheet" type="text/css" href="demo.css"/>
	</head>
	<body>
		<!--
			需求：新建一个html页面，在这个页面中书写多个div，设置样式为: 字体为红色，
			字体大小为100px, 背景色为黄色，边框为 1px  实线 边框颜色为蓝色。
		-->
		<!--方式四：使用link从外部引入css文件-->
		<div>我是div</div>
		<div>我是div1</div>
		<div>我是div2</div>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W3dYvktZ-1577025729291)(img/29.bmp)]

3.4、 CSS选择器(理解)

上面的案例里面我们使用标签名后面跟着css样式，那么我们就能实现对整个页面上所有对应的标签添加到相应的样式，如果说我想让这样的一个样式作用在我希望的指定的某一些标签之上（例如：指定到一个标签【不写在行内】，或者这一类标签中的某几个…），该如何操作呢，css样式前面应该写什么呢？所以接下来我们要学习的就是css选择器，也就是让我们的css样式选择作用在哪一些具体的标签之上。

3.4.1、标签名选择器

作用在当前页面的所有该名称标签上的。例如上述案例，样式作用在div标签上，那么直接书写div.

如：

div{
				color:red;
				font-size: 100px;
				background-color: yellow;
				border:1px solid blue;
}

上述使用的就是标签名选择器。

语法格式：

具体标签名称｛
css代码;
｝

代码示例：

<!DOCTYPE HTML>
<html>

	<head>
		<title></title>
		<style type="text/css">
			div {
				color: red;
				font-size: 50px;
				border: 1px solid red;
			}
		</style>
	</head>

	<body>
		<!-- 
		标签名选择器：作用在当前页面的所有该名称标签上的。
		格式：
		标签名   {
			css代码；
		}	
		-->
		<div>我是div</div>
		<div>我是div</div>
		<div>我是div</div>
		<span>我是span,不受影响</span>
	</body>

</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpX1FnXp-1577025729292)(img/30.bmp)]

3.4.2、 ID选择器

作用于某一个特定的标签上。根据指定标签的id来设置css样式。

说明：一个页面中要求id的属性值唯一。不能重复。

在css文件中定义ID选择器语法格式：

#ID选择器的名称 ｛
css代码；
｝

使用：

<标签名 id=” ID选择器的名称” />

需求：页面上多个div，让第二个div：字体红色字体大小50px，边框为1px，实线，红色

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ID选择器</title>
		<style type="text/css">
			#myDiv{
				color:red;
				font-size: 50px;
				border:1px solid  red;
			}
		</style>
		
	</head>
	<body>
		<!--
			需求： 页面上多个div，让第二个div：字体红色 字体大小50px，边框为1px，实线，红色
			ID选择器：作用在页面上的某一个标签上。
			格式：
			#id选择器名称{
				css代码;
			}
		-->
	</body>
	<div>
		我是div
	</div>
	<div id="myDiv">
		我是div1
	</div>
	<div>
		我是div2
	</div>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0h6VRd5U-1577025729292)(img/31.bmp)]

注意：页面的id值不允许重复。作为一个合格的开发者，只要看到id，第一反应都应该是id的值不能重复。如果一个页面中含有多个div的id属性值一样的情况，并且以该属性值作为选择器名，那么多个div都会改变样式。

3.4.3、 class选择器

作用在一组标签之上。

说明：ID选择器只能作用单个标签。而class选择器可以作用在单个或者多个标签上。

语法格式：

.class选择器的名称 ｛
css代码；
｝

使用：

<标签名 class=”class选择器的名称” />

需求：页面上有多个div，让第二和第三个div以同样的样式去显示：字体颜色红色，50px字体大小，边框1px 实线红色。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.mydiv {
				color: red;
				font-size: 50px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<!-- 
			让第二和第三个div以同样的样式去显示
			class选择器：作用在一组标签之上。
			.class属性值  {
				css代码；
			}
		 -->
		<div>我是div1</div>
		<div class="mydiv">我是div2</div>
		<div class="mydiv">我是div3</div>
		<span>我是span</span>
	</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xizbuV0U-1577025729292)(img/32.bmp)]

3.4.4、组合选择器

应用场景：如果页面不同的选择器想使用相同的css样式。

语法格式：

选择器1, 选择器2... {
    css代码
}

例如：

#div,p {
      color:red;
}

说明：上述表示id是div的选择器和标签名是p的选择器组合在一起。

需求：让页面所有的div和span都以同样的样式去显示：字体颜色黄色，50px字体大小，边框1px 实线红色。

分析：

这里要求是将所有的div和span都改变样式，其实我们使用class选择器可以实现，但是弊端必须给标签都添加class属性，比较麻烦，所以这里可以使用组合选择器来实现。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div,span{
				color:yellow;
				font-size: 50px;
				border:1px solid red;
			}
		</style>
	</head>
	<body>
		<!--需求：
		让页面所有的div和span都以同样的样式去显示：字体颜色黄色，50px字体大小，边框1px 实线  红色 。
		分析：
		这里要求是将所有的div和span都改变样式，其实我们使用class选择器可以实现，但是弊端必须给
		标签都添加class属性，比较麻烦，所以这里可以使用组合选择器来实现
		-->
		<div>我是div1</div>
		<div>我是div2</div>
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>

注意：组合选择器可以使用任意的选择器来组合，个数可以任意个。

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-athMf1kb-1577025729293)(img/33.bmp)]

3.4.5、关联选择器

准备代码：

   <div id="a">
    		<span>我是span1</span>
    		<span>我是span2</span>
    	</div>
    	<span>我是span3</span>
    	<span>我是span4</span>
    	<div>
    		<span>我是span5</span>
    		<span>我是span6</span>
   </div>

需求：让id为a的标签下的所有的span以同样的样式去显示：字体颜色黄色，50px字体大小，边框1px 实线红色

分析：其实这能通过我们之前学习的class选择器解决，但是这里提供另一种方式，也就是我们这里的关联选择器。可以通过id为a的标签找到下面的所有的span标签，也就是说，关联选择器更加强调的是通过父亲查找孩子。看下面的语法格式和代码演示。

语法格式：

父标签的选择器 后代标签选择器 ｛
    css代码；
｝

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#a span {
				color: yellow;
				font-size: 50px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<!--
        	让id为a的标签下的所有的span以同样的样式去显示   字体颜色黄色，50px字体大小，边框1px 实线  红色
        	关联选择器：父子关系
        	格式 
        		父选择器  子选择器  {
        			css代码
        		}
        -->
         <div id="a">
    		<span>我是span1</span>
    		<span>我是span2</span>
    	</div>
    	<span>我是span3</span>
    	<span>我是span4</span>
    	<div>
    		<span>我是span5</span>
    		<span>我是span6</span>
      	</div>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dMyc9YxY-1577025729293)(img/34.bmp)]

3.4.6、属性选择器 (了解)

属性选择器是在原有选择器的基础上，通过标签的属性，再次对标签进行筛选。

语法格式：

选择器名[属性名="属性值"] {
css样式；
}

说明：这里的选择器名一般都是标签名选择器。

需求：给页面所有input标签的type属性为text的标签加上一个边框：边框宽度2px, 实线, 蓝色框。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input[type="text"] {
				border: 2px solid blue;
			}
		</style>
	</head>
	<body>
		<!--
        	给页面所有input标签的type属性为text的标签加上一个边框：边框宽度2px, 实线, 蓝色框
        	属性选择器   :通过标签的属性再来对标签进行过滤。
        	格式：
        		选择器名[属性名='属性值'] {
        			css代码；
        		}
        -->
		文本框：<input type="text" /><br />
		密码框：<input type="password" /><br />
		文本框：<input id="txt" type="text" /><br />
		密码框：<input type="password" /><br />
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EjrrKMuc-1577025729294)(img/35.bmp)]

3.4.7、锚伪类选择器 (了解)

锚：就是锚点的意思，只有a标签具有锚点。

我们上网的时候，单击一个超链接之前，这个连接的颜色是正常的，但是当我们点击这个连接之后，那么这个连接的颜色就变了。这其实就是我们对a标签的未访问状态和已经访问状态设置不一样的css样式就行了。所以当a标签的状态发生了变化，就以不一样的css样式去显示。这就是我们接下来要学习的css样式。而锚伪类选择器在开发中一般作用在a标签之上。

语法格式：

选中的标签:锚伪类选择器名称 {
   css代码;
}

注意：

1）选中的标签和锚伪类选择器名称分别和:(冒号)之间不要有空格，如果有空格当前效果就不会出来。

2）4种锚伪类选择器：

：link 某个html标签未被点击之前的状态

：visited 鼠标点击之后，松开了

：hover 鼠标悬浮式

：active 鼠标点击但没有松开

例如：

a:link {
		color : red;
	}

上述表示a标签还没有被点击即默认状态是红色。

注意：关于link表示默认状态，如果在浏览器中显示字体的样式颜色，由于浏览器的原因，就是访问过一次某个网站，颜色就会变为紫色，所以我们这里需要清除一下浏览器的历史记录才可以演示出想要的效果。

需求：a标签未访问之前字体颜色为黄色、去除下划线，鼠标悬停在上面字体变红色，字体大小50px，鼠标点击未松开字体颜色变绿色，点击之后字体变蓝色。

去除下划线：text-decoration: none;

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link {/*这里不能添加空格*/
				color: yellow;
				text-decoration: none;/*去除下划线*/
			}
			a:visited {/*这里不能添加空格*/
				color: blue;
			}
			a:hover {/*这里不能添加空格*/
				color: red;
				font-size: 50px;
			}
			a:active {/*这里不能添加空格*/
				color: green;
			}

		</style>
	</head>
	<body>
		<!--
			需求：a标签为访问之前字体颜色为黄色、去除下划线，鼠标悬停在上面字体变红色，字体大小50px，
			鼠标点击未松开字体颜色变绿色，点击之后字体变蓝色。
			
			锚伪类选择器：针对标签不同的状态设置不一样的样式
			锚伪类选择器的顺序：lvha
			a:link  	    未被点击之前
			a:visited	已访问状态
			a:hover 	   鼠标悬浮状态
			a:active	   激活状态：鼠标点击但是未松开
		-->
		<a href="http://wwww.baidu.com" target="_blank">去百度</a>
	</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pP0Xm7yZ-1577025729294)(img/36.bmp)]

注意：上述4个伪元素是有先后顺序的。

L V H A

如果不按照上述顺序，有可能会造成样式的覆盖。

3.5、 CSS常用的样式

3.5.1、边框和尺寸：border、width、height

1、border ：设置边框的样式。

1）格式：

border：边框宽度边框样式边框颜色。

2）例如：style=”border:1px solid #f00” -----》表示1像素实边红色。

a:边框样式取值：solid 实线，none 无边，dashed虚线等。

2、width、height：用于设置标签的宽度、高度。

格式：

width:标签具体的宽度。

height:标签具体的高度。

需求：给页面某个div设置：宽度200像素，高度200像素，1像素实线黑色的框。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				border: 1px solid black;
				/*border: 1px dashed black;*//*dashed表示虚线*/
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<!--需求：给页面某个div设置：宽度200像素，高度200像素，1像素实线黑色的框。-->
		<!--<div style="width:200px;height:200px;border:1px solid black;">我是div</div>-->
		<div>我是div</div>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCgSq39O-1577025729294)(img/37.bmp)]

注意：在html中只有块级标签(div、p、ul等)才有高度和宽度，其他标签没有的。

3.5.2、转换：display(掌握)

HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。

1、块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。

1）常见的块元素：

、
、
等

2）默认可以设置高度和宽度

2、行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。

1）常见的行内元素：、等

2）设置高度和宽度无效

在开发中，如果希望行内元素具有块元素的特性，或者希望块元素具有行内元素的特性。也就是希望行内元素和块元素之间相互转换。需要使用display属性将行内元素转换成块级元素 或者将块级元素转换为行内元素。

语法结构：

选择器 {display : 属性值 }
常用的属性值：
		inline：此元素将显示为行内元素（行内元素默认的display属性值）
		block：此元素将显为块元素（块元素默认的display属性值）
		none：此元素将被隐藏，不显示，也不占用页面空间。

需求：定义几个行内元素span，其中将一部分转换为块级标签，进行对比。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>转换标签</title>
		<style type="text/css">
			span,p{
				/*display: block;*/
				border:1px solid red;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!--需求：定义几个行内元素span，其中将一部分转换为块级标签，进行对比。--> 
		<!--默认显示一行，给普通的行内标签添加高和宽没有起到作用-->
		<span>普通span标签1</span>
		<span>普通span标签2</span>
		<!--每一行显示，高宽有作用了-->
		<span style="display: block;">转换后的span标签1</span>
		<span style="display: block;">转换后的span标签2</span>
		<!--<span style="display: none;">此元素将被隐藏，不显示，也不占用页面空间。</span>-->
		<!--将一个块级标签变为行内标签-->
		<!--<p style="display: inline;">段落1</p>
		<p style="display: inline;">段落2</p>-->
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-alq4lU9r-1577025729295)(img/38.bmp)]

3.5.3、字体：color、line-height

语法格式：

color：     颜色    字体颜色   
line-height:  行高    设置行高

需求：书写两个div标签，然后在div标签中写两个span标签。在span标签中演示字体颜色和行高。

分别给2个div设置style样式：height: 50px; width: 200px; border: 1px solid #000;

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="height: 50px; width: 200px; border: 1px solid #000;">
			<span>多年后</span>
			<span>重相逢</span>
		</div>
		
		<div style="height: 50px; width: 200px; border: 1px solid #000;">
			<span style="line-height: 50px;">我变瘦</span>
			<span style="color:red;">你变受</span>
		</div>
	</body>
</html>

注意：给元素设置行高一般设置为当前父容器的高度以便于让当前的元素在父元素中纵向居中显示。

举例：上述第二个div作为父标签的高度是50px,而他的子标签span的行高也设置为50px,这样可以保证当前span元素居中显示。

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EvoiEvOK-1577025729295)(img/39.bmp)]

3.5.4、背景：background-color，background-image

语法格式：

background-color： 颜色;  设置元素的背景颜色
background-image : url(图片的路径地址); 
background-repeat: 背景平铺方式; 
背景平铺方式取值：
no-repeat： 不平铺
repeat-x ： 横向平铺
repeat-y ： 纵向平铺
注意：图片默认是平铺满整个盒子的

需求：给body设置浅灰色(#eee)的背景色。在body中定义几个div标签，给div标签添加宽度、高度、设置背景颜色为白色(#fff)并加边框，最后设置背景图片，演示背景平铺方式。

代码示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*给body设置浅灰色的背景色*/
			body{
				background-color: #eee;
			}
			div{
				width: 800px;/*宽度*/
				height: 800px;/*高度*/
				background-color: #fff;/*设置背景颜色为白色*/
				border: 1px solid red;/*边框*/
				background-image: url(img/lyf.png);/*背景图片*/
			}
		</style>
	</head>

	<body>
		<!--需求：给body设置浅灰色的背景色。在body中定义几个div标签，
		给div标签添加宽度、高度、设置背景颜色为白色并加边框，最后设置背景图片，演示背景平铺方式。
		-->
		<div></div><!--默认平铺满整个div盒子的-->
		<div style="background-repeat: no-repeat;"></div><!--不平铺-->
		<div style="background-repeat: repeat-x;"></div><!--横向平铺-->
		<div style="background-repeat: repeat-y;"></div><!--纵向平铺-->
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-97iPN1VG-1577025729296)(img/40.bmp)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bJeYwA1a-1577025729296)(img/41.bmp)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DbLWRHeB-1577025729296)(img/42.bmp)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bzmSn9QX-1577025729297)(img/43.bmp)]

3.6、边框(盒模型) (了解)

3.6.1、什么是盒模型

我们可以把每一个标签都看成是一个盒子，每个盒子都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。而盒子模型的组成跟我们生活中也是一样的：例如在淘宝上买东西，我们的商品和快递盒子之间可能是有距离的。而快递盒子之间也可能存是有距离的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hpd7HKEl-1577025729297)(img/44.bmp)]

说明：

1）元素的内容相当于快递盒子中的东西。内边距padding相当于盒子和东西之间的空隙。边框border相当于盒子的边框。外边距margin相当于当前盒子和其他快递盒子之间的距离。

2）能够影响当前某一个盒子的大小主要是：元素的内容、内边距padding、边框border。而外边距margin不会影响当前盒子的大小。

3.6.2、内边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W08oFm7N-1577025729297)(img/45.bmp)]

使用css给上述四个属性赋值，可以按照顺时针理解进行赋值。

给盒子的内边距的属性赋值如下所示：

例如：如果我们希望所有h1元素的各边都有10像素的内边距，只需要按照如下做：

h1 {padding: 10px;}

我们还可以按照上、右、下、左的顺序分别设置各边的内边距：

h1 {padding: 10px 0.25px 2px 0.25px;}

问题：有时候想设置h1上下的内边距为10px，左右不想设置，那怎么实现呢？

方式一： h1 { 10px 0 10px 0 }
方式二： h1 { 10px 0 }  
第一个值表示上下，第二个值表示左右

3.6.3、外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6qu2JOmk-1577025729298)(img/46.bmp)]

使用方法同内边距一致！

3.6.4、案例：演示盒子模型

1、先创建一个div，它的内部也创建一个div，两个div同时设置边框宽度1像素实线黑框

2、外层div高度宽度各500像素，内部div高度，宽度各280像素，背景色为红色

3、设置内部div的外边距100px，内边距为10px

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				border:1px solid black;
			}
			#outerDiv{ //这里不要写冒号
				width: 500px;
				height: 500px;
			}
			#innerDiv{
				width: 280px;
				height: 280px;
				background-color: red;
				/*外边距*/
				margin: 100px;
				/*内边距*/
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<!--
			1、先创建一个div，它的内部也创建一个div，两个div同时设置边框 宽度1像素 实线 黑框
			2、外层div高度宽度各500像素，内部div高度，宽度各280像素，背景色为红色
			3、设置内部div的外边距100px，内边距为10px 
		-->
		<div id="outerDiv">
			<div id="innerDiv">
				
			</div>
		</div>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NdAjwpJh-1577025729298)(img/47.bmp)]

说明：

上述含有两个div，一个标签看作一个盒子。所以上述可以看作两个盒子模型。通过谷歌浏览器可以查看盒子模型。

在谷歌浏览器中按f12即可查看盒子模型。

内部div的盒子模型如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PGFBldOm-1577025729298)(img/48.bmp)]

3.6.5、总结：面试可能会被问到

1、盒子模型有哪些部分组成

元素的内容(高度、宽度)、内边距（padding）、边框（border）和外边距（margin）组成。

2、盒子模型大小受哪些部分影响

盒子模型的大小受元素的内容(高度、宽度)、内边距（padding）、边框（border）的影响，不受外边距的影响

3.7、使用CSS美化注册页面的案例实现

3.7.1、案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PJJTGbeq-1577025729299)(img/49.bmp)]

3.7.2、案例步骤

将之前写好的注册页面代码放到新建的html页面中;
使用CSS样式给整个页面即body标签添加背景图片：background-image: url(img/bg.jpg);
我们不需要对整个form表单操作，我们将整个form表单放到一个div中，然后对div进行操作;
开始设置div，宽度：500px,高度：400px,边框border:8px 实体灰色(lightgray),背景颜色：white,
让div居中，设置外边距即可：margin: 50px auto;
说明：50px 表示div的盒子上下是50px,以上优先。auto表示div的盒子左右自动适应
发现div中的内容仍然在左上角，可以设置内边距改变其位置。给div设置内边距：padding: 40px 80px;
div中的每一行间距很近，所以设置tr行的高度为40px
设置输入框的高度:30px

3.7.3、案例代码

代码实现：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*给整个页面添加背景图片*/
			body{
				background-image: url(img/bg.jpg);
			}
			/*设置div*/
			div
			{
				/*div的宽度*/
				width: 500px;
				/*div的高度*/
				height:400px;
				/*div的边框*/
				border: 8px solid lightgray;/*lightgray表示灰色*/
				/*div的背景颜色*/
				background-color: white;
				/*让div居中，设置外边距即可*/
				margin: 50px auto;/*50px 表示div的盒子上下是50px,以上优先。auto表示div的盒子左右自动适应*/
				/*设置内边距*/
				padding: 40px 80px;
			}
			/*设置行高*/
			tr{
				height: 40px;
			}
			/*设置输入框的高度*/
			input{
				height: 30px;
			}
		</style>
	</head>

	<body>
		<div>
			<!--书写form表单-->
			<form action="#" method="post">
				<!--书写table表格，通过分析需要书写10行3列-->
				<table>
					<!--标题 一行,跨3列-->
					<tr>
						<td colspan="3">
							<font color="blue">会员注册</font>&nbsp;USER REGISTER
						</td>
					</tr>
					<!--用户名-->
					<tr>
						<td>用户名</td>
						<td colspan="2">
							<input type="text" name="username" size="30" placeholder="请输入用户名" />
						</td>
					</tr>
					<tr>
						<td>密码</td>
						<td colspan="2">
							<input type="password" name="password" size="30" placeholder="请输入密码" />
						</td>
					</tr>
					<tr>
						<td>确认密码</td>
						<td colspan="2">
							<input type="password" name="repassword" size="30" placeholder="请输入确认密码" />
						</td>
					</tr>
					<tr>
						<td>Email</td>
						<td colspan="2">
							<input type="text" name="email" size="30" placeholder="Email" />
						</td>
					</tr>
					<tr>
						<td>姓名</td>
						<td colspan="2">
							<input type="text" name="realname" size="30" placeholder="请输入姓名" />
						</td>
					</tr>
					<tr>
						<td>性别</td>
						<td colspan="2">
							<input type="radio" name="sex" />男
							<input type="radio" name="sex" checked="checked" />女
						</td>
					</tr>
					<tr>
						<td>出生日期</td>
						<td colspan="2">
							<input type="text" name="birthday" size="30" placeholder="请输入出生日期" />
						</td>
					</tr>
					<tr>
						<td>验证码</td>
						<td>
							<input type="text" name="checkCode" size="15" />
						</td>
						<td>
							<img src="img/checkcode.jpg" />
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<!--<img src="img/btn.jpg" />-->
							<input type="submit" value="注册" />
						</td>
						<td></td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gJMEoLWF-1577025729299)(img/50.bmp)]

4、总结

			<!--书写table表格，通过分析需要书写10行3列-->
			<table>
				<!--标题 一行,跨3列-->
				<tr>
					<td colspan="3">
						<font color="blue">会员注册</font>&nbsp;USER REGISTER
					</td>
				</tr>
				<!--用户名-->
				<tr>
					<td>用户名</td>
					<td colspan="2">
						<input type="text" name="username" size="30" placeholder="请输入用户名" />
					</td>
				</tr>
				<tr>
					<td>密码</td>
					<td colspan="2">
						<input type="password" name="password" size="30" placeholder="请输入密码" />
					</td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td colspan="2">
						<input type="password" name="repassword" size="30" placeholder="请输入确认密码" />
					</td>
				</tr>
				<tr>
					<td>Email</td>
					<td colspan="2">
						<input type="text" name="email" size="30" placeholder="Email" />
					</td>
				</tr>
				<tr>
					<td>姓名</td>
					<td colspan="2">
						<input type="text" name="realname" size="30" placeholder="请输入姓名" />
					</td>
				</tr>
				<tr>
					<td>性别</td>
					<td colspan="2">
						<input type="radio" name="sex" />男
						<input type="radio" name="sex" checked="checked" />女
					</td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td colspan="2">
						<input type="text" name="birthday" size="30" placeholder="请输入出生日期" />
					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text" name="checkCode" size="15" />
					</td>
					<td>
						<img src="img/checkcode.jpg" />
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<!--<img src="img/btn.jpg" />-->
						<input type="submit" value="注册" />
					</td>
					<td></td>
				</tr>
			</table>
		</form>
	</div>
</body>

```

实现效果：

[外链图片转存中…(img-gJMEoLWF-1577025729299)]

4、总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ONoy3SIc-1577025729299)(img/51.bmp)]

原文链接：https://blog.csdn.net/yukuiadeyu2/article/details/103658154

day02_html&css

今日内容介绍

今日内容学习目标

今日学习标签总览

1、 网站用户注册页面显示

1.1、 案例介绍

1.2、 相关知识点

1.2.1、 表单相关的标签 (掌握)

1.2.1.1、 **表单标签：<**form>

1.2.1.2、 **输入域标签：<**input/>

1.2.1.3、 下拉列表标签：<select>

1.2.1.4、 **文本域标签：<**textarea>

1.2.1.5、 **按钮标签：<button> **（了解）

1.3、 案例分析

1.4、 案例代码实现

1.5、 HTML5中新增的type类型

2、 其它标签div & span(掌握)

2.1、 什么是div

2.2、 什么是span

2.3、 代码示例

3、 使用CSS优化网站注册页面

3.1、 CSS概述

3.1.1、 CSS是什么

3.1.2、 CSS名词解释

3.2、 怎么书写CSS

3.3、 CSS和HTML结合的方式

3.3.1、 方式一：使用HTML标签的style属性（行内）

3.3.2、 方式二：在head标签使用style标签设置（内部）

3.3.3、 方式三：在head标签中使用link标签（外部）(掌握)

3.4、 CSS选择器(理解)

3.4.1、 标签名选择器

3.4.2、 ID选择器

3.4.3、 class选择器

3.4.4、 组合选择器

3.4.5、 关联选择器

3.4.6、 属性选择器 **(**了解)

3.4.7、 锚伪类选择器 **(**了解)

3.5、 CSS常用的样式

3.5.1、 边框和尺寸：border、width、height

3.5.2、 转换：display(掌握)

、、等

3.5.3、 字体：color、line-height

3.5.4、 **背景：**background-color，background-image

3.6、 边框(盒模型) (了解)

3.6.1、 什么是盒模型

3.6.2、 内边距

3.6.3、 外边距

3.6.4、 案例：演示盒子模型

3.6.5、 总结：面试可能会被问到

3.7、 使用CSS美化注册页面的案例实现

3.7.1、 案例效果

3.7.2、 案例步骤

3.7.3、 案例代码

4、 总结

4、 总结

1、网站用户注册页面显示

1.1、案例介绍

1.2、相关知识点

1.2.1、表单相关的标签 (掌握)

1.2.1.1、表单标签：<form>

1.2.1.2、输入域标签：<input/>

1.2.1.3、下拉列表标签：<select>

1.2.1.4、文本域标签：<textarea>

1.2.1.5、按钮标签：<button> （了解）

1.3、案例分析

1.4、案例代码实现

2、其它标签div & span(掌握)

2.1、什么是div

2.2、什么是span

2.3、代码示例

3、使用CSS优化网站注册页面

3.2、怎么书写CSS

3.3.1、方式一：使用HTML标签的style属性（行内）

3.3.2、方式二：在head标签使用style标签设置（内部）

3.3.3、方式三：在head标签中使用link标签（外部）(掌握)

3.4.1、标签名选择器

3.4.4、组合选择器

3.4.5、关联选择器

3.4.6、属性选择器 (了解)

3.4.7、锚伪类选择器 (了解)

3.5.1、边框和尺寸：border、width、height

3.5.2、转换：display(掌握)

、
、
等

3.5.3、字体：color、line-height

3.5.4、背景：background-color，background-image

3.6、边框(盒模型) (了解)

3.6.1、什么是盒模型

3.6.2、内边距

3.6.3、外边距

3.6.4、案例：演示盒子模型

3.6.5、总结：面试可能会被问到

3.7、使用CSS美化注册页面的案例实现

3.7.1、案例效果

3.7.2、案例步骤

3.7.3、案例代码

4、总结

4、总结