HTML与CSS笔记(11)HTML5介绍

HTML5是W3C与WHATWG合作的结果,WHATWG指Web Hyperttext Application Technology Working Group
有一些新的特性:
用于绘画的canvas元素
用于媒介回放的video和audio元素
用于本地离线存储的更好的支持
新的特殊的内容元素article .footer.header.nav.section
新的表单控件calendar,date,time,email,url,search
新增了很多的语义元素
article 定义页面的独立的内容
aside定义页面的侧边栏的内容
bdi允许你设置一段文本,使其脱离其父元素的文本方向设置
command定义命令按钮比如单选按钮,复选框,或按钮
details用于描述文档的或文档的某个部分的细节
dialog定义对话框,比如提示框,
summary 标签包含details元素的标题
figure规定独立的流内容(图像,图表,照片,代码等等)
figcaption定义figure元素的标题
footer定义section或document的页脚
header定义了文档的头部区域
mark定义带有记号的文本
meter定义度量衡,仅用于已知的最大和最小值的度量
nav定义导航的链接部分
progress定义任何类型的任务进度
ruby定义ruby的注释(中文注音或字符)
rt定义字符(中文注音或字符)的解释或发音
rp在ruby注释中使用,定义不支持ruby元素的浏览器所显示的内容
section定义文档中的节
time定义日期或时间
wbr规定在文本的何出适合添加换行符
已经移除的属性:acronym,applet,basefont,big,center,dir,font,frame,frameset,noframes,strike
最新版本的Safrai,Chrome,Firefox以及Opera ,Internet Explorer 9
现代的浏览器都支持HTML5
此外所有的浏览器,包括旧的,和新的对无法识别的元素会作为内联元素自动处理
甚至可以教会IE6(Windows XP 2001)浏览器处理未知的HTML元素
canvas标签定义图形比如图标和其他的图像,该标签基于JavaScript的绘图API
新增的多媒体元素
audio定义音频内容
video定义视频video或者movie
source定义多媒体资源video和audio
embed定义嵌入的内容比如插件
track为诸如video和audio元素之类的媒介规定外部的文本轨道
新的表单元素
datalist定义选项列表请与input元素配合使用该元素来定义input可能的值
keygen规定用于表单的密约对生成器的字段
oupput定义不同类型的输出,比如脚本的输出
标签只是图形容器,必须使用脚本来绘制图形
canvas id="mtCanvas"width="200"height=“200”></canvas
在这里插入图片描述
canvas是一个二维网格
左上角坐标(0,0)
moveTo(x,y)定义线条开始的坐标
lineTo(x,y)定义线条结束的坐标
arc(x,y,start,stop)绘制圆形
绘制文本
font定义字体
fillText(text,x,y)在canvas上绘制实心的文本
strokeText(text,x,y)在canvas上回值空心的文本
把一幅画像放置到画布上drawImage(image,x,y);
渐变creatLinearGradient(x,y,x1,y1)创建线条渐变
creatRadiaGradient(x,y,r,x1,y1,r1)创建一个径向圆渐变
addColorStop()方法指定颜色的停止,参数使用坐标来描述0-1
使用渐变,设置fillstyle或stokeStyle的值为渐变,然后绘制形状如矩形,文本,或一条线
x:渐变开始的圆的x的坐标x1表示渐变结束的圆的x的坐标
SVG表示可缩放的矢量图形,是基于可扩展标记语言,用于描述二维矢量图形的一种图形格式。是万维网联盟的标准,图像在放大或改变尺寸的情况下其图形质量不会有损失
使用XML格式定义图形
定义用于网络的基于矢量的图形
可伸缩矢量图形Scalable Vector Graphics)
与DOM和XSL之类的W3C标准是一个整体,可以用文本的编辑器来创建和修改,可备搜索,索引,脚本化或压缩,可以伸缩的,图像可在任何的分辨率下被高质量的打印,可在图像的质量不下降的情况下被放大,不依赖分辨率,支持事件处理器,最适合带有大型渲染区域的应用程序比如谷歌地图,复杂度高会减慢渲染速度,不适合游戏应用
canvas是逐像素进行渲染的,在canvas中,一旦图形被绘制完成,他就不会得到浏览器的关注,
拖放drag和drop
拖放的目的是可以让你将某个对象放置到你想要放置的位置

在HTML5中写多个空格显示为一个空格&nbsp表示多个空格
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43428283/article/details/89386429