学HTML5之一 HTML5入门

最新推荐文章于 2024-05-23 16:52:46 发布
最新推荐文章于 2024-05-23 16:52:46 发布
阅读量102 收藏
点赞数
原文链接：http://www.cnblogs.com/hxwzwiy/archive/2012/08/09/2630597.html
版权

哈哈，最进打算写一些关于HTML5的文章，写的不好，请见谅，开始吧。

我想来看 我教程的 童鞋 应该对 HTML5有一定的了解了吧，所以我就不罗嗦的讲，HTML5的“昨天”，“今天”，“明天”了

呵呵，首先，我们用任意的 文本编辑器，新建一个网页 我用的是 NotePad++ 你要是懒得找呢，用记事本也没有关系的。哦~~~

目前浏览器对 HTML5的支持情况也不相同。建议大家用 Chrome、Firefox 微软的 IE9 支持不太好，所以大家还是等一段时间在测试。

 

HTML5  支持视频格式  video 元素

 

video 目前支持的格式有

ogg    = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件  

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

哈哈，上面的这几个文件，偶就看到过第二个  那个不就是  MP4格式的文件吗？哦了，去网上下载一个MP4格式的文件，开始我们的

HTML5之路吧。

对了 这几个文件的支持情况如下

video格式IEFFChromeOperaSafari
Ogg不支持版本3.5以上版本5.0以上版本10.5以上不支持
MPEG 4版本9.0以上不支持版本5.0以上不支持版本3.0以上
WebM不支持版本4.0以上版本6.0以上版本10.6以上不支持

好了，我们继续吧，下面我就显示一个 视频，在网页中看看。

<! DOCTYPE HTML>
<html>
<body>
    <video src='C:\text\1.mp4' width="320" height="240" controls="controls" autoplay="true"><video>
<body>
</html>

好了，第一个页面结束了，我下面一点一点的上面的代码，并且给大家展示效果图。

首先是   controls=”controls” 这个代表的是 播放、暂停和音量控件。

效果呢就是，我用红色的框框圈住的地方。

1 
当然，你设置成 false 或者，没有这个属性，那么他就没有了

2 
然后是

autoplay   他有下面的两个  值 
true | false 
如果是 true，则视频在就绪后马上播放。否侧你还要单击之后才可以播放。

当然，还有我们上面说到的那 Width Height Src  这三个属性喽，哈哈，HTML5页面的页面可以播放视频啦。

loop=“loop” 是否循环播放。

 

当然，为了兼容性，你可以写成下面的

 

<! DOCTYPE HTML>
<html>
<body>
 
    <video width="320" height="240" controls="controls">        
    <source src='C:\text\1.mp4' type="video/mp4">
    您的浏览器不支持这个标签
    </video>
    
<body>
</html>

效果也是正确的

1

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。这个的用法和 上面那个 video没有区别，只不过一个是  视频，一个是音频罢了

音频格式IE9FF3.5Opera10.5Chrome3.0Safari3.0
Ogg Vorbis不支持支持支持支持不支持
MP3支持不支持不支持支持支持
Wav不支持支持支持不支持支持
<! DOCTYPE HTML>
<html>
<body>
    <audio src="C:\text\2.mp3" width="320" height="240" autoplay="true" controls="controls">
    您的浏览器不支持这个标签
    </audio>
<body>
</html>

上面两个标签的用法都很相同。所以很多属性我就不重复的写了。

转载于:https://www.cnblogs.com/hxwzwiy/archive/2012/08/09/2630597.html

