首页  思维导图  详情

web开发

2019-08-08 18:24:31   0  举报





AI智能生成

web开发

作者其他创作

大纲/内容

后端开发

前端开发

HTML(hypertext markup language 超文本标记语言)

引入样式

外部样式

内部样式

内联样式

写在标签里的，使用style属性

引入js

外部引入

外部脚本不能包含<script>标签

可以放在body和head中

内部引入

可以放在body和head中

内联引入

添加事件属性

标签

常见

<!DOCTYPE>文档类型

<html>

<head>

<title>

<mate>元信息

<body>

<div>

<p>

<h>

标签分类

基础标签

格式

表单

图像

音频、视频

链接

列表

表格

样式、节

元信息

编程

全局属性

id规定元素唯一的id

class规定元素一个或多个类

style规定行内css

title有关元素的额外信息

hidden规定元素仍未或者不在相关

lang规定元素内容的语言

事件

Windows事件

onload页面加载完成后响应

onUnload页面加载一旦触发

onerror页面发生错误时触发

onresize页面被调整大小时触发

Form事件

onfocus元素获得焦点触发

onblur元素失去焦点时触发

onsubmit表单提交时触发

keyboard事件

onkeydown用户按下时响应

onkeypress用户敲击按钮时响应

onkeyup用户释放按钮时响应

Mouse是事件

onclick用户点击时响应

ondbclick用户双击时响应

onscroll元素滚动条滚动时响应

onmousewhell鼠标滑轮滑动时响应

Media事件

onplay媒体已就绪可以开始播放时响应

onplaying媒体已经开始播放时响应

onpause媒体播放暂停时响应

onwaiting媒体暂停并打算继续时响应

onabort退出时响应

音频、视频<media>

方法

addTextTrack()向媒体添加文本轨道

canPlayType()检查浏览器是否能播放媒体类型

load()重载

play()开始播放

pause()暂停播放

属性

src设置或返回音频/视频元素的当前来源

volum设置或返回音频/视频的音量

currentSrc 返回当前音频/视频的 URL

事件

参照media事件

画布<Canvas>

通过脚本javascript绘出脚本

getContext()方法

可返回一个对象，该对象提供了用于在画布上绘图的方法和属性

颜色、样式和阴影

属性

fillStyle设置或返回用于填充绘画的颜色、渐变或模式

strockeStyle设置或返回用于笔触的颜色、渐变或模式

shadowColor 设置或返回用于阴影的颜色

shadowBlur 设置或返回用于阴影的模糊级别

shadowOffsetX设置或返回阴影距形状的水平距离

shadowOffsetY 设置或返回阴影距形状的垂直距离

方法

createLinearGradient 创建线性渐变（用在画布内容上）

createPattern 在指定的方向上重复指定的元素

createRadialGradient 创建放射状/环形的渐变（用在画布内容上）

addColorStop 规定渐变对象中的颜色和停止位置

线条样式

属性

lineCap设置或返回线条的结束端点样式

lineJoin设置或返回两条线相交时，所创建的拐角类型

lineWidth设置或返回当前的线条宽度

miterLimit设置或返回最大斜接长度

矩形

方法

rect() 创建矩形

fillRect()绘制“被填充”的矩形

strockeRect()绘制矩形（无填充）

clearRect() 在给定的矩形内清除指定的像素

路径

方法

fill()填充当前绘图（路径）

stroke()绘制已定义的路径

转换

方法

scale() 缩放当前绘图至更大或更小

rotate() 旋转当前绘图

translate()重新映射画布上的 (0,0) 位置

transform()替换绘图的当前转换矩阵

setTransform() 将当前转换重置为单位矩阵。然后运行 transform()

文本

属性

font 设置或返回文本内容的当前字体属性

textAlign 设置或返回文本内容的当前对齐方式

textBaseline 设置或返回在绘制文本时使用的当前文本基线

方法

fillText()在画布上绘制“被填充的”文本

strockText()在画布上绘制文本（无填充）

measureText()返回包含指定文本宽度的对象

图像绘制

方法

drawImage()向画布上绘制图像、画布或视频

像素操作

