十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
HTML5是一系列新标签、新功能和新标准的集合,文档的基础格式很简单:!doctype htmlhtmlhead
成都创新互联公司是一家专业提供泽库企业网站建设,专注与网站设计制作、成都网站制作、H5技术、小程序制作等业务。10年已为泽库众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
titleHTML5 Page/titlemeta charset="utf-8"
/headbodyyour contents/body
/html至于如何使用canvas、websocket、audio、geolocation等功能,百度下html5,有很多教程。
1、video src="hangge.mp4" controls/video1
2,通过width和height设置视频窗口大小
video src="hangge.mp4" controls width="400" height="300"/video1
3,预加载媒体文件
设置preload不同的属性值,可以告诉浏览器应该怎样加载一个媒体文件:
(1)值为auto:让浏览器自动下载整个文件
(2)值为none:让浏览器不必预先下载文件
(3)值为metadata:让浏览器先获取视频文件开头的数据块,从而足以确定一些基本信息(比如视频的总时长,第一帧图像等)
!-- 用户点击播放才开始下载 --video src="hangge.mp4" controls preload="none"/video12
4,自动播放
(1)使用autoplay属性可以让浏览器加载完视频文件后立即播放。
video src="hangge.mp4" controls autoplay/video1
(2)如果启用自动播放,可以将播放器设置为muted状态。这样自动播放时会静音,防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。
video src="hangge.mp4" controls autoplay muted/video1
5,循环播放
使用loop属性让视频播放结束时,再从头开始播放。
video src="hangge.mp4" controls loop/video1
6,设置替换视频的图片(封面图片)
通过poster属性可以设置,浏览器在下面三种情况下会使用这个图片:
(1)视频第一帧未加载完毕
(2)把preload属性设置为none
(3)没有找到指定的视频文件
video src="hangge.mp4" controls poster="hangge.png"/video1
7,浏览器兼容,如何让每一个浏览器都能顺利播放视频
现在大部分浏览器都能支持H.264格式的视频,但Opera浏览器却一直不支持。我们需要通过后备措施保证每个人都能看到视频,通常有下面几种方案:
(1)使用多种视频格式
video和audio元素有个内置的格式后备系统。我们不使用src属性,而是在其内部嵌套一组source元素,浏览器会选择播放第一个它所支持的文件。
我们可以添加WebM格式的视频提供对Opera的支持。
video controls
source src="hangge.mp4" type="video/mp4"
source src="hangge.webm" type="video/webm"
/video1234
(2)添加Flash后备措施(推荐)
上面那个方法不推荐,应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的,同时Flash还能兼容IE8这种连video元素都不支持的老浏览器。
这里使用Flowplayer Flash作为备用播放器(本地下载 :flowplayer-3.2.18.zip)
video controls
source src="hangge.mp4" type="video/mp4"
source src="hangge.webm" type="video/webm"
object id="flowplayer" width="400" height="300"
data="flowplayer-3.2.18.swf"
type="application/x-shockwave-flash"
param name="movie" value="flowplayer-3.2.18.swf"
param name="flashvars" value='config={"clip":"hangge.mp4"}'
/object
/video1234567891011
(3)也有人优先使用Flash,而HTML5作为后备措施。
这么做是因为Flash普及率比较高,而HTML5作为后备可以扩展iPad和iPhone用户
object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash"
param name="movie" value="flowplayer-3.2.18.swf"
param name="flashvars" value='config={"clip":"hangge.mp4"}'
video controls
source src="hangge.mp4" type="video/mp4"
source src="hangge.webm" type="video/webm"
/video
/object
html5的使用,与第四代的html有点出入,如:第四代的HTML布局用的是div来布局,而第五代的HTML布局已经明确了 头部、侧边、栏目、中间区域(主体部分)、以及底部(footer);
如:以前定义一个栏目导航divulliliul/div差不多是这形式来定义的,而html5则明确规定了nav/nav标签来定义,头部用header/header底部用footer/footer这里需要记住的一点是:主体部分,也就是中间区域main/main一个网页只能有一个主体部分;
这一点需要你好好记住,还有如果不懂的话,你可以去网上查看一些视频教程,有详细的解说,如果还有疑问请继续追问我;
HTML5页面的作用
1、令企业发展更开阔:HTML5页面作为新兴的微信推广工具,可以应用各种各样的场景,比如产品展示、购买流程,购物车等,能让客户有更快的速度体验,不再卡顿。
2、令体验更完美:HTML5页面中的各种炫酷创新的场景模拟、动画效果、互动方式,都能给用户带来新鲜独特的完美体验,这是传统手机页面所不能媲美的。
HTML5页面可以运用到哪些应用场景
1、企业宣传:高大上的游戏能帮助企业快速聚集人气,让你的客户订单从游戏开始。
2、企业招聘:令企业走向人才,令人才近距离了解企业、认识企业,令招聘更高效。
3、商业营销:通过HTML5特性,使用大转盘,刮刮卡,满减满增等增加客户粘性,从而达到营销目的。
4、报名预约:旅游线路报名、教育课程报名、餐厅预约等场合都可以,多种表单预设,也可以自己创建新的预约流程,自由选择。
向大家介绍这些应该遵循的Web前端开发原则。
1、善用DIV来布局
当开发一个Web页面时,要考虑第一件事就是区分页面重点。将这些内容用DIV标签包含起来,页面的代码会呈现出整洁、缩进良好的风格。
2、将HTML标签和CSS样式表分割开来
好的页面应该将HTML标签和CSS样式表分割开来。这是每一个Web开发者在首次接触Web开发时就应该知道的一条原则。然而,直到今天,仍然有很多开发者没有严格遵循这一原则。
不要在HTML标签里内嵌样式表代码。开发者应该养成习惯,单独建立文件,用以存放CSS样式表。而这也将方便其他开发者在修改你的代码时,能迅速完成工作。
3、优化CSS代码
现如今,为网站添加多个CSS文件的做法已经很普遍。但是,当网站包含的CSS文件过多时,会降低网站的响应速度。解决办法是:精简代码并对多个CSS文件进行优化,将其合并成一个文件。这个办法能显著提升网站的加载速度。此外,有很多工具可以用来优化CSS文件,例如CSS Optimizer、Clean CSS等。
4、优化JavaScript文件,并将其放到页面底部
和CSS一样,为页面添加多个Javascript文件也是很普遍的做法。但这同样会降低网站的响应速度。为此,开发者应该精简、优化这些Javascript文件。
但有一点和CSS不同,浏览器通常不支持并行加载。这也就是说,当浏览器加载Javascript文件时,将不再同时加载其它内容。而这就导致了网页的加载速度好像变慢了。
一个好的解决办法是:将Javascript文件的加载顺序放在最后。为了实现这一目标,开发者可以把Javascript代码放在HTML文档的底部,而最好的位置是放在接近/body标签的地方。
5、善用标题元素
h1 到 h6这些元素用来突出页面的重点内容。这有助于用户更加关注页面的重点部分。对于博客,推荐使用h1标签来突出博客标题。因为,博客标题几乎是页面中最重要的部分。
6、在合适的地方使用合适的HTML标签
HTML标签是构造规范内容结构的关键。例如,em标签用来强调重点内容。p标签适用于突出文章段落。如果想要在段落间加空行,就不要使用br /标签。
对于一组相关的元素,建议使用ul、ol或 dl标签。但是,不要错误的使用blockquote标签,因为它原本是用来定义块应用的。
7、避免滥用div标签
并不是所有块元素都应该用div标签来创建。例如,可以在内联元素的属性里添加display:block,将其以块元素的方式显示。
8、使用列表创建导航
使用ul列表标签,再配以相应的CSS样式,可以创建美观的导航菜单。
9、别忘了封闭标签
现在,每当我回忆起在大学里学到的关于Web开发的第一堂课时,教授提到的HTML结构的重要性总是浮现在我的脑海。根据W3C标准,标签应该被封闭。那是因为,在一些浏览器下,如果没有按照标准来将标签封闭,会出现显示不正常的问题。而这一情况在IE6、7和8里尤为明显。
10、标签小写语法
标签采用小写语法是一项行业标准。虽然大写语法并不影响页面的显示效果,但是,代码的可读性很差。下面这段代码可读性就非常差:
11、为图片标签添加alt属性
在img标签里,alt属性通常非常有用。因为搜索引擎通常无法直接抓取图片文件。但是,如果开发者在alt属性里添加了图片的描述内容,将会方便搜索引擎的抓取。
12、在表格里使用label和fieldset
为了提高代码质量,并让用户容易理解表格内容,我们应该用label 和 fieldset标签创建表格元素。
13、将浏览器兼容代码标明信息并相互分开
对一名Web开发者来说,跨浏览器兼容是一个被重点关注的问题。通常,开发者会针对不同的浏览器来编码,也即是CSS hack。但是,如果开发者在编码时,能注明代码为哪一个版本的浏览器所写,会为以后的维护工作带来极大方便。下面就是一个很好的示例:
14、避免过度注释
作为一名开发者,在代码中添加注释是一个好习惯,能方便理解并易于维护。这在其它编程语言如PHP、JAVA 和 C#里很普遍。但是,HTML/XHTML是文本标记语言,非常容易理解。因此,无需为每行代码都添加注释。
15、测试代码
推荐开发者使用W3C文本标记验证服务来测试代码。它是一个高效的测试工具,能帮助你发现页面中存在的错误。而且,它还能从页面错误出发,帮你定位到相应的代码。这一点通常在编码完成后很难做到。但开发者需要注意的是,验证通过的代码并非就是性能优异的代码。
以上就是分享的Web前端开发中应该遵循的开发原则。希望这些开发语言对从事Web前端的小伙伴们有帮助。
html5在页面定义时,开头用!DOCTYPE html即可,
html5有很多新的元素可供使用,典型的例如audiovideoheaderfootercanvas等等,
目前有很多html5的书籍啦,我也在学习中