初学html5第一周

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 --------- 标签兼容不同视频的格式