前端入门【HtmlCSS】

学习目标

能够使用form标签创建表单容器
能够使用form表单中常用的input标签创建输入项
能够使用表单select标签定义下拉框输入项
能够使用表单textarea标签定义文本域
能够使用CSS的基本选择器选择元素
能够使用CSS的扩展选择器选择元素
能够使用常见的CSS属性
能够说出盒子模型的属性
能够制作黑马旅游网的注册页面

一、网站用户注册页面

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

二、案例相关标签

本案例使用的标签如下：

form：表单容器标签
input：输入框
select：下拉框
textarea：文本域
button：按钮

【参考代码】

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--form表单：作用：提供给用户在页面上显示可供输入或者选择的组件，提交数据form子标签：input：文本框：type="text"   默认密码框：type="password"单选按钮：type="radio"   一定要给相同的name属性多选按钮（复选框）：type="checkbox"  一定要给相同的name属性文件上传组件：type="file"隐藏域：type="hidden"   偷偷提交数据按钮：普通按钮：type="button"  必须通过value属性设置显示内容重置按钮：type="reset"   作用是清空输入的内容提交按钮：type="submit"   提交表单的数据图片提交按钮：type="image"select：下拉框   选择的时候打开子标签：optiontextarea：文本域--><!--通用属性：name属性作用：1.name属性给radio，checkbox分组；2.提交数据；value属性：作用：1.给radio,checkbox设置默认值；2.给按钮设置显示的内容；readonly属性：作用：设置标签只读disabled属性：作用：禁用标签--><!--特殊属性：checked属性：设置radio，checkbox的默认选中；selected属性：设置select下拉框的默认选中项；-->
<!--form标签的属性：action：设置数据提交的地址；method：get：默认特点：1.数据会拼接在url后面提交；2.数据不安全；3.提交的数据量有限制；post：特点：1.数据不会拼接在url后面，在请求体中；2.相对安全；3.数据量没有限制；
--><form action="http://www.itcast.cn" method="post">用户名：<input type="text" name="userName" value="张三" readonly><br>用户名2：<input type="text" name="userName2" value="李四" disabled><br><input type="hidden" name="id" value="123"><br>密码：<input id="userName" name="password"   type="password"> <br>性别：<input checked="checked" type="radio" value="男" name="gender"> 男<input type="radio" value="女" name="gender"> 女 <br>爱好：<input type="checkbox" value="sleep" name="hobby"> 睡觉<input checked type="checkbox" value="eatting" name="hobby"> 吃饭<input type="checkbox" value="codding" name="hobby"> 敲代码 <br>头像：<input name="file" type="file"> <br>城市：<select name="city"><option value="bj">北京</option><option  value="sh">上海</option><option value="gz">广州</option><option value="sz">深圳</option><option  selected value="hz">杭州</option></select> <br>自我描述：<textarea  name="desc" cols="30" rows="10"></textarea><br><input type="button" value="普通按钮"><input type="reset"  value="重置按钮"><input type="submit"><input type="image" src="../img/reg.png"></form></body>
</html>

三、表单相关的标签【重点】

1、表单标签：`<form>`

作用：

把表单中的数据提交给远端服务器；

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

属性：

属性	使用示例	说明
action	action=“http://www.itcast.cn”	action设置表单提交的服务器地址
method	method=“get” 或 method=“post”	method设置表单提交数据的方式

表单提交方式：get和post

get：默认值

提交数据的方式：提交的数据追加在请求路径上。数据格式k = v，追加是使用 ? 连接，之后每一对数据使用&连接；如：https://www.baidu.com/register.html?username=zhangsan&password=123&email=xxx

因请求路径长度有限制，所以提交的数据有限；

不安全；

post：
提交数据的方式：数据不追加在请求路径上；

请求数据的大小无限制；

相对安全；

2、输入域标签：`<input>`

作用：

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

通用属性：

通用属性指的是一般的标签都可以使用的属性。

1.type：

作用：设置表单项收集数据的方式，如：1、<input type="text">决定了这个input标签是一个文本框，可以输入文本数据；2、<input type="radio"> 决定了这个input是通过以单选按钮的方式供用户选择数据；
取值：

