web开发
2019-08-08 18:24:31 0 举报AI智能生成
登录查看完整内容
web开发
作者其他创作
大纲/内容
后端开发
系统开发
前端开发
HTML(hypertext markup language 超文本标记语言)
引入样式
外部样式
<link rel=\"stylesheet\" type=\"test/css\" href=\"mystyle.js\">
内部样式
<style>...<\\style>
内联样式
写在标签里的，使用style属性
引入js
外部引入
<script src=\"myjs.js\"
外部脚本不能包含<script>标签
可以放在body和head中
内部引入
<script>...<\\script>
内联引入
添加事件属性
标签
常见
<!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\t返回当前音频/视频的 URL
参照media事件
画布<Canvas>
通过脚本javascript绘出脚本
getContext()方法
可返回一个对象，该对象提供了用于在画布上绘图的方法和属性
颜色、样式和阴影
fillStyle设置或返回用于填充绘画的颜色、渐变或模式
strockeStyle设置或返回用于笔触的颜色、渐变或模式
shadowColor\t设置或返回用于阴影的颜色
shadowBlur\t设置或返回用于阴影的模糊级别
shadowOffsetX设置或返回阴影距形状的水平距离
shadowOffsetY\t设置或返回阴影距形状的垂直距离
createLinearGradient 创建线性渐变（用在画布内容上）
createPattern\t在指定的方向上重复指定的元素
createRadialGradient 创建放射状/环形的渐变（用在画布内容上）
addColorStop 规定渐变对象中的颜色和停止位置
线条样式
lineCap设置或返回线条的结束端点样式
lineJoin设置或返回两条线相交时，所创建的拐角类型
lineWidth设置或返回当前的线条宽度
miterLimit设置或返回最大斜接长度
矩形
rect()\t创建矩形
fillRect()绘制“被填充”的矩形
strockeRect()绘制矩形（无填充）
clearRect()\t在给定的矩形内清除指定的像素
路径
fill()填充当前绘图（路径）
stroke()绘制已定义的路径
转换
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
transform()替换绘图的当前转换矩阵
setTransform()\t将当前转换重置为单位矩阵。然后运行 transform()
文本
font\t设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline \t设置或返回在绘制文本时使用的当前文本基线
fillText()在画布上绘制“被填充的”文本
strockText()在画布上绘制文本（无填充）
measureText()返回包含指定文本宽度的对象
图像绘制
drawImage()向画布上绘制图像、画布或视频
像素操作
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象，其包含指定的 ImageData 对象的图像数据
createImageData()创建新的、空白的 ImageData 对象
getImageData()返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData()\t把图像数据（从指定的 ImageData 对象）放回画布上
合成
globalAlpha设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation设置或返回新图像如何绘制到已有的图像上
其他
save()保存当前环境的状态
restore()\t返回之前保存过的路径状态和属性
文档类型
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数组
最大前缀和最大后缀
next数组
成功
200 OK
请求成功（其后是对GET和POST请求的应答文档。）
201 created
\t请求被创建完成，同时新的资源被创建。
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
\t把请求连接转换到透明的 TCP/IP 通道。
HTML头部
定义文档标题
<base>
为页面上的所有地址规定默认地址
<link>
定义文档与外部资源的关系
<style>
为HTML定义样式信息
<meta>
提供关于HTML的元信息
name
content
<script>
定义客户端脚本，比如：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\"
\t如果出现该属性，则向用户显示控件，比如播放按钮。
height=\"fixels(固定值)\"
设置视频播放器的高度。
width=“fixels(固定值)”
loop=\"loop\"
如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload=\"preload\"
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 \"autoplay\"，则忽略该属性。
src=\"url\"
要播放的视频的 URL。
currentSrc
\tcurrentTime
videoWidth
\tvideoHeight
duration
ended
\terror
\tpaused
\tmuted
\tseeking
\tvolume
play
\tpause
progress
error
\ttimeupdate
ended
abort
\tempty
emptied
waiting
\tloadedmetadata
<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
拖放
事例和详解
drag
drop
<canvas>画布
详解及事例
详解
添加元素
<canvas id=\"myCanvas\" width=\"200\" height=\"100\"></canvas>
使用javascript在网页上绘图
<script type=\"text/javascript\">var c=document.getElementById(\"myCanvas\");var cxt=c.getContext(\"2d\");cxt.fillStyle=\"#FF0000\
<svg>:内联SVG(scalable vector graphics 可伸缩矢量图形)
优势
可通过文本编辑器来创建和修改
可被搜索、索引、脚本化或压缩
可伸缩的
可在任何的分辨率下被高质量地打印
可在图像质量不下降的情况下被放大
SVG 是一种使用 XML 描述 2D 图形的语言
详细教程
svg详细教程
canvas与SVG对比
canvas
依赖分辨率
不支持事件处理器
弱文本渲染能力
能够以PNG和JPG的格式保存结果图片
适合图像密集型的游戏，对像需要大量频繁的重绘
SVG
不依赖分变率
支持事件处理器
适合带有大型渲染区域的应用，比如Google地图
复杂度高会减慢渲染速度
不适合游戏应用
地理定位
web存储
之前是使用cookie来存的，但是cookie不适合大量数据的存储，速度慢效率低
H5使用javascript来存储和访问数据
localstorage
没有时间限制的存储
sessionstorage
针对一个session的存储
应用缓存(Application cache)
离线浏览
已缓存的资源加载得快
只加载服务器更新过的视频，减少服务器负载
cache manifest
<html manifest=\"demo.appcache\">
manifest 文件的建议的文件扩展名是：\".appcache\"
manifest 文件需要配置正确的 MIME-type，即 \"text/cache-manifest\"。必须在 web 服务器上进行配置
完整的 Manifest 文件
CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.aspFALLBACK:/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=\
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(属性名称)]
后代选择器
父代名.子代名
子元素选择器
父元素>子元素
相邻兄弟选择器
兄弟+兄弟
样式
背景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-style
没有边框：none
单边样式border-
-style
宽度border-width
width
颜色border-color
单边同上
内边距padding
宽度width
元素element
定位
为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠
框：使用display属性
none不会被显示
block会显示为块级元素，前后会带换行
inline默认，元素会被显示为内联元素，前后不换行
inline-block行内块元素
list-item元素会当做列表显示
inherit元素的display从父级元素继承
定位机制
普通流
元素的位置由元素在HTML中的位置决定
浮动
float属性
none
inherit
clear属性:清除浮动
both
相对定位
绝对定位
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}
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
filter:alpha(opacity=x)
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
规定背景的绘制区域
多重背景
文本效果
2D/3D转换
动画
多列布局
用户界面
TCP/IP
javascript
响应式设计
RWD(response web design)
使用Bootstrap
帮助开发者在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机
框架
框架结构标签<frameset>
框架标签<frame>
内联框架<iframe>
W3C(Word Wide Web万维网联盟)
0 条评论
回复 删除
下一页
