

首页  思维导图  详情



web开发

2019-06-11 11:23:48   0  举报





AI智能生成

web开发大纲

web开发

模版推荐

作者其他创作

大纲/内容

历史

特性

简易性

可扩展性

平台无关性

语法

单标签

双标签

属性

语法

属性采用键值对的形式 name='value'

常用属性

href

指定链接地址

title

鼠标悬浮时提示的文本

所有标签可以使用

src

指定url地址

url=统一资源定位符

value

class

设置标签的类名

指定标签的ID

元素

块级元素

特征:独占一行，用css宽高等属性

例如:p,div,h1-h6,ul,li

内联元素

特征:内容决定大小，不拥有css宽高属性，不会独占一行

例如:span,a,i

内联块元素

特征:拥有css宽高属性，不独占一行

例如:img

常用标签

h1-h6

标题1-6

img

...

自学网站

http://www.w3school.com.cn/html/html_attributes.asp

https://study.163.com/

https://ke.qq.com/

https://www.jikexueyuan.com/

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化<br>

<h2>使用css</h2>

行内样式

添加属性style

语法：style="css样式"

内部样式

添加style标签

语法：<style>css选择器{css样式}</style>

外部样式

link 引入css样式文件

语法

语法说明

rel表示引入文件为样式文件，type表示为css文本文件，href属性指定链接的地址

使用语法

css选择器{css样式}

<h2>基本css属性</h2>

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名

class

语法：.class名

标签

语法：标签名

多选

元素1，元素2

选择子元素

父元素>子元素

选择兄弟元素

元素1+它的兄弟

伪类选择

:hover

添加鼠标悬浮效果

:active

添加鼠标单机效果

.....

在线参考手册

https://www.html.cn/book/css/selectors/index.htm

层模型介绍

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。

<p>定位:position</p>

static

默认值

absolute

绝对定位

说明

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

relative

相对定位

说明

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

fixed

固定定位

层级:z-index:10

top

顶部的距离

left

左边的距离

right

右边的距离

bottom

底部的距离

<h2>css高级(技巧)</h2>

居中

盒子模型

说明:将元素的左右外边距改为自动，则会居中

条件:元素不是浮动元素，不脱离文档流，有宽度属性。

语法:margin:0 auto;

层模型

说明:给元素添加定位属性，然后往左定位为50%，左外边框为负的宽度一半就可以使元素居中；

条件：元素有宽度属性

语法：width:100px;position:absolute;left:50%;margin-left:-50px;

文本

text-align

值

center

居中

left

左

roght

右

边框

边框半径: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;}<br>to {left:300px;}

使用动画animation

语法

animation: demo 5s;

添加动画名为demo，动画时间是5秒

多列

列的个数：column-count

语法

column-count:3;

条件

必须是块级元素才拥有这个属性

列之间的间隔:column-gap<br>

语法

column-gap:30px;

语法说明

设定列之间有30像素的宽度

列之间的宽度、样式和颜色规则:column-rule<br>

语法

column-rule:3px outset pink;

语法说明

为列添加3像素的边框，outset边框类型，粉红色边框

在线手册

https://www.html.cn/doc/css3/

<h2>css在线参考手册</h2>

http://www.w3school.com.cn/cssref/index.asp

宽度:width:100px

高度:height:100px

外边距:margin:100px

内边距:padding:100px

超出盒子后做的事情:overflow: hidden;

边框:border

<h1>JavaScript</h1>

说明

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 () {<br> case<br>}

语法说明

switch(判断的集合)case 判断集合内的值:执行块,判断的值为true 则执行,false则跳过

作用域

说明

作用域（scope），程序设计概念，通常来说，一段程序代码中所用到的名字并不总是有效/可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

全局作用域GO

window

未声明变量可以全局访问

局部作用域AO

ECMA5.0及以下版本JS

函数内部为一个局部作用域，外边不可访问

EAMA6.0及以上的JS<br>

未声明变量不可以使用！报错

具有块级作用域:{}

预编译

说明

预编译又称为预处理，是做些代码文本的替换工作。是整个编译过程的最先做的工作。

函数和声明变量具有变量提升，默认函数声明会放在页面的最上面

DOM

说明

全称为文档对象模型：用于操作HTML结构的API

BOM

说明

全称浏览器对象模型：用于操作浏览器的API

js框架

jQuery

使用

cdn

下载导入

Vue

React

作者：何福辉

后端开发

编程语言

网络编程

数据库

 Collect

Get Started

web评价

 Collect

Get Started

传统Web应用

 Collect

Get Started

paquetes web

 Collect

Get Started

web





0 条评论

下一页