type属性	使用示例	说明
text	`姓名：<input type = "text" name="name">`	文本框，单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符；
password	`<input type = "password" name="pwd">`	密码框，密码字段。该字段中的字符以黑圆点显示
radio	`<input type = "radio" name="sex" value="男">`	单选框，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的；
checkbox	`<input type = "checkbox" name="hobby" value="音乐">`	复选框，表示一组按钮，可供多选；
file	`<input type = "file" name="uploadFile">`	文件上传组件,提供"浏览"按下可以选择需要上传文件.；
hidden	`<input type = "hidden" name="id" >`	隐藏字段. 数据会发送给服务器，但浏览器不进行显示；
image	`<input type="image" src="../img/reg.png" height="30px"/>`	图形提交按钮，通过src给按钮设置图片；
submit	`<input type="submit" value="提交">`	提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性，否则将“提交”两个字提交到服务器。
reset	`<input type="reset" value="重置">`	重置按钮。将表单恢复到默认值；
button	`<input type="button" value="按钮">`	普通按钮，常用于与JavaScript结合使用；

2.name：

name属性的作用是告诉浏览器我要提交的这个数据的名称，如果需要将表单数据提交到服务器则必须添加name属性。

属性	使用示例	说明
name	`<input type = "text" name="name">`	元素（数据）名称，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据；

3.value：

value属性的作用：

给input 标签，select 标签，textarea标签设置默认值；
给submit，reset，button按钮设置显示在按钮上的文字信息；

【注意】：radio和select标签不能直接输入数据，所以必须通过给value属性设置默认值；

属性	使用示例	说明
value	`<input type = "text" name="name" value="张三">` `<input type="submit" value="提交">`	设置input标签的默认值。注意：submit和reset为按钮显示数据；

4.readonly：

作用：将可以输入文本的input标签或者textarea设置成只读状态；

特点：

1.只读状态的标签中书写的内容不能被修改；

2.只读状态的标签中如果有默认值，这个值会随着表单提交到服务器；

属性	使用示例	说明
readonly	`<input type="text" value="汉语" readonly="" />`	设置input是否只读数据会被提交；

5.disabled：

作用：禁用表单；

特点：

1.禁用状态的表单中不能输入数据；

2.禁用状态的表单如果有默认值，这个值不会随着表单提交到服务器；

属性	使用示例	说明
disabled	`<input type="text" value="汉语" disabled="" />`	是否可用数据不会被提交；

特殊属性

特殊属性指的是，用在特殊的标签上的属性。

1.checked：

作用：设置radio和checkbox默认选中状态的属性。

属性	使用示例	说明
checked	`<input type = "radio" name="sex" value="男" checked="checked">` `<input type="checkbox" name="hobby" value="看书" checked="" />`	默认选中radio或者checkbox（标签中只要出现checked属性即可）

3、下拉列表：`select>option`

作用：

提供一组可选的数据供用户选择（单选或多选）；

属性：

属性	使用示例	说明
name	name=“city”	设置下拉框的name属性
multiple	multiple=“multiple”	设置下拉框为多选下拉框
size	size=“3”	设置多选时，可见选项的个数

子标签：`<option>`

作用：设置select下拉框的选择项；
属性：

属性	使用示例	说明
value	value=“sh”	设置option的value值，当这个option被选中时，这个value值会随着表单提交
selected	selected=“selected”	将option设置成默认被选中的项

语法结构：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><select  name="city" ><option value="">请选择</option><option value="sh">上海</option><option value="bj">北京</option><option value="gz">广州</option><option value="sz">深圳</option></select></body>
</html>

【注意】: 一般option需要给value这个属性，如果不给，默认会把option标签之间的文本内容发送到服务器。

4、文本域：`<textarea>`

作用：

多行的文本输入控件；

属性：

属性	使用示例	说明
cols	cols=“10”	设置文本域的列数(宽)
rows	rows=“5”	设置文本域的行数(高)
name	name=“desc”	设置文本域的name属性

语法结构：

<textarea  name="desc" rows="10" cols="50"></textarea>

