web开发
2019-06-11 11:23:48 0 举报AI智能生成
web开发大纲
作者其他创作
大纲/内容
前端开发
HTML
历史
特性
简易性
可扩展性
平台无关性
语法
单标签
<img src='url'/>
双标签
<p>内容</p>
属性
语法
属性采用键值对的形式 name='value'
常用属性
href
指定链接地址
title
鼠标悬浮时提示的文本
所有标签可以使用
src
指定url地址
url=统一资源定位符
value
class
设置标签的类名
id
指定标签的ID
元素
块级元素
特征:独占一行，用css宽高等属性
例如:p,div,h1-h6,ul,li
内联元素
特征:内容决定大小，不拥有css宽高属性，不会独占一行
例如:span,a,i
内联块元素
特征:拥有css宽高属性，不独占一行
例如:img
常用标签
h1-h6
标题1-6
p
img
a
...
自学网站
http://www.w3school.com.cn/html/html_attributes.asp
https://study.163.com/
https://ke.qq.com/
https://www.jikexueyuan.com/
css
简介
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
使用css
行内样式
添加属性style
语法：style="css样式"
内部样式
添加style标签
语法：<style>css选择器{css样式}</style>
外部样式
link 引入css样式文件
语法
<link rel="stylesheet" type="text/css" href="css文件的地址">
语法说明
rel表示引入文件为样式文件，type表示为css文本文件，href属性指定链接的地址
使用语法
css选择器{css样式}
基本css属性
css背景
背景颜色:background-color:red
背景图片：background-image:url("图片路径")
背景大小:background-size:100px,100px
背景重复：background-repeat：no-repeat
背景定位：background-position:center;
css文本
文本缩进：text-indent: 5em;
文本对齐：text-align:center;
字间隔:word-spacing: 30px;
字母间隔:letter-spacing: 30px;
字符转换:text-transform: uppercase
文本装饰:text-decoration
空白字符:white-space: normal;
字体：
文本颜色：color：red
文本大小:font-size:20px
字体：font-family: sans-serif;
字体加粗:font-weight:normal;
浮动
float
left
浮动到左边
right
浮动到右边
clear
right
清除右边的浮动流
both
清除左右的浮动流
left
清除左边的浮动流
显示类型display
块block
内联inline
内联块inline-block
隐藏none
在线参考手册
https://www.html.cn/book/css/properties/display/index.htm
.....
选择元素
通配符
语法:*
id
语法: #id名
class
语法：.class名
标签
语法：标签名
多选
元素1，元素2
选择子元素
父元素>子元素
选择兄弟元素
元素1+它的兄弟
伪类选择
:hover
添加鼠标悬浮效果
:active
添加鼠标单机效果
.....
在线参考手册
https://www.html.cn/book/css/selectors/index.htm
层模型
层模型介绍
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
定位:position
static
默认值
absolute
绝对定位
说明
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
relative
相对定位
说明
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
fixed
固定定位
层级:z-index:10
top
顶部的距离
left
左边的距离
right
右边的距离
bottom
底部的距离
css高级(技巧)
居中
盒子模型
说明:将元素的左右外边距改为自动，则会居中
条件:元素不是浮动元素，不脱离文档流，有宽度属性。
语法:margin:0 auto;
层模型
说明:给元素添加定位属性，然后往左定位为50%，左外边框为负的宽度一半就可以使元素居中；
条件：元素有宽度属性
语法：width:100px;position:absolute;left:50%;margin-left:-50px;
文本
text-align
值
center
居中
left
左
roght
右
css3新属性
边框
边框半径:border-radius
盒子阴影:box-shadow
图像边框：border-image
转换transform
位移:translate
说明
元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数rotate()方法
参数
(X,Y)
2D旋转:rotate
说明
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
参数
（旋转度数,单位deg）
缩放:scale
说明
可以使元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
参数
（X,Y方向的缩放）
倾斜:skew
说明
分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
参数
（X，Y）
文档
https://www.html.cn/doc/css3/2dtransforms/
....
过渡
tiansition
说明
过渡是元素从一种样式逐渐改变为另一种的效果
语法
transition:width 2s;
表示给选中元素添加width变化时拥有2s的过渡
动画
@keyframes 规则
说明
@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式
语法
@keyframes 动画名 {设计动画}
设计动画
from {left:0px;}
to {left:300px;}
to {left:300px;}
使用动画animation
语法
animation: demo 5s;
添加动画名为demo，动画时间是5秒
多列
列的个数：column-count
语法
column-count:3;
条件
必须是块级元素才拥有这个属性
列之间的间隔:column-gap
语法
column-gap:30px;
语法说明
设定列之间有30像素的宽度
列之间的宽度、样式和颜色规则:column-rule
语法
column-rule:3px outset pink;
语法说明
为列添加3像素的边框，outset边框类型，粉红色边框
在线手册
https://www.html.cn/doc/css3/
css在线参考手册
http://www.w3school.com.cn/cssref/index.asp
盒子模型
宽度:width:100px
高度:height:100px
外边距:margin:100px
内边距:padding:100px
超出盒子后做的事情:overflow: hidden;
边框:border
JavaScript
说明
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
版本说明
javascript查看版本号
1995年
javascript1.0版本发布
1998年6月
ECMAScript 2.0版发布。
1999年12月
ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
2008年7月
ECMAScript 3.1版发布，后改名为ECMAScript5.0
2009年12月
ECMAScript 5.0版正式发布
2015年6月17日
ECMAScript 6发布正式版本，即ECMAScript 2015
ECMAScript
说明
基本的语法结构
变量的声明
let
说明
声明变量
语法
let 变量名 = 变量值
const
说明
声明常量
声明后值不可改变
语法
const 常量名 = 常量值
判断语句
if(){}else{}
语法说明
if(判断的值){运行块，判断为true则执行,false跳过}
switch () {
case
}
case
}
语法说明
switch(判断的集合)case 判断集合内的值:执行块,判断的值为true 则执行,false则跳过
作用域
说明
作用域（scope），程序设计概念，通常来说，一段程序代码中所用到的名字并不总是有效/可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
全局作用域GO
window
未声明变量可以全局访问
局部作用域AO
ECMA5.0及以下版本JS
函数内部为一个局部作用域，外边不可访问
EAMA6.0及以上的JS
未声明变量不可以使用！报错
具有块级作用域:{}
预编译
说明
预编译又称为预处理，是做些代码文本的替换工作。是整个编译过程的最先做的工作。
函数和声明变量具有变量提升，默认函数声明会放在页面的最上面
DOM
说明
全称为文档对象模型：用于操作HTML结构的API
BOM
说明
全称浏览器对象模型：用于操作浏览器的API
js框架
jQuery
使用
cdn
下载导入
Vue
React
作者：何福辉
后端开发
编程语言
网络编程
数据库
0 条评论
下一页
