目录
第一章 HTML
1.HTML基础
(1)、什么是HTML
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
(2)、HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标题>内容<标题>
(3)、HTML元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
html元素:
<p>这是一个段落。</p>
(4)、<!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
HTML5:
<!DOCTYPE html>
2.HTML的基本标签
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。
元素 | 描述 |
---|---|
<title> | 定义网页的标题 |
<meta> | 定义网页的基本信息(如刷清时间等,charset="utf-8 定义中文,charset="gbk GBK为默认编码) |
<style> | 定义css样式 |
<link> | 链接外部css样式或者文件等 |
<script> | 定义脚本文件 |
3.段落与文字
(1)、段落和文本标签
标签 | 描述 |
---|---|
<h1>~<h6> | 标题 |
<p> | 段落 |
<br> | 换行符 |
<hr> | 水平线 |
标签 | 描述 |
---|---|
<b> | 定义粗体文字 |
<big> | 定义大号文字 |
<em> | 定义着重文字 |
<i> | 定义斜体文字 |
<small> | 定义小号文字 |
<strong> | 加重语气 |
<sub> | 定义上标题 |
<sup> | 定义下标题 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
(2)、网页特殊符号
符号 | 写法 |
---|---|
“ (双引号) | " |
' (左单引号) | ‘ |
' (右单引号) | ’ |
× (乘号) | × |
÷ (除号) | ÷ |
> (大于号) | > |
< (小于) | < |
& (与) | & |
—(长破折号) | — |
| (竖线) | | |
(空格) | (多个复制copy即可) |
(3)、自闭合标签
自闭合标签与普通标签不同,自闭合标签没有结束符号,所以不能插入其他标签和文字
一般标签: <body></body>
自闭合标签:<br/>
(4)、块元素和行内元素
常见块级元素(自动换行, 可设置高宽 ):div , h1-h6 , p , pre , ul , ol , li , form , table , menu , address , blockquote 以及HTML5新增的 header ,section ,aside ,footer 等
常见的行内元素(无法自动换行,无法设置宽高):a , span , br , i , q , em , sub , sup , textarea , button , select , small , u , q , cite , lable , var , code
常见的行内块元素 (自动换行, 可设置高宽 ):img , input
4.列表
(1)、有序列表
<ol type="1">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
显示结果为
1.Apples
2.Bananas
3.Lemons
4.Oranges
type属性值决定序号类型
type属性 | 序号类型 |
---|---|
1 | 数字 1 , 2 , 3 (默认值) |
a | 小写英文字母 a ,b ,c |
A | 大写英文字母 A ,B ,C |
i | 小写罗马数字 i , ii , iii |
I | 大写罗马数字 I ,II ,III |
(2)、无序列表
<ul tyle="disc"> //css中弃用tpye,写为style="list-style-type:disc"
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
显示结果为:
• Apples
• Bananas
• Lemons
• Oranges
tpye属性值 | 序号类型 |
---|---|
disc | 实心圆 ● |
circle | 空心圆 ○ |
square | 实心方形 ■ |
(3)、自定义列表
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
展示结果为:
Coffee
- black hot drink
Milk
- white cold drink
列表标签总结:
标签 | 描述 |
---|---|
ol | 定义有序列表 |
ul | 定义无序列表 |
li | 定义列表项 |
dl | 自定义列表 |
dt | 自定义列表项 |
dd | 自定义列表项的描述 |
5.表格
(1)、表格标签
标签 | 描述 |
---|---|
table | 定义表格 |
th | 定义表格的表头 |
tr | 定义表格的行 |
td | 定义表格的单元格 |
caption | 定义表格的标题 |
colgroup | 定义表格行的组 |
col | 定义表格列的属性 |
thead | 定义表格的页眉 |
tbody | 定义表格的主体 |
tfoot | 定义表格的页脚 |
(2)、表格基本结构
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
(3)、合并行和合并列
合并行:<td rowspan="跨度的行数">
合并列:<td colspan="跨度的列数">
6、图像
(1)、图像标签
标签 | 描述 |
---|---|
img | 定义图像 |
map | 定义图像地图 |
area | 定义图像地图的可点击区域 |
属性 | 描述 |
---|---|
src | 图像的文件地址 |
alt | 图像显示不出提示文字 |
title | 鼠标移到图像上时显示的文字 |
标签使用格式为:
<img src="图片地址" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">
(2)、相对路径和绝对路径
相对路径:指的是同一个网站下,不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言,从而得到相对路径。
即:引用文件位置相对于当前文件的位置
绝对路径:指的是文件的完整路径。
(3)、图片格式
1、JPG可以很好处理大面积色调的图像,如相片、网页一般的图片。
2、PNG格式图片体积小,而且无损压缩,能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差,但是可以制作动画。
7.链接
超链接使用a标签,语法为:
<a href="链接地址" target="目标窗口的打开方式">创建链接的目标</a>
属性 | 描述 |
---|---|
_self | 在当前窗口打开(默认值) |
_blank | 在一个全新的空白窗口打开(新标签页中打开) |
_top | 在顶层框架中打开 |
_parent | 在当前框架的上一层打开 |
还有一种较为常用的链接,锚点链接:
<p>
<a href="#C4">查看章节 4</a>
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
//点击查看文章4,便会跳转到文章四的位置
点击目标
<a href="#C4">查看章节 4</a>
//点击跳转在id名前加 #
跳转目标
<a id="C4">章节 4</a>
//设置id属性
8.表单
标签 | 描述 |
---|---|
form | 定义用户输入的表单 |
input | 定义输入域 |
textarea | 定义文本域 |
label | 定义了<input>元素的标签,一般为输入标题 |
fieldset | 定义了一组相关的表单元素,并用外框包装起来 |
legend | 定义了<fieldset>元素的标题 |
select | 定义了下拉选项列表 |
optgroup | 定义选项组 |
option | 定义下拉列表中的选项 |
button | 定义一个点击按钮 |
(1)、input标签表单
属性 | 描述 |
---|---|
text | 单行文本框 |
password | 密码文本框 |
button | 按钮 |
reset | 重置按钮 |
image | 图像形式的提交按钮 |
radio | 单选按钮 |
checkbox | 复选框 |
hidden | 隐藏字段 |
file | 文件上传 |
text属性:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
显示结果为:
password属性:
<form>
Password: <input type="password" name="pwd">
</form>
显示结果为:
radio属性:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
显示结果为:
单选框的设置要保持name一致
checkbox属性:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
显示结果为:
多选框的设置要保持name一致,可以多选
(2)、textarea标签表单
<textarea rows="行数" cols="列数">我是一个文本框</textarea>
显示结果为:
(3)、select和option
下拉列表由<select>标签和<option>标签配合使用
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
显示结果为:
9.多媒体
(1)、插入音频、视频和flash
在网页中插入音频、视频和flash都是使用embed标签。
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>
(2)、插入背景音乐
为某个网页设置背景音乐,使用的是bgsound标签,只适用于IE浏览器
<bgsound src="背景音乐的地址" loop="循环次数"/>
说明:
loop="2"表示重复2次,loop="infinite"表示无限次循环播放,也可以使用loop="-1"表示无限次循环播放。
10.浮动框架iframe
(1)、浮动框架iframe简介
浮动框架是一种较为特殊的框架,它是在浏览器窗口中嵌套的子窗口,整个页面并不一定是框架页面,但要包含一个框架窗口。<iframe>框架可以完全由设计者定义宽度和高度,并且可以放置在一个网页的任何位置,这极大地扩展了框架页面的应用范围。
<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>
说明:
src属性是iframe的必须属性,它定义浮动框架页面的源文件地址。
(2)、设置浮动框架是否显示滚动条scrolling
对于浮动框架iframe的的滚动条,我们可以使用scrolling属性来控制。
<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scrolling="取值"></iframe>
属性 | 描述 |
---|---|
auto | 在浏览器中左对齐 |
yes | 总是显示滚动条 |
no | 任何情况都不显示滚动条 |
第二章 HTML5改变
1.HTML5更改基础
(1)、文档类型说明
HTML5文档声明如下:
<!DOCTYPE html>
(2)、标签不再区分大小写
<div>不再区分大小写</DIV> //但是一般还是使用小写
(3)、允许属性值不加引号
<div id=wrapper style=co1or: red> 不加引号 </div>
(4)、允许部分属性的属性值省略
2.id和class
(1)、id
id属性具有唯一性,也就是说在一个页面中相同的id只允许出现一次。
(2)、class
对于一个元素而言,我们可以定义多个classe
总结:
小地方多用class,大地方用id
3.浏览器标题小图标
浏览器标题栏前面都会有一个小图标实现只需要在head标签添加一个link标签即可
<link rel="shortcut icon" type="image/x-icon" href="favicon.icon"/>
4.新增语义化和结构标签
标签 | 描述 |
---|---|
header | 头部标签 |
nav | 导航标签 |
article | 内容标签 |
section | 块级标签 |
aside | 侧边栏标签 |
footer | 尾部标签 |
main | 文章主内容 |
mark | 强调的文本 |
figure | 规定自包含内容 |
figcaption | 定义figure的标题 |
details | 用户能查看或者隐藏的额外细节 |
summary | 定义details可见标题 |
time | 定义时间 |
bdi | 允许您设置一段文本,使其脱离其父元素的文本方向设置 |
command | 定义命令按钮,比如单选按钮、复选框或按钮 |
details | 用于描述文档或文档某个部分的细节 |
dialog | 定义对话框,比如提示框 |
prograss | 定义任何类型的任务的进度 |
ruby | 定义 ruby 注释 |
rt | 定义字符(中文注音或字符)的解释或发音 |
rp | 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容 |
wbr | 规定在文本中的何处适合添加换行符 |
5.新增多媒体音频标签
-
音频 --
audio
-
视频 --
video
(1)、audio
语法:
<audio controls>
<source src="./media/snow.mp3" type="audio/mpeg" />
</audio>
支持:
属性:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 音频就绪后马上播放 |
controls | controls | 显示控件 |
loop | loop | 音频结束时重新播放 |
preload | preload | 音频在页面加载时加载 |
src | src | 播放音频的地址 |
(2)、video
语法:
<video src="./media/video.mp4" controls="controls"></video>
支持:
属性:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频就绪自动播放 |
controls | controls | 展示控件 |
width | px | 设置播放器宽 |
height | px | 设置播放器高 |
loop | loop | 循环播放 |
preload | auto(预加载视频) | 是否加载视频 |
none(不预加载视频) | ||
src | ||
poster | imgurl | 加载等待的画面图片 |
muted | muted | 静音播放 |
6.新增表单属性
属性 | 描述 |
---|---|
datelist | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值 |
keygen | 规定用于表单的密钥对生成器字段 |
output | 定义不同类型的输出,比如脚本的输出 |
属性 | 描述 |
---|---|
必须是Email类型 | |
url | 必须是URL类型 |
date | 必须是日期类型 |
time | 必须是时间类型 |
month | 必须是月类型 |
week | 必须是星期类型 |
number | 必须是数字类型 |
tel | 手机号码 |
search | 搜索框 |
color | 颜色选择表单 |
属性 | 描述 |
---|---|
autocomplete | 自动填充 |
novalidate | 提交表单时不应该验证 form 或 input |
autofocus | 自动地获得焦点 |
formaction | 描述表单提交的URL地址 |
formenctype | 描述了表单提交到服务器的数据编码 |
formmethod | 定义了表单提交的方式 |
formnovalidate | formnovalidate 属性与type="submit一起使用 不验证提交 |
formtarget | 指定一个名称或一个关键字来指明表单提交数据接收后的展示 |
list | 规定输入域的 datalist。datalist 是输入域的选项列表 |
min、max | 包含数字或日期的 input 类型规定限定 |
multiple | 规定<input> 元素中可选择多个值 |
pattern | 一个正则表达式用于验证 <input> 元素的值 |
placeholder | 提示文本 |
required | 必须在提交之前填写输入域(不能为空 |
step | 输入域规定合法的数字间隔 |
7.HTML5事件
(1)、窗口事件
属性 | 值 | 描述 |
---|---|---|
onafterprint | script | 在打印文档之后运行脚本 |
onbeforeprint | script | 在文档打印之前运行脚本 |
onbeforeonload | script | 在文档加载之前运行脚本 |
onblur | script | 当窗口失去焦点时运行脚本 |
onerror | script | 当错误发生时运行脚本 |
onfocus | script | 当窗口获得焦点时运行脚本 |
onhashchange | script | 当文档改变时运行脚本 |
onload | script | 当文档加载时运行脚本 |
onmessage | script | 当触发消息时运行脚本 |
onoffline | script | 当文档离线时运行脚本 |
ononline | script | 当文档上线时运行脚本 |
onpagehide | script | 当窗口隐藏时运行脚本 |
onpageshow | script | 当窗口可见时运行脚本 |
onpopstate | script | 当窗口历史记录改变时运行脚本 |
onredo | script | 当文档执行再执行操作(redo)时运行脚本 |
onresize | script | 当调整窗口大小时运行脚本 |
onstorage | script | 当 Web Storage 区域更新时(存储空间中的数据发生变化时)运行脚本 |
onundo | script | 当文档执行撤销时运行脚本 |
onunload | script | 当用户离开文档时运行脚本 |
(2)、表单事件
属性 | 值 | 描述 |
---|---|---|
onblur | script | 当元素失去焦点时运行脚本 |
onchange | script | 当元素改变时运行脚本 |
oncontextmenu | script | 当触发上下文菜单时运行脚本 |
onfocus | script | 当元素获得焦点时运行脚本 |
onformchange | script | 当表单改变时运行脚本 |
onforminput | script | 当表单获得用户输入时运行脚本 |
oninput | script | 当元素获得用户输入时运行脚本 |
oninvalid | script | 当元素无效时运行脚本 |
onselect | script | 当选取元素时运行脚本 |
onsubmit | script | 当提交表单时运行脚本 |
(3)、鼠标事件
属性 | 值 | 描述 |
---|---|---|
onclick | script | 当单击鼠标时运行脚本 |
ondblclick | script | 当双击鼠标时运行脚本 |
ondrag | script | 当拖动元素时运行脚本 |
ondragend | script | 当拖动操作结束时运行脚本 |
ondragenter | script | 当元素被拖动至有效的拖放目标时运行脚本 |
ondragleave | script | 当元素离开有效拖放目标时运行脚本 |
ondragover | script | 当元素被拖动至有效拖放目标上方时运行脚本 |
ondragstart | script | 当拖动操作开始时运行脚本 |
ondrop | script | 当被拖动元素正在被拖放时运行脚本 |
onmousedown | script | 当按下鼠标按钮时运行脚本 |
onmousemove | script | 当鼠标指针移动时运行脚本 |
onmouseout | script | 当鼠标指针移出元素时运行脚本 |
onmouseover | script | 当鼠标指针移至元素之上时运行脚本 |
onmouseup | script | 当松开鼠标按钮时运行脚本 |
onmousewheel | script | 当转动鼠标滚轮时运行脚本 |
onscroll | script | 当滚动元素的滚动条时运行脚本 |
(4)、媒体事件
属性 | 值 | 描述 |
---|---|---|
onabort | script | 当发生中止事件时运行脚本 |
oncanplay | script | 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本 |
oncanplaythrough | script | 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本 |
ondurationchange | script | 当媒介长度改变时运行脚本 |
onemptied | script | 当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本 |
onended | script | 当媒介已抵达结尾时运行脚本 |
onerror | script | 当在元素加载期间发生错误时运行脚本 |
onloadeddata | script | 当加载媒介数据时运行脚本 |
onloadedmetadata | script | 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本 |
onloadstart | script | 当浏览器开始加载媒介数据时运行脚本 |
onpause | script | 当媒介数据暂停时运行脚本 |
onplay | script | 当媒介数据将要开始播放时运行脚本 |
onplaying | script | 当媒介数据已开始播放时运行脚本 |
onprogress | script | 当浏览器正在取媒介数据时运行脚本 |
onratechange | script | 当媒介数据的播放速率改变时运行脚本 |
onreadystatechange | script | 当就绪状态(ready-state)改变时运行脚本 |
onseeked | script | 当媒介元素的定位属性不再为真且定位已结束时运行脚本 |
onseeking | script | 当媒介元素的定位属性为真且定位已开始时运行脚本 |
onstalled | script | 当取回媒介数据过程中(延迟)存在错误时运行脚本 |
onsuspend | script | 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本 |
ontimeupdate | script | 当媒介改变其播放位置时运行脚本 |
onvolumechange | script | 当媒介改变音量亦或当音量被设置为静音时运行脚本 |
onwaiting | script | 当媒介已停止播放但打算继续播放时运行脚本 |
(5)、其他事件
属性 | 值 | 描述 |
---|---|---|
onshow | script | 当 <menu> 元素在上下文显示时触发 |
ontoggle | script | 当用户打开或关闭 <details> 元素时触发 |
8.html5移出元素
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
9.canvas
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形
创建:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
使javeScript绘制图像
首先,找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var ctx=c.getContext("2d");
//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
绘制:
ctx.fillStyle="颜色";
fillRect(x,y,width,height) ;//定义了矩形当前的填充方式
画线:
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0);//开始 ctx.lineTo(200,100);//结束 ctx.stroke();//绘画空心,fill实心
画圆:
arc(x,y,r,start,stop) //x是横坐标,y是纵坐标,r是半径,start是开始位置,stop是结束位置
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
文本:
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
渐变:
- createLinearGradient(x,y,x1,y1) - 创建线条渐变 // x ,y 是起始位置,x1 ,y1 是结束位置
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变 // r 是半径
- addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
把一幅图像放置到画布上:
- drawImage(image,x,y)
10.拖放
拖放设置:
draggable="true"
<img draggable="true">
开始位置:
οndragstart="drag(event)"
<img draggable="true" ondragstart="drag(event)" >
结束位置:
οndragοver="allowDrop(event)
<div id="div1" ondrop="drop(event)" ></div>
放置位置:
οndrοp="drop(event)
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
JaveScript调用:
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
- 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素(目标元素)中
11.地理定位:
getCurrentPosition() —— 获得用户的位置
运用实例(百度):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小吉学习</title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
</script>
</body>
</html>
12.web内存
- localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
- sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
localStorage:
// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
- 创建 localStorage 名称/值对,其中:name="lastname",value="Gates"
- 取回 "lastname" 的值,并把它插到 id="result" 的元素中
点击次数:
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已经点击这个按钮 " +
localStorage.clickcount + " 次。";
sessionStorage:
点击次数:
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中,您已经点击这个按钮 " +
sessionStorage.clickcount + " 次。";
13.web应用缓存
应用缓存的好处:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
用法:
<!DOCTYPE HTML>
<html manifest="demo.appcache"> //保存位置,manifest 文件的建议文件扩展名是:".appcache"。
...,
</html>
manifest 文件有三个部分:
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
CACHE MANIFEST //自动缓存
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php //永远不会被缓存
FALLBACK:
/html/ /offline.html //如果无法建立因特网连接,则用 "offline.html" 替代 /html/ 目录中的所有文件
注意:
一旦应用被缓存,它就会保持缓存直到发生下列情况:
- 用户清空浏览器缓存
- manifest 文件被修改(参阅下面的提示)
- 由程序来更新应用缓存
14.web worker
<!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"); //创建一个新的 web worker 对象,w = new Worker("demo_workers.js");
}
w.onmessage = function(event) { ,
document.getElementById("result").innerHTML = event.data;
};//添加一个 "onmessage" 事件监听器
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate(); //终止 web worker
w = undefined; //重复使用该代码,设置为undefined
}
</script>
</body>
</html>
注意:
web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:
- window 对象
- document 对象
- parent 对象
15.SSE
Server-Sent 事件指的是网页自动从服务器获得更新
接收服务器发送事件通知:
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) { //当接收到消息
document.getElementById("result").innerHTML += event.data + "<br>";
};
检测服务器发送事件的浏览器支持:
if(typeof(EventSource) !== "undefined") {
// 是的!支持服务器发送事件!
// 一些代码.....
} else {
// 抱歉!不支持服务器发送事件!
}
EventSource 对象:
事件 | 描述 |
---|---|
onopen | 当通往服务器的连接被打开 |
onmessage | 当接收到消息 |
onerror | 当发生错误 |
16.WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
以下 API 用于创建 WebSocket 对象:
var Socket = new WebSocket(url, [protocol] );// 第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议
WebSocket 对象的属性:
属性 | 描述 |
---|---|
Socket.readyState | 只读属性 readyState 表示连接状态,可以是以下值:
|
Socket.bufferedAmount | 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。 |
WebSocket 事件:
事件 | 事件处理程序 | 描述 |
---|---|---|
open | Socket.onopen | 连接建立时触发 |
message | Socket.onmessage | 客户端接收服务端数据时触发 |
error | Socket.onerror | 通信发生错误时触发 |
close | Socket.onclose | 连接关闭时触发 |
WebSocket 方法 :
方法 | 描述 |
---|---|
Socket.send() | 使用连接发送数据 |
Socket.close() | 关闭连接 |
实例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>小吉学习</title>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket 已连接上,使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
}
else
{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>
</body>
</html>
webSocket 的使用需要创建一个支持 WebSocket 的服务,下载 mod_pywebsocket 并开启服务
本文由博主在学习过程中编写,有一定程度上的参考,如有错误和问题,望理解。