5、表单标签总结

name属性的作用是什么？
1. 给标签取名；
2. 将子标签的数据提交到服务器；
value属性的作用是什么？
1. 给radio,checkbox,option和hidden这一类不能够通过页面输入数据的标签设置默认值；
2. 给按钮设置显示的文字信息；
哪些标签必须设置value属性？
1. radio，checkbox和hidden隐藏域；
怎么能够让radio和checkbox中的某一项默认选中？
1. 通过checked属性设置；
怎么能够让select下拉框中的某一项默认选中？
1. 通过给option设置selected属性；
哪些按钮有提交表单的作用？
1. type="submit"和type="image"的input控件；
2. 提交：也能提交表单数据；

四、其他标签【熟悉】

1、div

作用：

对页面区域进行划分；

特点：

1.独占一块区域；

2.只对页面区域进行划分，并不能实现复杂效果，必须结合CSS样式进行渲染；

【实际应用】使用div+css对页面进行布局和划分；

2、span

作用：

在页面中的一行划分出一小段区域；

特点：

共处一行；

【实际应用】使用span+css来精确修饰文本数据；

【代码示例】

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--div : 没有实际性的意义，用来做区域的划分 特点：独占一行-->我是div<div>我是div</div><div>我是div</div><div>我是div</div><!--span : 没有实际意义，用来对元素进行美化 特点：共处一行-->我是span<span>我是span</span><span>我是span</span><span>我是span</span><br /></body>
</html>

【效果】

五、CSS

一、CSS概述【了解】

1、CSS是什么

CSS 通常称为CSS样式或层叠样式表，又称之为网页的美容师，主要用于设置HTML页面排版和字体；

2、CSS名词解释

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

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

二、CSS书写规则【掌握】

【书写规则】

CSS样式	书写规则	说明
普通样式	`color:red`	样式名:样式值
复合样式	`border:1px solid red`	样式名:样式值1 样式值2 样式值3

【需求】

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

分析： 需要使用到的样式
1.color      设置字体的颜色
2.font-size  设置字体的大小
3.border     设置边框    border:border-width border-style border-color; 分别用来修饰边框的粗细，边框的样式，边框的颜色。代码实现：
<标签名 style="样式名1 : 样式值1；样式名2 : 样式值2；…" ></标签名>

【注意】：

1. 属性名 和 属性值 之间通过 ： 来隔开;
2. 多个样式之间使用 ; 隔开;1. 一般复合样式 (border, font…) 值是多个，而多个值使用空格隔开。例如： border : 1px solid #000；
3. 样式非常多，具体的样式名和样式值需要在api中去查询。在今天课程的最后我们会介绍一些常见的css样式。

【代码示例】

 <!--需求：书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px  实线 边框颜色为红色 --><div style="color: yellow; font-size: 100px; border: 1px solid red;">我是div</div>

【小结】：css样式怎么写

普通样式：样式名：样式值;
复合样式：样式名：样式值1 样式值2 样式值3 ......；
不同的样式之间使用; 隔开；

三、CSS和HTML的结合方式【熟悉】

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

方式一：行内式

【语法格式】

style="属性名1：属性值1；属性名2：属性值2；......"

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

【素材】

 <div>我是div</div>

【参考代码】

 <!--需求：书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px  实线 边框颜色为红色 --><div style="color: yellow; font-size: 100px; border: 1px solid red;">我是div</div>

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

【缺点】：

html代码和css代码耦合在一起,样式过多后，难以维护；
如果多个标签都需要使用相同的样式，冗余代码过多；

方式二：内嵌式【重点】

1、书写格式：

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

【注意】：

type=”text/css”可以省略

2、【案例二】

【需求分析】：

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

【代码实现】：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{color: red;font-size: 100px;background: yellow;border: 1px solid blue;}</style></head><body><!--需求：书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px  实线 边框颜色为蓝色--><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div></body>
</html>

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

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

【缺点】：

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

方式三：引入外部的css文件【重点】

【语法格式】

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

【案例实现】

书写html页面；

