二十一、嵌套列表
1.1
列表之间可以互相嵌套，形成多层级的列表
代码：
<ul>
<li>
辽宁省<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>
山东省<ul>
<li>济南</li>
<li>烟台</li>
<li>青岛</li>
</ul>
</li>
</ul>
效果展示：
嵌套的定义列表：
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>江苏省</dt>
<dd>南京</dd>
<dd>无锡</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>烟台</dd>
<dd>青岛</dd>
</dl>
</dd>
</dl>
效果展示：
1.2
作业：
代码：
<li>
小吃类
<ul>
<li>煮粉干</li>
<li>凉拌芹菜</li>
<li>蛋炒饭</li>
<li>米饭</li>
</ul>
</li>
<li>
卤味类
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
</ul>
</li>
<li>套餐类
<ul>
<li>猪肉肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>
</ul>
</li>
<li>炖罐类
<ul>
<li>牛肉枸杞</li>
<li>猪心枸杞</li>
<li>猪蹄黄豆</li>
</ul>
</li>
</ul>
效果展示：
二十二、 表格标签
1.1
<table>：表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
之间是由嵌套的关系的，要符合嵌套的规范
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>
</head>
<body>
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<tr align="right">
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
<td>2020年十月十五日</td>
<td>白天</td>
<td>晴朗</td>
<td>天气晴朗，适合出勤</td>
</tr>
<tr>
<td>2020年十月十五日</td>
<td>白天</td>
<td>阴雨</td>
<td>有小雨，出门带伞</td>
</tr>
<tr>
<td valign="top" rowspan="2">2020年十月十六日</td>
<td>白天</td>
<td>阴雨</td>
<td>有小雨，出门带伞</td>
</tr>
<tr >
<td>白天</td>
<td>阴雨</td>
<td>有小雨，出门带伞</td>
</tr>
</table>
</body>
</html>
效果展示：
二十三、表格的属性
border：表格的边框
cellpadding:单元格之内的空间
cellspacing:单元格之间的开年
rowspan:合并行
colspan:合并列
alifn:左右的对齐方式
valign:上下的对齐方式
<td valign="top" rowspan="2">
<table border="10" cellpadding="30"
效果展示：
二十四、表单input的标签
:表示表单最外层的容器 :标签用于所及用户的信息，更具不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。 input是一个单标签，标签里面有一个type的属性，决定是和是什么样的控件。 action选择提交的的地址
<body>
<form action="http://www.baidu.com">
<h2>输入框:</h2>
<input type="text">
<h2>密码框：</h2>
<input type="password">
<h2>复选框</h2>
<input type="checkput" checked>苹果
<input type="checkput">香蕉
<input type="checkput">葡萄
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
</body>
效果展示：
二十五、
1.1表单的标签
<textarea>:多行文本框
<select> 、 <option>:下拉菜单
label：辅助表单
<form action="http://www.baidu.com">
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select >
<option selected disabled>请选择</option>
<option>北京</option>
<option selected>上海</option>
<option>南京</option>
</select>
<select size="3">
<option>北京</option>
<option selected>上海</option>
<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="women"><label for="women">女</label>
</form>
效果展示：
二十六、表格表单的组合使用
1.1 制作一个组合的表格
<body>
<form action="">
<table border="1" cellpadding="30">
<tbody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名：</td>
<td><input type="text"placehoder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码；</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tbody>
</table>
</form>
</body>
效果展示：
二十七、
1.1 div和span
用span将要特殊标记的字符框起来
代码
效果展示：
二十八、CSS语法格式
1.1 CSS基础的语法
格式：选择器{属性1：值1；属性2：值2}
单位：px–>像素、%–>百分比
基本样式：width，height，background-colour
<!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>
效果展示：
二十九、内联样式与内部样式
1.1内联样式与内部样式
1.内联样式 style属性
2.内部样式 style标签
区别：内部样式的代码可以复用、复合W3C的规范标准，进行让结构和样式分开处理
三十、外部样式及两种写法
1.1
外部样式
引入一个单独的CSS文件，name.CSS
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。
详情可通过点击link的爱恨情仇来了解
通过@import方式引入外部样式（这种方式有很多问题，强烈不建议使用）
三十一，CSS中的颜色表示法
1.1
1.单词表示法：such as：blue、yellow、red
可以参照CSS单词颜色表示法
2、十六进制表示法
如："#ff0000"为红色
<!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 >aaaaaa</div>
</body>
</html>
效果展示：
通过颜色识别器，来查询颜色十六进制代码，点击即可下载。
三十二、背景样式
1.1
url
1.background-color：背景颜色
2.background-image：背景图片
3.background-repeat：背景图片的平铺方式
4.background-position：背景图片的位置
5.background-attachment：背景图随滚动条的移动方式
代码展示：
```kotlin
<!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: 300px;height: 300px;background-color: aqua;background-image:url(./img/R.jpg)}
</style>
</head>
<body>
<div ></div>
</body>
</html>
## 1.2
background-position 背景位置
x ，y：number（px、%）|单词
x：left、center、right
y：top、center、bottom
三十三、背景实现视觉差效果
三十四、 边框的样式
1.1border-style:边框的样式
1.solid：实线
2.dashed：虚线
3.dotted：点线
4.border-width：边框的大小
5.border-color：边框的颜色
边框也可以针对莫一条边进行单独设置：border-left-style：中间是方向 left、right、top、bottom
三十五、边框实现三角形
代码：
<!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: 0px;height: 0px; /*空白区域的大小*/
border-top-color: aqua;
border-top-style:solid ;
border-top-width: 30px;
border-right-color: red;
border-right-style:solid ;
border-right-width: 30px;
border-left-color: black;
border-left-style:solid ;
border-left-width: 30px;
border-bottom-color: green;
border-bottom-style:solid ;
border-bottom-width: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果展示：
三十六+三十七、CSS文字样式
1.1
font-family：文字类型
英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑(‘Microsoft YaHei’)，宋体(SimSun)
注：1、英文样式加在中文上是无效的，等价的是中文样式加在英文上是无效的
2、可以在电脑中的“控制面板”–>“字体”中查看电脑所带的字体类型
3、字体引用的引号：当字体名称中带有空格符号则需要加单引号才能使用
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>
div1{ font-family: 'Times New Roman', Times, serif;}
div2{font-family: 宋体;}
</style>
</head>
<body>
<div1>This is a text ('Times New Roman')</div1>
<p>This is a text（默认样式）</p>
<div2> 这是一段文字（宋体）</div2>
<p>这是一段文字（默认样式）</p>
</body>
</html>
2
效果展示；
三十八、文本修饰与文本的大小
1.1 css段落样式
ont-size：字体大小，16px为默认大小
写法：number（px）|| 单词
xx-small——最小
x-small——较小
small——小
medium——正常（默认值）
large——大
x-large——较大
xx-large——最大
注：字体的大小一般为偶数
font-weight
font-weight：字体粗细
模式：正常（normal）& 加粗（bold）
写法：单词（normal、bold） | number（100 200 … 900 ）
三十九、文本缩进和文本对齐
1.1
text-decoration
text-decoration:文本装饰
下划线：underline
上划线：overline
删除线：line-through
不加任何装饰：none
1.2
可以添加多个文本装饰
写法如下：
< style> div{ text-decoration:underline overline line-through }< /style>(中间用空格隔开，不一定是< div>里加，看需要的是在哪个“区域”)
text-transform
text-transform：文本大小写（只针对英文段落）
小写：lowercase
大写：uppercase
只针对单词首字母大小写：capitalize
四十、
1.1 文本间距与英文折行
letter-spacing
可以指定字符间距
word-spacing
可以设置单词之间的距离
text-align用于设置文本的对齐方式
写法：
可选值：
left 默认值 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
1
2
3
4
5
6
7
8
9
text-indent 设置首行缩进
写法：
在首行缩进中如果出现了英文会出现对不齐
一般用em为单位,1em永远字体大小相
line-hight：定义行高
行高：line-height，指的是文字占有的实际高度，可以通过line-height设置行高。
行高可以直接指定一个大小，单位可以是px 或者 em，也可以直接设置一个整数，将是字体大小的倍数；
line-height:2;表示行高是字体大小的2倍。
四十四+四十五、CSS选择器
1.1 ID选择器
CSS：#elem{}
html：id=“elem”
注：ID值唯一
命名规范：字母、-、_、数字（命名第一位不能是数字）
命名方式：驼峰式（用途英文）、下划线式、短线写法
小驼峰：searchButton 大驼峰：SearchButton
下划线写法：search_button
短线写法：search-button
1.2 CLASS选择器
CSS：.elem{}
html：class=“elem”
注：
1.class选择器是可以重复使用的
2.可添加多个class样式
扫一扫
2168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
