嵌套列表
列表之间可以互相嵌套形成多层级列表
<!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>
<ul>
<li>
辽宁省
<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
<li>烟台</li>
</ul>
</li>
</ul>
</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>好美味小吃</title>
</head>
<body>
<dl>
<dt>好美味小吃</dt>
<dd>
<dl>
<dt>小吃类</dt>
<dd>煮粉干</dd>
<dd>蛋炒饭</dd>
<dd>煎蛋</dd>
<dd>米饭</dd>
</dl>
<dl>
<dt>卤味类</dt>
<dd>鸭肠</dd>
<dd>面筋</dd>
<dd>牛肚</dd>
<dd>猪耳朵</dd>
<dd>猪头肉</dd>
<dd>大肠</dd>
<dd>鱿鱼</dd>
</dl>
<dl>
<dt>套餐类</dt>
<dd>卤面筋饭</dd>
<dd>猪肉肉饭</dd>
<dd>猪耳朵饭</dd>
<dd>卤猪脚饭</dd>
<dd>卤猪舌头饭</dd>
</dl>
<dl>
<dt>炖罐类</dt>
<dd>猪蹄黄豆</dd>
<dd>猪肚莲子</dd>
<dd>猪心枸杞</dd>
<dd>羊肉枸杞</dd>
<dd>牛肉枸杞</dd>
</dl>
<dd>
</dl>
</body>
</html>
表格标签
<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题
注：之间是有嵌套关系的，要符合嵌套规范。
语义化标签：tHead、tBody、tfoot只能出现一次。
注：在一个table中，tBody是可以出现多次的，但是tHead、tfoot只能出现一次。
<!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>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2019年1月1日</td>
<td><img src="./链接的综合练习/images/(R34Y5B8@HM$B14TCE}W{@X.png" alt=""></td>
<td>有大雨,不宜出行</td>
</tr>
<tr>
<td>2019年1月2号</td>
<td><img src="./链接的综合练习/images/6X@B2JP7PM)9D}VGP}VLK]0.png" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
</tBody>
<tfoot>
</tfoot>
</table>
</body>
</html>
表格属性
border：表格边框
cellpadding：单元格内的空间
cellspacing:单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式（left、center、right）
valign:上下对齐方式（top、middle、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>
</head>
<body>
<table border="10" cellpadding="10" cellspacing="10">
<caption></caption>
<tHead>
<tr>
<th>班次名称</th>
<th>科目</th>
<th>授课内容</th>
<th>增值服务</th>
<th>课时</th>
<th>价格</th>
<th>试听</th>
<th>购买</th>
</tr>
</tHead>
<tBody>
<tr>
<td rowspan="3">真题精解班</td>
<td>行测+申论</td>
<td>全科历年真题精解</td>
<td rowspan="3">课后赠2套模拟卷24小时以内答疑</td>
<td>48</td>
<td>1280元</td>
<td><img src="./链接的综合练习/images/A@_5HOZB(J8I2]Q9Q7ON%JP.png" alt=""></td>
<td><img src="./链接的综合练习/images/QVJ~{$80JM[U@$RTQGZ[M4L.png" alt=""></td>
</tr>
<td>行测</td>
<td>行测历年真题精解</td>
<td>32</td>
<td>980元</td>
<td><img src="./链接的综合练习/images/A@_5HOZB(J8I2]Q9Q7ON%JP.png" alt=""></td>
<td><img src="./链接的综合练习/images/QVJ~{$80JM[U@$RTQGZ[M4L.png" alt=""></td>
<tr>
<td>申论</td>
<td>申论历年真题精解</td>
<td>16</td>
<td>580元</td>
<td><img src="./链接的综合练习/images/A@_5HOZB(J8I2]Q9Q7ON%JP.png" alt=""></td>
<td><img src="./链接的综合练习/images/QVJ~{$80JM[U@$RTQGZ[M4L.png" alt=""></td>
</tr>
<tr>
<td rowspan="3">高分技巧班</td>
<td>行测+申论</td>
<td>全科技巧强化</td>
<td rowspan="3">入学试卷测评24小时内答疑</td>
<td>32</td>
<td>980元</td>
<td><img src="./链接的综合练习/images/A@_5HOZB(J8I2]Q9Q7ON%JP.png" alt=""></td>
<td><img src="./链接的综合练习/images/QVJ~{$80JM[U@$RTQGZ[M4L.png" alt=""></td>
</tr>
<tr>
<td>行测</td>
<td>行测速解技巧强化</td>
<td>18</td>
<td>680元</td>
<td><img src="./链接的综合练习/images/A@_5HOZB(J8I2]Q9Q7ON%JP.png" alt=""></td>
<td><img src="./链接的综合练习/images/QVJ~{$80JM[U@$RTQGZ[M4L.png" alt=""></td>
</tr>
<tr>
<td>申论</td>
<td>申论速解技巧强化</td>
<td>14</td>
<td>580元</td>
<td><img src="./链接的综合练习/images/A@_5HOZB(J8I2]Q9Q7ON%JP.png" alt=""></td>
<td><img src="./链接的综合练习/images/QVJ~{$80JM[U@$RTQGZ[M4L.png" alt=""></td>
</tr>
</tBody>
<tfoot></tfoot>
</table>
</body>
</html>
表单标签
<form>：表单的最外层容器
<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
<textarea>:多行文本框
<select>、<option>：下拉菜单
<label>：辅助表单
input（单标签）标签有一个type属性，决定是什么控件。
form、input、textarea、select、label..
还有一些常见的属性：checked、disabled、name、for..
<!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>
<h2>输入框：</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框：</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checknox">葡萄
<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>
</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>
<center>
<h4>电子邮箱:
<input type="text" placeholder="电子邮箱">
</h4>
<h4>设置密码:
<input type="password" placeholder="设置密码">
</h4>
<h4>真实姓名:
<input type="text" placeholder="真实姓名">
</h4>
<dd>性别：
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
</dd>
<dd>
生日：
<select size="">
<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>日
<div><a href="https://new.qq.com/rain/a/20210404A00F6C00">为什么要填写我的生日？</a></div>
</dd>
<br>
<dd>
我现在：<select>
<option selected disabled>请选择身份</option>
<option >学生</option>
<option >老师</option>
<option >校领导</option>
</select>（非常重要）
<br>
</dd>
<dd>
<img src="./链接的综合练习/images/1_1$9E)DZTGL]KI[K68G4XK.png" alt="错误了"width="150px" height="50px">
<a href="https://new.qq.com/rain/a/20210404A00F6C00">看不清楚换一张</a>
</dd>
<br>
<dd>
<strong>验证码：</strong>
<input type="password" placeholder="验证码">
</dd>
<br>
<input type="button" value="立即注册" onclick="alert('你按下了按钮')" >
</center>
</body>
<tfoot>
</tfoot>
</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>
<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" placeholder="请输入用户名"></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>
</html>
<div>与<span>
div全称为divsion，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，用来实现网页的规划和布局。
<span>用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。
<!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>
<h2><a href="#">mui - 移动 <span>HTML5</span> 前端框架</a></h2><a href="#"><img src="" alt=""></a>
<p>性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5...</p>
<a href="#">https://www.oschina.net/p/mui?hmsr=aladdin1e1</a>
</div>
</body>
</html>CSS基础语法
格式：选择器{属性1：值1；属性2：值2}
单位：px→像素（pixel）、%→百分比
基本样式：width、height、background-color
CSS注释：/*CSS注释的内容*/
<!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: 25%; height: 100px; background-color: red;}
/* span{ background-color: blue;} */
</style>
</head>
<body>
<div>这是一个块</div>
<div>又是一个块</div>
<span>这是一个内联</span>
</body>
</html>内联样式与内部样式
内联样式：在html标签上添加style属性来实现的。
内部样式：在<style>标签内添加的样式。
注：内部样式的优点，可以复用代码。
区别：内部样式的代码可以复用、复合w3c的规范标准。进行让结构和样式分开处理。
外部样式
引入一个单独的CSS文件，name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。
通过link标签引入外部资源，rel属性指定资源跟页面的关系，hrdf属性资源的地址。
通过@import方式引入外部样式。
<!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">
<!-- <link rel="stylesheet" href="./30_common.css"> -->
<title>Document</title>
<style>
@import url('./30_common.css');
</style>
</head>
<body>
<div>这是一个块</div>
</body>
</html>CSS中的颜色表示法
1、单词表示法：red、blue、green、yellow......
2、十六进制表示法：
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
3、rgb三原色表示法：rgb（255，255，255）；
取值范围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>
</head>
<body>
<div style="width: 200px; height:200px; background-color: red;" ></div>
<div style="width: 150px; height: 200px; background-color: blue;"></div>
</body>
</html>
CSS背景样式
background-color 背景色
background-image 背景图
url（背景地址）
默认：会水平垂直铺满背景图
background-repeat 平铺方式
repeat-x repeat-y（x，y都进行平铺，默认值）no-repeat （都不平铺）
background-position：背景位置
x y ：number（px %）|单词
x：left、center、right
y：top、center、bottom
background-attachment：背景图随滚动条移动的方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器进行偏移的）
CSS边框样式
border-style： 边框样式
solid：实线 dashed：虚线 dotted：点线
border-width ：边框大小
px ...
border-color：边框颜色
red #f00 ...
边框也可以针对某一边进行单独设置：border-left-style：中间是方向 left、right、top、bottom
颜色：透明颜色 transparent
<!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{background-color:green ; }
div{ width: 0px; height: 0px;
border-top-color:red;
border-top-style: solid ;
border-top-width: 30px;;
border-right-color:transparent;
border-right-style: solid;
border-right-width: 30px;;
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 30px;;
border-left-color: transparent;
border-left-style: solid;
border-left-width: 30px;;
}
</style>
</head>
<body>
<div></div>
</body>
</html>CSS文字样式
font-family：字体类型
英文字体: Arial、'Time New Roman'
中文字体：微软雅黑、宋体
中文字体的英文名称
微软雅黑：'Microsoft YaHei'
宋体：SimSun
衬线体与非衬线体
注意事项
1、设置多字体的方式
2、引号的问题
font-size：字体大小
默认;16px
写法：number（px）单词
注：字体大小一般为偶数。
font-weight：字体粗细
模式：正常（normal） 加粗（bold）
写法：单词（normal、bold）| 数值（100-900，100到500正常 600到900加粗）
font-style：字体样式
模式： 正常（normal） 斜体（italic）
写法：单词（ normal、italic）
注：oblique也是表示斜体（了解）
区别：1、italic 带有倾斜字体的可以设置的
2、oblique 没有倾斜属性的字体也可以设置倾斜操作
color：字体颜色
CSS段落样式
text-decoration：文本修饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
注：添加多个文本修饰：空格隔开
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同
text-align：文本对齐方式
对齐方式：left、right、justift、center（两端点对齐）
line-height：定义行高
什么是行高，一行文字的高度，上边距和下边距的等价关系
默认行高：不是固定值，而是变化的。根据当前字体的大小在不断的变化。
取值：1、number（px）| scale（比例值，跟文字大小成比例）
letter-spacing：字之间的间距
word-spacing：词之间的间距（针对英文段落）
强制拆行
英文和数字不自动折行问题：
1、word-break：break-all；（非常强烈的折行）
2、word-wrap：break-word；（不是那么强烈的折行，会产生空白区域）
CSS复合样式
一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合样式
复合的写法，是通过空格的方式来实现的。复合写法有的是不需要关心顺序，例如backgroung、border；有的是需要关心顺序，例如font。
1、background：red url（）repeat 0 0；
2、border：1px red solid；
3、font：
注：最少要有两个值 size family（顺序）
weight style size/line-height family
注：尽量不要混写，如果非要混写，那么一定要先复合样式再写单一样式。
CSS选择器
ID选择器
CSS：#elem{}
html：id= “elem”
注：1、在一个页面中，ID值是唯一的。
2、命名规范，字母_-数字（命名的第一位不能是数字）
3、命名方式，驼峰式、下划线式、短线式。
驼峰写法：searchButton（小驼峰） SearchButton（大驼峰）searchSmallbutton
短线写法：search-small-button
下划线写法：search_small_button
CLASS选择器
CSS:.elem{}
1、class选择器是可以复用的。
2、可以添加多个class样式。
3、多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4、标签+类的写法
扫一扫
4646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
