表格属性
- valign：上下对齐方式（top，middle，bottom）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>seventh</title> </head> <body> <table border=1 cellpadding="20" cellspacing="10" align="center"> <caption>天气预报</caption> <thead><!---语义化标签---> <tr> <th colspan="2">日期</th> <th>天气情况</th> <th>出行情况</th> </tr> </thead> <tbody valign="bottom"><!---语义化标签---> <tr> <td rowspan="2">2021年8月7日</td> <td>白天</td> <td>天气晴</td> <td>适合出行</td> </tr> <tr> <td>黑夜</td> <td>天气晴</td> <td>适合出行</td> </tr> <tr> <td rowspan="2">2021年8月8日</td> <td>白天</td> <td>有小雨</td> <td>出门注意带伞</td> </tr> <tr> <td>黑夜</td> <td>有小雨</td> <td>出门注意带伞</td> </tr> </tbody> <tfoot><!---语义化标签---> </tfoot> </table> </body> </html>
实现效果：
15、表单
表单标签input
:表单的最外层容器
:标签用于搜索用户信息，根据不同的type属性值，展示不同的空间，如输入框，密码框，复选框等。
type属性
- text：普通的文本输入框
- password：密码输入框
- checkbox：复选框
- radio：单选框
- file：上传文件
- submit：提交按钮
- reset：重置按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="https://www.baidu.com/"><!--action中地址为数据提交地址--> <h2>输入框：</h2> <input type="text" placeholder="请输入用户名"> <h2>密码框：</h2> <input type="password" placeholder="请输入密码"> <!--placehoder属性让输入框上出现提示（不为空时则消失）--> <h2>复选框</h2> <input type="checkbox" checked>苹果 <input type="checkbox" checked>香蕉 <input type="checkbox" disabled>梨子 <!-- checked属性使得选项被默认选择好 disabled属性使得选项无法被选择 --> <h2>单选框</h2> <input type="radio" name="gender">男 <input type="radio" name="gender">女<!--通过相同的name变成一组，实现单选--> <h2>上传文件</h2> <input type="file"> <h2>提交按钮</h2> <input type="submit"> <h2>重置按钮</h2> <input type="reset"> </form> </body> </html>
表单相关标签
多行文本框：textarear
下拉菜单：select>option
辅助表单：label
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form> <h2>多行文本框</h2> <textarea rows="20" cols="100"></textarea> <h2>下拉菜单</h2> <select> <option selected disabled>请选择</option> <option>深圳</option> <option>广州</option> <option>汕头</option> </select> <select size="2"><!--设置下拉菜单显示的项数--> <option>深圳</option> <option>广州</option> <option>汕头</option> </select> <select multiple><!--设置可以多选，通过ctrl键或者鼠标拖动--> <option>深圳</option> <option>广州</option> <option>汕头</option> </select> <input type="file" multiple><!--可以上传多个文件--> <input type="radio" name="gender" id="man"><label for="man">男</label> <input type="radio" name="gender" id="woman"><label for="woman">女</label> <!--将单选框的id与后面文字形成映射关系，使得点击文字也可以选中--> </form> </body> </html>
表格表单结合
表单没有嵌套规范，表格有，所以应该先写表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action=""> <table border="1" cellpadding="30"> <tbody> <tr> <th rowspan="4"> 总体信息 </th> <th colspan="2"> 用户注册 </th> </tr> <tr align="right"> <td>用户名：</td> <td> <input type="text" placeholder="请输入用户名"> </td> </tr> <tr align="right"> <td>密码：</td> <td> <input type="password" placeholder="请输入密码"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit">       <input type="reset"> </td> </tr> </tbody> </table> </form> </body> </html>
16、div和span
div（块）：全称为division，”分割、分区“的意思，div标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数标签都可以嵌套在div标签中，div标签中还可以嵌套多层div标签，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span（内敛）：用来修饰文字的，div和span都是没有任何默认样式的，需要配合css使用。
CSS
1、CSS基础语法
格式：选择器{属性1：值1，属性2：值2；属性3：值3}
单位：px–>像素（pixel）、%–>百分比（相对于父容器）
基本样式：width、height、background-color
CSS注释：/* */
2、CSS样式
内联（行内、行间）样式
在html标签上添加style属性来实现的
<div style="width: 100px; height: 100px; background-color: #4682B4"> 这是一个块 </div>
内部样式
在style标签里添加的样式（优点是可以复用代码）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> div{width: 10%; height: 100px; background-color: #9ACD32;} span{background-color: #6A5ACD;} </style> <body> <div> 这是一个块 </div> <span> 这是一个内联 </span> </body> </html>
外部样式
引入一个单独的CSS文件，name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性比指定资源的地址
通过@import方式引入（此方式问题较多，不建议使用）
3、CSS中的颜色表示法
1.单词表示法
2.十六进制表示法
3.RGB三原色表示法
4、CSS背景样式
1.background-color：背景颜色
2.background-image：背景图
url：背景地址
默认水平垂直都铺满背景图
3.background-repear：平铺方式
repeat-x：x轴进行平铺
repeat-y：y轴进行平铺
repeat：x，y都进行平铺（默认值）
no-repeat：不进行平铺
4.background-position：背景位置
x，y：数字（百分比）|单词
（background-position：100px 100px|center top）
5.background-attachment：背景图随滚动条的移动方式
- scroll：背景位置是按照当前元素进行偏移的（默认值），即滚动滚动条时图片不动
fixed：背景位置是按照浏览器进行偏移的，即跟着滚动条滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{height: 2000px}/*扩大页面高度，使得出现滚动条*/ div{width: 200px; height: 200px; background-color: #9ACD32; background-image: url(../img/1.png); background-position: 0 0; background-repeat: no-repeat; background-attachment: fixed; } </style> </head> <div></div> <body> </body> </html>
显示效果
拖动前：
拖动后：
将background-attachment属性改为scroll后
拖动前：
拖动后：
若将背景图片位置设置为center center，则当为fixed时看不到背景图片（因为背景图片位于相对整个页面的center，已经超出容器大小，无法显示）
5、边框样式
1.border-style：边框样式
solid：实线
dashed：虚线
dotted：点线
2.border-width：边框大小
3.boerder-color：边框颜色
中间可加入方向，只针对某一条边来设置样式（top、bottom、left、right)
6、文字样式
font-family：字体类型
- 一次可以设置多个字体，当前面的字体电脑中不存在时则选择后续方案，都不存在时自动选择电脑默认字体
- 当字体类型名中出现空格时需要使用引号括起来
衬线体端点有棱角
font-size：字体大小
默认大小为16px
数值法：字体大小一般设为偶数（方便文字对齐）
单词法：
1. xx-small：最小
2. x-small：较小
3. small：小
4.medium：正常（默认值）
5. large：大
6. x-large：较大
7. xx-large：最大
font-weigt：字体粗细
单词法：
- 正常：normal
- 加粗：bold
数值法：
100-900（100-500为正常，600-900为加粗）
font-style：字体样式
正常：normal
斜体：italic（oblique也表示斜体，但是使用较少）
区别：italic带有倾斜属性的字体才可以设置倾斜操作
oblique没有倾斜属性的字体也可以设置倾斜操作
color：颜色
7、文本
text-decoration：文本装饰
- 下划线：underline
- 删除线：line-through
- 上划线：overline
- 不添加任何装饰：none
可以添加多个文本修饰，之间用空格隔开
text-transform：文本大小写
- 小写：lowercase
- 大写：uppercase
- 只针对首字母大写：capitalize
（针对英文）
text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体的大小相同
text-align：文本对齐方式
默认左对齐
对齐方式：left，right，center，justify（两端点对齐）
line-height：段落行高
段落行高由上边距，字体大小，下边距三者组成
默认行高不是固定值，是随当前字体的大小不断变化的
取值：number（px）| scale（比例值，跟文字大小成比例）
改变行高取值其实是改变上边距大小
letter-spacing：字之间的间距
word-spacing：词之间的间距
（只针对于英文）
折行问题
在容器中输入中文或英文时默认会自动折行，但是当输入的英文中出现很长的单词或遇到阿拉伯数字时不会自动折行。
word-break：break-all（非常强烈的折行，将单词紧挨在一起）
word-wrap：break-word（不是那么强烈的折行，会产生空白区域）
8、CSS复合样式
一个CSS属性只控制一种样式，叫做单一样式
一个CSS属性控制多种样式，叫做复合样式
复合样式：background，border，font
复合的写法：通过空格的方式实现
border-right : 2px black solid;
background : red url() repeat 0 0;
复合写法有的不需要关心顺序，有的需要。（background，border不需要）
font最少要有两个值size family，且size要在family前面，其他属性写在这二者前面
9、CSS选择器
ID选择器
- css：#elem{}
- html：id=“elem
命名规范：
1.id是唯一值，在一个页面中只能出现一次，不能有相同的id
2.命名的第一位不能是数字
3.驼峰式(小驼峰：searchButton，大驼峰：SearchButton)、下划线式、短线式
clss选择器
css：.elem{}
html：class=“elem”
注：
class选择器是可以复用的（不同的容器可以有相同的class）
可以添加多个class样式（<div class="box content"></div>）
多个class样式的时候，样式的优先级根据CSS中的顺序决定，而不是class属性中的顺序
标签+类的写法（div.elem、p.elem使得该类只对于该容器生效）
标签选择器（TAG选择器）
div{}
适用的场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如层次选择器
群组选择器（分组选择器）
可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用
通配选择器
*{} == div,ul,li,p,h1,h2…{}
尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用！
使用的场景：
- 去掉所有标签的默认样式时
层次选择器
1.后代：M N{} M后层的所有N标签
2.父子：M>N{} M的下一层N标签
3.兄弟：M~N{} 当前M下面的所有兄弟（同级别）N标签
4.相邻：M+N{} 当前M相邻的N标
属性选择器
M[attr]{}
1.=：完全匹配
2.*=：部分匹配
3.^=：起始匹配
4.$=：结束匹配
5.[][]：组合匹配
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> div[class]{background:red} /*对带有class属性的div起作用，即第二三四五和最后一个*/ div[class="box"]{background:red} /*对class属性的值为box的div起作用，即第二个和最后一个div*/ div[class*="box"]{color: blue;} /*对class属性里含有box的div都起作用，即第二个、第四个和第五个和最后一个div*/ div[class^="box"]{color:orange} /*对以box为起始字符的div起作用，即第二个和第五个和最后一个*/ div[class$="box"]{color:orange} /*对以box为结束字符的div起作用，即第二个和第四个和最后一个*/ div[class][id]{color:pink} /*对同时具有id和class属性的div起作用，即最后一个*/ </style> <body> <div> aaaaa </div> <div class="box"> bbbbb </div> <div class="search"> cccccc </div> <div class="bigbox"> BBBBB </div> <div class="boxbig"> BBBBB </div> <div class="box" id="boxx"> bbbbb </div> </body> </html>
伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上时，用伪类来添加。
M：伪类{}
：link——访问前的样式（只能添加给a标签）
：visited——访问后的样式（只能添加给a标签）
：hover——鼠标移入时的标签（可以添加给所有的标签）
：active——鼠标按下时的标签（可以添加给所有的标签）
注：如果四个伪类都生效，一定要注意顺序为：LVHA
一般网站只这样去设置：a{}和a:hover{}（移入前后）
：after——通过伪类的方式给元素后面添加一个文本内容
：before——通过伪类的方式给元素前面添加一个文本内容
div：after{content:"world";color:red}
hello
-->hello world(hello为黑色，world为红色)
——可以用于实现浮动清除，设置列表前面的图标等功能
：checked，：disabled，：focus都是针对表单元素的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> :checked{width: 100px; height: 100px} :disabled{width: 100px; height: 100px} :focus{background-color: pink} </style> </head> <body> <input type="checkbox"> <input type="checkbox" disabled> <input type="text"> </body> </html>
check之前：
点击（check）之后：
光标点击前
光标点击后
结构性伪类选择器
：nth-of-type(num)
：nth-child(num)
——num从1开始，表示第num项
——当num写n时表示所有项，2n表示偶数项，2n+1表示基数项
：first-of-type
：last-of-type
：only-of-type——只有一个时起作用
child和type的区别：
div：nth-of-type（2）表示第二个div
div：nth-of-child（2）表示第二个容器，如果第二个容器是div则起作用，不是则不起作用
