为什么学习HTML5

a.因为语义化标签的出现网页结构更加清晰

b.因为多媒体的出现,让网页播放音频和视频没有了依赖

c.因为CSS3的出现,让页面变得更加炫酷和多彩

d.因为新的API的出现,使的开发更加高效

什么是语义化标签

所谓的语义化标签是指用正确的标签使用正确的事情

HTML5的新特性

八大革新(https://www.w3.org/html/logo/)
1.semantics(语义化标签)

2.offline & storage(离线和存储)

3.Device Access(设备访问)

4.connectivity(链接)

5.multimedia(多媒体)

6.3D,Graphics & Effects(3D 特效)

7.Performance & Integration(性能和集成)

8.CSS3 & styling(CSS3和样式)

常用的语义化标签:

header  头部

nav     导航

main    主要区域

article 文章

aside   侧边栏

section 独立的节或段

footer  底部

语义化标签的优点

1.有利于开发者维护和修改网站(层次清晰简单明了)

2.有利于搜索引擎收录网站

3.有利于残障人士更好的获取网站信息

HTML5 特性之 增强的表单

表单输入类型:


fieldset    边框

legend      印在边框上的字体

email       邮箱        邮箱 必须填写符合邮箱格式的字符串 也就是必须携带@符号

                            如果输入框中没有内容是不会进行验证的

URL         网址        URL 必须带有http或https的协议前缀

                            如果输入框中没有内容是不会进行验证的

search      搜索        搜索 和type=text不同的一点是当输入内容之后又清除按钮

tel         电话        电话 如果在手机上当输入框有焦点的时候回自动弹出数字键盘

number      数字        数字 数字有增减按钮 最大值 max 最小值 min 当前值 value 步进step

range       范围(滑块)  范围 范围有增减按钮 最大值 max 最小值 min 当前值 value 步进step

time        时间        时间 有小时和分钟的显示 还有增减按钮

date        日期        日期 日期和时间不同的地方 就是日期有日期选择空间 week month datetime(现在已经没有浏览器支持了) datetime-local

color       颜色        颜色 要给颜色一个默认值 希望写成完整的十六进制
新增表单输入属性(重点):
placeholder     占位符      告诉用户你将要在输入框中输入什么样的内容

autofocus       自动聚焦        当打开页面 输入光标会自动聚焦到该输入框

autocomplete    自动完成        自动提示填充表单 默认是打开的autocomplete="on" autocomplete="off"

required        必填        要求用户必须填写如果不填写 会报告错误

pattern         自定义验证      使用正则表达式进行自定义验证

multiple        多文件上传      当文件上传的时候可以选择多个文件 只适用于type=file这个类型
新增表单元素
    datalist 数据列表
表单事件及方法
onchange    就是当输入框的值变化的时候触发事件

oninput     当元素获得用户输入时运行的脚本(当用户输入的时候触发该事件)
多媒体-音频
属性

  1.controls    显示控制菜单

  2.autoplay    自动播放

  3.loop        循环播放

  4.source      标签就是用来给音频或视频提供不同的格式的标签

<body>

    音频资源设计给的 自己用格式工厂转换

    <audio src="文件路径.mp3" controls autoplay loop>

    您的浏览器不支持audio标签

        <source src="文件路径.mp3">

        <source src="文件路径.ogg">

        <source src="文件路径.wav">

    </audio>

</body>

```

###### 多媒体-视频

```

<body>

<!--注意:用webstorm如果想拉动进度条是不行的 就不要用webstorm打开-->

<!--原因:webstorm服务器性能太弱-->

    <video controls autoplay loop>

        <source src="下载%20(1).mp4"/>

        <source src="下载%20(1).ogg"/>

        <source src="下载%20(1).webm"/>

    </video>

</body>

```

H5 C3的更多相关文章

  1. 【h5+c3】web前端实战项目、快装webapp手机案例源码

    快装WebApp项目(Web移动端开发案例)webapp移动端项目源码.html5+css3实战案例分享.微信端H5实例开发 简介快装WebApp是一个面向移动端的快速装修app,此项目为手机端:使用 ...

  2. 纯H5+c3实现表单验证

    客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证.HTML5其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼容性的问题还有就是样式太丑陋了吧. ...

  3. 2019.7月-前端面试总结（H5+C3+JS+ES6+Vue+浏览器）

    第二次面试 HTML HTML5中的新标签,举例一下 canvas绘画,本地离线存储localStorage,sessionStorage,video和audio元素,语义化元素,表单类型(date, ...

  4. 2020/1/4 H5&&C3笔记

    1. 类名不能由数字开头 2.float 是float 属性定义元素在哪个方向浮动.有left / right / none / inherit四个 参考https://www.w3school.co ...

  5. 3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）

    前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...

  6. 每天刷Web面试题(前10天汇总)

    一.算法题部分   1. 如何获取浏览器URL中查询字符串中的参数? function getParamsWithUrl(url) {       var args = url.split('?'); ...

  7. 关于HTTP Message

    HTTP Message包括JS, HTML等Resource.这些都是相对来说有代码可以写的东西,但是原理的东西是没有代码的.coding只是很少的一部分工作内容. Browser的流程.比如con ...

  8. 我是怎么从安卓到php再成为前端开发工程师的

    记得我下定决心学Android(安卓)是17年的暑假,暑假前,学校组织了一次集训,美其名曰帮我们巩固知识,实际上就是学校和长沙的培训学校某牛达成了合作,教我们一些基础知识,然后集训完建议那些在学校没学 ...

  9. Java异常（一）Java异常简介及其框架

    Java异常(一)Java异常简介及其框架 概要 本章对Java中的异常进行介绍.内容包括:Java异常简介Java异常框架 Java异常简介 Java异常是Java提供的一种识别及响应错误的一致性机 ...

随机推荐

  1. ssh的用户配置文件config管理ssh会话

    抄的这个: https://www.cnblogs.com/zhonghuasong/p/7236989.html 只是在这里留个存档,防止删除 我有这样的需求就是,因为需要ssh连接到服务器,然后每 ...

  2. Unity应用架构设计(2)——使用中介者模式解耦ViewModel之间通信

    当你开发一个客户端应用程序的时候,往往一个单页会包含很多子模块,在不同的平台下,这些子模块又被叫成子View(视图),或者子Component(组件).越是复杂的页面,被切割出来的子模块就越多,子模块 ...

  3. Java基础（二）面向对象（上）

    面向对象基础知识 面向对象是相对面向过程而言的 面向对象和面向过程都是一种思想 面向过程强调的是功能行为 面向对象将功能封装进对象,强调具备了功能的对象 面向对象是基于面向过程的 面向对象的特征: 封 ...

  4. [转]：Delphi XE中泛型数组的使用范例

    Delphi XE中泛型数组的使用范例,下面的范例简单的使用了泛型字符串数组,如用 TArray 代替 array of Word, 还可以使用 TArray 类提供的算法(就是少了点). uses ...

  5. maven私服不能重复部署解决

    1.报错 Return code is: 400, ReasonPhrase: Repository does not allow updating assets: maven-releases. 2 ...

  6. 重读redis设计与实现

    重读了一遍redis设计与实现,这次收获也不错,把之前还有些疑惑的点:redis跳跃表的原理.redis持久化的方法.redis复制.redis sentinel.redis集群等,都重新熟悉了一遍, ...

  7. [Linux 性能调优] 网卡中断与CPU的绑定问题

    在Linux的网络调优方面,如果你发现网络流量上不去,那么有一个方面需要去查一下:网卡处理网络请求的中断是否被绑定到单个CPU(或者说跟处理其它中断的是同一个CPU). 先说一下背景 网卡与操作系统的 ...

  8. [转]git commit --amend用法

    适用场景: 比方说,你的代码已经提交到git库,leader审核的时候发现有个Java文件代码有点问题,于是让你修改,通常有2种方法: 方法1:leader 将你提交的所有代码 abandon掉,然后 ...

  9. windows下JDK环境配置与Android SDK环境配置

    一.JDK环境配置1.配置变量名:JAVA_HOME变量值:jdk安装的绝对路径. 变量名:Path(在系统变量中找到并选中Path点击下面的编辑按钮,不要删除原本变量值中的任何一个字母,在这个变量值 ...

  10. 对世界首款“人工智能”ERP系统HUE的初步了解 - AI ERP - WAP - 万革始

    偶然的机会,刚好在查找机器人王国［奇妙的餐厅］的时候,看到开发［光的王国］,［奇妙的宾馆］,［奇妙的餐厅］等豪斯登堡集团在3月17日采用了这个传说中的世界首款人工智能ERP系统AI WORKS的下面4 ...