属性

width 返回 ImageData 对象的宽度

height 返回 ImageData 对象的高度

data 返回一个对象，其包含指定的 ImageData 对象的图像数据

方法

createImageData()创建新的、空白的 ImageData 对象

getImageData()返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据

putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上

合成

属性

globalAlpha设置或返回绘图的当前 alpha 或透明值

globalCompositeOperation设置或返回新图像如何绘制到已有的图像上

其他

方法

save()保存当前环境的状态

restore() 返回之前保存过的路径状态和属性

文档类型

H5中新增了标签

颜色名

颜色可以用名字表示，也可以用16进制值表示，还可以用RGB值表示

编码

字符集

ISO字符集

ISO 字符集是国际标准组织 (ISO) 针对不同的字母表/语言定义的标准字符集

Unicode

Unicode 标准涵盖了世界上的所有字符、标点和符号（UTF）

UTF-8

字符可以是 1-4 个字节长

可以表示 Unicode 标准中的任意字符

向后兼容 ASCII

是网页和电子邮件的首选编码

UTF-16

可变字符编码

能够对全部 Unicode 指令表进行编码

主要被用于操作系统和环境中，比如微软的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字节代码环境

ASCII

7 比特 ASCII 代码可提供 128 个不同的字符值

可显示

设备控制

ISO-8859-1(Latin-1)

符号

包括了数学符号、希腊字符、各种箭头记号、科技符号以及形状

URL编码(uniform resource locator 统一资源定位器)

从 %00 到 %8f

从 %90 到 %ff

语言代码

ISO语言代码

通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明

ISO 639-1

各种语言定义了缩略词

HTTP 状态消息

信息

100 continue

服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求

101 switching protocols

服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。

先计算模式字符串的最大前后缀公共元素和next数组

最大前缀和最大后缀

使用两个变量i=0,j=1，如果

next数组

成功

200 OK

请求成功（其后是对GET和POST请求的应答文档。）

201 created

请求被创建完成，同时新的资源被创建。

202 accepted

供处理的请求已被接受，但是处理未完成。

203 Non-authoritative Information

文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。

204 no content

没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。

205 reset content

没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容

206 partial content

客户发送了一个带有Range头的GET请求，服务器完成了它。

重定向

300 multiple choices

多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。

300-307

客户端错误

400-417

服务端错误

500-505

HTTP 方法

HTTP(hypertext transfer protocol):超文本传输协议

他的设计是为了保证客户机与服务机之间的通信

工作方式是客户机与服务器请求-应答协议

web浏览器可能是服务端，而计算机上的网络应用程序也有可能是服务端

客户端（浏览器）向服务器提交HTTP请求，服务器向客户端返回响应。响应包括请求的状态信息和可能请求的内容

get/post

get从指定的资源请求数据

可以被缓存

保留在浏览器的历史记录中

请求可被收藏为书签

不应该用于处理敏感信息

请求有长度有限制

只应当用于取回数据

post向指定的资源提交需要处理的数据

不能被缓存

不会保留在历史记录中

不能被收藏为书签

没有长度的限制

get的数据可见所以安全性比post差

其他请求方法

head

与 GET 相同，但只返回 HTTP 报头，不返回文档主体。

put

上传指定的 URI 表示。

delete

删除指定资源。

options

返回服务器支持的 HTTP 方法

connect

把请求连接转换到透明的 TCP/IP 通道。

HTML头部

<head>

<title>

定义文档标题

<base>

为页面上的所有地址规定默认地址

<link>

定义文档与外部资源的关系

<style>

为HTML定义样式信息

<meta>

提供关于HTML的元信息

name

content

定义客户端脚本，比如：javascript

XHTML(eXtensible hypertext markup language 可扩展标记语言)

与HTML4.0差不多，只是更加严格更加纯净，使用XML应用的方式定义HTML

XML(eXtensible markup language)扩展标记语言

XML必须是一种正确标记且格式良好的标记语言

XML用来描述数据

XHTML结合了XML和HTML的优点

主要不同

元素必须正确的被嵌套

元素必须关闭

标签名必须是小写

文档必须拥有根元素

