0

0

20分钟看懂html5 看看H5都有啥新特性

PHPz

PHPz

发布时间:2017-03-17 12:02:29

|

4255人浏览过

|

来源于php中文网

原创

什么是html?

HTML(Hyper Text Mark-up Language)。超文本标记语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。(HTML视频教程

什么是HTML5

我们所谓的HTML5所能达到的效果,并不是孤立的HTML升级版,而是HTML+CSS3+JS综合起来的表现。HTML也只是一个标记语言,只是他进行了更加语义化的优化,增加了一些被认为更加科学的标签,也去掉了一些标签,但标记是标记,行为是行为,没有CSS3、没有JS,HTML也永远只是个HTML而已。(html5视频教程

简单的说,HTML5比之前的HTML版本的标签更加语义化,更加标准化,并且增加了一些新的标签。请看下图:

立即学习前端免费学习笔记(深入)”;

HTML形式

这是以前网页的HTML形式。而新的的HTML是这样的:

HTML5形式

很显然,HTML5已经不再像以前那样一个DIV打天下了,新加了语义化的新标签。可能会让前段工程师们在团队协作上更加容易,因为有了统一的新标准。

形象一点来说吧,一个百货仓库,管理员老王来收拾仓库,把各种衣帽鞋子和百货分类放入不同的盒子中,在盒子上贴上标签并写上自认为合适的名字。那些盒子我们可以理解为DIV,标签上的起的名字class货id。

那好了,问题来了。老王下班了回家了,老李来接班,老李看了老王收拾的情况就开始骂街了,因为他看不懂老王在盒子上写的标签,害的他要挨个盒子打开看看究竟里面放着什么,这大大的降低了工作效率。

3.jpg

现在的HTML5就是直接把标记好了的盒子交给了老王,他可以根据不同的盒子来装不同的衣帽鞋子,这样等到老张来接班的时候就方便多了。并且不止这样,HTML5提供了更多的标签来让老张和老王们不用在麻烦其他同事而能独立完成一些以前来讲比较复杂的工作。

4.jpg

具体html5 多了啥?

更加语义化标签(开发者可以更加优雅,浏览器也可以更好的理解)

搜索引擎检索,为什么会检索标题,不会检索“简介” ? 这是因为结构的不同。但是结构每个人的class命名习惯都会不一样,无法做到规范,于是不如出新的标签。

在有一些低版本的浏览器中,h5标签不兼容,会被认为是p,并不会影响我们的功能。也可以在 script 中新加一行代码 document.createElement("header") ,但是用了多少标签,就要写多少行的 document.createElement("") ,于是有一个第三方的插件 html5shiv.js

使用方法:

注意:在页面中调用Html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。

应用程序标签

DataList

progress

属性

链接关系描述

链接到的地方和当前文档的关系是什么

rel还出现在其他地方,

link本身不会请求文件,而是rel="stylesheet"才会请求文件

目前国内不流行

结构数据标记

主人

小狗一

小狗二

可以方便搜索引擎重点抓取

很高级,但是只有google支持

ARIA

Whimsical
Whimsical

Whimsical推出的AI思维导图工具

下载

无障碍富互联网应用程序


为什么上面一定要label for呢?

是为了搜索引擎的理解

自定义属性

也就是 data-* 之类的属性,他们没有功能性,只是为了保存dom节点的强相关的数据。

    上面的代码用 setattribue 方法来定义了自定义属性,然后用getattribute又获取到了自定义属性。js也针对自定义属性出了新的api,也就是 dataset['string'] ,使用这个api可以代替 getAttribute 的方法:

    oli.addEventListener("click",function(){    console.log(this.dataset["name"]);
    })

    智能表单

    新的表单类型

    
    
    

    但是尽量不要在pc端使用,用户体验较差,不能自定义样式。主要适配在移动端。

    虚拟键盘适配

    
    
    
    
    

    上面的代码在pc端上没有用处,主要是用在移动端可以根据不同的input的 type 来唤出不同的键盘。

    虽然 input type="email" 看似可以验证表单,但是真是太弱了,只是验证有没有 @ ,真的要验证的话,还是要自己写正则表达式

    页面多媒体

    音频

    但是默认的播放器太丑了,我们一般是自己写一个button,然后为这个button添加一个事件:

    视频

    但是我们一般不是这样用的,因为视频有版权,有些浏览器只能支持一两个,我们一般是source:

    还有一个插件,是可以帮我们做兼容的,是html5media.info/的组件,ie7以上都可以兼容。

    以下是多媒体的属性;

    [image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]

    字幕

    兼容性不是很好,现在还没有人用

    canvas

    2d

    3d

    svg

    优势:体积小,质量高,效果好,可控程度高。

    相关推荐:

    成为一名优秀的前端工程师需要学什么?

    web前端学习路线:WEB前端开发快速入门

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    Java 桌面应用开发(JavaFX 实战)
    Java 桌面应用开发(JavaFX 实战)

    本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

    37

    2026.01.14

    php与html混编教程大全
    php与html混编教程大全

    本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

    19

    2026.01.13

    PHP 高性能
    PHP 高性能

    本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

    37

    2026.01.13

    MySQL数据库报错常见问题及解决方法大全
    MySQL数据库报错常见问题及解决方法大全

    本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

    19

    2026.01.13

    PHP 文件上传
    PHP 文件上传

    本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

    16

    2026.01.13

    PHP缓存策略教程大全
    PHP缓存策略教程大全

    本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

    6

    2026.01.13

    jQuery 正则表达式相关教程
    jQuery 正则表达式相关教程

    本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

    3

    2026.01.13

    交互式图表和动态图表教程汇总
    交互式图表和动态图表教程汇总

    本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

    45

    2026.01.13

    nginx配置文件详细教程
    nginx配置文件详细教程

    本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

    9

    2026.01.13

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    HTML5/CSS3/JavaScript/ES6入门课程
    HTML5/CSS3/JavaScript/ES6入门课程

    共102课时 | 6.7万人学习

    HTML+CSS基础与实战
    HTML+CSS基础与实战

    共132课时 | 9.5万人学习

    前端开发(基础+实战项目合集)
    前端开发(基础+实战项目合集)

    共60课时 | 3.8万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号