“

第一部分 前端HTML基础

第一章 html基本结构

认识HTML：

html不是一种编程语言，是一种标志语言

标记语言是由一套标识标签组成的

html使用标签来描述网页

html结构：

不成对出现的标签

标签

—-

仅仅用于标题文本，不要为了产生粗体文本使用它们

标签 段落标签

*主要*

标签都会让文字产生加粗效果

*主要*

标签强调 用于倾斜

比

强调更强 特殊符号： **  —->空格 > —>大于号 <；—>小于号** “；—>引号 ©–>版权号

第二章 html基本标签

HTMl基本标签：

span标签

对被用来组合文档中的行内元素

注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化


标签—>他有一个必不可少的属性 href


锚点也是一种超链接，是页面内进行跳转的超链接

第一步：创建锚点

第二步：使用创建好的锚点名称

内容

第三章 img图片标签与路径

图片标签与路径：

常见图片格式 jpg png gif Gif （只支持全透明） Jpeg /jpg Png 半/全透明都支持

图片标签写法 ：

图片四要素：

src=“” 图片路径

alt=“” 图片含义

width=“” 图片宽度 和图片大小保持一致

height=“” 图片高度 和图片大小保持一致

title=“”

路径知识：

相对路径、绝对路径：

相对路径：(Relative Path) 相对于该文件的路径；

绝对路径：(Absolute Path) 从磁盘出发的路径；

在静态页面中：


/开头表示根目录；

./表示当前目录；（斜画线前面一个点）

…/上级目录；（斜画线前面两个点）


这些都是相对于当前文件的位置来说的，如果用绝对路径的话就是写全了。

第四章 三种列表的讲解

三种列表的知识讲解：

• 无序列表 无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识

有序列表 有序列表也是一列项目，只是列表项目使用的是数字进行标记。 有序列表始于

1. 标签。每个列表项始于
2. 标签。

1. 内容一
2. 内容二
3. 内容三

无序列表-嵌套

• 柚子
  • 沙田柚
  • 蜜柚
• 荔枝
• 苹果

有序列表-嵌套

定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表以

标签开始。每个定义列表项以

开始。每个自定义列表项的定义以

开始。

pc网页制作

学习DIV+CSS JS JQ 项目实战

手机网页制作

手机网页制作实战

dd是对dt的解释

< dl>< /dl>用来创建一个普通的列表,

< dt>< /dt>用来创建列表中的上层项目，

< dd>< /dd>用来创建列表中最下层项目，

< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

中国城市

北京

上海

广州

美国城市

华盛顿

芝加哥

纽约

list-style属性具有三个属性分量： list-style-position ：设置列表项图标的位置，位于文本内或者文本外

list-style-type： 设置列表项图标的类型 list-style-image：使用图像设置列表项图标 用于去掉li前面的项目符号（小圆点）

第五章 表单元素(上)

表单标签:

表单标签 表单是一个包含表单元素的区域，包括起来的都是表单的内容

HTML标签 – 隐藏域隐藏标签：

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器

标签的掌握

常用type类型：

type=”text” 单行文本输入框 type=”password” 密码（maxlength=””） type=”radio” 单项选择（checked=”checked”） type=”checkbox” 多项选择 type=”button” 按钮 type=”submit” 提交 type=”image”图片提交 type=”file” 上传文件 type=”reset”重置 type=”hidden” 隐藏 关于表单中的设置默认值： **下拉菜单** textarea没有默认值

标签的使用

label 元素不会向用户呈现任何特殊效果，增加了用户体验感。

例子：（重要—注册表单–用户体验–必做）

单向选择

男：


女：

第六章 表单和表格(下)

表单和表格标签：

文本域标签 标签： 是文本域标签，可以在其中插入一段文字内容，它有两个常用属性rows和cols

注意： rows表示这个文本域有多少行 cols表示这个文本域有多少列

除了这两个属性它还有readonly（只读，文本域的内容无法改变，相当于协议）和title（鼠标放上提示）

标签的掌握

注：当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 表单数据提交给服务器时包括 name属性

1月 2月 常用到的属性：disabled=“disabled” name=”sel” size=”2″ 表格标签

表格标签：

是表格标签，可以用它定义一个表格。

注意：的border属性不能少

标签的使用 行标签： 可以定义表格中的一行，一个表示一行。

单元格标签: 可以定义表格中的一个单元格，表示一个单元格。

