HTML5.docx
- 文档编号:27845273
- 上传时间:2023-07-05
- 格式:DOCX
- 页数:14
- 大小:24.19KB
HTML5.docx
《HTML5.docx》由会员分享,可在线阅读,更多相关《HTML5.docx(14页珍藏版)》请在冰豆网上搜索。
HTML5
HTML5
1.HTML5改变、
DTD声明的改变
HTML4的文件声明非常长...
在HTML5中没有的了DTD文件的限制,所以变短了.
doctypehtml>而且没有任何大小写的限制,
DocTypeHTML>也是完全正确的HTML5书写规则
新的标签书写方式:
不允许写结束标签的标签
base、link、br、hr、img、meta、source....
可以省略结束标签的标签
列标标签li、option、tr、td、dt、dd...
完全可以省略的标签
html、head、body...
建议按照原来的标准来写。
HTML5的版本分类:
有HTML4发展而来的松散语法的HTML5(承认版本)
由XHTML衍生而来的严格语法XHTML5(默许版本)
单双引号:
在HTML5中属性可以使用单引号,可以使用双引号,也可以不使用引号。
只有一种除外,在属性值中有=的字符,必须使用引号。
比如:
id=“3=5”
DIV+CSS网页布局:
主要目标为了让内容和样式分离。
在搜索引擎没有发展起来的时候,该布局方式是非常完美的布局方式。
旧版的DIV+CSS页面布局
HTML5+CSS的布局模式:
新增的结构标签
新增的结构标签是为了搜索引擎更好的收录和抓去网页内容新增的标签,本质上就是div标签,一个块状元素。
Header标签
表示一个页面中顶部区域(布局中)
表示一片文章正文开始之前的内容(文章中)
注意:
1个页面中不一定已有一个header标签,为header标签添加class或者id都可以,并没有限制
2.在一个页面的布局中,一般只有一个header表示页面的头部区域。
3.在文章中,header可以表示文章正文开始之前的内容,包括,标题,作者,时间以及预览信息等...
footer标签
表示一个页面的底部区域(在布局结构中)
表示一片文章的正文结束部分之后的内容(在文章中)
注意:
1个页面中不一定已有一个footer标签,为footer标签添加class或者id都可以,并没有限制
2.在页面布局中一般只有一个footer标签表示页面的底部
3.在文章中,除了正文之后的信息都可以放在footer中,例如参考文献,鸣谢列表,注释及作者信息等..
nav标签
表示一个页面的导航(在布局中)
表示一篇文章的目录或者分页部分
注意:
nav仅仅是一个特定的div而已,书写导航依旧要使用ul或者ol来实现。
section标签
在布局中表示页面的主要内容区块。
在文章中表示文章区块或者章节。
在页面布局中:
在文章中:
请参考article中section的用法。
aside标签
在页面布局中表示一个页面的次要内容区域。
在文章中表示一个文章的注释信息或者旁白等。
article标签
表示一片完整的文章内容或者一个博文、评论信息等。
格式:
一篇较短的文章
正文
一片多个段落较长的文章
正文的段落
正文的段落
正文的段落
...
文章和文章评论的书写方式
文章的主体内容
....
hgroup标签
标题组标签。
作用:
用来将一片文章的多个标题进行包含组成一个标题组,声明他们是一片文章的标题。
注意:
该标签一般在文章的header中使用
该标签一般只包含h1-h6的标签
figure内容解释标签
figcaption解释的描述标签
该标签的作用是进行内容的解释和描述,内容可以为文字,图片,音频视频等..
figcaption负责内容的解释部分,
--需要描述的内容-->
UFO
--解释信息-->
解释:
UnknowFlyObject;
address标签
该标签为地址标签,表示一个现实地址或者网络地址
新增的其他标签:
audio音频标签
作用:
在页面中引入音频内容。
--基本的音频格式-->
--完整格式的音频-->
对不起,您的破浏览器不支持音频标签,请升级浏览器
属性:
src在音频标签中用于引入音频的地址。
如果使用多个音频资源,则需要在source标签中引入音频地址,audio中不使用该属性。
controls设置播放的控制面板。
单属性
Autoplay设置音频为自动播放单属性
loop设置音频为循环播放。
Preload设置音频为预先加载属性。
在音频未开始播放之前就先下载内容。
none不预先加载
auto自动加载。
注意:
该属性和autoplay有冲突,不能同时使用
各个浏览器对于音频编码的支持。
IE浏览器MP3和WAV的编码格式
FF浏览器ogg和WAV的编码格式
Opera浏览器ogg和WAV的编码格式
chrome浏览器ogg和MP3及vp8格式
safari浏览器ogg和MP3及vp8格式
video视频标签
作用:
在网页中播放视频文件。
--简单的视频格式-->
--完整的视频格式-->
又是这个破浏览器赶紧换了~
视频标签的属性:
src引入视频地址,video和source同时使用时,不需要使用该属性
controls显示控制面板属性单属性
Autoplay自动播放属性单属性
loop设置为循环播放单属性
width设置视频的宽度
height设置视频的高度
poster设置视频的预览图片
preload设置预先加载属性
auto自动加载
none不自动加载(默认)
浏览器对视频编码的支持。
IE浏览器支持H.264和VP8编码格式。
FF浏览器支持ogg和VP8编码格式
Opera浏览器支持ogg和VP8编码格式
chrome浏览器支持ogg和VP8,H.264编码格式
safari浏览器支持ogg和VP8,H.264编码格式
source音视频资源标签
作用:
用于引入音频或者视频
格式:
canvas画布标签
不讲!
后面再说。
embed多媒体标签
一般用于引入页面中的flash文件
--引入falsh文件-->
meter状态条标签
max设置最大状态值
min设置最小状态值
value设置当前值
high设置高警告值
low设置低警告值
optimum设置良好值
规则:
如果optimum值比low的值还低,则表示值越低状态越好(绿色)中间和高值则为黄色和红色
如果optimum值处于high值和low值之间,则表示中间状态良好(绿色),低值和高值为黄色
如果optimum值比high值还高,则表示值越高越好(绿色),中间值和低值为黄色和红色
progress进度条标签
作用:
表示一个事物的进度。
max设置最大进度值。
value设置当前进度只
格式:
--进度条-->
Mark高亮标记标签
作用:
将该标签内部的文字变为具有黄色背景效果的文字,用于提示读者注意该内容。
注意:
可以修改CSS样式。
。
。
time时间标签
作用:
对时间进行一个解释,方便搜索引擎收录。
datetime属性
格式:
datetime="2012-12-12T20:
30:
28"当前时间
datetime="2012-12-13T20:
30:
28ZUTC时间格式
datetime="2012-12-14T20:
30:
28+08:
00指定时区格式
pubdate属性
设定当前的时间为一个内容发布的时间。
ruby拼音注释标签
作用:
给文字加拼音注释
格式:
文字
details细节描述标签
summary细节描述标签的标题标签
dialog对话标签
作用:
用于表示一段完整的对话内容。
需要和dt及dd配合使用
datalist数据列表标签
作用:
用来为一个输入标签添加数据列表
例子:
--数据列表-->
新的智能表单的应用:
新的智能表单的用法。
在HTML5中为了表单布局的方便,避免表单之间的冲突,我们允许将表单标签与form标签分离。
第一步:
为制定的form标签添加一个id属性,同时赋值
第二步:
为属于当前form标签的表单标签(input,textarea等)添加form属性,制定id即可。
注意:
能用旧的表单布局就不用新的,不是旧版本的不好用,该方法的目的是为了方便布局。
新增加的表单类型:
email邮件表单类型
urlurl地址类型网址类型
number数字表单
color颜色表单
tel电话表单
search搜索表单
range滑块表单
date日期表单
time时间表单
week周选取表单
month月选取表单
datetime日期时间选取表单
Datetime-local本地日期时间选取表单
新增的表单属性:
autofocus自动获取焦点属性,提高用户体验。
placeholder设置表单的提示信息
注意:
在HTML5之前我们一致使用value的值作为默认值和提示信息使用,功能重叠,为了功能更加精确,HTML5中value仅表示当前表单的默认值,placeholder担任提示信息工作。
form为表单指定form标签使用。
required强制必填属性。
max设置表单的最大值
min设置表单的最小值
注意:
可以使用的表单:
number、range、date、time、datetime、datetime-lical、week、month
Step设置表单的跳步属性,主要用于number表单
multiple可以设置文件表单为多文件上传
Pattern为表单设置正则表达式。
novalidate对form标签使用,设定所有表单内容不验证就可以提交
formaction设置当前提交按钮提交表单的新地址
formmethod设置当前提交按钮的提交表单方法
formentype设置表单提交信息的编码方式。
formnovalidate设置当前提交按钮提交时不需要表单验证
注意:
以上四个属性对任何的提交按钮有效,包括button提交按钮,input提交按钮,图片提交按钮..
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5
![提示](https://static.bdocx.com/images/bang_tan.gif)