HTML5简介

1.h5不是一个新语言,它是HTML语言第五次重大修改--版本

2.   2014年  h5

3.支持:目前所有的主流浏览器都支持h5,IE8以下不支持

4.特性:  a:抛弃了h4中不常用的标签或属性(center/font等)  SEO优化--i/em  b/strong

      b:新增了一些标签和属性(表单,多媒体(video,audio))

      c:h5的网页结构比h4的网页结构更简单。语义化(SEO优化)

HTML5新增的type属性

将所有的<input>标签写在<form>标签中,form:收集用户输入的信息,提交服务器。

手机号码:<input type = "tel"  nume =""/>

电子邮箱:<input type = "email"  nume =""/>

URL地址:<input type = "url"  nume =""/>

数字框:<input type = "number"  nume =""  min="" max="" value=""/>

颜色:<input type = "color"  nume =""/>

范围:<input type = "range"  nume =""/>

HTML5表单中新增的属性

1. placaeholder = "提示信息";当用户未输入值时显示的提示信息,占位符。

2. autofocus = "autofocus"; 自动聚焦。

3. autocomplete = "on"; --on:打开自动补全;

  a:该输入框必须有name属性;

  b:输入的值必须提交过一次。

4. required = "required";设置必填项--若为空,阻止数据提交

5. multiple = "multiple";选择多个文件。

6. type = "file":文件;type = "password":密码

下拉列表:input 元素与datalist配合使用。

1. datalist 只是用来定义一个下拉列表。

2. option 定义下拉列表具体的项,option可以是单标签,也可以是双标签。value:下拉列表的值,label:辅助说明。

3.获取值只需要通过获取input元素中的 value 值;

进度条:<progress  value = ""  max = ""></progress>

度量器:<meter min = ""   max = "" value = ""  low = ""  high = ""></meter >

  low:最低值;high:最高值。

HTML5表单新增事件

<form>
手机号:<input type = "tel" placeholder = "请输入手机号" maxlength = "11" id = "phone" pattern="^1[35678]\d{9}$" name = "phone"/>
</form>

  document.getElementById("phone").oninralid = function(){

    //对象。setCustomValidity("所要修改的提示信息");

  }

1. onchange:当输入框的值发生改变的同时失去焦点才触发。

2. onblur:不管输入框的值是否发生改变,只要失去焦点就触发。

3. onkeyup:只要键盘某个按键弹起时就触发。

4. oninput:当输入框的值发生改变时立即去触发。

HTML5 简单归纳 -- 前端知识 (一)的更多相关文章

  1. HTML5 简单归纳 -- 前端知识 (二)

    HTML5 全屏事件 全屏事件:requestFullScreen 关闭全屏:cancelFullScreen 判断是否全屏:fullScreenElement 注意:现各大主流浏览器中由于内核不同的 ...

  2. AJAX 简单归纳 -- 前端知识

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  3. HTML 简单归纳 -- 前端知识

    web前端 Internet:是一个全球性的计算机互联网络,中文名称“因特网”.“国际互联网”.“网际网”等等: Internet提供的服务:http.ftp.Telnet.email.www.bbs ...

  4. jquery 简单归纳 -- 前端知识

    jquery 什么是jQuery? jquery是轻量级的JavaScript库,核心是javascript,兼容css和各种浏览器,核心理念是写得少做得多(write less do more). ...

  5. CSS 简单归纳 -- 前端知识

    CSS:cascading style sheets层叠样式表,用于美化页面 css的三种表现形式:1.行内样式(内嵌样式):结构的内部,即写在标签内的样式:写在标签的开始部分内部,style属性当中 ...

  6. 【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解

    [重构前端知识体系之HTML]讲讲对HTML5的一大特性--语义化的理解 引言 在讲什么是语义化之前,先看看语义化的背景. 在之前的文章中提到HTML最重要的特性,那就是标签.但是项目一大,标签多的看 ...

  7. 【重构前端知识体系之HTML】HTML5给网页音频带来的变化

    [重构前端知识体系之HTML]HTML5给网页音频带来的变化 引言 音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件.然而现在,估计一些年轻的开发者都不 ...

  8. Web前端知识技能大汇总

    项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以 ...

  9. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

随机推荐

  1. VS2017中使用Git进行版本控制

    简单介绍在VS2015下使用Git来管理项目 1. VS2017启用Git源代码管理插件 第一步,打开vs: 第二步,打开[团队资源管理器]: 第三步,选择团队管理器选项卡下的[连接]页面,点击[克隆 ...

  2. 【6】JMicro微服务-服务日志监控

    如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl   1. 微服务相关 在前面的1到5节中,总共涉及服务提供者,服务消费者,服务监听服务,发布订阅服务,熔断器服务5种类型的猪 ...

  3. 10-04 Java 权限修饰符,类及其组成常见的修饰符

    四种权限修饰符的测试 /* 权限修饰符: 本类 同一个包下(子类和无关类) 不同包下(子类) 不同包下(无关类) private Y 默认 Y Y protected Y Y Y public Y Y ...

  4. 通过超链接启动App

    问题:微信里分享一个链接给你,你点击这个链接,一.如果你安装了这个钱包,那就直接打开钱包.二.如果没有安装钱包就跳转到下载钱包的地方 要点:首先要让浏览器知道 app 是谁,然后再让浏览器调用app ...

  5. winform计算文本的所占的像素长度

    /// <summary> /// 计算文本的宽度 /// </summary> /// <param name="str"></para ...

  6. python应用

    GUI(图形用户界面) python是可以创建GUI的,使用第三方库一般是Tk.wxWidgets.Qt.GTK. 而python自带的是支持Tk的Tkinter,我们这里就来用Tkinter来实现G ...

  7. 本机spark 消费kafka失败(无法连接)

    本机spark 消费kafka失败(无法连接) 终端也不报错 就特么不消费:  但是用console的consumer  却可以 经过各种改版本 ,测试配置,最后发现 只要注释掉 kafka 配置se ...

  8. Spring中内置的一些工具类

    学习Java的人,或者开发很多项目,都需要使用到Spring 这个框架,这个框架对于java程序员来说.学好spring 就不怕找不到工作.我们时常会写一些工具类,但是有些时候 我们不清楚,我们些的工 ...

  9. List集合中的对象按照某个字段去重实现

    package com.liying.banana.user; import java.util.ArrayList; import java.util.Comparator; import java ...

  10. Linux-(watch,at,crontab)

    watch命令 1.命令格式: watch  [参数]  [命令] 2.命令功能: 可以将命令的输出结果输出到标准输出设备,多用于周期性执行命令/定时执行命令. watch可以帮你监测一个命令的运行结 ...