border-collapse 属性设置是否将表格边框折叠为单一边框： border-collapse:collapse; colspan左右合并 rowspan上下合并

第一部分总结

非可视化标签：head meta style scrpit…

可视化标签：img div span a ul li…

只有可视化标签，才能用css改变它

单标签：meta link base img input br hr

双标签：html head body div a p span …ul li ol dl ….

常用可视化标签

div

一般用它来布局

a 超链接标签

href*属性：设置跳转的网页地址

target属性：设置跳转的目标

结论：凡事页面可以点击跳转或者表单提交的文字，都用a标签

img

src*属性用来设置图片的url数据

alt提供给搜索引擎搜索的

width

height

结论 ：显示图片

ul li

列表

结论：只要将来设计页面中有固定样式的列表，就用ul和li

如果是合并竖排的就是合并行（rowspan）

如果是合并横排的就是合并列（colspan）

第二部分 CSS

第七章 css基础知识

css基础知识：

css样式表的定义

css：（Cascading Style Sheets）层叠样式表；

分类及位置：内部样式-head区域style标签里面

外部样式-link调用

内联样式-标签元素里面

css内的注释：/

注释内容

/

css样式表的语法

CSS规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。

盒子名或者标签名{属性:值;}

CSS中几种颜色的表示方法

用颜色名表示 有17个预先确定的颜色，它们是 aqua, black, blue, fuchsia, gray, green, lime,

maroon, navy, 　　olive, orange, purple, red, silver, teal, white, and

yellow 用十六进制的颜色值表示(红、绿、蓝)

#FF0000或者#F00 用rgb(r,g,b)函数表示

如：rgb(255,255,0) 用hsl(Hue,Saturation,Lightness)函数表示（色调、饱和度、亮度)

如：hsl(120,100%,100%),色调0代表红色，120代表绿色，240代表 蓝色 用rgba(r,g,b,a)函数表示

其中a表示的是改颜色的透明度，取值范围是0~1，其中0代表完全透明

用hsla(Hue,Saturation,Lightness,alpha)函数表示

内部样式表

当单个页面需要设置样式时，就应该使用内部样式表。

使用 标签在文档里面定义内部样式表

内联样式表（优先级高） 写在标签里面的样式 如：

表示给p标签里面的文字颜色设置为红色

样式的优先级补充

相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：

内联样式表（标签内部） > 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式

层叠优先级是:

浏览器缺省< 外部样式表 < 内部样式表 < 内联样式


其中样式表又有:类选择器 < 类派生选择器<ID选择器 < ID派生选择器


派生选择器以前叫上下文选择器，所以完整的层叠优先级是:

浏览器缺省 <外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器< 外部样式表ID选择器< 外部样式表ID派生选择器<

内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 <

内联样式…共12个优先级

另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：

一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！

第八章 css选择器(上)

css选择器：

class类选择器可以重复利用

id选择器唯一

标签选择器


标签选择器：页面中所有的标签都是一个选择器 p{color:red;}

ID选择器


选择id命名的元素 以 # 开头 #p1{color:#0f0;}

类选择器

class选择器，选择clas命名的元素 以.开头

.first{color:#00f;}

css代码写完后上线前要经过压缩处理

本地和服务器分两个css版本（备份）

压缩后注释都清除，空间体积减少

群组选择器


选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}

包含选择器


选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开p

span{color:red;}

属性选择器


选择包含某一属性的元素

a[title]{color:red;} 选择包含title的a标签

a[title][href]{color:red;} 选择包含title和href的a标签

** 选择器子类选择器**

只选择子元素（只选择儿子）（相当于包含元素）

p > span{color:red;}

相邻兄弟选择器


只选择后面的相邻兄弟元素

p + span{color:red;}

第十章 css选择器(下)

伪类选择器


a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）

a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）

