HTML+CSS初学（第二周）

1.1嵌套列表

定义：列表之间可以互相嵌套形成多层级列表
例如：
下面展示一些 关于<ul>的多层级嵌套。

<ul><h1>美味小吃</h1><li>小吃类<ul><li>煮粉干</li><li>拌青菜</li><li>蛋炒饭</li><li>煎蛋</li></ul> </li>
</ul>

显示出来的结果如图所示

注：需要注意格式，不要把所有标签写在顶部

1.2表格标签

定义：< table>:表格的最外层
< tr>:定义表格行
< th>：定义表头
< td>:定义表格单元
< caption>:定义表格标题
下面展示一些 自己根据对表格标签的理解所敲。

<table><caption>大一第一学期课表</caption>
<tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
</tr>
<tr><th>无</th><th>中国近代史</th><th>大学英语</th><th>无</th><th>高数</th>
</tr><tr><th>大学英语</th><th>网络技术</th><th>高数</th><th>体育</th><th>中国近代史</th>
</tr><tr><th>高数</th><th>线性代数</th><th>军事理论</th><th>C语言</th><th>线性代数</th>
</tr><tr><th>无</th><th>C语言</th><th>无</th><th>无</th><th>无</th></tr>

在浏览器是显示的结果如

< th>标签排列的方式是一行行排列过去,并不是一列一列的排

1.3表格属性

border:表格边框
cellpadding:单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐的方式
下面展示一些 对border的使用。

<table border="1"><caption>大一第一学期课表</caption>
<tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
</tr>
<tr><th>无</th><th>中国近代史</th><th>大学英语</th><th>无</th><th>高数</th>
</tr><tr><th>大学英语</th><th>网络技术</th><th>高数</th><th>体育</th><th>中国近代史</th>
</tr><tr><th>高数</th><th>线性代数</th><th>军事理论</th><th>C语言</th><th>线性代数</th>
</tr><tr><th>无</th><th>C语言</th><th>无</th><th>无</th><th>无</th></tr></table>

把border放在最外层容器< table>里

下面展示一些 对cellpadding的使用。

<table border="1" cellpadding="30"><caption>大一第一学期课表</caption>
<tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
</tr>
<tr><th>无</th><th>中国近代史</th><th>大学英语</th><th>无</th><th>高数</th>
</tr><tr><th>大学英语</th><th>网络技术</th><th>高数</th><th>体育</th><th>中国近代史</th>
</tr><tr><th>高数</th><th>线性代数</th><th>军事理论</th><th>C语言</th><th>线性代数</th>
</tr><tr><th>无</th><th>C语言</th><th>无</th><th>无</th><th>无</th></tr></table>

cellpadding的作用扩大单元格之间的空间，如图
下面展示一些 colspan的使用需要放在<th>中，并且合并多少列是由输入的数字决定的。

<table border="1" cellpadding="30"><caption>大一第一学期课表</caption>
<tr><th colspan="2">星期一和星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
</tr>
<tr><th>无</th><th>中国近代史</th><th>大学英语</th><th>无</th><th>高数</th>
</tr><tr><th>大学英语</th><th>网络技术</th><th>高数</th><th>体育</th><th>中国近代史</th>
</tr><tr><th>高数</th><th>线性代数</th><th>军事理论</th><th>C语言</th><th>线性代数</th>
</tr><tr><th>无</th><th>C语言</th><th>无</th><th>无</th><th>无</th></tr></table>

下面展示一些 关于对rowspan的使用，所谓合并行与列是表格属性所在的行或列与对应的行或列进行和并，并不是全部。

<table border="1" cellpadding="30"><caption>大一第一学期课表</caption>
<tr><th rowspan="2">星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
</tr>
<tr><th>中国近代史</th><th>大学英语</th><th>无</th><th>高数</th>
</tr><tr><th>大学英语</th><th>网络技术</th><th>高数</th><th>体育</th><th>中国近代史</th>
</tr><tr><th>高数</th><th>线性代数</th><th>军事理论</th><th>C语言</th><th>线性代数</th>
</tr><tr><th>无</th><th>C语言</th><th>无</th><th>无</th><th>无</th></tr></table>

合并的行要比对应的行多一行

例如：<th rowspan="2">星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th>
</tr>
<tr><th>中国近代史</th><th>大学英语</th><th>无</th><th>高数</th>

1.4表单标签（1）

<form>:最外层容器
<input>:标签用于收集用户信息，根据不同的的type属性值，展示不同的控件，如输入框，密码框，复选框等。

<h2>输入框：</h2>
<input type="text">
<h2>密码框：</h2>
<input type="password">
<h2>复选框</h2>
<input type="checkbox">苹果
<input type="checkbox">李子
<input type="checkbox">西瓜

在浏览器上出现的结果如图所示

这里要特别对单选框进行说明

h2>性别</h2>
<input type="radio" >男
<input type="radio" >女出现的结果如下图，你会发现两个选择都可以

