HTML5的基础知识个人整理Word下载.docx
- 文档编号:22940024
- 上传时间:2023-02-06
- 格式:DOCX
- 页数:25
- 大小:27.78KB
HTML5的基础知识个人整理Word下载.docx
《HTML5的基础知识个人整理Word下载.docx》由会员分享,可在线阅读,更多相关《HTML5的基础知识个人整理Word下载.docx(25页珍藏版)》请在冰豆网上搜索。
Integration)
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3特性(Class:
CSS3)
在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。
此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。
3.HTML5的改变
HTML5提供了一些新的元素和属性,例如<
nav>
(网站导航块)和<
footer>
。
这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如<
audio>
和<
video>
标记。
1、取消了一些过时的HTML4标记
其中包括纯粹显示效果的标记,如<
font>
center>
,它们已经被CSS取代。
HTML5吸取了XHTML2一些建议,包括一些用来改善文档结构的功能,比如,新的HTML标签header,footer,dialog,aside,figure等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用div。
2、将内容和展示分离
b和i标签依然保留,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。
u,font,center,strike这些标签则被完全去掉了。
3、一些全新的表单输入对象
包括日期,URL,Email地址,其它的对象则增加了对非拉丁字符的支持。
HTML5还引入了微数据,这一使用机器可以识别的标签标注内容的方法,使语义Web的处理更为简单。
总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好。
4、全新的,更合理的Tag
多媒体对象将不再全部绑定在object或embedTag中,而是视频有视频的Tag,音频有音频的Tag。
5、本地数据库
这个功能将内嵌一个本地的SQL数据库,以加速交互式搜索,缓存以及索引功能。
同时,那些离线Web程序也将因此获益匪浅。
不需要插件的丰富动画。
6、Canvas对象
将给浏览器带来直接在上面绘制矢量图的能力,这意味着用户可以脱离Flash和Silverlight,直接在浏览器中显示图形或动画。
7、浏览器中的真正程序
将提供API实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。
内容修饰Tag将被剔除,而使用CSS。
8、Html5取代Flash在移动设备的地位。
9、其突出的特点就是强化了web页的表现性,追加了本地数据库
4.HTML5的优点
网络标准
HTML5本身是由W3C推荐出来的,它的开发是通过谷歌、苹果,诺基亚、中国移动等几百家公司一起酝酿的技术,这个技术最大的好处在于它是一个公开的技术。
换句话说,每一个公开的标准都可以根据W3C的资料库找寻根源。
另一方面,W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。
多设备跨平台
用HTML5的优点主要在于,这个技术可以进行跨平台的使用。
比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到AppStore或GooglePlay上,所以它的跨平台非常强大,也是大多数人对HTML5有兴趣的主要原因。
自适应网页设计
很早就有人设想,能不能”一次设计,普遍适用”,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?
2010年,EthanMarcotte提出了”自适应网页设计“这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。
这就解决了传统的一种局面——网站为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本。
这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。
即时更新
游戏客户端每次都要更新,很麻烦。
可是更新HTML5游戏就好像更新页面一样,是马上的、即时的更新。
总结概括HTML5有以下优点:
1、提高可用性和改进用户的友好体验;
2、有几个新的标签,这将有助于开发人员定义重要的内容;
3、可以给站点带来更多的多媒体元素(视频和音频);
4、可以很好的替代FLASH和Silverlight;
5、当涉及到网站的抓取和索引的时候,对于SEO很友好;
6、将被大量应用于移动应用程序和游戏。
5.元素变化
新的解析顺序新的元素:
section,video,progress,nav,meter,time,aside,canvasinput
元素的新属性:
日期和时间,email,url。
新的通用属性:
ping,charset,async
全域属性:
id,tabindex,repeat。
移除元素:
center,font,strike。
1.HTML5中的一些有趣的新特性:
∙用于绘画的canvas元素
∙用于媒介回放的video和audio元素
∙对本地离线存储的更好的支持
∙新的特殊内容元素,比如article、footer、header、nav、section
∙新的表单控件,比如calendar、date、time、email、url、search
2.支持视频格式:
当前,video元素支持三种视频格式:
格式
IE
Firefox
Opera
Chrome
Safari
Ogg
No
3.5+
10.5+
5.0+
MPEG4
9.0+
3.0+
WebM
4.0+
10.6+
6.0+
Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件
MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件
WebM=带有VP8视频编码和Vorbis音频编码的WebM文件
测试代码:
<
!
DOCTYPEHTML>
html>
body>
videosrc="
/i/movie.ogg"
width="
320"
height="
240"
controls="
controls"
>
Yourbrowserdoesnotsupportthevideotag.
/video>
/body>
/html>
control属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
与<
之间插入的内容是供不支持video元素的浏览器显示的:
video元素允许多个source元素。
source元素可以链接不同的视频文件。
InternetExplorer8不支持video元素。
在IE9中,将提供对使用MPEG4的video元素的支持。
InternetExplorer8不支持audio元素。
在IE9中,将提供对audio元素的支持。
3.HTML5新的Input类型
HTML5拥有多个新的表单输入类型。
这些新特性提供了更好的输入控制和验证。
包括:
∙url
∙number
∙range
∙Datepickers(date,month,week,time,datetime,datetime-local)
∙search
∙color
浏览器支持
Inputtype
4.0
9.0
10.0
url
number
7.0
range
Datepickers
search
11.0
color
注释:
Opera对新的输入类型的支持最好。
不过您已经可以在所有主流的浏览器中使用它们了。
即使不被支持,仍然可以显示为常规的文本域。
新的input属性:
∙autocomplete
∙autofocus
∙form
∙formoverrides(formaction,formenctype,formmethod,formnovalidate,formtarget)
∙height和width
∙list
∙min,max和step
∙multiple
∙pattern(regexp)
∙placeholder
∙required
autocomplete
8.0
3.5
9.5
3.0
autofocus
form
formoverrides
10.5
heightandwidth
list
min,maxandstep
multiple
novalidate
pattern
placeholder
required
4.HTML5的新的表单元素:
∙datalist
∙keygen
∙output
datalist
keygen
output
新的form属性:
∙novalidate
5.SVG的变化
在HTML中,SVG文件可通过以下标签嵌入HTML文档:
embed>
、<
object>
或者<
iframe>
例子1:
使用<
embedsrc="
rect.svg"
300"
100"
type="
image/svg+xml"
pluginspage="
/>
pluginspage属性指向下载插件的URL。
采用Object标签的一个好处是,这是一个标准的Html4及以上规范的有效Tag,但可惜的如果你用的是最新的AdobeViewer,那么反而是显示不出图象来:
)
例子2:
Object>
objectdata="
codebase="
codebase属性指向下载插件的URL。
这是推荐的一种写法,在ie与ff中,皆可工作,也可通过script使HTML与SVG相互通信,但不幸的是,embed不是一个规范的标签,所以不能直接用在严格的XHTML中,不过这个可以能过一个简单的trick来解决,改动一下DTD定义即可。
例子3:
iframesrc="
/iframe>
下面这段文字保存成.svg格式就是一个SVG的图片
?
xmlversion="
1.0"
standalone="
no"
DOCTYPEsvgPUBLIC"
-//W3C//DTDSVG1.1//EN"
"
http:
//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
svgxmlns="
//www.w3.org/2000/svg"
version="
1.1"
100%"
>
circlecx="
cy="
r="
40"
fill="
red"
/>
/svg>
第一行的XML指令定义版本,并说明此文件引用到其他文件。
第二行是文档类型定义,规定此XML中哪些是有效的SVG元素。
这里引用的http:
//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd正是第一行中standalone属性为no的原因。
第三行开始是SVG的真正定义。
circle元素指定画一个圆。
cx、cy和r属性分别指定圆心的横坐标、纵坐标和半径。
fill属性指定用红色填充此圆内部的区域。
在HTML5中有了专门的<
svg>
标签,您能够将SVG元素直接嵌入HTML页面中:
示例1:
DOCTYPEhtml>
head>
title>
M-HTML5Tutorials<
/title>
/head>
<
h2>
HTML5SVGCircleExample<
/h2>
svgid="
svgCircleTutorial"
250"
xmlns="
circleid="
myCircle"
cx="
55"
50"
#219E3E"
stroke="
#17301D"
stroke-width="
2"
示例2:
190"
polygonpoints="
100,1040,180190,6010,60160,180"
style="
fill:
lime;
stroke:
purple;
stroke-width:
5;
fill-rule:
evenodd;
"
6.标签
注:
在下面表格中4:
指在HTML4.01中定义了该元素5:
指在HTML5中定义了该元素。
按字母顺序排列的标签列表
标签
描述
--...-->
定义注释
4
5
DOCTYPE>
定义文档类型
a>
定义超链接
abbr>
定义缩写
acronym>
HTML5中不支持
address>
定义地址元素
applet>
定义applet(HTML5中不支持)
area>
定义图像映射中的区域
article>
定义article
aside>
定义页面内容之外的内容
定义声音内容
b>
定义粗体文本
base>
定义页面中所有链接的基准URL
basefont>
HTML5中不支持,请使用CSS代替
bdo>
定义文本显示的方向
big>
定义大号文本(HTML5中不支持)
blockquote>
定义长的引用
定义body元素
br>
插入换行符
button>
定义按钮
canvas>
定义图形
caption>
定义表格标题
定义居中的文本(HTML5中不支持)
cite>
定义引用
code>
定义计算机代码文本
col>
定义表格列的属性
colgroup>
定义表格列的分组
command>
定义命令按钮
datalist>
定义下拉列表
dd>
定义定义的描述
del>
定义删除文本
details>
定义元素的细节
dfn>
定义定义项目
dir>
定义目录列表(HTML5中不支持)
div>
定义文档中的一个部分
dl>
定义定义列表
dt>
定义定义的项目
em>
定义强调文本
定义外部交互内容或插件
fieldset>
定义fieldset
figcaption>
定义figure元素的标题
figure>
定义媒介内容的分组,以及它们的标题
定义section或page的页脚
form>
定义表单
frame>
定义子窗口(框架)(HTML5中不支持)
frameset>
定义框架的集(HTML5中不支持)
h1>
to<
h6>
定义标题1到标题6
定义关于文档的信息
header>
定义section或page的页眉
hgroup>
定义有关文档中的section的信息
定义html文档
i>
定义斜体文本
定义行内的子窗口(框架)
img>
定义图像
input>
定义输入域
ins>
定义插入文本
keygen>
定义生成密钥
isindex>
定义单行的输入域(HTML5中不支持)
kbd>
定义键盘文本
label>
定义表单控件的标注
legend>
定义fieldset中的标题
li>
定义列表的项目
link>
定义资源引用
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 基础知识 个人 整理