必须嵌套在<html>中

语法规则

属性名称小写

属性值加引号

属性不能简写

用id属性替代name属性

HTML5

最新的HTML标准，拥有许多新元素，跨平台可以再不同的硬件平台上运行

<!DOCTYPE HTML>

新特性

用于绘画的canvas元素

用于媒介回放的<video>和<audio>

对本地离线存储更好支持

新的特殊内容元素，article、header、footer、nav、section

新的表单控件，calendar、date、time、Email、URL、search

<video>:web上的视频

支持的视频格式

ogg

MPEG 4

WebM

方法

play()

pause()

load()

canPlayType

属性

autoplay=“autoplay”

如果出现该属性，则视频在就绪后马上播放

controls="controls"

如果出现该属性，则向用户显示控件，比如播放按钮。

height="fixels(固定值)"

设置视频播放器的高度。

width=“fixels(固定值)”

设置视频播放器的高度。

loop="loop"

如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload="preload"

如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src="url"

要播放的视频的 URL。

currentSrc

currentTime

videoWidth

videoHeight

duration

ended

error

paused

muted

seeking

volume

事件

play

pause

progress

error

timeupdate

ended

abort

empty

emptied

waiting

loadedmetadata

<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg">

<source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格

vedio+dom

<audio>:web上的音频

格式

Ogg vorbis

MP3

Wav

属性

autoplay=“autoplay”

如果出现该属性，则视频在就绪后马上播放

controls="controls"

如果出现该属性，则向用户显示控件，比如播放按钮。

loop="loop"

如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload="preload"

如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src="url"

要播放的视频的 URL。

拖放

drag

drop

<canvas>画布

添加元素

使用javascript在网页上绘图

优势

可通过文本编辑器来创建和修改

可被搜索、索引、脚本化或压缩

可伸缩的

可在任何的分辨率下被高质量地打印

可在图像质量不下降的情况下被放大

SVG 是一种使用 XML 描述 2D 图形的语言

详细教程

canvas与SVG对比

canvas

依赖分辨率

不支持事件处理器

弱文本渲染能力

能够以PNG和JPG的格式保存结果图片

适合图像密集型的游戏，对像需要大量频繁的重绘

SVG

不依赖分变率

支持事件处理器

适合带有大型渲染区域的应用，比如Google地图

复杂度高会减慢渲染速度

不适合游戏应用

地理定位

web存储

之前是使用cookie来存的，但是cookie不适合大量数据的存储，速度慢效率低

H5使用javascript来存储和访问数据

方法

localstorage

没有时间限制的存储

sessionstorage

针对一个session的存储

应用缓存(Application cache)

优势

离线浏览

已缓存的资源加载得快

只加载服务器更新过的视频，减少服务器负载

cache manifest

manifest 文件的建议的文件扩展名是：".appcache"

manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置

完整的 Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

web workers

运行在后台的javascript，独立于其他脚本，不会影响页面的功能

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

web workers和DOM

当web workers位于外部文件时不能访问javascript对象：

window

document

parent

服务器发送事件(server-sent event)

网页自动获取来自服务器的更新

CSS

cascading style sheet 叠层样式表

叠层次序（从低到高）

浏览器缺省设置

外部样式表

内部样式表（位于 <head> 标签内部）

内联样式（在 HTML 元素内部）

语法

selector {property: value}

selector:选择器

property:属性

value:值

元素选择器

元素名

id选择器

#id

类选择器

.class

属性选择器

[attribute(属性名称)]

后代选择器

父代名.子代名

子元素选择器

父元素>子元素

相邻兄弟选择器

兄弟+兄弟

引入样式

外部样式

内部样式

内联样式

写在标签里的，使用style属性

样式

背景background

颜色background-color：color；

图片background-image：url(../..)；

重复background-repeat：repeat-y/repeat-x/repeat ；

定位background-position：

关键字：top/center/bottom；

百分比：××%；

数值：××px；

关联background-attachment：fixed

文本text

缩进text-indent：××em/××%；

水平对齐text-align:left/right/center

字间隔word-spacing

字母间隔letter-spacing

字符转换text-transform