为了避免上述的情况出现，我们只需要在radio后面加上name

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

注意：name里面的内容随便定义

<form action="">
<h2>提交和重置</h2>
<input type="submit">
<input type="reset">

<form action="">这里面填提交的地址

下面进行扩展其他的type属性，例如：

h2>输入框：</h2>
<input type="text"placeholder="请输入用户名">
<h2>密码框：</h2>
<input type="passward"placeholder='请输入密码'>

需要记住placeholder这个标签

1.5表单标签（2）

< textarea>:多行文本框

h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>其中：cols表示列，rows表示行，可以控制文本框的大小

如下图显示

< select>,< option>:这两个标签是组合使用，其中< select>是外层容器,
< select>,< option>:作用是下拉菜单


<select><option>请选择</option><option>上海</option><option>北京</option><option>南京</option>
</select>

,
但是在这一过程中“请选择”是可以选中的，为了不选择“请选择”可以在< option>中添加其他属性
例如

select><option selected disabled>请选择</option><option>上海</option><option>北京</option><option>南京</option>
</select>
其中 selected 的作用是把想要的选择放在首项。
而disabled的作用是不选择想要的元素，比如以上代码里的“请选择

关于multiple属性：作用多选，放在最外层容器中
例如：<select multiple><option selected disabled>请选择</option><option>上海</option><option>北京</option><option>南京</option>
</select>也可以放在其他的标签中

1.5 div与span

div（块）；定义：div全部称为division “分割”，“分区”的意思，< div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落，标题表格，图像等各种网页元素，HTML中大多数的标签都可以嵌套在< div>标签中，< div>中还可以嵌套多层< div>,用来将网页分割成独立的，不同的部分，来实现网页的规划和布局。

span（内联）：用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行

图片里的方框就是一个区域，而文字的样式是span

在浏览器上显示的结果如下图

1.6 CSS的基础语法

格式：
选择器 {属性1：值1；属性2：值2}
单位：
px->像素，%->百分比
基本样式：
width（宽），height（长），background（背景颜色）

例如：<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 40px;height: 100px;background-color: red;}</style>
</head>
<body><div>这是一个颜色</div>
</body>
</html>

解析：在头文件中的< style>的作用是给页面添加样式，而div在头文件中是一个选择器，它会映射到对应的标签添加样式，。而px是一个长度单位，在计算机中表示像素，而计算机的分辨率是横向的像素乘以纵向的像素，可以在电脑的页面中查看电脑的分辨率。而%百分比表示一个相对的单位，如果外容器是600px，当前容器是50%则是300px.

对头文件的div进行解释：如果头文件里有div它就会选择< body>标签里的所有div标签，如果是其他标签就不会映射到，除非在style标签中加上对应的标签,例如


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 40px;height: 100px;background-color: red;}
span{width: 50%;height: 25%;background-color: blue;}</style>
</head>
<body><div>这是一个颜色</div><div>我喜欢你</div><span>这个是蓝色</span>
</body>
</html>

1.7 内联样式与内部样式

内联（行内，行间）样式：在HTML标签上添加style属性来实现的，例如：


!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="width: 100px;height: 300px;background-color:red ;">这是一个块</div>
</body>
</html>在div标签中加入style的属性

内部样式：在< style>标签内添加的样式
注：内部样式的优点，可以复用代码，例如


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>
div{width: 100px;height: 100px;background-color: red;}</style></head>
<body><div>这是一个块</div>
</body>
</html>

区别：内部样式的代码可以复用，符合W3C的规范，进行结构和样式分开，
如图一

图一没有做到结构和样本分开，虽然可以，但是不符合W3C（万维网）的标准，图2为规范

虽然出来的样子是相同的，但是图2符合标准

1.7外部样式及两种写法

外部样式：引入一个单独的CSS文件，name.css
< link>标签。属性：rel，href
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。

1.8 CSS颜色表示法

1：颜色表示法：red ，blue，yellow
颜色表：

2:16进制：0,1，2,3，4,5，6,7，8,9，a，b，c，d，e，f
##000000：最小值
##ffffff：最大值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>div{background-color: #ff0000;}
</style></head>
<body><div>我喜欢你</div>
</body>
</html>

rgb三原色表示法：r是红色，g是绿色，b是蓝色
写法：rgb（0,0,0）取值范围：0——255

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>div{background-color: rgb(124, 230, 124);}
</style></head>
<body><div>我喜欢你</div>
</body>

由于16进制和rgb需要相应的数字对应的颜色，不好记，所以有两种方法有助于我们在开发的时候更好的使用颜色
1：下载FE助手，提取颜色（缺点：无法提取文件夹中图片的颜色）
2：下载Adobe软件，可以提取文件夹中图片的颜色。

1.9背景样式

background-color:背景颜色
background-image:背景图片
background-repeat:背景图片的平铺方式
background-position：背景图片的位置
background-attachment：背景图随滚动条的移动方式

