web前端入门笔记
2017-05-15 第一章
1. HTML
定义:超文本标记语言
2. HTML基本语法
<html>
<head>
<title></title>
</head>
<body></body>
</html>
3. doctype类型
3.1Strict(严密型)
3.2transitional(过度型)
3.3frameset(框架型)
4.网页编码格式
Gb2312 GBK UTF-8 ISO8859-1
5.标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
6.段落标签
<p></p>
7.换行标签
<br/>
8.水平线标签
<hr/>
9.字体加粗
<strong></strong>
<b></b>
10.斜体字
<em></em>
<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内部样式表
<style type=”text/css”>
h1{color: green; }
</style>
3.3外部样式表
<link href="style.css" rel="stylesheet" type="text/css" />
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的效果