是块级元素,没有特殊含义,一般用于页面布局
HTML span元素
是内联元素,可用作文本容器,没有特定含义
HTML表单
表单是一个包含表单元素的区域(如:文本域、下拉列表、单选框、复选框等)
action属性,当用户点击表单中的提交按钮,表单内容会被传送到action属性值定义的地址
enctype属性,规定在向服务器发送表单数据之前如何对其进行编码(适用于 method="post" 的情况),常用值:
- application/x-www-form-urlencoded:默认,发送前对所有字符进行编码
- multipart/form-data:不对字符编码,文件上传时控件表单必须值
- text/plain:将空格转换为 "+" 符号,但不编码特殊字符
输入: type属性的属性值决定输入类型
1.文本域:
2.单选按钮:
3.密码框:
4.复选框:
5.按钮:
6.重置按钮:
7.提交按钮:
8.文件上传:
表单标签:
HTML框架 frameset
不能将 标签与 标签同时使用
//垂直|水平
您的浏览器无法处理框架!
noresize = "noresize"属性定义框架间的边框不可拖动
标签定义了放置在每个框架中的 HTML 文档。
不支持框架标签中嵌套
以上标签在HTML5中被移除
内联框架:
声明文档类型。HTML有多个版本,只有明确版本,才能正确显示页面 HTML5文档声明
标签是所有头部元素的容器,包含脚本、元信息、文档标题等
标签定义文档的标题,显示在浏览器工具栏上
描述文档
< meta http-equiv = " refresh" content = " 5;url=xxx" />
标签为页面上的所有链接规定默认地址或默认目标(target)
标签定义文档与外部资源之间的关系。常用的为外部样式表的引入
< link rel = " shortcut icon" href = " xxx.ico" type = " image/x-icon" >
内部样式定义在该标签内
外部脚本的引入(src属性指向资源地址),直接标签内部脚本定义在内
浏览器不支持脚本时显示该标签文本
字符实体
HTML中有些字符不能使用 常用的字符实体:
< <
> >
& &
" "
' '
© ©
x ×
➗ ÷
统一资源定位符URL,也称为网址
scheme://host.domain:port/path/filename
scheme - 协议,常见的类型是 http
host - 主机名,http 的默认主机是 www
domain - 域名
:port - 端口号,http 的默认端口号是 80
path - 定义在服务器上的路径
filename - 定义的文档/资源名称
HTML插件
音频、视频通过标签来加载
该标签用于插入对象
data属性指向插入的对象,可为音频、视频、html页面、图片
单标签
HTML audio
HTML video
您的浏览器不支持 video 标签。
HTML5
Viewport:
用户网页的可视区域 设置viewport:
width - 控制viewport大小,device-width为设备宽
initial-scale - 初始缩放比例,即页面第一次加载时的缩放比例
user-scalable - 是否允许用户手动缩放 大多数浏览器新版本都支持,IE9以下版本浏览器兼容HTML5的方法:
html5shiv.js 引用代码必须放在
元素中
HTML5 Canvas
用于图形的绘制,通过脚本来完成
定义图形容器,默认width=300px,height=150px;
浏览器不支持时,使用替换文本,在标签中
1.通过JavaScript脚本获取容器对象(js放在body)
var c = document.getElementById('myCanvas');
2.创建context对象,getContext('2d')是HTML5的内置对象,可绘制线路、矩形、图形、字符、添加图像等
var ctx = c.getContext('2d');
3.对象属性和方法的设置
ctx.fillStyle="#ff0000";
ctx.fillRect(0,0,150,75);
fillStyle = color|gradient|pattern 填充绘图颜色|渐变|模式
fillRect(x,y,width,height) 定义矩形当前填充的方式
画线:
beginPath() 新建路径
moveTo(x,y) 定义线的开始的坐标
lineTo(x,y) 定义线条结束的坐标
closePath() 闭合路径
arc(x,y,r,start,stop) 绘制圆形
rect(x,y,width,heigth) 绘制矩形
stroke() 绘制线条
fill() 填充绘图,没有设置fillStyle时默认黑色填充
文本:
font="" 定义字体属性
fillText(text,x,y) 绘制实心文本
strokeText(text,x,y) 绘制空心文本
渐变:
var grd = ctx.createLinearGradient(x,y,x1,y1) 创建线条渐变
var grd = ctx.createRadialGradient(x,y,r,x1,y1,r1) 创建径向/圆渐变
grd.addColorStop(n, color); 指定颜色停止,n是0——1
ctx.fillStyle = grd;
图像:
drawImage(image, x, y) 画布上绘制图像、画布、视频
HTML5 内联SVG
SVG 指可伸缩矢量图形
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
相比图像格式优势:可通过文本编辑,可被搜索、索引、脚本化、压缩,图像质量高
svg不依赖分辨率,canvas依赖分辨率
HTML5拖放(drag和drop)
1.设置元素为可拖放,添加属性draggable="true"
2.ondragstart事件调用一个函数,规定被拖放的数据
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id)
}
3.ondragover事件规定何处放置被拖放的数据,并阻止默认处理方式
function allowDrop(ev){
ev.preventDefault();
}
4.进行放置ondrop
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");//获取被拖放的数据
ev.target.appendChild(document.getElementById(data))
}
HTML5 Geolocation(地理定位)
navigator.geolocation.getCurrentPosition()获取用户位置
navigator.geolocation.watchPosition()获取实时位置
HTML5 video
浏览器不支持
标签包含视频的标准方法,定义一个视频
定义多媒体资源,type="video/mp4|ogg|webm"
video标签属性:
autoplay="true" 自动播放
controls="true" 显示控件
loop="true" 循环播放
muted="true" 静音
src="url" 播放视频的url
video对象属性:
currentTime 设置或返回当前播放位置(秒)
duration 返回当前视频长度(秒)
paused 设置或返回是否暂停
playbackRate 设置或返回播放速度
volume 设置或返回音量
video对象方法:
play() 播放视频
pause() 暂停播放
load() 重新加载视频
video事件:
durationchange 视频时长更改时触发
pause 视频暂停时触发
play 视频播放时触发
seeking 移动指定位置过程中触发
seeked 移动视频到新位置触发
timeupdate 当播放位置改变时触发
HTML5 audio
在网页上嵌入音频元素,controls属性显示控件
定义多媒体资源,type="audio/mpeg|ogg|wav"
浏览器不支持
HTML5 Input类型
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
HTML5 表单元素
、、
规定输入域的选项列表,规定form或input域应该拥有自动完成功能
提供验证用户的可靠方法,提交表单时,会生成两个键,一个私钥一个公钥,前者存储在客户端,后者发送到服务器验证
HTML5 表单属性
HTML5 语义元素
有意义的元素,清楚元素的功能作用定义的内容
、、、、、、、
元素描述文档的头部区域,页面中可使用多个元素
元素定义导航链接的部分
标签定义页面主区域内容之外的内容,如侧边栏
标签定义独立的内容
标签定义文档中的节,如章节、页眉、页脚、或文档其他部分
描述了文档底部区域
规定独立的流内容(图像、图表、照片、代码等)
定义标签的标题
HTML5 web存储
是一个比cookie更好的本地存储方式
数据以键/值对存在,web网页的数据只允许该网页访问使用
localStorage、sessionStorage为客户端存储数据的两个对象
localStorage - 用于长久保存整个网站的数据,保存的数据没有过期限制
sessionStorage - 用于临时保存同一窗口的数据,在关闭窗口或标签页之后将会删除数据
使用web存储前,检查浏览器是否支持localStorage和sessionStorage
if(typeof(Storage) != "undefined")
{
//支持
}else{
//不支持
}
localStorage.key = value;
localStorage.setItem(key, value); - 保存数据
localStorage.getItem(key); - 读取数据
localStorage.removeItem(key); - 删除单个数据
localStorage.clear(); - 删除所有数据
localStorage.key(index); - 得到某个索引的key