HTML5 简单归纳 -- 前端知识 (一)
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 简单归纳 -- 前端知识 (一)的更多相关文章
- HTML5 简单归纳 -- 前端知识 (二)
HTML5 全屏事件 全屏事件:requestFullScreen 关闭全屏:cancelFullScreen 判断是否全屏:fullScreenElement 注意:现各大主流浏览器中由于内核不同的 ...
- AJAX 简单归纳 -- 前端知识
什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...
- HTML 简单归纳 -- 前端知识
web前端 Internet:是一个全球性的计算机互联网络,中文名称“因特网”.“国际互联网”.“网际网”等等: Internet提供的服务:http.ftp.Telnet.email.www.bbs ...
- jquery 简单归纳 -- 前端知识
jquery 什么是jQuery? jquery是轻量级的JavaScript库,核心是javascript,兼容css和各种浏览器,核心理念是写得少做得多(write less do more). ...
- CSS 简单归纳 -- 前端知识
CSS:cascading style sheets层叠样式表,用于美化页面 css的三种表现形式:1.行内样式(内嵌样式):结构的内部,即写在标签内的样式:写在标签的开始部分内部,style属性当中 ...
- 【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解
[重构前端知识体系之HTML]讲讲对HTML5的一大特性--语义化的理解 引言 在讲什么是语义化之前,先看看语义化的背景. 在之前的文章中提到HTML最重要的特性,那就是标签.但是项目一大,标签多的看 ...
- 【重构前端知识体系之HTML】HTML5给网页音频带来的变化
[重构前端知识体系之HTML]HTML5给网页音频带来的变化 引言 音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件.然而现在,估计一些年轻的开发者都不 ...
- Web前端知识技能大汇总
项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以 ...
- Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
随机推荐
- mybatis Mapper XML 映射文件
传送门:mybatis官方文档 Mapper XML 文件详解 一. 数据查询语句 1. select <select id="selectPerson" parameter ...
- 用mac的safari浏览器调试ios手机的网页
iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...
- D13——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D13 20180918内容纲要: 堡垒机运维开发 1.堡垒机的介绍 2.堡垒机的架构 3.小结 4.堡垒机的功能实现需求 1 堡垒机的介绍 百度百科 随着信息安 ...
- typescript-koa-postgresql 实现一个简单的rest风格服务器 —— 连接 postgresql 数据库
接上一篇,这里使用 sequelize 来连接 postgresql 数据库 1.安装 sequelize,数据库驱动 pg yarn add sequelize sequelize-typescri ...
- 09-04 java 接口
接口的引出 继续回到我们的猫狗案例,我们想想狗一般就是看门,猫一般就是作为宠物了,对不.但是,现在有很多的驯养员或者是驯兽师,可以训练出:猫钻火圈,狗跳高,狗做计算等. 而这些额外的动作,并不是所有猫 ...
- 浏览器中F5和CTRL F5的行为区别及如何强制更新资源
一.浏览器中F5和CTRL F5的行为区别 我们直接来看效果,下面是我打开qq网页,分别使用F5和CTRL F5,我们来看区别. F5: CTRL F5: 区别: 首先直观上的区别是CTRL F5明显 ...
- EOS 理解
1.通过石墨烯技术来解决延迟和吞吐量. 2.账户体系:账户是可读的唯一标识符,不是地址.可包含多对公私钥.账户有权限规划.权限有阈值,公私钥有权重,公私钥的权重大于等于阀值才能拥有该权限进行相应操作. ...
- 文档对象模型DOM(一)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 每加载一个标记 注释 或者属性,就将其当 ...
- Java转义emoji等特殊符号
写在前面 网上找了很多转emoji等方法,大多有两种方法 更改数据库编码格式为utf8mb4 过滤字符串中的emoji 都不是很优雅 更改数据库编码,势必影响其他数据库 过滤emoj效率比较低 处理E ...
- JVM学习记录-Java内存模型(二)
对于volatile型变量的特殊规则 关键字volatile可以说是Java虚拟机提供的最轻量级的同步机制. 在处理多线程数据竞争问题时,不仅仅是可以使用synchronized关键字来实现,使用vo ...