2.1 嵌入列表
实机演示：
<body>
<strong><h1>好美味小吃</h1></strong>
<ul>
<li>小吃类</li>
<ul>
<li>煮粉干</li>
<li>拌芹菜</li>
<li>蛋炒饭</li>
<li>鸡蛋</li>
<li>米饭</li>
</ul>
</ul>
<ul>
<li>卤味类</li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</ul>
</body>
2.2 表格标签
<table>:表格的最外层容器
<tr>:定义表格行
<td>:定义表头
<caption>：定义表格表题
注：有嵌套关系
语义化标签：<tHead>,<tBody>,<tFood>
注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次
<table>
<caption>天气预报</caption>
<thead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>气温</th>
</tr>
<tr>
<td>2022.10.18</td>
<td>晴天</td>
<td>12~20</td>
</tr>
<tr>
<td>2022.10.19</td>
<td>多云</td>
<td>9~18</td>
</tr>
</thead>
<tfoot>
阿巴阿巴
</tfoot>
</table>
2.3 表格属性
- border:表格边框
- cellpadding:单元格内的空间
- cellspacing:单元格之间的属性
- rowspan:合并行
- colspan:合并列
- align:左右对齐
- valign:上下对齐
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<thead>
<tr>
<th colspan="2">日期</th>
<th>天气情况</th>
<th>气温</th>
</tr>
<tr>
<td rowspan="2">2022.10.18</td>
<td>白天</td>
<td>晴天</td>
<td>12~20</td>
</tr>
<tr>
<td>黑天</td>
<td>晴天</td>
<td>12~20</td>
</tr>
<tr>
<td rowspan="2">2022.10.19</td>
<td>白天</td>
<td>多云</td>
<td>9~18</td>
</tr>
<tr>
<td>黑天</td>
<td>多云</td>
<td>9~18</td>
</tr>
</thead>
colspan=“2“和rowspan=“2”相当于输入了两列（行），相当于在原有基础上多了两列（行），所以原有2列（行）时其实在它们之前还有两列（行）。
实机演示：
<table border="1" cellpadding="60" cellspacing="60">
<caption>天气预报</caption>
<thead>
<tr valign="bottom">
<th colspan="2">日期</th>
<th>天气情况</th>
<th>气温</th>
</tr>
<tr align="right">
<td rowspan="2" >2022.10.18</td>
<td>白天</td>
<td>晴天</td>
<td>12~20</td>
</tr>
<tr align="right">
<td>黑天</td>
<td>晴天</td>
<td>12~20</td>
</tr>
<tr >
<td rowspan="2">2022.10.19</td>
<td>白天</td>
<td>多云</td>
<td>9~18</td>
</tr>
<tr>
<td>黑天</td>
<td>多云</td>
<td>9~18</td>
</tr>
</thead>
<tfoot>
阿巴阿巴
</tfoot>
</table>
2.4 表单组合实例
- 表单标签：form 、input（单标签）有一个type属性，决定是什么控件。
<textarea>多行文本框<select> <option>下拉菜单
实机操作：
<!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>
<form>
<table border="1" cellpadding="30">
<tbody>
<tr>
<td>电子邮箱：</td>
<td><input type="text" placeholder="请输入电子邮箱"></td>
</tr>
<tr>
<td>设置密码：</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td>真实姓名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="gender">男                <input type="radio" name="gender">女</td>
</tr>
<tr>
<td>生日：</td>
<td>
<select >
<option selected disabled>请选择</option>
<option >2000</option>
<option >2001</option>
<option >2002</option>
</select>年
<select >
<option selected disabled>请选择</option>
<option >1</option>
<option >2</option>
<option >3</option>
</select>月
<select >
<option selected disabled>请选择</option>
<option >1</option>
<option >2</option>
<option >3</option>
</select>日
</td>
</tr>
<tr>
<td>我现在：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text"></td>
</tr>
<tr>
<td colspan="2" align="center">
<form>
<input type="submit" value="提交" style="width: 100px; height: 30px;">
</form>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
第二部分
主要学习CSS
1.1 CSS基础语法
<div>(块) <span>(内联)
- 格式：选择器（属性1：值1；属性2：值2）
- 单位：px ->像素、%->百分比
- 基本样式：width、height、background-color
- CSS注释：1. ctrl + / 2. shift + ctrl + A
1.2 内联与内部样式
内部样式：
<!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:50% ;height:50% ;background-color: green;}
</style>
</head>
<body>
<div>这是一个块</div>
<div>这是一个块</div>
</body>
</html>
内联样式：
<!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:50% ;height: 50px; background-color:green">这是一个块</div>
<div style="width:50%;height: 50px; background-color:green">这是一个块</div>
</body>
</html>
1.3 外部样式
- 1.
<link>标签 rel、href 2.@import(不建议使用)等页面加载完成后再显示css - CSS中的颜色表示法：单词表示法、十六进制表示法、RGB三原色表示法。
<head>
<link rel="stylesheet" href="./common.css">
</head>
1.4 背景样式
- background-color:背景颜色
- background-image:背景图片
- background-repeat:背景图片的平铺方式
- background-position:背景图片的位置
- background-attchment:背景图随滚动条的移动方式（有许多属性，其中scroll为默认值按元素进行偏移，fixed按照浏览器进行偏移）
- background-size：调节背景大小（cover可以把背景放大，使其可以完全覆盖背景区域，可能会因为太大，有些显示不出来）（contain也是放大，但是它是自适应的，铺不满时，会留白。）
1.5 边框样式
- border-style:边框样式
- border-width:边框大小
- border-color:边框颜色
（注：针对某一条边可以进行单独设置）
例如:
div{width ; height: border-top/left/right/bottom-color:......}
1.6 CSS文字样式
- 文字的类型：font-family 样式有空格的需要“ “（双引号）
<style>
div{font-family:文字样式}
</style>
-
文字的大小：font-size 可以数字也可英文（默认 16px）
以下方式不推荐，且尽量大小设置为偶数。
-
字体粗细：font-weight ：模式:（正常 normal 加粗 bold）
写法:单词 || 数字（100~900，100-500正常，500-900都是加粗） -
字体样式：font-style 模式：正常（normal）斜体（italic）
写法：单词（normal、italic、oblique）
注：oblique也是表示斜体，用得比较少。
区别：1.italic 带有倾斜属性的字体可以设置。
2.oblique 没有倾斜属性的也能设置。
1.7 CSS段落样式
- test-decoration：文本修饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何修饰
注：添加多个文本修饰：line-through underline overline - test-transform：文本大小写
小写：lowercase
大写：uppercase
只对首字母大写：capitalize - text-indent：文本缩进
首行缩进
em相对单位：1em永远与字体大小相同 - text-align：文本对齐方式
对齐方式：left、right、center、justify（两端点对齐） - line-height：定义行高
默认行高：不是固定值，根据当前字体大小变化
取值方式：1. 数字（px） 2.scale（比例值，跟文字大小） - letter-spacing：字之间的间距
- word-spacing：词之间的间距（针对英文段落）
英文和数字不能折行问题：
1.word-break：break-all；（非常强烈）
2.word-wrap：break-word；（不是那么强烈）
实机操作：
<!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: 800px;}
h1{text-align: center;color: #FF6800;}
h2{color:#87C8FB;text-indent: 2em ;}
#p1{font-style: italic;font-weight: bold;text-indent: 2em;}
#p2{color: #A4E88D;line-height: 30px;text-indent: 2em;}
#p3{color: #9EF4FB;line-height: 30px;text-indent: 2em;font-style: italic;text-decoration: underline}
#p4{color:; line-height: 30px;text-indent: 2em;letter-spacing : 10px; font-weight: bold;}
#p5{color:#F9B4F8;line-height: 30px;text-indent: 2em;;}
</style>
</head>
<body>
<div>
<h1>Angelbaby</h1>
<h2>基本信息</h2>
<p id="p1">杨颖（Angelababy），1989年2月28日出生于上海，13岁时移居香港，中国影视女演员。</p>
<p id="p2">2009年主演电影《全城热恋》。2012年，凭借爱情片《第一次》获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗、杨幂、倪妮共同当选为新一代“四小花旦”；同年在徐克导演的影片《狄仁杰之神都龙王》中担任女主角，并且获得第21届北京大学生电影节最受欢迎女演员奖；4月，Angelababy主演电视剧《大汉情缘之云中歌》。2014年加盟综艺节目《奔跑吧兄弟》并主演电影版；同年主演顾长卫导演的电影《微爱之渐入佳境》，票房突破2.8亿，2015年5月参演好菜坞电影《独立日2》；7月，主演电影《摆渡人》。</p>
<h2>早年经历</h2>
<p id="p3">1989年2月28日Angelababy出生在上海，中文名扬械、杨顾自小随家人到上海定星，在上海的消艺学控学演戏及就复13岁时，格顾回香港加入了Talent Bang 还担任Viva Club Disney主持。</p>
<h2>个人生活</h2>
<p id="p4">2015年5月27日，黄晓明和An g ela baby(杨颖)在青岛民政局领证完婚 。</p>
<p id="p5">2015年10月8日，黄晓明和Angelababy在上海展览中心正式举办婚礼。上午8点，Angelababy工作室曝光了一两人的婚纱照，照片中，两人以巴黎地标建筑为背景，浪漫亲吻。</p>
</div>
</body>
</html>
1.8 CSS复合样式
- 复合样式是通过空格的方式实现的，复合写法有的不需要顺序，有的需要（例如：font 只能 size family在最后且不能缺少这两个。）
其他：例如background : red url() repeat 0 0 ;
border : 1px red solid ;(不需要考虑顺序)
实机演示：
<style>
div{width: 1300px; height: 1500px;
background: red url(./QQ图片20221020231714.jpg) no-repeat;<!--注意每个单独的语句后要加分号隔开。-->
border: 1px solid green;
font: italic bold 50px 黑体 }
</style>
</head>
<body>
<div>这是一个块</div>
</body>
1.9 CSS选择器：
- ID选择器：#elem{} id=“elem”
1.ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
2.命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
3.驼峰写法：searchButton(小驼峰) SearchButton（大驼峰）searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button
- CLASS选择器：. elem{} class=“elem”
注：
1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4.标签+类的写法
<style>
.div1{background : red ;}
.p1{font: italic bold 50px 黑体;}
.p2{font: 100px 宋体;}
</style>
</head>
<body>
<div class="div1">这是一个块</div>
<p class="p1">这是一段话</p>
<p class="p2">这是一段话</p>
</body>
- 标签选择器（TAG选择器）
eg：div{}<div></div>
使用场景：
1.去掉某些标签的默认样式
2.复杂的选择器中，如层次选择器 - 群组选择器（分组选择器）
可以通过逗号的方式，添加统一的CSS样式，来达到代码复用。
<style>
div,.p1,.p2{background: red;}
/*或者是div,p{background: red} */
</style>
</head>
<body>
<div class="div1">这是一个块</div>
<p class="p1">这是一段话</p>
<p class="p2">这是一段话</p>
</body>
-
通配选择器
*{ } - > div,ul,ol,li,h1,h2......{}（前者都可以控制后面所有标签）
注：尽量避免使用通配选择器，因为会给所有标签添加样式，慎用。
使用场景：去掉标签所有样式时。 -
层次选择器
后代 M N { }
父子 M > N { }
兄弟 M ~ N { } 当下M下面的兄弟N标签
相邻: M + N { } 当前M下面相邻的N标签
后代演示：
<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>
ul li {background: red;}
</style>
</head>
<body>
<div>这是一个块</div>
<ul>
<li>111</li>
<ol>
<li>111</li>
<li>111</li>
</ol>
</ul>
<ol>
<li>
</li>
</ol>
</body>
父子演示：
<style>
ul > li {border: 1px red solid;}
</style>
</head>
<body>
<div>这是一个块</div>
<ul>
<li>
<ol>
<li>111</li>
<li>111</li>
</ol>
</li>
</ul>
</body>
兄弟演示：
<style>
div ~ ul {border: 1px red solid;}
</style>
</head>
<body>
<div>这是一个块</div>
<ul>
<li>
<ol>
<li>111</li>
<li>111</li>
</ol>
</li>
</ul>
<ul>
<li>
<ol>
<li> 546465 </li>
</ol>
</li>
</ul>
<ol>
<li>111</li>
<li>222</li>
</ol>
<ul>
<li>111</li>
</ul>
相邻演示：
<style>
div + p {border: 1px red solid;}
</style>
</head>
<body>
<p>这是一段话</p>
<div>这是一个块</div>
<p>这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>
</body>
-
属性选择器
M [attr] { }
1. = :完全匹配
2. *= ：部分匹配
3.^ = :初始匹配
4. $ = :结束匹配 -
伪类选择器
CSS伪类用于向某些元素添加特殊效果，一般用于初始样式添加不上的时候用伪类来添加。
-
： link 初始访问前链接颜色
-
：visited访问过之后显示
-
：hover鼠标移入时显示
-
：active点击后显示的颜色
注意:
1.link visited 只能给a标签添加，hover和active 可以给所有标签添加。
2.如果四个伪类都生效，一定要注意顺序：LVHA
3.一般网站只能去设置： a{} a:hover{ } -
: after、: before 用于后续添加一些文字或修饰
-
：checked、：disabled用于表单的选择修饰
-
：focus用于文本输入框
实机演示：
<style>
a:link { color:rgb(226, 180, 43);}
a:visited{ color :aquamarine}
a:hover{ color:brown}
a:active{color: blue;}
input:focus{ background-color:red}
input:checked{width: 100px ;height: 100px;}
:disabled{width: 500px;height: 100px;color: red;}
</style>
</head>
<body>
<a href="#">zshisfdh</a>
<input type="text">
<input type="checkbox" disabled>
<select >
<option value="" disabled>请选择</option>
<option value="">1</option>
</body>
结构性伪类选择器
-
nth-of-type（）角标是从第一项开始的，1表示第一项…… | n值 表示从0到无穷大
first-of-type：所有第一项
last-of-type：所有最后一项
only-of-type：所有中只有一项 -
nth-of-child（）在同类型中的第几个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
p:nth-of-type(3){color:red;}
li:first-of-type{color: green;}
li:last-of-type{color:blue}
div:only-of-type{background-color: aqua;}
h2:nth-of-type(2n-1){color:yellow}
</style>
</head>
<body>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<ul>
<li>123123</li>
<div>456456</div>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
</ul>
<h2>123123123</h2>
<h2>123123123</h2>
<h2>123123123</h2>
<h2>123123123</h2>
<h2>123123123</h2>
</body>
</html>
2.0 CSS继承
- 文字相关的可以被继承
- 布局相关的样式不能被继承（默认是不能被继承的，但是可以通过设置继承 inherit 值）
2.1 CSS优先级
-
相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置的样式 -
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同的样式，那么后写的引入方式优先级更高。 -
单一样式优先级
style 行间 > id >class > tag (标签)> *(通配) > 继承
注:
style 权重 1000
id 权重 100
class 权重 10
tag 权重 1 -
! important
提升优先级，非规范方式，不建议使用。（不能对继承进行使用） -
标签+类与单类
标签+类 > 单类 -
群组优先级
群组与单一选择器的优先级相同，靠后的优先级更高
优先级比较方法：
- 权重法：
eg: p h .elem #vxc :1 + 1 +10 +100
但是不同等级下的有着本质差别，不能通过相加而越级超越。 - 约分法
p h li ------>li
ul p #vxc ----->#vxc
第三部分
CSS盒子模型
组成：content ->padding->border->margin
物品 填充物 包装盒 盒子之间的间距
content：内容区域 width和height组成的
padding：内边距（内填充）
只写一个值：30px （上下左右）
写两个值：30px 40px（上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）
单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom
注:
1.背景色填充到margin以内的区域（不包括margin区域）
2.文字在content区域添加。
3.padding不能为负数，而margin可以为负数。
box-sizing：
盒尺寸，可以改变盒子模型的展示形态。
默认值：content-box ：width、height - > content
border-box：width、height - > content padding border
使用场景：
1.不用去计算一些值
2.解决一些百分比的问题
对比演示：
<!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>
#box1{width: 200px;height: 500px;background-color: red; padding: 50px;border: 10px blue solid ;margin: 5px;}
#box2{width: 200px ;height: 500px; padding: 50px;background-color: blue;border: 10px red solid;margin: 5px;
box-sizing: border-box;}
</style>
</head>
<body>
<div id="box1">这是一个盒子</div>
<div id="box2">这也是一个盒子</div>
</body>
</html>
盒子模型的一些问题：
1.margin叠加问题，出现在上下margin同时存在的时候，会取上下值中较大的值为叠加值。
2.margin传递问题，出现在嵌套结构中，只对margin-top的问题。
扩展：
1.margin左右自适应是可以的，但是上下不能。
2.width、height不设置时，对盒子模型的影响。（上下两个盒子自动对齐自适）
3269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
