H5第一课-概述新特性和H5的新增表单控件和属性

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。H5有兼容性问题,如果不考虑低版本浏览器,H5是绝对的主流。移动端开发则必须选它。H5带来了革命性的变化。

一、什么是H5

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

HTML5 是 W3C 与 WHATWG 合作的结果。

W3C 指 World Wide Web Consortium,万维网联盟

WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序,W3C致力于XHTML2.0

在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

H5有兼容性问题,如果不考虑低版本浏览器,H5是绝对的主流。移动端开发则必须选它。

二、HTML5 设计理念:

​ 1、避免不必要的复杂性,做减法,比如:

     (1)文档声明
     html5:  
    <!doctype html>
     html4:  
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     (2)字符编码
     html5:  
    <meta charset="UTF-8" />
     html4:  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     (3)省略链接css、JavaScript  type声明
     html5: 
    <link rel="stylesheet" href="base.css" />
    <script></script>

     html4: 
    <link rel="stylesheet" href="base.css" type="text/css" />
    <script type="text/javascript"></script>

​ 2、支持已有内容:完全向下兼容

​ 3、新增语义元素,给内容分区

​ 4、减少脚本操作(比如给表单新增了email等类型,required属性可以直接进行简单的表单验证)

​ 5、语法相对于XHTML更加宽松

三、H5的革命性变化

​ 1、新增了语义化标签

​ 2、新增了表单控件,自带验证功能,减少了一些JS操作

​ 3、新增了画图功能:画图、游戏开发 canvas

​ 4、多媒体:视频、音频 ,之前需要使用flash才能播放视频

​ 5、本地存储。离线应用

​ 6、地理定位。本地服务,附近的人

四、语义化标签

​ 1、什么是语义化标签

之前学过的语义化标签:
    ul    unorder list  无序
    li    列表项
    p     段落
    img   
    a
    div不是语义化标签:将div分身成各种有语义化的名字。
    header    头部
    section    区域
    article   文章(内容区域,主体区域)
    aside     侧边栏
    footer    尾部
    nav       导航

//jS  就像JS起名也要起个有意义的名字
var a=1;//a是无语义化的
var name='张三' //name是有的

​ 2、有什么用?
​ a、让结构更加清晰,更容易维护

​ b、对SEO更友好。SEO:搜索引擎优化,分站内和站外 (更看重这一块,目标:让网站排名靠前,内容出现在前面)

​ 3、有哪些?

​ H5的新标签几乎都是语义化标签:布局标签+功能型标签

五、学H5要注意的事项

1、注意浏览器的兼容性问题,IE9以上、现代浏览器支持:谷歌、火狐以及使用了他们内核的浏览器,比如国产的那些浏览器

PS:浏览器内核:Trident(IE),Webkit或Blink(谷歌、Safari),Gecko(火狐)

2、从第二点以后的新特性需要使用JS来实现(canvas、地理定位、本地存储、音视频控制等)

3、如何解决第一块兼容性问题:(扩展知识)

  1. 优雅降级(主流)

    一开始就用最好最先进的技术来开发网页,而不管低版本浏览器,只保证在低版本浏览器中可用,不保证好看。

    针对现代浏览器来开发。然后在老机型(老的浏览器)做适当的适配。

    即不用考虑兼容性问题。

    公司没有要求,默认就是优雅降级,即不用考虑兼容性问题。

  2. 渐进增强

    用最保守最没有兼容性问题的标签或技术来开发。

    优先保证在低版本浏览器能适配和好用,在高版本浏览器中可以做些锦上添花的效果。针对低版本浏览器。

    适用场景:教育产品,偏远山区。老旧设备。

六、新增的表单类型(新增的表单控件类型)

回顾:表单控件有:

<input type="text|radio|password|checkbox|button|submit|file|reset">

现在在H5中新增了更多的的控件类型:

<input type="text|radio|password|checkbox|button|submit|file|reset|number|tel|email|date|search|url|range|week|time">

新增了有:数字 电话 邮箱 日期 搜索 网址 滑块 星期等控件。

在电脑上外观差异有,但是不大,真正要使用它的理由请看手机端。

七、新增的表单控件属性

1、autocomplete

自动完成 用在form标签上,可选。

2、novalidate

不自动验证,即取消掉required属性的作用,加了它以后,require自动失效。

用在form标签上:

<form novalidate="novalidate">
        <input type="text" required>
        <input type="submit">
</form>

3、placeholder 常用

输入框的文本提示,用来增强用户体验。

可用于任意的输入框中。

<form>
        <input type="text" required placeholder="请输入您的用户名">
        <input type="password" placeholder="请输入您的密码">
        <input type="submit">
</form>

4、min,max,step

<!--
1.min  最小值
2.max 最大值
3.step  增量  每次增加多少,默认是1
用于range和number控件中
-->
<!-- 浏览器会显示上下小箭头,数字,手机上会显示数字面板 -->
数字:<input type="number" placeholder="数字" max="100" min="10" value="20" name="">  
<br>
<!-- 浏览器会显示滑块,通过value获取滑块的值 -->
滑块:<input type="range" id="rg" placeholder="滑动条" max="100" min="10" value="20" name="">

5、autofocus

自动聚焦 增加用户体验的。

给要自动获得焦点的控件添加,只能添加一个,多了也会用第一个

<form>
    <!-- 要让谁自动获得焦点就给谁添加,一般只添加一个 -->
    <input type="text" autofocus="" required placeholder="请输入您的用户名">
    <input type="email" required="">
    <input type="submit">
</form>

6、required 常用

让控件必填,之前只能用JS来实现,减少了脚本操作。

注意:它只能验证是否非空,其他的要配合JS或pattern属性使用

<form >
        <!-- required属性 -->
        <input type="text" autofocus="" required placeholder="请输入您的用户名">
        <input type="email" required="">
        <!-- required和pattern属性结合使用能验证如下是否为正确手机号 -->
        <input type="number" pattern="^1[3-9]\d{9}$" required >
        <input type="submit">
</form>

7、pattern 常用

写正则的,注意,不需要写//
pattern='正则表达式'   ;//正则表达式跟JS的写法一样
<input type="number" pattern="^1[3-9]\d{9}$" required >

8、list

​ 配合新增的datalist标签来使用,如下:

<form>
    <!-- 配合datalist使用,效果类似于select -->
    <input type="text" name="" list="lists">
    <!-- 以下写法也是可以的 -->
    <datalist id="lists">
        <option value="IE">IE1</option>
        <option value="chrome">谷歌</option>
        <option value="firefox">火狐</option>
        <option value="Safari">苹果</option>
    </datalist>
    <!-- 注意:IE10以上单击出来,火狐双击出来,Safari不支持 -->
</form>
此资源下载链接已被无情的隐藏,请输入验证码解锁:
验证码

请关注本站公众号回复“验证码”,获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 1,216
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top