新建html文件并编写以下代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--需求：书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px  实线 边框颜色为蓝色--><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div></body>
</html>

书写CSS样式；

创建CSS样式文件1.css

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

3.在html页面引入css样式文件；

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../css/1.css" /></head><body><!--需求：书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px  实线 边框颜色为蓝色--><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div></body>
</html>

【注意】：

第三种是开发中经常使用的。这是因为html文件中都是html标签。这样提高代码的可读性。

【小结】：CSS与html结合的方式；

行内式：<div style="color:red; border: 1px solid red;"> 我是div </div> ，简单粗暴有效；
内嵌式：在head标签内，使用<style>标签。【比较常用】

<style type="text/css">div{/** 设置div中的文字的颜色*/color:red;/** 设置div的边框的属性*/border:1px solid red;}
</style>

链接外部css文件：【比较常用】

<link rel="stylesheet" href="../css/1.css"><link/>

四、CSS选择器【重点】

选择器的作用：选择要操作的标签；

1、语法格式

选择器{样式名：样式值；
}

2、三种基本的选择器

选择器	作用	语法	细节
id选择器	通过id属性值选择标签	`#id{ }`	前提：先给标签设置一个id属性和值；唯一：建议id属性值在同一个网页中保持唯一；
class选择器	通过class属性值选择器标签	`.classVal{ }`	前提：先给标签添加class属性值；类名：类名不能以数字开头；
标签名选择器	通过标签名选择同名的标签	`标签名{ }`

【练习一】id选择器练习

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div2{color: yellow;font-size: 100px;border: 1px solid red;}</style></head><body><!--【需求】选中第二个div，给其添加以下样式1.字体为黄色；2.字号为100px；3.边框  1px solid red;--><div>我是div1</div><div id="div2">我是div2</div><div >我是div3</div></body>
</html>

【练习二】class选择器练习

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.myDiv{color: yellow;font-size: 100px;border: 1px solid red;}</style></head><body><!--【需求】选中第二个和第三个div，给其添加以下样式1.字体为黄色；2.字号为100px；3.边框  1px solid red;--><div >我是div1</div><div class="myDiv">我是div2</div><div class="myDiv">我是div3</div></body>
</html>

【练习三】标签名选择器练习

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{color: yellow;font-size: 100px;border: 1px solid red;}</style></head><body><!--【需求】选中所有的div，给其添加以下样式1.字体为黄色；2.字号为100px；3.边框  1px solid red;--><div>我是div1</div><div>我是div2</div><div>我是div3</div></body>
</html>

3、扩展选择器

扩展选择器指的是基本选择器的组合。常用的组合有三种：层级，组合和属性过滤选择器；

扩展选择器	格式	作用	语法符号
层级选择器	父选择器子孙选择器{ }	选择父标签下的所有的子孙标签	空格
组合选择器	选择器1，选择器2{ }	多个选择器选择结果的组合	,逗号
属性过滤选择器	标签名[属性名=“属性值”]	选择具某个属性值的标签	[]中括号

【练习一】层级选择器练习

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#a span{color: yellow;font-size: 50px;}</style></head><body><!--【需求】选中id为a的div中所有span，并将其设置如下样式：1.字体颜色为黄色；2.字号大小为50px；--><div id="a"><span>我是span1</span><div><span>我是span2</span></div></div><span>我是span3</span><span>我是span4</span><div><span>我是span5</span><span>我是span6</span></div></body>
</html>

【练习二】组合选择器练习

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div,span{color: yellow;font-size: 100px;border: 1px solid red;}</style></head><body><!--【需求】选中页面上的所有div和span，给其添加如下样式：1.字体为黄色；2.字号为100px；3.边框  1px solid red;--><div>我是div1</div><div>我是div2</div><span>我是span1</span><span>我是span2</span></body>
</html>

【练习三】属性过滤选择器练习

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">input[type="text"]{border: 2px double blue;}</style></head><body><!--【需求】选中所有type="text"的input标签，给其设置如下样式：边框宽度2px，实线，蓝色框-->文本框：<input type="text" /><br />密码框：<input type="password" /><br />文本框：<input id="txt" type="text" /><br />密码框：<input type="password" /><br /></body>
</html>