文本装饰text-decoration

处理空白符white-space

文本方向direction

颜色color

行高line-height

文本阴影text-shadow

字体font

指定字体font-family

字体风格font-style

字体变形font-variant

字体加粗font-weight

字体大小font-size

链接a

普通的：link

已访问的：visited

鼠标指针位于链接上方：hover

被点击时刻：active

列表list

列表类型list-style-type

列表图像list-style-image

列表位置list-style-position

列表样式list-style

表格table

边框border

折叠边框border-collapse

宽度：width

高度：height

文本对齐text-align/vertical-align

内边距：padding

轮廓outline

颜色outline-color

样式outline-style

宽度outline-width

框模型

外边距margin

top

bottom

left

right

边框border

样式border-style

没有边框：none

单边样式border-

top

bottom

left

right

宽度border-width

单边样式border-

top

bottom

left

right

颜色border-color

单边同上

内边距padding

top

bottom

left

right

宽度width

元素element

定位

为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠

框：使用display属性

none不会被显示

block会显示为块级元素，前后会带换行

inline默认，元素会被显示为内联元素，前后不换行

inline-block行内块元素

list-item元素会当做列表显示

inherit元素的display从父级元素继承

定位机制

普通流

元素的位置由元素在HTML中的位置决定

浮动

float属性

left

right

none

inherit

clear属性:清除浮动

left

right

both

none

inherit

相对定位

绝对定位

position属性

static元素框正常生成

relative元素框偏移某个距离，相对定位

absolute元素框从文档流完全删除，并相对于其包含块定位，绝对定位

fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身

overflow属性

auto自动

scroll滚动

visible默认，不会被修剪呈现在元素框外

hidden会被修剪，其余内容不可见

vertical-align元素垂直对齐方式

cursor属性

设置光标形态

auto浏览器设置的光标

default默认光标（箭头）

crosshair十字线

pointer一只手

其他

visibility属性

设置元素是否可见

visible默认可见

hidden隐藏

collapse可以删除一行，但不影响布局

inherit继承父类visible属性值

伪类pseudo-class

语法

selector：pseudo-class{property：value}

selector.class：pseudo-class{property：value}

链接a

普通的：link

已访问的：visited

鼠标指针位于链接上方：hover

被点击时刻：active

focus

向拥有键盘输入焦点的元素添加样式

first-child

向元素的第一个子元素添加样式。

lang

向带有指定 lang 属性的元素添加样式

伪元素pseudo-elements

语法

selector：pseudo-element{property：value}

selector.class：pseudo-element{property：value}

first-letter

第一个字母

first-line

第一行

before

元素之前

after

元素之后

图片

透明度

opacity

IE9, Firefox, Chrome, Opera 和 Safari 使用,opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明

filter:alpha(opacity=x)

IE8 以及更早的版本使用滤镜,x 能够取的值从 0 到 100。值越小，越透明

hover效果

利用链接的伪属性hover实现

媒介类型media types

允许你定义以何种媒介提交文件

@media all所有媒介

@media screen用于电脑屏幕显示

@media print用于打印机

其他

CSS3

选择器

框模型

背景和边框

边框

border-radius

圆角边框

border-radius:25px;

box-shadow

边框阴影

box-shadow: 10px 10px 5px #888888;

border-image

边框图片

border-image:url(border.png) 30 30 round;

背景

background-size

设置背景图片的尺寸

background-origin

规定图片的定位区域

border-box

padding-box

content-box

background-clip

规定背景的绘制区域

border-box

padding-box

content-box

多重背景

background-image:url(bg_flower.gif),url(bg_flower_2.gif);

文本效果

2D/3D转换

动画

多列布局

用户界面

TCP/IP

javascript

响应式设计

RWD(response web design)

使用Bootstrap

最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架

帮助开发者在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机

框架

框架结构标签<frameset>

框架标签<frame>

内联框架<iframe>

W3C(Word Wide Web万维网联盟)

 收藏

立即使用

web开发

 收藏

立即使用

算法与数据结构

Lighter

职业：暂无

去主页





0 条评论

下一页

为你推荐

查看更多



web

web