目录
01-元素显示模式
02-快速生成+注释
03-表格标签
效果图：编辑
03-表格标签属性
04-单元格合并
05-段落标签
06-details
07-换行标签、水平线标签
08-tabindex
09-文本格式化标签
10-无语义标签
11-表单的基本结构
11-图片标签
12-常见的表单元素
13-html的全局属性
14-视频
15-html5语义标签
016-音频标签
017-h5表单
18-链接标签
019-css体验
编辑
20-锚链接（根据id跳过无需信息，直接定位）
21-css的三种引入方式
21-mp3，mp4
021-表格标签小实验
22-基本选择器
23-包含选择器
24-有序列表,无序列表
编辑
25-复合选择器
26-自定义列表
27-iframe框架
28-属性选择器
29-特殊字符
30-首行缩进
31-表单基本结构
01-元素显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的显示模式</title>
</head>
<body>
<!--元素显示模式：
块元素：独占一行 div 宽、高、内外边距可以设置
行内元素：一行可以存在多个 span 宽、高、内外边距不可以设置
行内块元素：
-->
<div>我是一个盒子</div>
<span>我是span</span>
<ul>
<li>我是li</li>
</ul>
</body>
</html>02-快速生成+注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 注释 :对代码进行解释 ctrl+/-->
坚实的基础看得出你是大家
</body>
</html>03-表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<!-- 表头 rows data-->
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tr>
</tfoot>
</table>
</body>
</html>效果图：
03-表格标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="10px" width="900px" height="400px" cellspacing="0">
<!-- 表头 rows data
table：border（只控制最外围大小）、width、height(tbody 值是底线，只高不低)、cellspacing(单元格与单元格之间的距离)
caption；通过css更改
thead、tr、tbody、tfoot:height\align（水平）\valign（垂直）,无width
-->
<caption>学生信息</caption>
<thead height="200px" align="center" valign="middle">
<tr height="400px" align="center" valign="center">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody height="600px" align="center" valign="middle">
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot height="600px" align="center" valign="middle">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
04-单元格合并
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- td 跨行：rowspan
跨列：colspan
-->
<table border="1px" width="800px" cellspacing="0">
<!-- 表头 rows data-->
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td colspan="5">共计:4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
05-段落标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 段落标签 p 行与行之间空 -->
<p>戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。</p>
<p>此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
</p>《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
</body>
</html>
06-details
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- details：详情（默认）标签 配合summary使用 -->
<details>
<summary>有志青年</summary>
我们这里都是优秀的有志青年
</details>
</body>
</html>
07-换行标签、水平线标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>戴尔·卡耐基</h2>
<hr />
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
</body>
</html>-
08-tabindex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- tabindex：让本不能tab遍历获取焦点的元素可以获取 可以为负数，0，正数
#代表空，tabindex=1从此处开始往下(tab聚焦，<0则tab键无效，=0则从上至下tab聚焦)-->
<input type="text">
<a href="#">去百度</a>
<div>我是第一个盒子</div>
<div tabindex="1">我是第2个盒子</div>
<div>我是第3个盒子</div>
<div>我是第4个盒子</div>
</body>
</html>
09-文本格式化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>戴尔·卡耐基被誉为美国<strong>“成人教育之父”</strong>，他所著的<b>《人性的弱点》</b>汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。</p>
<p>此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如<em>卡耐基</em>所言：“一个人的成功,只有15%归结于他的专业知识。还有<i
style="color: pink;">85%</i>归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
</p>《人性的弱点》<ins>"身带穷气，一看便知"</ins>：<u>犯了这些事情，贵人之气会减少</u>
<del>2999</del> 9.9<br />
<s>11.0 </s> 11.0
</body>
</html>
10-无语义标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--容器，独占一行 多用于布局-->
<div>
nkdscldscdscdcnkdcds
<img src="../images/dog.gif" alt="">
</div>
<div>
nkdscldscdscdcnkdcds
</div>
<div>
nkdscldscdscdcnkdcds
</div>
<!-- span一行可存在多个 -->
<span>a</span>
<span>a</span>
<span>a</span>
</body>
</html>
11-表单的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单的基本结构</title>
</head>
<body>
<!-- 表单：网页交互区，收集用户信息
action:将数据交给谁处理
name：必有属性，否则显示的是？（百度要求是wd）
method：提交方式 ajax
-->
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>提交</button>
</form>
</body>
</html>
11-图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<!-- src指向图片位置 alt:图片地址发生错误时，用来提示的字
title:鼠标经过时，显示的文字
border 边框
width：宽度
height：高度
-->
<img src="../images/dog.gif" alt="我是一只最好看的猫咪" title="我是一只狗" height="700px" border="20">
<img src="C:\Users\21195\Desktop\7-5\day1\images\dog.gif">
<img src="https://img1.baidu.com/it/u=3113560374,3342883877&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt="">
</body>
</html>
12-常见的表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常见的表单元素</title>
</head>
<body>
<form action="#">
<!-- 文本框 maxlength:最大长度,value值表示文本框默认输入值-->
用户名：<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名："><br />
<!-- 密码 -->
密码：<input type="password" name="pwd"><br />
<!-- 单选框或多选必须有value ，例如：name相同表示同组；value表示选的是男还是女，不加表示是否选上（off/on)，男和女选其之一-->
<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女<br />
<!-- 多选框 label标签中for:id,表示通过id进行单向指向，-->
<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
<!--lable标签直接包含选项，不用id-->
<label><input type="checkbox" name="food">吃臭豆腐</label>
<!-- checked默认选中 -->
<input type="checkbox" name="food" checked >吃肥肉
<!-- 隐藏域 -->
<input type="hidden" name="hid" value="南德斯才能使调查">
<!-- 确认按钮 -->
<!-- <button type="submit"></button> -->
<!--重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button">
<!-- 文本域 -->
<textarea cols="20" rows="10" maxlength="200
">
</textarea><br />
<!-- 下拉菜单 -->
<select name="jiguan" id="">
<option value="南京">南京</option>
<!-- selected下拉菜单的默认选中 -->
<option value="成都" selected>成都</option>
<option value="西安">西安</option>
</select>
<input type="submit">
</form>
</body>
</html>
13-html的全局属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pink {
color: pink;
}
</style>
</head>
<body>
<!-- id身份证号，在一个页面中只能出现一次 -->
<div id="one"></div>
<!-- class 一类 可以出现多个-->
<div class="pink" style="font-size: 40px;">我是哟个盒子</div>
<div class="pink">我是个盒子</div>
<div class="pink">我是哟个盒子</div>
<div class="pink">我是哟个盒子</div>
<!-- accesskey 设置快捷键，例如：alt+s则直接提交
#代表空-->
<form action="#">
<input type="text" name="a" id="">
<button accesskey="s">提交</button>
</form>
<!-- style 全局属性，所有标签皆可以加-->
<!-- data-* 自定义属性 -->
</body>
</html>
14-视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频标签</title>
</head>
<body>
<!-- width="1800px" height="50px"
controls:控件
autoplay：自动播放
muted:静音播放
poster：等待加载时的显示图片
-->
<video src="./images/video.mp4" controls autoplay muted poster="./images/map.jpg"></video>
</body>
</html>
15-html5语义标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="head"></div>
<div class="body">
<div class="nav"></div>
</div>
<div class="footer"></div>
</body>
</html>016-音频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="./images/music.mp3" controls muted autoplay loop></audio>
</body>
</html>
017-h5表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<input type="number">
<input type="color">
<input type="time">
<button>tijaio</button>
</form>
</body>
</html>
18-链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 默认当前窗口打开 -->
<a href="http://www.xianoupeng.com/" target="_blank">去鸥鹏</a>
<a href="https://www.baidu.com" target="_blank">去百度</a>
<a href="./09-视频.html">去看小视频了</a>
<a href="https://www.baidu.com"><img src="./images/dog.gif"></a>
<a href="http://www.xianoupeng.com"><img src="./images/cat.gif"></a>
</body>
019-css体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css </title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>我是盒子1</div>
</body>
</html>20-锚链接（根据id跳过无需信息，直接定位）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锚链接</title>
<style>
body {
font-size: 20px;
}
</style>
</head>
<body>
<a href="#one">个人经历</a>
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
<!-- id属性------身份证号 -->
<div id="one">个人经历</div>
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
</body>
</html>21-css的三种引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式href跟的是你的css样式的路径 推荐！！！！！ -->
<link rel="stylesheet" href="./14-样式.css">
<!-- 内部样式 -->
<style>
/* css基本结/基本样式（择器表示定位到修改的样式的标签），注意属性名和属性值之间有空格
选择器{
属性名： 属性值；
属性名： 属性值；
}
*/
.box1 {
width: 300px;
height: 300px;
background-color: pink;
}
.box2 {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">我是盒子</div>
<!-- 行内样式：不推荐 -->
<div style="width: 300px; height: 300px; background-color: green;"></div>
<div class="box2">我是box2</div>
</body>
</html>
21-mp3，mp4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="./images/music.mp3" controls></audio>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="./images/video.mp4" controls></video>
</body>
</html>
22-基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 标签选择器 选中所有的p标签*/
p {
color: aqua;
}
/* id选择器:#+id名 */
#box1 {
color: pink;
}
/* 类选择器：类名可以多个重复的 */
.box2 {
color: blueviolet;
}
/* 通配符选择器
*{
}
*/
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
</html>
23-包含选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 子代选择器 选中亲生儿子(最近/包含的li)*/
.a>li {
background-color: pink;
}
/* 后代选择器 找到后代(包含的li)所有要找的元素*/
.a li {
color: blueviolet;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</ul>
</body>
</html>
24-有序列表,无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 有序列表 ol li-->
喜欢的食物
<ol type="a">
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>奶茶泡饭</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
你喜欢的明星是？
<ul type="circle">
<li>丁真</li>
<li>法外狂徒张三</li>
<li>华晨宇</li>
<li>罗翔</li>
</ul>
</body>
</html>
25-复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*复合即逗号选择器 div {
color: pink;
}
p {
color: pink;
}
span {
color: pink;
} */
div,p,span {
color:rgb(16, 122, 78);
}
</style>
</head>
<body>
<div>wisjiajsskmx</div>
<p>cndklcdsmc</p>
<span>jnckdsmc</span>
<ul>type="circle"
<li>吃饱穿暖CNBCCDC</li>
</ul>
</body>
</html>
26-自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>
你们喜欢的明星是？
<dd>
张三
</dd>
<dd>
里斯
</dd>
<dd>
张三
</dd>
</dt>
</dl>
</body>
</html>
27-iframe框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
这是我的主页面
<!-- <iframe src="https://www.taobao.com" width="900px" height="600px"></iframe> -->
<iframe src="https://www.baidu.com" width="900px" height="600px"></iframe>
<a href="https://www.taobao.com" target="nn">去淘宝</a>
<iframe name="nn" frameborder="0" width="800px" height="200px"></iframe>
</body>
</html>
28-属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
background-color: pink;
}
input[type="password"] {
background-color: rgb(0, 6, 27);
}
div[id] {
width: 300px;
height: 300px;
background-color: blue;
}
/* type^="te"以te开头 */
input[type^="te"] {
background-color: red;
}
input[type$="l"] {
background-color: green;
}
/* type*="e" type值里边包含e */
input[type*="e"] {
background-color: chartreuse;
}
</style>
</head>
<body>
<input type="text"><br />
<input type="password"><br />
<input type="search"><br />
<input type="url"><br />
<input type="number"><br />
<div id="aquamarine">1</div>
<div>2</div>
</body>
</html>
29-特殊字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<
>
<br />
我最喜欢的大明星是 法外狂徒张三
31°
</div>
</body>
</html>
30-首行缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* text-indent: 32px;em代表当前字体大小，2位当前字体的2倍 */
font-size: 20px;
text-indent: 2em;
}
</style>
</head>
<body>
<p>
戕害美的行径，在人类社会中从未消失过，只是从未像今天这样严峻：
一方面，君主时代，艺术和审美，被君王和贵族垄断；今天虽已进入大众民主时代，但各种各样的“政治正确”导致“温和的暴政”，这是最令人绝望的审美专制主义。
另一方面“网红审美”、“娘炮审美”、“土味审美”等恶俗的审美，从未像今天这般盛行；“美被恶制”，从未像今天这样严峻。艺术之美，似乎已然夕阳日落。
但“美的丧失”只不过是一个结果，更重要的是回归她诞生的源泉，因为美的发展，从来不是1+2+3的线性叠加，由0到1的创造新事物，才是美的艺术。越古老的美，反而愈能历久弥新。因此，当下尤有必要回溯美的源泉——欧洲文艺复兴，重新发现艺术大师们创造的艺术之美。
因此，有人说，未来只有两种纸质书不会消亡，第一种是全人类共同的经典，例如《圣经》等。另外一种，就是《欧洲文艺复兴大师》这样的艺术经典。
◎ 文艺复兴，不仅是美的胜利，更是反抗中世纪黑暗统治的认知觉醒
说到文艺复兴，许多读者自然会想到“文艺复兴三杰”——达芬奇、拉斐尔、米开朗基罗。
然而，三杰的成就虽然突出，却不能代表整个文艺复兴。除了复兴三杰，还有两位大师，对文艺复兴同样重要，却少为人知，一位是博斯，一位是卡拉瓦乔。
《欧洲文艺复兴大师》推出五位艺术大师，时间上，博斯是文艺复兴早期代表，三杰代表的是文艺复兴盛期，卡拉瓦乔则是晚期巴洛克艺术的奠基人。这样的五个人，能够更好反映欧洲文艺复兴的全貌。
</p>
</body>
</html>
31-表单基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd" id="">
<button>提交</button>
</form>
</body>
</html>
32-表格标签小实验
<!DOCTYPE html>
<!--声明文档 html5 -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<table border="1px" width="900px" height="400px" cellsapcing="0">
<!--cellsapcing="10"表示间隙大小
caption:通过css更改
border:边框大小
-->
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>名族</th>
<th>政治面貌</th>
</tr>
</thead height="200px" align="center">
<!--align：表示水平，垂直，居中
-->
<tbody>
<tr>
<td>姓名：</td>
<td>张三</td>
<td>年龄</td>
<td>18</td>
<td rowspan="3">img src="./"</td>
<tr>
<td>性别</td>
<td>男</td>
<td>gj</td>
<td>中国</td>
</tr>
<tr>
<td>手机号</td>
<td>111111</td>
<td>QQ号</td>
<td>23333</td>
</tr>
<tr>
<td>毕业</td>
<td>北大</td>
<td>电子邮箱</td>
<td colspan="2" >22222</td>
</tr>
<tr>
<td>住址</td>
<td colspan="4">上海</td>
</tr>
</tbody>
</table>
</body>
</html>