六、CSS常用样式【熟悉】

1、字体样式：

CSS字体样式指的文字的字号，粗细和字体的样式(斜体)。常用的字体样式如下：

样式名	作用	说明
font-family	设置文字的字体；font-family=“宋体”	设置的字体必须是系统中已经安装的
font-size	设置文字的字号（大小）；font-size=“100px”	单位：像素
font-style	设置文字的样式（斜体）；font-style=“italic”
font-weight	设置文字的粗细；font-weight=“bolder”

【练习】

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>span{font-size: 100px;font-family: 楷体;font-style: italic;font-weight: bold;}</style></head><body><!--文字样式：font-szie:字号font-family:字体font-style:字体样式font-weight:文字粗细【需求】设置span标签中文字的字体样式要求：7号字楷体斜体加粗--><span>早睡能解决80%的问题</span><br><a href="">传智播客</a></body>
</html>

2、文本样式：

CSS文本样式指的是文本的颜色，间距，缩进等样式。常用的文本样式如下：

样式名	作用	说明
color	文本颜色	color=“red"或color=”#FFF"
text-decoration	文字修饰	underline 下划线，overline 上划线，line-through 删除线
text-indent	文本缩进	单位：em，如：text-indent=“2em”：缩进两个字符
text-align	文本水平对齐方式	text-align:left 左对齐，center 居中对齐，right 右对齐

【练习】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本样式</title><style>div{text-align: center;color: red;}a{text-decoration: none;}p{text-indent: 2em;}</style>
</head>
<body><!--文本样式：text-align:水平对齐方式  左，中，右text-indent:首行缩进text-decoration:文本装饰  下划线，贯穿线...color:设置字体颜色【需求】：设置div中文本的样式要求：文本居中红色取消a标签文本的下划线给p标签中的内容，首行缩进2个字符--><div>只有在中国，小龙虾才活的有尊严</div><a href="#">传智播客</a><p>只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严</p><p>只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严</p><p>只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严</p><p>只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严只有在中国，小龙虾才活的有尊严</p>
</body>
</html>

2、边框和背景

【边框相关】

样式名	作用	使用示例	常用取值
border	设置对象边框的样式	border:border-width border-style(required) border-color	border-width:定义边框的宽度；border-style:设置边框的4个边的样式，如：实线，虚线；border-color:设置边框的颜色；
height	设置标签的高度	height:100px	length：px，cm；%：百分比高度；
width	设置标签的宽度	width:100px	length：px，cm；%：百分比高度；

【背景相关】

背景样式属性	作用&取值
background-color	设置对象的背景颜色：colorname,rgb
background-image	设置对象的背景图片：url(图片的路径)
background-repeat	设置背景的平铺方式：no-repeat:不平铺，repeat-x:横向平铺，repeat-y:纵向平铺；（注：图片默认是平铺满整个盒子）

【案例】边框和背景样式练习

【需求】：

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

2. 给div设置背景色lightgreen，背景图片，观察不同的图片平铺方式；

【代码示例】

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width: 300px;height: 300px;border: 1px solid red;background-color: yellow;background-image: url("../img/reg.png");/*background-repeat: repeat-x;*//*background-repeat: repeat-y;*/background-repeat: no-repeat;}</style></head><body><!--【需求一】将div设置如下样式1.宽度300px；2.高度300px；3.边框：1px 实线 红色；【需求二】给div设置背景图片，并演示以下平铺方式1.默认平铺方式；2.水平方向平铺；3.垂直方向平铺；4.不平铺；--><div>早睡能解决80%以上的问题</div></body>
</html>

3、行和块之间的转换：display

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

display属性取值：

值	描述
inline	此元素将显示为行内元素（行内元素默认的display属性值）
block	此元素将显为块元素（块元素默认的display属性值）
none	此元素将被隐藏，不显示，也不占用页面空间

【案例】行和块转换案例

【需求】

将div转换成行内元素；
将span转换成行级元素；
将id为div3的div隐藏；

【代码示例】