a:hover {color:#FF00FF;}/* 鼠标移动到链接上

*/（可和其他标签结合一起用）

a:active {color:#0000FF;} / 选定的链接 /

注意

伪类选择器的排序很重要，

a:link a:visited a:hover a:active

LV包包好啊

输入伪类选择器（针对表单）

input:focus{color:red;} / 键盘输入焦点 /

其他伪类选择器


p:first-child{color:red;} /* 第一个p */

:before 在元素之前添加内容。

:after 在元素之后添加内容。

css优先规则


内联样式表-> ID 选择器—> Class 类选择器->标签选择器

第十一章 背景属性

背景属性：

背景的添加 ：

背景颜色的添加:

background:red;

backgronnd-color:red;

背景图片的添加：

background:url(“images/1.jpg”);

backgronnd-image:url(“images/1.jpg”);

背景的平铺

什么是平铺？平铺就是图片是否重复出现

不平铺：background-repeat:no-repeat;

水平方向平铺：background-repeat:repeat-x;

垂直方向平铺：background-repeat:repeat-y;

完全平铺：默认为完全平铺

背景图片的定位

背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现

background-position的取值可为英文单词或者数值和百分值。

background-positon的英文单词取值

top left

top center

top right

center left

center center

center right

bottom left

bottom center

ottom right

background-positon的数值取值

background-position:x y;

positon的百分值取值

background-position:x% y%;

背景图片的大小

背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。

background-size的数值取值

background-size:x y;

background-size的数值取值

background-size:x% y%;

背景图片的滚动

背景图片是否随着内容的滚动而滚动由background-attachment设置

background-attachment:fixed; 固定，不随内容的滚动而滚动

background-attachment:scroll; 滚动，随内容的滚动而滚动

第十二章 文字文本属性

css文字文本属性：

文字属性


color:red; 文字颜色

font-size:12px; 文字大小

font-weight:“bold” 文字粗细(bold/normal)

font-family:“宋体” 文字字体

font-variant:small-caps小写字母以大写字母显示

文本属性


text-align:center; 文本对齐(right/left/center)

line-height:10px; 行间距(可通过它实现文本的垂直居中)

text-indent:20px; 首行缩进

text-decoration:none;

文本线(none/underline/overline/line-through)

letter-spacing: 字间距

第十三章 盒子模型

盒子模型

盒子模型就是一个有高度和宽度的矩形区域

所有html标签都是盒子模型

div标签自定义盒子模型

所有的标签都是盒子模型

class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。

盒子模型组成部分：


自身内容：width、height 宽高

内边距： padding

盒子边框： border 边框线

与其他盒子距离： margin外边距

内容+内边距+边框+外边距=面积

border 边框

常见写法 border:1px solid #f00;

单独属性：

border-width:

border-style:

dotted 点状虚线

dashed（虚线）

solid（实线）

double（双实线）

border-color (颜色)

padding 内边距

值：像素/厘米等长度单位、百分比

padding:10px; 上下左右

padding:10px 10px; 上下 左右

padding:10px 10px 10px; 上 左右 下

padding:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）

单独属性：

padding-top:

padding-right:

padding-bottom:

padding-left:

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

margin 外边距

值：与padding相同

单独属性：与padding相同

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

清除内外边距

• {
  
  
  padding：0；
  
  margin：0；
  
  }

第十四章圆角边框

语法：

border-radius: length;

①参数值可以为数值或百分比

②如果是正方形想要设置一个圆，把数值修改为宽度或者高度的一半即可，或直接写50%

③如果是矩形，设置为高度的一半

④该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角（顺时针）

第十五章盒子阴影

语法：


box-shadow: h-shadow v-shadow blur spread color inset;


h-shadow:必需 水平阴影的位置，可以负值

v-shadow:必须 垂直阴影的位置，可以负值

blur:可选 模糊距离

spread:可选 阴影尺寸

color:可选 阴影颜色

inset:可选 将外阴影（outset）改为内阴影

注意


①默认是外阴影，但是不可以写outset，否则导致阴影无效

②盒子阴影不占用空间，不会影响其他盒子的排列

第十六章浮动

css提供三种传统布局方式

①普通流（标准流/文档流）：就是标签按照规定好的默认方式排列

②浮动

③定位


网页布局第一标准

：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

语法：

选择器 { float ：属性值；}

属性值：none 元素不浮动（默认值）

left 元素向左浮动

right 元素向右浮动


浮动特性


1、浮动元素会脱离标准流（脱标）

①脱离标准流的控制（浮）移动到指定位置（动）

②浮动的盒子不在保留原先的位置

2、浮动元素会一行内显示并且元素顶部对齐

3、浮动的元素会具有行内块元素的特性

浮动元素经常和标准流父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则


浮动的注意点


1、浮动和标准流的父盒子搭配

先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动

浮动盒子只会影响后面的标准流，不会影响前面的标准流

第十七章清除浮动

清除浮动的本质：清除浮动元素造成的影响。如果父盒子本身有高度，则不需要清除浮动。


清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了


语法：

选择器 {clear：属性值；}

属性值：left 清除左侧浮动影响

right 清除右侧浮动影


both 同时清除左右两侧浮动影响


清除浮动策略：闭合浮动


清除浮动方法


1、额外标签法

在浮动元素末尾添加一个空标签（必须是块级元素）或

2、父级添加overflow属性

给父级添加overflow属性，将其属性设置为hidden、auto或scroll

3、父级添加after伪元素

.clearfix:after {


content:“”;

height: 0;

clear: both;

visibility；hidden;

}

.clearfix {


*zoom: 1;

}

代表网页：百度 网易 淘宝网

4、给父级添加双伪元素

.clearfix :before ,.clearfix:after {


content:“”;

display:table;

}

.clearfix:after {

clear: both;

}

.clearfix {


*zoom: 1;

}

代表网页：小米 腾讯

第十八章PS切图

PS切图方式：图层切图、切片切图、PS插件切图


图层切图

：

最简单的切图方式：（图层菜单👉合并图层ctrl+e）右击图层👉快速导出为PNG


切片切图

：

1、利用切片选中图片

2、导出选中的图片

文件菜单👉导出👉移动👉储存为web设备所用格式👉选择我们要的图片格式👉储存


PS插件切图

第十九章CSS书写顺序

1、布局定位属性:display/position/float/clear/visiblity/overflow(建议diaplay第一个写)

2、自身属性：width/height/margin/padding/border/background

3、文本属性：color/font/text-align/vertical-align/white-space/break-word

4、其他属性(css)：content/cursor/border-radius/box-shadow/text-shadow/

background:linear-gradiet…

第二十章在线案例

导航栏：实际开发中，我们不会直接用链接a 而是用li 包含链接（li+a）的做法

第二十一章定位

定位可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置，并且可以压住其他盒子


定位=定位模式+边偏移



定位模式

：通过css的position属性来设置，其四个值

static （静态定位） relative （相对定位） absolute （绝对定位） fixed （固定定位）


边偏移

：有top bottom left right 四个值其定义为相对于其父元素各边线的距离

静态定位

语法：

选择器 { position ：static；}

相对定位

相对定位是元素在移动位置的时候，相对于他原来位置说的（自恋型）

语法：

选择器 { position： relative}

特点：

1、总是相对于自己原来的位置来移动的

2不脱标、继续保留原来位置

绝对定位

绝对定位是元素在移动位置的时候。相对于它祖先为之来说的（拼爹型）

语法：

选择器 { position：absolute;}

特点：

1、如果没有祖先元素或者祖先没有定位，一浏览器为准定位

2、如果祖先元素有定位，则以最近一级有定位的祖先元素为参考点

3、脱标

子绝父相

自己是绝对定位的话，父级就要用相对定位

固定定位

固定定位是元素固定于浏览器某一可视位置

语法：

选择器 { position: fixed;}

特点：

1、一浏览器的可视窗口为参照点移动元素

2、脱标


小算法：


1、让固定定位的盒子left：50%

2、让固定定位的盒子margin-left版心宽度一半的距离

第二十二章粘性定位

粘性定位：固定定位和相对定位的组合 sticky 粘性的

语法：

选择器 { position：sticky；}

特定：

1、不脱标

2、以可视窗口为参照

3、必须添加top bottom left right 其中一个才有效

第二十三章定位的叠放次序

可以使用z-index来控制盒子的先后次序

语法：

选择器{ z-index：1；}

数值可以是正整数、负整数、或者0，默认是auto，数值越大，盒子越靠上

如果属性值相同，则按照书写顺序，后来居上

数字后面不能加单位

只有定位的盒子才有z-index属性

定位拓展


1、绝对定位的盒子居中

加了绝对定位的盒子不能通过margin：0 auto；水平居中，但是可以通过以下计算法实现水平和垂直居中

①left：50%；

②margin-left：-100px；让盒子左移自身宽度的一半

2、定位特殊特性

① 行内元素添加绝对或固定定位，可以直接设置高度和宽度

② 块级元素添加绝对或固定定位，如果不设置高度和宽度 ，默认大小是内容大小

3、脱标盒子不会触发外边距塌陷

浮动元素、绝对元素、固定定位元素都不会触发外边距合并问题

4、绝对定位（固定定位）会完全压住盒子

浮动元素不会压住标准流内的文字（图片）

绝对定位（固定定位）会压住下面标准流所有内容

第二十四章元素的显示与隐藏

1、display 显示隐藏（隐藏元素后，不在占有原来的位置）

·display:none ;隐藏对象

·display：block；除了转换为块级元素之外，同时还有显示元素的意思

2、visibility 显示隐藏（隐藏元素后，占有原来的位置）

·visibility：visible；元素可视

·visibility：hidden；元素隐藏

3、overflow 溢出显示隐藏

·visible 不剪切内容也不添加滚动条

·hidden 不显示超过对象尺寸的内容，超出部分隐藏掉

·scroll 不管是否有超出内容，都添加滚动条

·auto 超出自动显示滚动条，不超出不显示滚动条

第二十五章精灵图

1、将多个小图片整合到一张大图中

2、大图成为sprites 精灵图或者雪碧图

3、移动背景图片位置，此时可以使用

background-position

、

4、往上和往左移数值为负

第二十六章字体图标

下载网站：

1、icomoon字库 http://icomoon.io

2、阿里iconfont http://www.iconfont.cn/

CSS三角

div {


width: 0;

height: 0;

line-beight: 0;

font-size:0;

border: 50px solid transparent;

border-left-color: pink;

}

CSS用户界面样式

鼠标样式

li { cursor： pointer；}


属性值：default（小白 默认） pointer （小手） move（ 移动） text （文本） not-allowed （ 禁止）

轮廓线

input { outline： none；}

防止拖拽文本域

textarea { resize： none;}

vertical-align 属性

css的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐

vertical-align ： baseline | tou | middle | bottom


解决图片底部默认空白缝隙问题


1、给图片添加vertical-align：middle | top | bottom

2、把图片转换为块元素：display：block；

溢出文字省略号显示

1、单行文本溢出显示省略号——必须满足三个条件

①先强制一行内显示文本 white-space：nowrap；（默认normal自动换行）

②超出部分隐藏 overflow：hidden；

③文字用省略号代替超出部分 text-overflow：ellipsis；

2、多行文本溢出显示省略号

overflow：hidden；

text-overflow：ellipsis；

弹性伸缩盒子模型显示

display：-webkit-box；

限制在一个块元素显示文本的行数

-webkit-line-clamp：2；

设置或检索伸缩盒子对象的子元素的排列方式

-webkit-box-orient：vertical；

常见布局技巧

1、margin负值运用

① 让每个盒子margin往左侧移动-1屁行正好压住相邻盒子边框

②鼠标经过盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位保留位置；如果有定位，则加z-index）

2、文字围绕浮动元素

3、行内块的巧妙运用

4、css三角强化

width：0；

height：0；

border-color：transparent red transparent transparent；

border-style；solid；

border-width：22px 0px 0 0；

CSS初始化

HTML5的新特性

增加了一些新的标签、新的表单和新的表单属性等

1.HTML5新增的语义化标签

·

CSS的新特性

属性选择器

E[att=“val”]



类选择器、属性选择器、伪类选择器，权重为十


结构伪类选择器

nth-child（n）

{选择父元素的一个或多个特征子元素

n可以是数字、关键字（even 偶数；odd 奇数）和公式

}


nth-child和nth-of-type的区别前者将所有盒子排序；后者将指定盒子排序

伪元素选择器

      ::before            在元素内部的前面插入内容
      ::after               在元素内部的后面插入内容

注意


①before和after创建一个元素，但是属于行内元素

②新创建的这个元素在文档中是找不到的，所以我们称这个元素为伪元素


③语法：element::before{}


④before和after必须拥有content属性

⑤before在父元素内容的前面创建元素，after在父元素的后面插入元素

⑥伪元素选择器和标签选择器一样，权重为1


伪元素选择器使用场景：伪元素清除浮动


.clearfix:after {


content:‘’;

display:block;

height:0;

clear:both;

visibility:hidden;

}

.cleaefix:before,.clearfix:after {


content:‘’;

display:table;

}

.clearfix:after {


clear:both;

}

CSS盒子模型

通过box-sizing来指定盒模型，有两个值：即可指定为content-box、border-box

1、box-sizing：content-box 盒子大小为 width+padding+border（以前默认的）

2、box-sizing：border-box 盒子大小为 width

CSS过渡

常和hover一起搭配使用

transition：要过渡的属性 花费时间 运动曲线 何时开始

1、属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以，如果所有属性变化过渡，写一个all就可以

2、花费时间：单位是秒（必须写单位）

3、运动曲线：默认是ease（可以省略）

4、何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可是省略）


过渡口诀：谁要过渡给谁加