前端入门学习之 html5

勤于动手勤于动手勤于动手

html5有一些新的特性

用于绘画的canvas 元素
用于媒介回放的video 和 audio元素
对本地离线存储更好的支持
新的特殊内容元素 article footer header nav section
新的表单控件 calendar date time email url search

HTML5 “”<!DOCTYPE html>
“ <!DOCTYPE html>” 放在文档第一行
不是标签是声明

最小HTML5文档
HTML5改进
我们拥有了新元素
新属性
完全支持css3
Video 和 Audio
2d/3d制图
本地存储
本地SQL数据
web应用
如何掌握他们呢？只有一条路就是勤于动手
HTML5多媒体就是说我们可以简单的在网页上播放 video和audio
使用
什么叫HTML5应用呢？？？
就是你可以开发应用
本地数据存储
访问本地文件
本地SQL数据
缓存引用
JavaScipt 工作者
XHTMLHttpRequest 2
HTML5 图形
就是可以简单的绘制图形
元素
内连 SVG
css3 2d 转换 css3 3d转换

HTMl 对无法识别的元素会自动作为内联元素处理,面对不支持HTML5的浏览器
我们可以
```
   header，section,footer,aside,nav,main,article,figure {display:  blck;}
```
HTML5 新元素
<canvas>

1.hearder/section/aside/article/footer。这5个标签都不要嵌套在自身里面。
2.header/section/footer这三个级别最高，故通常放在最外层。在他们下面再写aside/article/figure/hgroup/nav，并且互不嵌套，如果要往里面在嵌套元素，用div。div的级别和figcaption一样。

video 标记定义一个视频。
audio 标记定义音频内容。
source 标记定义媒体资源

audio标签> >音频标签
（audio标签内文字，在不能识别此标签的浏览器下显示，若识别则不显示）
属性：
1.src 提取音频地址
2.autoplay 是否自播放值为autoplay
3.loop 是否自动重复播放值为-1则重复
4.controls 音频播放控制器值为controls （若嫌丑，后面会讲到怎么设置）。

为了防止有些浏览器不识别上面标签，可用以下标签。

vedio标签可以通过 width和height属性来控制大小。
自动播放与控制器属性与audio标签相同。
vedio与audio不同之处，audio只是音频，不存在宽高

多媒体标签之
4，标记定义图片，但本意是：画布。他有强大的API，通过API可以定义很多很炫的特效。
5，标记定义外部的可交互的内容或插件，比如快销声匿迹的flash。
用法：大致和vedio,audio差不多，但因为快被canvas取代，故了解即可。当不设宽高时，它默认窗口很小，不是由视频原始宽高决定。
还有svg矢量图片的引入，可以用img，也可以用embed，以这种方式引入。

原本需要 flash插件的现在不要了

状态标签

列表标签
<datalist> 定义下拉列表 —支持输入搜索选择
<details> 标记一个内容的详细信息 —点击展开 open=open 自动展开

ruby 標記定義注釋或音標
rt 標記定義對ruby的注釋内容文本
rp 在不兼容的瀏覽器中顯示的内容

我们来标注生（sheng)的拼音

其中< rt> 標簽应该放在標簽内，这样在不兼容标签的浏览器中，也能显示

编程联系

  写一个实现任务总进度是100，当前完成任务进度80

<p>小明成绩是否在60~80分之间</p>
<meter value = “79” max = “100” low=“60” hight=“80” optimum = “75”></meter>
<p>小明打败的敌人百分比</p>
<meter value = 0.6></meter>

前端入门学习之 html5相关推荐

Web前端入门学习（5）——浮动原理及清除浮动
浮动原理及清除浮动上节回顾在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...
web前端入门学习 html5（1）
web前端入门基础教程,最适合零基础前端小白的视频教程html5+css3 文章目录 html 浏览器内核 web标注语法规范 html基本结构标签 web常用开发工具 vscode基本使用文档类 ...
Web前端入门学习之JS基础知识梳理汇总
Web前端工程师是当前各大企业都比较稀缺的人才,薪资待遇和就业前景都很不错.不论是专业还是非专业,有基础亦或是无基础,都想通过学习Web前端实现高薪就业. 不过,学习要一步一个脚印,不能一口吃一个胖子 ...
前端入门学习笔记（1）--html部分
这是在网上发表的第一篇文章,从来不喜欢在网上发表言论.文字和资源,是个名副其实的"伸手党",在"伸手白拿"的多年间,也曾想过要贡献些什么,但总是害怕自己分享出来 ...
web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
【css教程】web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
web前端入门学习 html5（2）
https://www.bilibili.com/video/BV1pE411q7FU?p=50&spm_id_from=pageDriver 文章目录表单标签为什么需要表单? 表单的组成 ...
web前端入门学习（纯干货）
web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...

前端入门学习之 html5

前端入门学习之 html5相关推荐

最新文章

热门文章