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-课后作业
老师给留了一道课后作业题，代码也贴在这里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>费曼技巧：最强的学习方法</h1>
<p>作者：秋小曦 2017.04.10 14:12:19 字数 1,086 阅读 19,865</p>
<h3>一、“费曼技巧”的概念</h3>
<p>来源，这个技巧的灵感，源于诺贝尔物理奖获得者，理查德·费曼（Richard Feynman）。在他的自传里，<br>他提到
曾纠结于某篇艰深的研究论文。他的办法是，仔细审阅这篇论文的辅助材料（supporting material），直到他掌<br>
握了相关的知识基础、足以理解其中的艰深想法为止。</p>
<img src="img/feiman.jpg" >
<p>费曼技巧，亦同此理。对付一个知识枝节繁杂如发丝、富有内涵的想法，应该分而化之，切成小知识块，再逐个对<br>
付，你最终能填补所有的知识缺口，否则，这些缺口将阻挠你理解这个想法。
</p>
<p><b>“费曼技巧”是一种学习方法，是一种以教促学的学习方法，</b>是通过假定模拟讲课的方式而将要学习的内容讲给自<br>
己听。
</p>
<h3>二、“费曼技巧”的实施步骤：</h3>
<p>第1步：选择一个你想要理解的概念选择一个你想要理解的概念, 然后拿出一张白纸, 把这个概念写在白纸的最上边.
</p>
<p>第2步：<b>设想一种场景，你正要向别人传授这个概念（模拟教学）</b>在白纸上写下你对这个概念的解释, 就好像你正<br>
在教导一位新接触这个概念的学生一样. 当你这样做的时候, 你会更清楚地意识到关于这个概念你理解了多少, 以及<br>
是否还存在理解不清的地方。
</p>
<input type="image" src="img/feimanjiqiao2.png" />
<p>第3步：如果你感觉卡壳了, 就<b>回顾一下学习资料</b>无论何时你感觉卡壳了, 都要回到原始的学习资料并重新学习让你<br>
感到卡壳的那部分, 直到你领会得足够顺畅, 顺畅到可以在纸上解释这个部分为止。</p>
<p>第4步：为了让你的讲解通俗易懂，简化语言表达，最终的目的, 是<b>用你自己的语言, 而不是学习资料中的语言来解<br>
释概念</b>. 如果你的解释很冗长或者令人迷惑, 那就说明你对概念的理解可能并没有你自己想象得那么顺畅 -- 你要努<br>
力简化语言表达, 或者与已有的知识建立一种类比关系, 以便更好地理解它。
</p>
<h3>三、掌握“费曼技巧”需要注意的关键点</h3>
<p>费曼技巧之所以有效，很大一部分原因是由于其充分动用了我们的大脑，我们会提前对知识做一个总结，归纳，输<br>
出，这也是为什么我们给别人解释过某些事情后对之理解更深的原因所在。费曼技巧本质上就是把知识讲解给自<br>
己听，这个转换的过程中涉及到了几个比较重要的关键点，有利于把资料转换为知识。</p>
<p><b>1.挑重点：</b>：人的精力毕竟是有限的，成功的人也总是挑重要的事情来干。我们学生时代最兴奋的事情莫过于老<br>
师划重点了。但你有没有想过自己划重点的，在知识的阐述过程中有利于分清主次，重点攻克。</p>
<input type="image" src="img/下载.jpg" />
<p>
<b>2.简化：</b>：看起来跟第一点相似，但其实两点是在两个层面上进行的。一个是在知识点中挑选重要的。另一个是在<br>
挑出的知识点中对资料进行简化，可视化，已达到即使外行人也能了解的程度。</p>
<p>
<b>3.总结和连接：</b>：在输出的时候毫无疑问会和你大脑原有的知识进行比对，进而比较分析，加深理解。</p>
<input type="image" src="img/timg.jpg" />
</body>
</html>
13-总结
HTML基础学了这些基本的标签，用法，感觉对于前端要求不高的话，已经比较够用了。
HBuildX是一个很好用的轻量级前端开发编辑器 强烈推荐hhh
标签：好吃,四年,煎饼,实训,确实,内容,脆皮,HTML5 来源： https://www.cnblogs.com/liangyj/p/14952173.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。