csdn1332531529
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML从入门到精通
cgblpx的博客
06-01 4万+
目录 1 前端技术： 1 1.1 学习方法 1 1.1.1 前端要怎么学？ 1 1.1.2 前端技术栈 5 1.2 HBuilderX 7 1.2.1 介绍 7 1.2.2 安装 7 1.2.3 主题 9 1.2.4 字体 9 1.2.5 去掉px转rem提示 9 1.2.6 备注字体颜色 10 1.2.7 项目结构 11 1.2.8 jQuery语法支持 11 1.3 Web概述 12 1.4 静态页面HTML 13 1.4.1 概念 13 1.4.2 结构 13 1.4.3 入门案例 14 1.4.4
HTML5（入门）
热爱编程、热爱生活、热爱探索
01-18 8709
<!--1.我的第一个网页.html(为HTML文件名)--> <!DOCTYPE html> <!--表示浏览器的使用规范，一般默认都是html的规范,所以可不要--> <html lang="en"> <head> <!--网页标题--> <meta charset="UTF-8"> <!--告诉浏览器编码类型为字符型编码 常见的字符编码--> <title>网页一.
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 37万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
HTML零基础入门教程（详细）
ZONGXP的博客
10-22 21万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
H5(html5)入门教程
DAIYA_JIE的博客
09-11 1万+
html零基础01
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7121
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
HTML5入门(JQuery基础运用一)
flyinbed_的博客
05-07 3277
JQuery之JS框架下载运用由于公司需求需要转型前端。。。于是就有了接下来的H5入门笔记，边学边做笔记养成良好习惯。JQuery对一个新人来说真的是入门首选啊，简单高效，而且还自带兼容非常nice废话不多说先上 下载链接JQuery下载打开链接进入以下界面第一个 Download 下载第二 API 使用文档第三 Blog 博客第四 Plugins 插件第五 Browser Support 游览器...
HTML5 基础知识总结(全)
IT_Holmes的博客
04-22 7118
HTML 一1.文档类型2.字符集3.标签< h1 >到< h6 >4.文本格式化标签（熟记）5.标签属性6.图像标签img 学习HTML推荐使用Sublime Text软件来操作练习，一定要熟练使用这个软件，对以后的无论是工作还是学习都有很大帮助。 1.文档类型<!DOCTYPE> <!DOCTYPE html> 这句活就是告诉我们使用那个html版本。 只需要记住，看到上面这行代码，说明使用的是html5的版本。 2.字符集 <meta chars
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML 5 从入门到精通
08-18
HTML5从入门到精通，HTML5教程pdf。教程通俗易懂，是新手学习html5的必备手册之一。
web前端基础入门教程之HTML5 Web Workers
01-08
HTML5 Web Workers web worker 是运行在后台的 JavaScript，不会影响页面的性能，更好的解释是，你可以使用web worker提供的一种简单的方法来为web内容在后台线程中运行脚本，这些线程在执行任务的过程中并不会...
html5 权威指南 最新版
08-11
《HTML5 权威指南》是系统学习网页设计的权威参考图书。本书分为五部分：第一部分介绍学习本书的预备知识和HTML、CSS 和...本书面向初学者和中等水平Web 开发人员，是牢固掌握HTML5、CSS3 和JavaScript 的必读之作。
HTML5+CSS3 快速入门 前端 源代码.rar
10-06
Java web前端开发常用技术之一，可快速构建极具客户体验度的应用。本课程由有着多年实战开发的资深web前端开发工程师朱朝兵老师为大家录制，从html5+css3基础知识，到实战案例分析，实际操作，均有详细讲解。 1.课程...
Java实战项目——基于ssh实现的博客系统（毕业设计）(前后端源码+论文+数据库+说明文档)25.zip
06-15
ava实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），可运行高分资源 Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现
基于React的后台开发框架（javascript）
06-15
【作品名称】：基于React的后台开发框架（javascript） 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：运行Demo cd tui/example npm install node app.js open localhost:3003/be 说明 simditor文件夹为TUI依赖的编辑器插件，如果用到编辑器，页面引入simditor.all.min.js和simditor.css即可。
吴力群 231123501129.pdf
06-15
吴力群 231123501129.pdf
PC下C语言基于libgraphics和浙江大学simplegui写出的新版吃豆人，仅用于教学和交流.zip
最新发布
06-15
C语言是一种广泛使用的编程语言，它具有高效、灵活、可移植性强等特点，被广泛应用于操作系统、嵌入式系统、数据库、编译器等领域的开发。C语言的基本语法包括变量、数据类型、运算符、控制结构（如if语句、循环语句等）、函数、指针等。下面详细介绍C语言的基本概念和语法。 1. 变量和数据类型 在C语言中，变量用于存储数据，数据类型用于定义变量的类型和范围。C语言支持多种数据类型，包括基本数据类型（如int、float、char等）和复合数据类型（如结构体、联合等）。 2. 运算符 C语言中常用的运算符包括算术运算符（如+、、、/等）、关系运算符（如==、!=、、=、<、<=等）、逻辑运算符（如&&、||、！等）。此外，还有位运算符（如&、|、^等）和指针运算符（如、等）。 3. 控制结构 C语言中常用的控制结构包括if语句、循环语句（如for、while等）和switch语句。通过这些控制结构，可以实现程序的分支、循环和多路选择等功能。 4. 函数 函数是C语言中用于封装代码的单元，可以实现代码的复用和模块化。C语言中定义函数使用关键字“void”或返回值类型（如int、float等），并通过“{”和“}”括起来的代码块来实现函数的功能。 5. 指针 指针是C语言中用于存储变量地址的变量。通过指针，可以实现对内存的间接访问和修改。C语言中定义指针使用星号（）符号，指向数组、字符串和结构体等数据结构时，还需要注意数组名和字符串常量的特殊性质。 6. 数组和字符串 数组是C语言中用于存储同类型数据的结构，可以通过索引访问和修改数组中的元素。字符串是C语言中用于存储文本数据的特殊类型，通常以字符串常量的形式出现，用双引号（"..."）括起来，末尾自动添加'\0'字符。 7. 结构体和联合 结构体和联合是C语言中用于存储不同类型数据的复合数据类型。结构体由多个成员组成，每个成员可以是不同的数据类型；联合由多个变量组成，它们共用同一块内存空间。通过结构体和联合，可以实现数据的封装和抽象。 8. 文件操作 C语言中通过文件操作函数（如fopen、fclose、fread、fwrite等）实现对文件的读写操作。文件操作函数通常返回文件指针，用于表示打开的文件。通过文件指针，可以进行文件的定位、读写等操作。 总之，C语言是一种功能强大、灵活高效的编程语言，广泛应用于各种领域。掌握C语言的基本语法和数据结构，可以为编程学习和实践打下坚实的基础。
html5入门到精通pdf
10-16
《HTML5入门到精通PDF》的特点之一是其实践性。它提供了大量的示例代码和项目实践，帮助读者将所学知识应用到实际项目中。此外，书中还包含了一些常见问题和解决方案，以及一些实用的工具和资源推荐，方便读者进一步...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值