2017-05-15 第一章

1. HTML

定义:超文本标记语言

2. HTML基本语法

<html>

<head>

</head>

</html>

3. doctype类型

3.1Strict(严密型)

3.2transitional(过度型)

3.3frameset(框架型)

4.网页编码格式

Gb2312 GBK UTF-8 ISO8859-1

5.标题标签

6.段落标签

<p></p>

7.换行标签

<br/>

8.水平线标签

<hr/>

9.字体加粗

<b></b>

10.斜体字

<i></i>

11.字体下划线

<u></u>

12.特殊符号

空格

大于号>

小于号<

版权符号©

引号"

13.图片标签

<img/>

13.1 src图片显示路径

13.2 alt 图片未找到时显示文字

13.3 title 鼠标悬停显示文字

14.链接标签<a>

14.1href

要跳转的页面地址(demo:htttp://www.mi.com)

14.2target

_blank 在新页面打开

_self 在自身页面打开

14.3锚链接

点击的链接href属性写#(要跳转的name值)

14.3.1页面间的锚链接

A页面跳转到B页面指定的位置

A页面 href=”B页面地址#(带有name属性的值)”

B页面要跳转的地方加入name=”值”

2017-5-16 第二章

1. 列表

1.1定义

用来展示数据的一种形式

1.2分类

1.2.1 无序列表

1.2.1.1 type属性

Circle 空心小圆圈

Square 实心小方块

Disc 实心小圆圈(默认)

1.2.2 有序列表

1.2.2.1type属性

1 阿拉伯数字(默认)

A/a 英文字母大小写

I/I 罗马数字大小写

1.2.3 定义列表

1.2.3.1 解析

Dl 声明定义列表

Dt 列表的标题

Dd 列表的内容

2. 表格(table)

2.1 定义

Table 申明表格

Tr 行

Td 列

2.2 table的属性

border 表格的边框

bgColor 表格的颜色

cellspacing 单元格和内容间的距离

cellpadding 单元格边框与边框之间的距离

align 表格水平对齐方式 (left左center居中right右)

valign 表格垂直对齐方式(top上middle中 bottom下)

2.3 tr的属性

align 单元格内容水平对齐方式 (left左center居中right右)

valign 单元格内垂直对齐方式(top上middle中 bottom下)

bgColor 当前行的颜色

2.4 td 的属性

align 单元格内容水平对齐方式 (left左center居中right右)

valign 单元格内垂直对齐方式(top上middle中 bottom下)

bgcolor 当前列的颜色

height 单元格高度

width 单元格宽度

2.5 合并行(rowspan)

【注意】只能向下合并行

2.6 合并列(colspan)

3 媒体元素

3.1音频(audio)

属性同下

3.2视频(video)

3.2.1 src 视频路径

3.2.2 controls 控制器

3.2.3 autoplay 自动播放

3.2.4 loop 循环播放

4.h5结构元素

4.1header 头

一般用于页面头部信息

4.2footer 底部

一般用作页面的版权部分

4.3section

独立的块,一般做主体内容

4.4aside 侧边栏

一般用于侧边导航

4.5nav 导航

4.6article 文章内容

5.iframe 内联框架

name 当前框架名称

如何跳转

在要跳转的a标签的target属性中写框架的name

2017-5-18 第三章

1. 表单(form)

作用:向后台提交用户数据

1.1 method

向后台的提交方式 post get

Post 提交数据安全性高

1.2action

提交后台的地址(路径)

2. 文本框(text)

Value 默认值

MaxLength 允许输入的最大位数

Size 文本框的长度

placeholder 提示信息

3. 密码框(password)

4. 时间(date)

出现年/月/日格式的时间

5. 带时间的(datetime-local)

格式为年/月/日时:分

6.带月(month)

格式为年/月

7.带星期(week)

今年的第几周

8．单选框(radio)

默认选中是checked

【注意】要想实现单选,必须有相同的name属性

9.复选框(checkbox)

默认选中是checked

【注意】要想实现后台正常接收,必须有相同的name属性

10.数字框(number)

Max 选项的最大值 min 选项的最小值

11.搜索框(search)

输入文字后会出现X号

12.可拖动的进度条(range)

Min 最小值 max 最大值 value 当前值

13. 不可拖动进度条(progress)

aria-valuemax 最大值

aria-valuemin 最小值

aria-valuenow 当前值

14.下拉框(select)

Optgroup 选项组标题

Option 选项

默认选中为selected

15.按钮

15.1 重置(reset)

将表单内所写数据清空

15.2提交(submit)

将表单内数据提交到后台

15.3按钮(button)

普通按钮

16．多行文本域(Textarea)

Rows 出现的行数

Cols 出现的列数

17.文件域(file)

【注意】要想实现文件上传,在form里必须写明

Enctype = “multipart/form-data”

18.邮箱(email)

【注意】邮箱验证在页面提交时完成

19.网址(url)

【注意】同上

20.只读(readonly)

21.禁用(disable)

22.隐藏(hidden)

23表单标注

标注内容需要有id值

使用label 的for 属性实现标注(for=”id名”)

24.表单验证

24.1优点

减少服务器压力

提高数据的安全性

24.2方式

PlaceHolder 提示信息

Required 必填字段(非空判断)

Pattern 正则表达式

2017-5-22 第四章

1. css概念

Cascading Style Sheet 级联样式表

2. CSS的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

3. 引入

3.1 行内样式

<h1 style="color:red;">style属性的应用</h1>

3.2内部样式表

h1{color: green; }

</style>

3.3外部样式表

3.4优先级

行内样式>内部样式表>外部样式表

就近原则

4. 基本选择器

标签选择器 p,h1~h6,a……

类选择器 class=”a” .a

ID选择器 id=”b” #b

【注意】

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

4.1优先级

ID选择器>类选择器>标签选择器

5. 层次选择器

5.1A B 后代选择器

5.2A>B 子选择器

5.3A+B 邻辈选择器

5.4A~B 同辈选择器

6. 结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

7.属性选择器

7.1 E[attr]

带有属性attr的元素E

7.2E[attr=val]

带有属性attr并且值为val的元素E

7.3E[attr^=val]

带有属性attr并且值以val开头的所有元素E

7.4E[attr$=val]

带有属性attr并且值以val结尾的所有元素E

**7.5E[attr*=val]**

带有属性attr并且值中包含val的所有元素E

8. 复合选择器

8.1交集选择器

同事满足要求的元素才可以

(h1.a {

})

第一个是标签选择器,第二个是id或class

【注意】中间没有逗隔开

8.2并集选择器

某些元素都符合这个条件

(h1,p,.a,#a)所有的h1，p,带有.a，带有#a的元素都符合

【注意】中间有逗号隔开

2017-5-23 第五章

1. span突出显示

2. font-style字体风格

normal 正常

italic 斜体

oblique 倾斜

3. font-size 字体大小

4.font-weight 字体粗细

100-900

100 lighter 更细

400 normal 正常

700 bold 粗体

900 bolder 更粗

5.font属性

字体风格→字体粗细→字体大小→字体类型

6. 文字样式

6.1color 文字颜色

#RGB 16进制的颜色值 0-F由深入浅

Rgb(r,g,b) 值为0-255 有深入浅

Rgba(r,g,b,a) a为透明度是从0-1的值 0全透明 1不透明

6.2text-align 文本水平对其方式

Left 左对齐 center 居中 right 右对齐

6.3 text-indent 首行缩进

Px 像素为单位 em为单位(1em等于一个汉字)

6.4 line-height文本行高

Height+line-height 可以实现文本垂直对齐

6.5 text-decoration文本装饰

Line-through 中划线

Underline 下划线

Overline 上划线

7. vertical-align(图片文本垂直对齐)

【注意】此属性必须在img上设置才有效

Top 顶部对齐 middle中部对齐 bottom 底部对齐

8. text-shadow(文本阴影)

demo： text-shadow:1px 2px 3px #fff;

向右偏移1px 向下偏移2px 阴影宽度3px 阴影颜色#fff

9. a标签的伪类

9.1:link 未点击时的样式(默认样式)

9.2:hover 鼠标悬浮样式

9.3:active 鼠标点击但未释放

9.4:visited 点击过后(激活后)

10列表样式

10.1 list-style:none(去除列表前面的符号)

11.背景样式

11.1背景颜色(background-color)

11.2背景图片(background-image)

11.3 平铺方式(background-repeat)

Repeat 水平和垂直全部平铺

No-repeat 不平铺

Repeat-x 水平方向平铺

Repeat-y 垂直方向平铺

11.4 背景定位(background-position)

Xpx Ypx 确切的像素值

X% Y% 相对于元素的百分比

Center center 给定的元素值

(水平:left center right)

(垂直:top center botto006D)

11.5 简单写法(background)

Background: 图片路径定位方式平铺方式

11.6背景图片尺寸(background-size)

Auto（默认，元素大小）

Percentage (百分比,以宽度为准)

Cover (充满整个元素)

Contain (锁定横纵比例缩放)

12.线性渐变(linear-gradient)

To 方向(向某个方向变化)

后面是颜色值(n1,n2,n3,…….)可以有N个颜色

30deg (旋转角度,注意新旧标准,是否加内核兼容)

2017-5-25 第六章

1. 边框(border)

Border 边框宽度边框样式边框颜色

边框样式

(solid 实线 dotted 点状虚线 dashed 线状虚线)

(double 双实线 ……)

2.盒子模型总尺寸

=(border-width边框宽度)+margin(外边距)+padding(内边距)+内容宽度

3.box-sizing(盒子大小)

【注意】需加宽度或高度才能实现效果

4.border-radius(圆角边框)

4.1四角圆

Border-radius:圆角半径

Border-radius:r1,r2 （r1上下,r2左右）

Border-radius:r1,r2,r3 (r1上,r2左右,r3下)

Border-radius:r1,r2,r3,r4(上右下左)

4.2半圆

制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值

制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

4.3扇形

三同一不同(宽,高,半径相同,位置不同[border-radius:0px 0px 0px 100px])

5.box-shadow(盒子阴影)

1px 2px 3px red; 水平偏移1px 垂直偏移2px 阴影宽度3px 颜色

2017-6-1 第七章

1. 标准文档流

1.1组成(块级元素,行内元素)

块级元素:一行只能写一个元素,前后有换行符

行内元素:一行可以出现N次,无换行符

2. display(元素的显示方式)

2.1 block(元素将以块级显示)

2.2inline(元素以行内显示)

2.3inline-block(行内块级元素,具有2者的特点)

2.4none(隐藏元素)

3.float(浮动)

3.1浮动元素会脱离文档流(不占位)

3.2left(左浮动)right(右浮动)参考为最后一个元素

4.清除浮动(clear)

Left清除左浮动 right清除右浮动 both清除两侧浮动

5.清除溢出(overflow)

Hidden 多余部分隐藏

Scroll 左右会有滚动条

Auto 上下会有滚动条

6. 解决父边框崩塌问题(4种方法)

a) 浮动元素后面加空div

b) 设置父元素的高度

