`
zhangbaoming815
  • 浏览: 150446 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

初识html5

阅读更多

html5的一些新特性:

1.添加了<video>和<audio>媒体文件

2.支持本地文件存储

3.新的内容控制元素,如<article>、<footer>、<header>、<nav>和<section>

4.新的表单控件,如: calendar、date、time、email、url和search

 

浏览器对html5的支持:

html5不是官方的标准,所以并没有浏览器完全支持hmtl5

但是所有的主流浏览器如:Firefox、Opera、Chrome等都相继的把html5的新特性添加到最新版本的浏览器中

 

自从1999年的HTML 4.0.1版本以后,因特网有了很大的改变。

现在,HTML 4.0.1中的一些元素已经被丢弃,不会再使用,这些元素在html5中已经被移除或者被重写。

为了更好的使用因特网,html5中添加了更好容易架构和处理的的新元素

 

在html5中嵌入视频变得非常的简单:

首先得确保你所用的浏览器是支持html5 video

知道现在,大多数的视频都是通过插件如 flash来播放,在网页上播放视频并没有一个标准。

html5定义一个标签指定了一种标准的方式将视频文件嵌入到网页: <video>元素

浏览器支持:

Internet Explorer 9, Firefox, Opera, Chrome, and Safari支持 <video> element.

Internet Explorer 8以及更早的版本并不支持<video>元素

下面用一个例子来在网页上嵌入视频文件:

在html5的body中加入下面的代码:

	<video width="320" height="240" controls="controls">
		<source src="movie.mp3" type="video/mp4" />
		Your browser does not support the video tag.
	</video>
 在使用的时候最好给添加上宽度和高度,这样在网页加载不至于出现布局问题,在video的标签中间加上 Your browser does not suppot the video tag,这样如果当前的浏览器不支持video的时候能给用户一个提示

html5 的 video 元素也有方法、属性和事件
播放事件: playing,pausing和loading
给播放器设置不同的事件,播放和停止事件,频幕的大小事件:
body的内容如下:
	The content of the document ....
	<br />
	<div style="text-align:center"> 
			<button onclick="playPause()">Play/Pause</button> 
			<button onclick="makeBig()">Big</button>
			<button onclick="makeSmall()">Small</button>
			<button onclick="makeNormal()">Normal</button>
		<br /> 
		<video id="myVideo" width="320" height="240" controls="controls">
			<source src="movie.mp3" type="video/mp4" />
			Your browser does not support the video tag.
		</video>
	</div>
	<script type="text/javascript"> 
		var myVideo=document.getElementById("myVideo"); 

		function playPause()
		{ 
			if (myVideo.paused) 
				myVideo.play(); 
			else 
				myVideo.pause(); 
		} 

		function makeBig()
		{ 
			myVideo.width=560; 
		} 

		function makeSmall()
		{ 
			myVideo.width=320; 
		} 

		function makeNormal()
		{ 
			myVideo.width=420; 
		} 
	</script> 
分享到:
评论

相关推荐

    第2章---初识HTML5ppt课件(全).ppt

    第2章---初识HTML5ppt课件(全).ppt

    初识HTML5,认识html

    【初识HTML5,认识HTML】 HTML5是超文本标记语言(HyperText Markup Language)的第五个版本,是用于创建网页的标准标记语言。自2014年正式发布以来,HTML5已经成为现代网页开发的核心,它极大地提升了用户体验,...

    《初识HTML5—当当网图书分类页面》上机作业.rar_html作业当当_当当htmlcss_当当网_当当网html_当当网图书

    这是一个当当网主页的HTML+CSS代码实现,希望对大家有用

    初识html5.ppt

    初识html5.ppt

    《初识HTML5》-课件公开课.pptx

    HTML5 基础知识点 HTML5 是超文本标记语言的最新版本,它是描述网页的标准语言。HTML5 的应用非常广泛,包括邀请函、节日贺卡、新闻热点、广告营销、知识分享等。 HTML5 的基本概念 HTML5 使用一套标签或标记来...

    HTML5应用开发技术-初识HTML5.pptx

    【HTML5应用开发技术】 HTML5是HTML的最新版本,它是HTML标准的传承与扩展,旨在提高用户体验,增强网页应用程序的功能。HTML5并不是对HTML的彻底改革,而是着重于兼容性、合理性和易用性的提升。 1. **HTML5的...

    初识HTML5(入门级的,很好的)

    HTML5作为前端技术的重要组成部分,是所有Web开发人员必须掌握的基本技能之一。HTML5的出现,旨在解决之前版本中所面临的诸多局限性问题,如对多媒体内容的原生支持,增强了网页的可访问性和互操作性。接下来,我们...

    HTML5教学PPT

    第01章《初识HTML5》中,你将学习到HTML5的基本概念,了解它与前代HTML4的区别,如语法简化、语义化元素的引入,以及如何在文档中声明DOCTYPE。此外,还将讲解HTML5的文档结构,如、等基本元素的使用。 第02章...

    《HTML5+CSS3网站设计基础教程》 PPT

    在“第1章初识HTML5.pptx”中,你将了解到HTML5的特性,如语义化标签(例如、、等)、离线存储(Application Cache)、拖放功能、媒体元素(和)等,这些都是HTML5为提升用户体验和开发者便利性所做的改进。...

    HTML5+CSS3网页设计与制作—教学大纲.pdf

    ##### 第二章 初识HTML5 本章重点介绍HTML5的基础知识和技术特点,帮助学生掌握HTML5的基本结构及其在网页设计中的应用。学习目标包括: - **了解HTML5的新特性**:理解HTML5相对于传统HTML版本的改进之处。 - **...

    【HTML5】->初识HTML->HTML简单介绍&HTML5基本元素讲解

    HTML边缘探索Ⅰ HTML简介Ⅱ HTML到HTML5—-HTML发展历史Ⅲ HTML5简介Ⅳ HTML5环境Ⅴ HTML5基本元素介绍Ⅵ 写一个最简单的HTML程序 Ⅰ HTML简介 超文本标记语言(Hyper Text Markup Language),缩写为HTML,标准通用...

    html5 的入门资料

    本篇资料将带你初识HTML5的各项内容,包括其历史背景、主要特性以及应用前景。 HTML5的诞生与多个组织密切相关。欧洲核子研究中心(CERN)的蒂姆·伯纳斯-李是HTML的创始人,他同时也是万维网联盟(W3C)的创立者。...

    初识Vue.html

    初识Vue.html

    HTML5+CSS3网站设计基础教程教学大纲.docx

    1. **初识HTML5**: - 学习HTML5的发展历程,理解其在不同浏览器中的兼容性。 - 掌握HTML5的基本语法和新特性,如文档结构、语义化元素等。 - 学习并实践创建简单的HTML5网页,包括标题、段落、文本格式化、图像...

    初识+HTML5_IT168文库

    初识+HTML5_IT168文库

    HTMLCSS网站设计基础教程教学大纲.pdf

    课程的第一部分是“初识HTML5”,在这一章节中,学生将首先对HTML5有一个全面的认识。从HTML的发展历程开始,了解它如何从最初的版本发展到今天广泛使用的HTML5。学习浏览器对HTML5的支持情况,以及它引入的新特性,...

    HTML初识基础认知 + HTML标签

    "HTML初识基础认知 + HTML标签" HTML初识基础认知是学习HTML标签的基础,理解HTML的基本语法和标签的关系,能够使用排版标签实现网页中的标题、段落等效果,使用相对路径选择不同目录下的文件,使用媒体标签在网页...

Global site tag (gtag.js) - Google Analytics