1. CSS
1.1 文档流
- 所有的元素默认情况下都是在文档流中存在的
- 文档流是网页的最底层
- 元素在文档流中的特点：
- 块元素
1.默认宽度是父元素的全部
2.默认高度被内容（子元素）撑开
3.在页面中自上而下垂直排列
- 内联元素
1.默认高度和宽度都被内容撑开
2.在页面中自左向右水平排列，如果一行不足以容下所有的元素
则换到下一行继续从左向右1.2 浮动
- 使用float来设置元素的浮动
- 可选值：
none 默认值，元素不浮动，就在文档流中
left 元素向页面的左侧浮动
right 元素向页面的右侧浮动
- 浮动特点：
1.元素设置浮动以后，会完全脱离文档流，并向页面的左上或右上浮动。
直到遇到父元素的边框或其他的父元素时则停止浮动。
2.如果浮动元素上边是一个没有浮动的块元素，元素不会超过该块元素。
3.浮动元素的浮动位置不能超过他上边浮动的兄弟元素，最多一边齐
4.浮动元素不会覆盖文字，文字会围绕在浮动元素的周围，所以可以通过浮动来实现文字环绕图片的效果。
- 浮动以后元素会完全脱离文档流，脱离文档流以后元素会具有如下特点：
1.块元素不独占一行
2.块元素的宽度和高度都被内容撑开
3.元素不在文档流占用位置
4.内联元素会变成块元素
- 高度塌陷
- 在文档流中元素的高度默认被子元素撑开，当子元素浮动时，子元素会脱离文档流，
此时将不能撑起父元素的高度，会导致父元素的高度塌陷。父元素高度塌陷会导致其他元素的位置上移，导致页面的布局混乱。
- 可以通过开启元素的BFC来处理高度塌陷的问题。
- BFC叫做Block Formatting Context
- 它是一个隐含属性，默认情况是关闭，当开启以后元素会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素覆盖
3.父元素可以包含浮动的子元素 ******
- 开启BFC的方式很多：
1.设置元素浮动
2.设置元素绝对定位
3.设置元素为inline-block
4.将元素的overflow设置为一个非默认值
- 一般我们采取副作用比较小的方式
overflow:hidden;1.3 定位
- 通过定位可以将元素摆放到页面的任意位置
- 使用position来设置元素的定位
- 可选值：
- static 默认值 元素不开启定位
- relative 开启元素的相对定位
- absolute 开启元素的绝对定位
- fixed 开启元素的固定定位
- 相对定位
1.相对于元素自身在文档流中的位置进行定位
2.相对定位的元素不会脱离文档流，定位元素的性质不会改变，块还是块，内联还是内联
3.如果不设置偏移量，元素不会发生任何的变化
4.会提升元素的层级
- 绝对定位
1.相对于离它最近的开启了定位的祖先元素进行定位，如果祖先元素都没有开启定位则相对于浏览器窗口进行定位。
2.绝对定位会使元素完全脱离文档流，会改变元素的性质，内联变成块元素，块元素的宽度被内容撑开
3.绝对定位的元素如果不设置偏移量，元素的位置不会发生变化
4.会提升元素的层级
- 固定定位
- 固定定位也是一种绝对定位，它的大部分特点都和绝对定位是相同的。
- 不同的是：
- 固定定位永远相对于浏览器窗口进行定位
- 固定定位会固定在浏览器的指定的位置，不会随页面一起滚动
- 偏移量
- 当元素开启了定位以后，可以通过四个偏移量来设置元素的位置
top：相对于定位位置的顶部的偏移量
bottom：相对于定位位置的底部的偏移量
left：相对于定位位置的左侧的偏移量
right：相对于定位位置的右侧的偏移量
- 一般只需要使用两个值即可给元素进行定位
top left
top right
bottom left
bottom right
- 偏移量也可以指定一个负值，如果是负值则元素会向相反的方向移动
- 层级
- 当元素开启定位以后，可以通过z-index来设置层级，
它需要一个正整数作为参数，值越大层级越高，层级越高越优先显示
如果层级一样，则后边的会盖住前边的，父元素永远都不会盖住子元素。
- 文档流 < 浮动 < 定位
- 元素的透明
使用opacity来设置元素的透明度
- 需要一个0-1之间的值
- 0 表示完全透明
- 1 表示完全不透明
IE8及以下的浏览器不支持该样式，需要使用如下方式来设置
filter:alpha(opacity=透明度);
- 需要一个0-100之间的值
- 0 表示完全透明
- 100 表示完全不透明2. HTML
2.1 表格
在网页中可以通过表格来表示一些格式化的数据。
表格相关的标签：
- 在网页中可以通过表格来表示一些格式化的数据
- 表格相关的标签
- <table> 用来创建一个表格
- <tr> 表示表格中的一行
- <th> 表示表头中的单元格
- <td> 表示表格中的单元格
- 属性：
colspan 横向的合并单元格
rowspan 纵向的合并单元格
- 例子：
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
- 长表格
- <thead> 表格的头部
- <tbody> 表格的主体
- 注意：如果表格中没有写thead tbody tfoot，浏览器会自动向table中添加一个tbody
并且将所有的tr都放到tbody中，tr是tbody的子元素，不是table的子元素
- <tfoot> 表格的底部 <!--
在生活中经常会使用表格来表示一些格式化的数据：比如 ：课程表 银行对账单 人名单
同样在网页中也可以使用表格来表示一些格式化的数据
使用table标签来创建一个表格
-->
<table border="1" width="20%" align="center">
<!--在table标签中使用tr来表示表格中的一行，有几行就有几个tr-->
<tr>
<!--在tr中使用td表示一个单元格，有几个td就有几个单元格-->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<!--使用rowspan来纵向的合并单元格-->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!-- 使用colspan来横向的合并单元格-->
<td colspan="2">D3</td>
</tr>
</table><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
/*设置一个宽度*/
width: 300px;
/*设置居中*/
margin: 50px auto;
/*设置一个边框*/
/*border: 1px solid black;*/
/*border-spacing可以用来设置表格边框之间的距离*/
border-spacing: 100px;
/*
* border-collapse可以用来设置表格的边框的合并
* 如果将值设置collapse，则table和td的边框将会自动合并为一个
* 当设置了边框合并以后，border-spacing将自动失效
*/
border-collapse: collapse;
}
td,th{
/*设置边框*/
border: 1px solid black;
}
tbody > tr{
background-color: #bfa;
}
</style>
</head>
<body>
<!-- table是一个块元素 -->
<table>
<!--
我们在创建一个表格时，如果没有使用thead tbody tfoot这些标签时，
浏览器会自动在页面中添加tbody，并且将所有的tr都放到tbody中
所以实际上tr并不是table子元素，而是tbody的子元素
-->
<tr>
<!--在html中还为我们提供了一个th标签，专门用来表示表头的单元格-->
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>38</td>
<td>流沙河</td>
</tr>
</table>
</body>
</html> <table>
<!--
HTML中还为我们提供了三个标签，用来将表格分成三个部分
<thead>
<tbody>
<tfoot>
我们可以将对应部分的tr，放到指定的标签
使用这三个标签创建的表格，在打印时，会在每页都打印表格的头部和底部
无论编写到什么位置，thead中的内容，永远都会显示在表格的头部
而tfoot中的内容，永远都会显示在表格的底部
-->
<!--表格的头部-->
<thead>
<tr>
<td>日期</td>
<td>收入</td>
<td>支出</td>
<td>合计</td>
</tr>
</thead>
<!--表格的底部-->
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
<!--表格的主要内容-->
<tbody>
<tr>
<td>16.11.11</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>16.11.11</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>16.11.11</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
</tbody>
</table> <!--
在一个表格中也可以嵌套其他的表格
在很久以前，我们经常使用表格在页面中进行布局，此时就需要使用大量的表格的嵌套
表格布局，布局起来非常的简单，但是维护起来非常的麻烦，所以现在已经很少有人用
表格的列数由td最多的那个tr来决定
-->
<table border="1" width="100%">
<tr>
<td height="120" colspan="2"></td>
</tr>
<tr>
<td height="400" width="20%"></td>
<td height="400">
<table border="1" width="100%" height="100%">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="120" colspan="2"></td>
</tr>
</table>2.2 表单
- 表单可以将用户的信息提交到服务器中
- <form>
- 用来创建一个表单
- 属性：
action:需要一个服务器地址，提交表单时表单中的内容将会被提交到该地址
- 表单项
- <input />
- 它可以根据不同的type属性值，生成不同的表单项
- type="text" 文本框 <input type="text" name="" />
- type="password" 密码框 <input type="password" name="" />
- type="radio" 单选按钮 <input type="radio" name="" value="" checked="checked" />
- type="checkbox" 多选框 <input type="checkbox" name="" value="" checked="checked" />
- type="submit" 提交按钮 <input type="submit" value="按钮上的文字" />
- type="reset" 重置按钮 <input type="reset" value="按钮上的文字" />
- type="button" 普通按钮 <input type="button" value="按钮上的文字" />
- <select>
- 下拉列表
- <select name="">
<option value="" selected="selected"></option>
<option value=""> </option>
<option value=""></option>
</select>
- <button>
- 按钮功能input那几个按钮一样，但是它们要灵活一些
<button type="submit">按钮的文字</button>
<button type="reset">按钮的文字</button>
<button type="button">按钮的文字</button><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 使用form标签来创建一个表单，form中有一个必须的属性叫做action，
action需要一个服务器的地址，当我们提交表单时，填写的内容将会提交到action指向的地址 -->
<form action="target.html">
<!-- 在form中可以创建一个表单项，用户可以通过表单项来填写信息 -->
<!-- 文本框
使用input标签来创建一个文本框，它需要一个type属性是text
- 如果希望表单中的内容最终发送到服务器，还必须要给表单项添加一个name属性
该属性将会作为用户填写内容名字，在服务器中可以根据这个名字来获取用户填写内容
- 默认情况下，用户添加的内容将会以查询字符串的形式发送给服务器，
所谓的查询字符串就是url地址?后边的内容
- username=sunwukong&password=123123
- 查询字符实际上就是一个一个的名值对结构，多个名值对之间使用&隔开
一个名字 = 一个值
名字就是表单项指定的name属性值
值就是用户填写的内容，在服务器中可以通过名字来获取用户填写的内容
可以通过value属性为文本框指定一个默认值！！ -->
用户名 <input type="text" name="username" value="hello" /> <br /><br />
<!-- 密码框也是input，不同的是它type需要使用password -->
密码 <input type="password" name="password" /> <br /><br />
<!--
单选按钮
- 使用input来创建一个单选按钮，它的type属性值是radio
- 单选按钮是通过name属性来分组的，相同的name属性值属于一组！
- 像这种选择框不需要用户填写内容的，还必须指定一个value属性，
这样选中的元素的value属性值将会被提交到服务器
- 如果希望某个单选按钮处在默认选中的状态可以在标签中添加属性 checked="checked" -->
性别 <input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" checked="checked" />女
<br /><br />
<!-- 多选框
- 使用input来创建一个多选框
- 它的type属性是checkbox -->
爱好 <input type="checkbox" name="hobby" value="ppq" />乒乓球
<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="lq" />篮球
<br /><br />
<!-- 下拉列表
- 使用select来创建一个下拉列表
- 使用option标签来创建下拉列表中的选项
- 下拉列表的name属性需要指定给select标签，value属性需要指定给option
- 如果希望将option设置为默认选中，则可以在option中添加一个属性 selected = "selected" -->
你最喜欢的明星
<select name="star">
<option value="fbb">范冰冰</option>
<option value="zw" >赵薇</option>
<option value="lxr" selected="selected">林心如</option>
</select>
<br /><br />
<!-- 提交按钮
- 使用input来创建一个提交按钮
- 它的type叫做submit
- 通过value属性可以设置提交按钮上的文字
-->
<input type="submit" value="注册" />
<!--
重置按钮
重置按钮可以使表单恢复到默认值
-->
<input type="reset" />
<!--
如果type设置为button，那么会生成一个普通的按钮，
它只有一个功能就是被点
-->
<input type="button" value="按钮" />
<br /><br />
<!--
也可以通过button标签来创建按钮
使用button创建的按钮和input创建的按钮功能一致，
只不过button标签更加的灵活
-->
<button type="submit">提交按钮</button>
<button type="reset">重置</button>
<button type="button">单纯的按钮</button>
</form>
</body>
</html>
3. JS
3.1 JS 基础
JavaScript 负责页面中的的行为。它是一门运行在浏览器端的脚本语言。
1）JS 的编写的位置
① 可以编写到标签的指定属性中
<button onclick="alert('hello');">我是按钮</button>
<a href="javascript:alert('aaa');">超链接</a>② 可以编写到script标签中
<script type="text/javascript">
//编写js代码
</script>③ 可以将代码编写到外部的js文件中，然后通过标签将其引入
<script type="text/javascript" src="文件路径"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 可以将js代码编写到外部js文件中，然后通过script标签引入
写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制
推荐使用的方式
-->
<script type="text/javascript" src="js/script.js"></script>
<!--
script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略
如果需要则可以在创建一个新的script标签用于编写内部代码
-->
<script type="text/javascript">
alert("我是内部的JS代码");
</script>
<!--
2. 可以将js代码编写到script标签
<script type="text/javascript">
alert("我是script标签中的代码！！");
</script>
-->
</head>
<body>
<!--
3. 可以将js代码编写到标签的onclick属性中
当我们点击按钮时，js代码才会执行
虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用
-->
<button onclick="alert('讨厌，你点我干嘛~~');">点我一下</button>
<!--
4. 可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码
-->
<a href="javascript:alert('让你点你就点！！');">你也点我一下</a>
<a href="javascript:;">你也点我一下</a>
</body>
</html>
2）输出语句
① alert("要输出的内容"); //该语句会在浏览器窗口中弹出一个警告框
② document.write("要输出的内容"); //该内容将会被写到body标签中，并在页面中显示
③ console.log("要输出的内容"); //该内容会被写到开发者工具的控制台中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--JS代码需要编写到script标签中-->
<script type="text/javascript">
/*
* 控制浏览器弹出一个警告框
*/
alert("哥，你真帅啊！！");
/*
* 让计算机在页面中输出一个内容
* document.write()可以向body中输出一个内容
*/
document.write("看我出不出来~~~");
/*
* 向控制台输出一个内容
* console.log()的作用是向控制台输出一个内容
*/
console.log("你猜我在哪出来呢？");
</script>
</head>
<body>
</body>
</html>3）基础语法
<script type="text/javascript">
/*
多行注释
JS注释
多行注释，注释中的内容不会被执行，但是可以在源代码中查看
要养成良好的编写注释的习惯，也可以通过注释来对代码进行一些简单的调试
*/
//单行注释
//alert("hello");
//document.write("hello");
console.log("hello"); //该语句用来在控制台输出一个日志
/*
* 1.JS中严格区分大小写
* 2.JS中每一条语句以分号(;)结尾
* - 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，
* 而且有些时候，浏览器会加错分号，所以在开发中分号必须写
* 3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化
*
*/
alert("hello");
</script>4）字面量和变量
<script type="text/javascript">
/*
* 字面量，都是一些不可改变的值
* 比如 ：1 2 3 4 5
* 字面量都是可以直接使用，但是我们一般都不会直接使用字面量
*
* 变量 变量可以用来保存字面量，而且变量的值是可以任意改变的
* 变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，
* 而很少直接使用字面量
* 可以通过变量对字面量进行描述
*/
//声明变量
//在js中使用var关键字来声明一个变量
var a;
//为变量赋值
a = 123;
a = 456;
a = 123124223423424;
//声明和赋值同时进行
var b = 789;
var c = 0;
var age = 80;
console.log(age);
</script>5）标识符
在JS中所有的可以自主命名的内容，都可以认为是一个标识符，是标识符就应该遵守标识符的规范。比如：变量名、函数名、属性名。
规范：
- 标识符中可以含有字母、数字、_、$
- 标识符不能以数字开头
- 标识符不能是JS中的关键字和保留字
- 标识符一般采用驼峰命名法
<script type="text/javascript">
/*
* 标识符
* - 在JS中所有的可以由我们自主命名的都可以称为是标识符
* - 例如：变量名、函数名、属性名都属于标识符
* - 命名一个标识符时需要遵守如下的规则：
* 1.标识符中可以含有字母、数字、_、$
* 2.标识符不能以数字开头
* 3.标识符不能是JS中的关键字或保留字
* 4.标识符一般都采用驼峰命名法
* - 首字母小写，每个单词的开头字母大写，其余字母小写
* helloWorld xxxYyyZzz
*
* - JS底层保存标识符时实际上是采用的Unicode编码，
* 所以理论上讲，所有的utf-8中含有的内容都可以作为标识符
*/
/*var if = 123;
console.log(if);*/
//千万不要这么用
var 锄禾日当午 = 789;
console.log(锄禾日当午);
</script>
