html5介绍
HTML5是一种用于构建和展示网页内容的标记语言。它是HTML的最新版本,引入了许多新的元素和功能,以提供更丰富的用户体验和更强大的功能。HTML5支持多媒体元素(如音频和视频),新的表单控件(如日期选择器和范围滑块),以及更语义化的标记(如header、nav、footer等)。同时,HTML5还引入了Canvas元素,可以实现更灵活的图形和动画效果。HTML5还提供了新的API,如地理定位、本地存储和离线应用,以便开发者能够创建更强大的Web应用程序。总的来说,HTML5为开发者提供了更多的工具和功能,以创建出更现代、交互性更强的网页。
html和html5区别
HTML5不基于SGML(Standard Generalized Markup Language 标准通用标记语言),因此不需要对DTD(DTD 文档类型定义)进行引用,但是需要DOCTYPE来规范浏览器行为。
Canvas元素
使用Canvas,你可以绘制直线、矩形、圆形、弧线等基本形状,还可以使用路径(Path)来绘制复杂的形状。你可以自定义颜色、样式和渐变,添加阴影和透明度,以及进行图形变换和动画效果。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="400" height="400"></canvas>
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
html5新增语义化标签
- header --- 头部标签
- nav --- 导航标签
- article --- 内容标签
- section --- 块级标签
- aside --- 侧边栏标签
- footer --- 尾部标签
学到的两个元素:
1.audio
音频元素 <audio>
可以用来嵌入音频文件,并通过指定的音频源进行播放。你可以通过设置属性来控制音频的播放,例如设置播放、暂停、音量和循环等。同时,你还可以使用JavaScript来控制音频的播放、暂停、音量控制和获取当前播放时间等。
先下载一段音频,在运用就可以播放了
<audio src="xxxxxx.mp3" autoplay controls></audio>
属性
autoplay
--------- 音频会尽快自动播放,不会等待整个音频下载完成
controls
--------- 用户可以控制音频播放
loop
--------- 循环播放
muted
--------- 是否静音,默认值为false
,表示有声音
preload
--------- 预加载,包括auto
、metadata
和none
三个参数值,auto
表示加载音频,metadata
表示不加载音频,但是需要获取音频元数据(如音频长度),none
表示不加载音频。
src
--------- 嵌入的音频
2.video
视频元素 <video>
则用于嵌入和播放视频文件。你可以通过指定视频的源文件(如MP4、WebM等格式)来设置视频源。与音频元素类似,你可以设定一系列的属性来控制视频的播放,包括播放、暂停、音量、自动播放、循环和视频大小等。
width设置宽度,height设置高度,再选择一个本地的视频进行运用。
<video width="800" height="" autoplay controls loop muted>
<source src="xxxxxx.mp4" type="video/mp4"></source>
</video>
属性
autoplay --------- 视频就绪后立马播放
controls --------- 视频的播放控件
loop --------- 循环播放
muted --------- 视频静音
poster --------- 下载时显示的图像,值为url
source --------- 标签兼容不同视频的格式