关于background-image：默认的情况下会铺满容器，容器就是设置长和宽，这时候会发现看不到背景颜色，因为被铺满了

由于背景颜色被铺盖了，所以就要用到background-repect

关于background-repect：平铺方式
repect-x：x轴平铺（水平平铺）
repect-y：y轴平铺（竖直平铺）
repect（x,y都进行平铺，也就是所谓的默认值）
no-repect：都不平铺

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{height: 400px;width: 300px;background-color: brown;background-image: url(./fff.png);background-repeat: repeat-x;
}</style></head>
<body><div></div>
</body>
</html>

on-repect:不平铺只留一张图片

关于background-position：背景位置，移动图片在背景中的位置，最左上脚为原点
注意：当x和y都是正数时，图片向右和向下移动；当x和y都是负数时向左和上移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{height: 400px;width: 600px;background-color: brown;background-image: url(./fff.png);background-repeat: no-repeat;background-position: 100px 200px;
}</style></head>
<body><div></div>
</body>
</html>

position:也可以用英语来说明，right，center等
关于background-attachment:背景图随滚动条的移动方式

我们需要在style标签中加入body{height: 2000px;}这个代码块，设置进度条
scroll:背景图随着进度条的移动而移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height: 2000px;}div{height: 400px;width: 600px;background-color: brown;background-image: url(./fff.png);background-repeat: no-repeat;background-position: 100px 200px;background-attachment: scroll;
}</style></head>
<body><div></div>
</body>
</html>

fixed：随着进度条的移动，背景图没有移动
总结：

1.10CSS边框样式

1：border-style：边框样式
2: border -width:边框大小（粗细）
3：border-color：边框颜色
对border-style：solid（实线）dashed（虚线）dotted（点线）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height: 2000px;}div{width: 300px;height: 300px;border-color: black;border-width: 1px;border-style: solid;}</style></head>
<body><div></div>
</body>

而虚线和点线的方法都是一样的
扩展：针对边框某一条边进行单独设置

iv{width: 300px;height: 300px;
border-right-color:chartreuse;
border: right width 2px;border-right-style: solid;}

只要在中间加上方向的单词（left，right，top，bottom）就OK了，把边框变成一条线

在这里插入代码片<style>body{height: 2000px;}div{width: 300px;height: 300px;
border-top-color:chartreuse;
border-top-width： 2px;border-top-style: solid;}</style>

也可以多条线组合实现不同的效果

在这里插入代码片<style>body{height: 2000px;}div{width: 300px;height: 300px;
border-top-color:chartreuse;
border-top-width： 2px;border-top-style: solid;
width: 300px;height: 300px;border-right-color: black;
border-right-style: dotted;border-right-width: 30px;}</style>

1.11CSS文字样式

1.font-family:文字类型

1.font-family:文字类型（微软雅黑，宋体，Arial，“time new romen”）

    <style>
div{font-family: 宋体;}</style></head>
<body><div>我爱你</div>
</body>

注意：使用time new romen
要加单引号

称线体与非称线体，区别：衬线体带有棱角，而非衬线体比较平滑

设置多字体的方式

<style>
div{font-family: 微软雅黑，宋体，‘times new roman' }</style>

浏览器只识别计算机存在的字体，首先识别第一个，若没有则依次识别剩余字体

引号问题：当字体中间出现空格时需要引号

1.12字体大小粗细样式

font-size：字体大小
写法：单词，像素px（一般为偶数）其中medium默认值是16px

font-weight：字体粗细
写法：单词：normal（正常），bold（加粗）。数字（以百为单位的px）范围100px-900px

font-style：字体样式
模式：正常（normal）。斜体

1.13文本缩进与文本对齐

text-indent:文本缩进（首行缩进）。em单位：相对单位，1em永远都是跟字体大小相同。一个字体是1em，为了空出2个格，我们需要2em

text-align：文本对齐方式（取值）
方式：left，right，center，justify（两端点对齐）

line-height：定义行高（一行文字的高度，上边距和下边距的等价关系，默认行高随着字体大小的变化而变化）

letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）

强制折行（针对英文和数字不折行问题）
1.word-break：break-all；（非常强烈的折行）
2.word-wrap：break-word（不是那么强烈的折行）

1.14CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式
一个CSS属性控制多种样式，叫做复合样式

复合写法：通过空格的方式实现的，复合写法不需要关心顺序，例如：background，bored。但是font需要注意顺序

font需要先写size和family，必须要有这两个

1.15ID选择器及其注意事项

#div1{text-decoration: underline;}
<body><div id="div1">基本信息</div><div id="div2">基本信息</div><div id="div3">基本信息</div></body>

快捷键：div#+名字+tab

1.16CLASS选择器及其注意事项

.div1{background-color: black;}
<body><div class="div1">这是一个块</div>
</body>

注意事项：CLASS选择器可以复用。可以添加多个CLASS样式。可以标签+类的写法

1.17标签群组通配等选择器