第一个月
1. 编辑器下载
推荐的是hbulider 开发环境
2. 浏览器
推荐chrome 谷歌浏览器学习
3. 建立技术笔记
推荐博客园
Web
本月任务 搭建静态网页。
静态页面:不需要网络请求就可以看到的页面叫静态页面。存在本地。
动态页面:需要网络请求才能看到的页面叫动态页面。存在服务器上。
网页的运行环境
浏览器 客户端
文件的种类
1. 文本文件 .txt
2. 应用程序文件 .exe
3. Word文件 .docx
4. Excel文件 .cls
5. Ppt文件 .ppt 6.网页文件 .html
C:/Users/Administrator/Desktop/cui.html 本地地址 绝对路径（沿着这个路径是可以找到的）
https://www.dcloud.io/hbuilderx.html 服务器地址 （需要手动配置）
网页的搭建
1.靠标签，
网页的美化
2. 靠样
Html:全名超文本标记语言，hyper text mark language；
Html标签的结构
:<+和标签名p+>结合而成。每个标签都有自己的结束标签
双标签:有开始和结束的标签叫双标签。
单标签:没有结束标签。也叫空标签。
根节点
头部标签
身体标签
1. 标题标签 h1 h2 h3 h4 h5 h6 由大到小 双标签
2. P 段落标签 双标签
3. a是超链接标签 双标签
4. 图片标签 单标签
5.
注意
父子标签，子标签要向后缩进（按tab键）
11.18.2019
Img
src=”” src是标签的属性 等号右边是属性值。就是图片的路径。
路径
1. 绝对路径:按照一个路径能找到，具体到某一个盘符下，某一个文件夹内。
2. 相对路径:以当前页面为参考物，去查找。
同级目录: ./
上一级目录: ../
标签的属性
书写规范:属性=”属性值”
“” 双引号
‘’ 单引号
Src 这个属性具有对外请求资源的功能。资源:图片，文档，样式，视频，音乐等等
Alt 这个属性当图片加载不出，一种对图片解释说明的。
P段落标签
1.他是唯一一个可以不写结束标签的双标签。
a 超链接标签
从一个页面链接到另一个页面。靠的是href属性
Src和href有什么区别和关联？
1. 都是标签的属性
2. Href 叫标识超文本引用 让引用的文件和当前文件建立一种联系。
3. Src 叫资源引用 将引用的文件拿来直接使用了。
target属性
_self 默认值 将原有的覆盖
_blank 重新打开一个窗口
Meta标签
提供有关页面的元信息。
”utf-8”/>
该网页的编码格式是utf-8格式 不设置这个格式汉字会出现乱码
”keywords” content=””/>
该网页搜索的关键字 主要用在搜索引擎。
<meta name="Description" content=""/>
申请官网使用的。
标签的起名
1. 官方提供的标签名
2. 类名: 用class属性起的名字
3. Id名: 用id属性起的名字 唯一的
我们把这种起名叫选择器 class选择器 id选择器 标签选择器
Style标签
给标签添加样式。
1. 位置在head标签之间
2. 书写格式
选择器name{
样式属性:样式属性值;
}
选择器的使用规则
1. 标签选择器 直接使用标签名就ok
2. Class选择器 需要在名字的前面加 .
3. Id选择器 需要在名字的前面加 #
常用的css属性
1. 决定字体的属性
color 字体颜色 属性值:颜色单词 颜色16进制标示方法#fffffff;
rgb() r代表red g代表green b代表blue
Rgb中的值 0-255之间的任意数字
2.字体大小
font-size:12px; 属性值是整数字，不要带小数，单位是px 叫像素单位。凡是有像素拼成的图我们叫位图。不是又像素拼成的图 矢量图。
位图放大了会模糊，矢量图放大了不会模糊。
chrome浏览器默认字体大小是16px，最小字体是12px，火狐浏览器最小字体是10px。
3.font-family 字体系列 字型
属性值 “微软雅黑”
4. font-style 字体样式
Normal 默认值 标准的字体
Italic 斜体
5. font-weight 字体的粗细
属性值 normal==400 400以下是细 400以上是加粗。
6. font-variant 将字母变成大写
属性值 normal 默认 small-caps 转变成大写
注意
Font的简写
例子
11.19
Text文本属性
1.颜色 color
Color:red;
2.文本缩进 text-indent
属性值 数字+px；text-indent:10px;
3.文本修饰 text-decoration:
属性值: underline 下划线 none 默认值没有任何线 overline 上划线
4.文本的对齐方式 text-align
属性值 left right center justify(两端对齐)
Width 宽 height 高 属性值都是像素
任何一个标签默认都是以方格的形式呈现，我们需要手动调节大小样式。
背景background
1. 背景颜色 background-color: 属性值 是颜色
2. 背景图片 background-image:url(“路径”);
3. 背景大小 background-size: x y; x是水平上的大小 y是垂直方向的大小，都是像素。
4. 背景平铺: background-repeat:
属性值 默认是平铺的 repeat
不平铺 no-repeat
仅仅水平方向平铺 repeat-x
仅仅垂直方向平铺 repeat-y
表格标签table
他是由行与列构成，最小单位是单元格。
行标签
单元格标签
Table标签属性
Border 表格是否拥有边框 数字1代表有边框 0代表没有边框
Cellpadding 内容和单元格的间距
Cellspacing 单元格和单元格之间的间距
td标签属性
Colspan 水平合并
Rowspan 上下合并 属性值都是数字
列表
1. 无序列表ul 标签属性type 决定项目符号的类型 disc(实心圆) square(方形) circle空心圆
里面的子标签是li
2. 有序列表 ol type=”1/a”
里面的子标签是li
3. 自定义列表 dl
里面的子标签有dt 列表标题
dd就是列表项
一般情况下要求是去掉项目符号。
列表的css样式
List-style:none;
注意：列表自带内间距。不加内边距 padding（内边距）margin(外边距)
1120
Border 边框 css属性
边框颜色 border-color：red/#ffffff/rgb() 默认为黑色
边框样式 border-style:solid（实线）dashed(虚线) 默认为none
边框粗细 border-width：1px；默认是3px
Border的简写 border:border-width border -style border-color;
Div 块 盒子
1.就是标签名 没有特殊的标签属性
2.主要用来排版布局
3.宽度是100%，chrome浏览器默认有8px的外边距，清除这8px用
4.这种天生占用宽度为100%的标签我们把它叫块级元素
比如 div p h1-h6 ul ol li等等
特点: 独占一行 可以设置宽高。
5.大小宽高不是100%，是按照内容的多少决定大小的，这种标签叫内敛元素(行级元素)
比如 a span
特点：不独占一行 不可以设置宽高。
块级元素div分析
1. 外边距margin
2. 内边距 padding
3. 边框 border
Div的真实宽度=width+margin-left+margin-right+border*2+padding-left+padding-right；
文档流
元素从上到下（主要说块级元素），从左到右（主要说行级元素）的一种排列方式，我们把它叫标准文档流。他是浏览器天生具有的一种功能。
在实际开发中，我们在遵循文档流原则的情况下，还得脱离文档流的约束，让元素不受文档流的控制。
1. 脱离文档流的方法
给元素设置浮动float:left/right;
给谁设置这个属性，谁脱离文档流，就不受浏览器控制，就相当于把这个元素在浏览器空间移除了，剩下的空间，后面的元素就会去填补上。
A：
li设置了浮动，脱离了文档流，浏览器移除li占用的空间，ul就不会被撑起了所以高度为0。
Css选择器
选择器的权重
在css中，哪个选择器的权重高，就走谁的样式。
标签选择器的权重是 1
Class选择器的权重是10
Id选择器的权重是100
行间样式的权重是1000
带有关键字 !important 的css属性 权重是无穷大
权重的计算
将选择器上面的权重进行叠加，叠加后的总和就是该选择器的权重。
权重相等的时候 后面的会覆盖前面的。
Css选择器的种类
标签 权重是0001
类class 权重是 0010 相当于255个标签选择器
Id 权重是 0100 相当于255个类
*通配符 代表所有的标签 权重是 0000
后代选择器 .a p 权重是累加 0011
子代选择器 .a>p 权重是 0011
交集选择器.a#as
并集选择器.a,.b
Css的几种形式
1.行间样式 将style写在标签内的充当标签标签属性
2. 行内样式
3.外联样式
Css选择器的两大特性
1. 继承性 所有跟文本字体有关的属性都会被子元素继承。且权重是0000.
2. 层叠性 就是解决选择器权重大小的一种能力，就是看那个选择器的权重大。谁的权重大听谁的。0010相当于255个0001.
11.22
Css的尺寸
Width height
Line-height 行高是有三部分构成，上间距 文本高度 下间距 且上下间距相等。所以文字居中。
行高 一旦设置行高了，元素内部必须有内容。
Line-height:3; 行高是当前数字乘以当前字体大小就是行高的值。
Display
这个属性规定元素以某种形式显示
display:none；当前元素不显示，不占用当前的空间了
Visibility:hidden;当前元素隐藏，还占用之前的空间。
Display:block; 当前元素以块级形式显示出来，往往可以将行级元素转块级元素。
Display:inline;当前元素以行级元素显示出来，往往可以将块级元素转行级元素
Display:inline-block; 当前元素以行级块显示出来，即不占用一行，也可设置宽高。
Float:
浮动 属性值有left/right
1. 浮动的元素脱离文档流了。
2.浮动的元素互相贴靠
浮动的元素会紧紧贴靠在一起，如果后面的窗口空间够这个浮动元素的宽，他会挨着前一个元素贴靠，如果窗口空间不够他的宽，他会找前一个的前一个元素贴靠，如果还不够继续往前找，不会越级去贴靠。这种排列方式叫流氏布局。
3.浮动的元素有文字环绕的效果
用在图文结合上。
清除浮动
浮动元素脱离了文档流，不在占用文档的空间，导致后面的元素会去紧跟着上一个元素的位置进行排列，我们清除浮动的目的就是杜绝这种现象发生。
1.给父级元素设置高度。
2. 给最后一个浮动元素后面加一个空元素 设置属性 clear:both;
3. 给浮动元素的父级设置一个类型 叫clearfix
.clearfix:after{ //伪类选择器 给这个父级后面设定一假的子代元素
Clear:both; 清除浮动
Height:0;
Visibility:hidden;
Content:””; 内容
Display:block;
}
注意:
W3c标签嵌套标准
命名规范
1. 不能用汉字命名
2. 不能以数字开头
11.25
定位 position 这五个属性都是css属性
方向的属性值都是length 比如50px
Position的属性值
relative 相对定位：相对自己原来的位置进行定位。且还占用之前的空间。
absolute 绝对定位：
如果一个元素设置了absolute/fixed，它将向父级查找是否有position属性，如果有就以父级为参考点，如果没有就继续向父级的父级查找，如果有position属性就以父级的父级为参考点，如果没有就按照这种方式继续向上查找，直到找到为止，如果一直都没有就以body窗口为参考点。
简称 子绝父相。
Fixed 固定定位
Absolute和fixed一旦设置了，该元素就会脱离文档流。
Margin
一个元素设置了margin，属性值是length。总共有四个margin分别是margin-top，margin-right，margin-bottom，margin-left。
Margin的简写
Margin:10px 20px 30px 40px; 代表上右下左。
Margin:10px 20px 30px 代表 上 左右 下。
Margin:10px 20px; 代表 上下 左右
Margin：10px; 代表上右下左。
Padding和margin的简写一样。
1. 标准流下，垂直方向的margin不叠加，以最大的为准。
如果不在标准流下，margin会叠加。
2. Margin最好不要用在父子元素之间，用在兄弟元素之间。父子之间最好用padding。
表单form
-
记标签名form
-
标签属性
-
action=”” 表单提交的地址
-
Method=”get/post” 表单提交的方式 如果不填默认是get
Get 在url地址栏中提交，是可见的，不可加密。由于http请求规定url中容量不能超过4k。所以get提交的长度不能过大。
Post在http中body（请求体）中提交，可以加密。这个容量比较大，不容易对外显示。
-
Name=”” 表单的名称
-
css属性
Input 输入框标签 单标签
标签属性
type属性 决定input的类型
type=”text” 文本输入框
Type=”button” 按钮
Type=”radio” 单选按钮
Type=”checkbox” 多选按钮
Type=”submit” 提交按钮
Type=”password” 密码输入框
Value 输入框中的默认值
Name规定这个元素的名称：在后台中需要的就是这个name值。