第一个月

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+>结合而成。每个标签都有自己的结束标签

双标签:有开始和结束的标签叫双标签。

单标签:没有结束标签。<meta />也叫空标签。

<html></html> 根节点

<head></head> 头部标签

<title></title> 标题标签

<body></body> 身体标签

1. 标题标签 h1 h2 h3 h4 h5 h6 由大到小双标签

2. P 段落标签双标签

3. a是超链接标签双标签

4. <img>图片标签单标签

注意

父子标签，子标签要向后缩进（按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格式不设置这个格式汉字会出现乱码

该网页搜索的关键字主要用在搜索引擎。

申请官网使用的。

标签的起名

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

他是由行与列构成，最小单位是单元格。

行标签 <tr></tr>

单元格标签 <td></td>

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。

来源：https://www.cnblogs.com/zhaohangyu/p/11929971.html

标签

margin

文档流

css选择器

border

权重

总结