<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div1{background-color: red;}#div2{background-color: green;}#div3{background-color: yellow;}div{width:100px;height:100px;}#span1{background-color: green;}#span2{background-color: red;}div{display: inline;}span{display: block;}#div3{display: none;}</style></head><body><!--【需求】1. 将div转换成行内元素；2. 将span转换成行级元素；3. 将id为div3的div隐藏；--><div id="div1">我是div1</div><div id="div2" >我是div2</div><div id="div3" >我是div3</div><hr /><span id="span1">我是span1</span><span id="span2">我是span2</span></body>
</html>

七、盒子模型【了解】

1、什么是盒子模型：

任何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、边界(margin)，这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。

内容（content）就是盒子里装的东西；
内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
边框(border)就是盒子本身了；
外边界(margin)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

2、相关属性：

盒子模型相关的属性：border 边框，padding 内边距；margin 外边距；

属性	作用
border	边框属性
padding	内边距
margin	外边距

2.1 边框属性：border

属性	边框样式	取值
border-style	边框线型	solid：定义实线； dashed：定义虚线； double：定义双线
border-width	边框宽度	length：允许自定义边框宽度
border-color	边框颜色	颜色名，十六进制颜色值
border-radius	边框圆角	指定圆角的半径
border	简写	线型宽度颜色

border: 1px solid red;

2.2 内边距：padding

内边距四边距离定义：

内边距的写法	含义
padding-top:10px;	上内边距
padding-left:10px;	左内边距
padding-bottom: 10px;	下内边距
padding-right:10px;	右内边距

2.3 外边距：margin

外边距的写法	含义
margin-top:10px;	上外边距
margin-left:10px;	左外边距
margin-bottom: 10px;	下外边距
margin-right:10px;	右外边距

2.4 简写方式：

外边距的写法	含义
margin:10px	四边相同
margin:10px 20px;	上下左右
margin:10px 20px 30px;	上左右下
margin:10px 20px 30px 40px;	上右下左

2.5 块级元素居中–水平方向居中

margin:auto;

3、【案例二】盒模型&注册表单

【需求分析】

需求：使用盒子模型修改注册页面
1、给body添加背景图片 regist_bg.jpg
2、设置一个div包裹form表单，设置div宽度500px、高度400px，背景为白色，边框实线 5px 颜色：#ccc
3、设置外边距上下100px，左右auto
4、通过设置内边距使表单在div中间

【代码实现】

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--需求：使用盒子模型修改注册页面1、给body添加背景图片 regist_bg.jpg2、设置一个div包裹form表单，设置div宽度500px、高度400px，背景为白色，边框实线 5px 颜色：#ccc3、设置外边距上下100px，左右auto4、通过设置内边距使表单在div中间--><style>body{background-image: url("../img/regist_bg.jpg");}#formDiv {width: 500px;height: 400px;background-color: white;border: 5px solid #cccccc;margin: auto;margin-top: 50px;padding-left: 174px;padding-top: 100px;}</style></head><body><div id="formDiv"><form action="#" method="get"><!--此处的内容可能被提交到服务器--><table><tr><td align="right">用户名：</td><td align="left"><input type="text" name="username"></td></tr><tr><td align="right">密 码：</td><td align="left"><input type="password" name="password"></td></tr><tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword"></td></tr><tr><td align="right">性 别：</td><td align="left"><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td></tr><tr><td align="right">头 像：</td><td align="left"><input type="file" name="upload"></td></tr><tr><td align="right">爱 好：</td><td align="left"><input type="checkbox" name="hobby" value="编程"/>编程<input type="checkbox" name="hobby" value="把妹"/>把妹<input type="checkbox" name="hobby" value="装逼"/>装逼</td></tr><tr><td align="right">所在城市：</td><td align="left"><select name="city"><option>上海</option><option>广州</option><option>北京</option></select></td></tr><tr><td align="right">自我描述：</td><td align="left"><textarea re rows="3" cols="15" name="desc" ></textarea></td></tr><tr><td align="right"></td><td align="left"><input type="submit" value="提交"><input type="reset" value="重置"></td></tr></table></form></div></body>
</html>

六、总结