北京实训Day01-HTML5基础内容
00 笔记-网站的组成三个内容
Html结构 - 了解清楚
Css样式 - 对结构的修饰
js的行为交互 - 一系列的动态的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
Day01_上午
2、网站的组成
Html结构 - 了解清楚
Css样式 - 对结构的修饰
js的行为交互 - 一系列的动态的效果
3、结构内容
所有的标签内容
标签的语法
标签分类：单标签和双标签
单标签：只自己单独出现，只有开始没有结束
双标签：成对出现，又开始没有结束
但标签都要放在<>里面
基本语法
单标签：<标签名字 属性="属性值" 属性="属性值">
双标签：<标签名字 属性= "属性值" 属性= "属性值"></标签名字>
属性 ：对元素的形容，属性值：形容的取值
eg:身高="180cm"
体重="170kg"
注意：属性和属性值使用=链接，每一组后面都要敲空格
属性值需要加引号(可单可双)
清楚的看到页面中有内容、文本、图片、音频、视频等等
文本：大小 颜色区别 下划线 删除线 加粗 倾斜 H20 角标标签 布局标签
4、样式内容
5、行为交互
-->
body
<del>233</del>
</body>
</html>
01 加粗倾斜下划线标签
介绍了一些在BuildX中快速编程的快捷键
如 b+tab div*3+tab等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
为了提高开发速度，可以用快捷键Enter和Tab自动补全
加粗标签：让文本加粗
基本语法：<b>文本</b>
倾斜标签：让文本倾斜显示
基本语法：<i>文本</i>
下划线标签：给文本添加下划线效果
基本语法：<u>文本</u>
问题：样式一起实现 == 嵌套 == 合理嵌套
一层包裹一层
-->
<b>XX工业大学</b>
<i>你叫李勇</i>
<u><b>18级计算机专业</b></u>
</body>
</html>
02-删除线和上下角标
分子式、公式平方可以用到
--像这样--
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
删除线：给文本添加删除线效果，从文本的中间穿过的
基本语法：<s>文本</s>
角标标签
上角标
m^2
<sup></sup>
下角标
H_2O CO_2
<sub></sub>
-->
马上双十一到了，我要买一个笔记本，价格只要<s>998</s> 9块8</u> <br>
10m*10m=100m <sup>2</sup> <br>
H<sub>2</sub>O
</body>
</html>
03-段落和换行
段落在css中可以设置段前空格等属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 段落标签：文章的段落
基本语法：<p>文本</p>
每一个段落之间有段间距，段落里面文本是有行间距的
换行标签：强制执行
基本语法<br/> === <br>
-->
<p>
18级计算机专业学生来千峰教育进行校内实训 <br>
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
</p>
<p>
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
18级计算机专业学生来千峰教育进行校内实训
</p>
</body>
</html>
04-div和span标签
每个div都是一个不同的块
div是块级元素，而span是行级元素
在写一段话的时候，如果需要不同的效果，推荐使用span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
div和span ====== 其实是没有特殊实际的意义
但是在布局中经常使用
div主要是布局区块划分
span===对应独立文本的修饰
div====区块划分元素
基本语法：<div></div>
div是区块划分，如果想要左右排列的话，则需要使用浮动属性，默认div是纵向排列的
span===主要是对独立的文本进行修饰
span的排列方式：一行显示
-->
<div>左侧的布局</div>
<div>中间的布局</div>
<div>右侧的布局</div>
<span>
我是第一个span
</span>
<span>
我是第二个span
</span>
<span>
我是第三个span
</span>
</body>
</html>
05 列表介绍及其生成快捷键
分为有序列表 ol 无序列表ul 自定义列表dl三种
一般自定义列表用来编写图文并存的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 列表标签
以同样的格式来展示数据信息的是列表
列表分类：有序，无序，自定义
有序列表
有顺序的列表
注意：ol里面只能放li
<ol>
<li></li>
<li></li>
<li></li>
</ol>
快速创建标签
ol>li*3 ===== 一个ol里面有三个li
修改列表项显示类型
type="A/a/I/i/1" 只有五种
修改列表项起始
start="数值"
无序列表
<ul></ul>
ul里面只能放li，其他内容可以放到li里面
快速创建标签
ul>li{2333}*5
默认项目符号：黑色实心圆点
能否修改以下列表项项目符号
修改无序列表项的项目类型：
type = "disc/circle/square/none"
自定义列表
一般情况下只应用于布局（图文混排/问答列表）
一般：一个dl里面建议使用一个dt和一个dd
基本语法：
<dl>
<dt>图片</dt>
<dt>文本</dt>
</dl>
<dl>
<dt>图片</dt>
<dt>文本</dt>
</dl>
<dl>
<dt>图片</dt>
<dt>文本</dt>
</dl>
-->
<ol type="A" start="27">
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门带上</li>
<li>把电源线插上</li>
<li>把大象再拿出来。。。</li>
</ol>
<ul type="none">
<li>勇哥好勇啊</li>
<li>勇哥好勇啊</li>
<li>勇哥好勇啊</li>
<li>勇哥好勇啊</li>
<li>勇哥好勇啊</li>
</ul>
<dl>
<dt>问题：勇哥帅吗</dt>
<dd>回答：啊这</dd>
</dl>
<dl>
<dt>问题</dt>
<dd>回答</dd>
</dl>
</body>
</html>
06-标题标签(h1-h6)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 文章的标题
h1-h6
双标签，有开始有结束
总结特点
1.自动加粗
2.自动换行
3.h1最大，h6最小
4.就六个级别
-->
<p>我是一个p</p>
<h1>我是文章的一级标题</h1>
<h2>我是文章的二级标题</h2>
<h3>我是文章的三级标题</h3>
<h4>我是文章的四级标题</h4>
<h5>我是文章的五级标题</h5>
<h6>我是文章的六级标题</h6>
</body>
</html>
07-字体标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 字体标签：对于文本进行修饰的，能修改字体、能修改大小、能修改显示的颜色
字体大小取值：size="1-7"
1最小，7最大
-->
千锋教育和<font size="6" color="red" face="隶书">XX工业大学</font>进行校内实训
</body>
</html>
08-图片标签(三种取图片情况)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
图片标签
基本语法
<<img src="路径">
路径：就是文件存储打开的一个完整的一个途径
1.页面和图片是同级关系的话，可以直接把图片的名字当作路径使用
2.页面和图片所在的文件夹是同级关系的话，需要先进入对应的文件夹里面才能找到对应的图片文件
3.当前页面所在的文件夹和图片是同级关系
..代表返回上一级
-->
<img src="pic1.jpg" >
<img src="img/pic3.jpg" >
</body>
</html>
09-超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 超链接标签
基本语法：
<a href="路径"></a>
a标签里面路径的作用：实现不同页面之间的跳转
如果说你跳转的页面/地址是一个外网地址的话，则需要带互联网协议
http:// .. https://
如果是本地地址的话，则需要通过关系去查找对应的路径====使用额路径的都是相对路径
相对路径===通过某种文件之间的关系去查找页面/其他文件内容
绝对路径===是一个完整的地址，互联网地址或者是从某一个盘符下面开始的某一个文件
特点：超链接自带下划线效果；默认超链接访问前是蓝色，访问后是紫色
超链接的另外一个作用：在本页面中的不同区域的跳转
效果：通讯录里面，小说章节的跳转
利用A标签的锚点效果====小说的制作
-->
<a href="http://www.baidu.com">跳转到百度</a> <br>
<a href="04-图片标签.html">去图片标签</a>
</body>
</html>
10-a标签锚点的使用
锚点可以用来写小说的目录，点击小说目录就可以传到指定位置
平时的应用：QQ或者微信中通讯录中的字母
下面的例子就是锚点的一个应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 通过锚点效果制作小说功能
语法应用
<a href="#锚点名字">第一章</a>
<a href="#锚点名字">第二章</a>
<div id="锚点名字"></div>
<div id="锚点名字"></div>
-->
<a href="#box1">第一章</a>
<a href="#box2">第二章</a>
<a href="#box3">第三章</a>
<a href="#box4">第四章</a>
<a href="#box5">第五章</a>
<a href="#box6">第六章</a>
<!-- 小说内容 -->
<div id="box1">
<b>第一章：我与齐鲁工大的偶遇</b> <br>
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
2018年，我和大火来到了XX工业大学......
</div>
<div id="box2">
<b>第二章：我傻了</b> <br>
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
我傻了我傻了我傻了我傻了我傻了我傻了
</div>
<div id="box3">
<b>第三章：来都来了</b> <br>
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
来都来了来都来了来都来了来都来了来都来了
</div>
<div id="box4">
<b>第四章：有一说一，确实</b> <br>
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
有一说一，菜煎饼真好吃！ 确实确实确实！
</div>
<div id="box5">
<b>第五章：北京实训</b> <br>
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
吃了快三年的菜煎饼，我来到了北京实训，发现脆皮鸡真好吃！
</div>
<div id="box6">
<b>毕业典礼</b>
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
吃了快四年的菜煎饼和脆皮鸡，我毕业了！吃了快四年的菜煎饼和脆皮鸡，我毕业了！
</div>
</body>
</html>
11-样式修饰
HTML是网站的结构层，而CSS就是网站的样式层。
HTML的结构层标签
CSS的样式层=对标签结构的修饰
JS的行为交互层====动态的效果
选择器：查找页面元素的一种方式方法
{}：规定了选择器查找到的元素(标签)实现统一的样式规定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
网站的组成部分
1、HTML的结构层 ====== 标签
结构===完毕
2、CSS的样式层 ======= 对标签结构的修饰
样式修饰
语法：
选择器{
样式规则
}
选择器：查找页面元素的一种方式方法
{}：规定了选择器查找到的元素(标签)实现统一的样式规定
男生{
发型:3mm;
T恤:大红色;
短裤:正绿色;
}
样式规则里面放置的是属性和属性值
注意：属性和属性值需要使用冒号：连接
每一组属性和属性值结束后需要使用分号结尾
如果你的属性和属性值是最后一组，则不需要使用分号
如果后面继续填写，则需要使用分号
3、JS的行为交互层 ==== 动态的效果
-->
</body>
</html>
12-总结
0x00 HTML基础学了这些基本的标签，用法，感觉对于前端要求不高的话，已经比较够用了。
0x01 HBuildX是一个很好用的轻量级前端开发编辑器 强烈推荐hhh
0x02 老师很顶 一天感觉能学到很多 学完也很累了 牛！