c) 父级添加overflow属性

d) 父级添加伪类after(推荐使用)

clear:after{

content: ''; /*在clear类后面添加内容为空*/

display: block; /*把添加的内容转化为块元素*/

clear: both; /*清除这个元素两边的浮动*/

}

2017-06-03 第八章

1. 定位(position)

1.1默认(static)

1.2绝对定位(absolute)

特点:绝对定位元素会脱离文档流

以浏览器左上角为(0,0)点

对其他元素有影响

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”

为基准进行偏移

1.3相对定位(relative)

特点:不会脱离文档流

对其他元素无影响

相对于自身为原点

2. Z-index(层叠顺序)

值越大元素越靠上

条件是必须有position属性

2.4 固定定位(fixed)

以浏览器左上角为(0,0)点

3. 透明度(opacity)

0~1的小数,0全透明1不透明

2017-6-5 第九章

1. 变形(transform)

1.1translate(X,Y)位移

1.2rotate(Xdeg,Ydeg)旋转

1.3skew(Xdeg,Ydeg)倾斜

1.4scale(X,Y)缩放

2. 过渡

Transition : all 时间

前提条件是需要伪类(:hover,:checked,:focus)

3. 动画

@keyframe 名称{

From或 0%{

}

X%{

}

To 或 100%{

}

animation:animation-name animation–duration animation-timing-function

animation-delay animation-iteration-count animation-direction

animation-play-state animation-fill-mode;

动画的播放次数（animation-iteration-count）

u 值通常为整数，默认值为1

u 特殊值infinite，表示动画无限次播放

动画的播放方向（animation-direction）

n normal，动画每次都是循环向前播放

n alternate，动画播放为偶数次则向前播放

动画的播放状态（animation-play-state）

u running将暂停的动画重新播放

u paused将正在播放的元素动画停下来

动画发生的操作（animation-fill-mode）

n forwards表示动画在结束后继续应用最后关键帧的位置

n backwards表示会在向元素应用动画样式时迅速应用动画的初始帧

n both表示元素动画同时具有forwards和backwards的效果

web前端入门笔记

1. HTML

2. HTML基本语法

3. doctype类型

3.1Strict(严密型)

3.2transitional(过度型)

3.3frameset(框架型)

4.网页编码格式

5.标题标签

6.段落标签

7.换行标签

8.水平线标签

9.字体加粗

10.斜体字

11.字体下划线

12.特殊符号

空格

大于号>

小于号<

版权符号&copy;

引号"

13.图片标签

13.1 src图片显示路径

13.2 alt 图片未找到时显示文字

13.3 title 鼠标悬停显示文字

14.链接标签<a>

14.1href

14.2target

14.3锚链接

14.3.1页面间的锚链接

1. 列表

1.1定义

1.2分类

1.2.1 无序列表

1.2.1.1 type属性

1.2.2 有序列表

1.2.2.1type属性

1.2.3 定义列表

1.2.3.1 解析

2. 表格(table)

2.1 定义

2.2 table的属性

2.3 tr的属性

2.4 td 的属性

2.5 合并行(rowspan)

2.6 合并列(colspan)

3 媒体元素

3.1音频(audio)

3.2视频(video)

3.2.1 src 视频路径

3.2.2 controls 控制器

3.2.3 autoplay 自动播放

3.2.4 loop 循环播放

4.h5结构元素

4.1header 头

4.2footer 底部

4.3section

4.4aside 侧边栏

4.5nav 导航

4.6article 文章内容

5.iframe 内联框架

1. 表单(form)

1.1 method

1.2action

2. 文本框(text)

3. 密码框(password)

4. 时间(date)

5. 带时间的(datetime-local)

6.带月(month)

7.带星期(week)

8．单选框(radio)

9.复选框(checkbox)

10.数字框(number)

11.搜索框(search)

12.可拖动的进度条(range)

13. 不可拖动进度条(progress)

14.下拉框(select)

15.按钮

15.1 重置(reset)

15.2提交(submit)

版权符号©

**7.5E[attr*=val]**