HTML5
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
HTML5 基础
支持HTML5 的主流浏览器: IE9+,Firefox, Opera, Chrome, Safari.H5 的一些变化:<!DOCTYPE>标签,它是一个申明标签,放在文档第一行。它不是HTML标签,只是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。 H5 的话直接申明:<!DOCTYPE html> 就可以了。新增标签:1. 结构标签2. 多媒体标签...原创 2018-04-09 21:06:20 · 245 阅读 · 0 评论 -
html5 布局
相比之前版本,更简单的布局,有语义的标签相当于内置了固定样式。如图:一个例子(li标签是最不利于搜索引擎搜索到的标签,图片轮播的话,最好用li)。html 结构:<!DOCTYPE html><html><head> <title>layoutTest</title> <meta charset="utf-8">原创 2018-04-17 07:32:20 · 305 阅读 · 0 评论 -
html5 属性变化
input 标签,新增的type 类型:email / url / number / range / Date picker / search / color / tel表单属性autocomplete / autofocus / multiple / placeholder / required链接属性<link> 的size 属性 / <base> 的target 属性...原创 2018-04-18 22:52:07 · 237 阅读 · 0 评论 -
HTML5 基础 音视频部分
音频格式:mp3, ogg, wav.视频格式:mp4, ogv, webm.历史:早期使用Flash, html5 后使用video/ audio.video/audio 标签及其常用属性- controls- autoplay- loop- source- preload- poster(video)【视频播放前显示的封面】以视频为例: <video src="media/badfox....原创 2018-05-06 17:03:19 · 351 阅读 · 0 评论 -
html5 约束验证API
html5 约束验证API 主要有如下几个: willValidate 属性 validity 属性 validationMessage 属性 checkValidity() 方法 setCustomValidity() 方法 validity 属性(显示各项是否符合验证条件),示例: <form action="" method="post" &...原创 2018-07-19 21:49:00 · 559 阅读 · 0 评论 -
html5 表单基本验证特性
表单验证可以通过两种方式:AJAX 与 html5表单验证。下面简单介绍基本的 h5 表单验证特性: html5 设置表单元素必填 --> required html5 表单验证使用正则 --> pattern html5 表单中设置了必填,提交表单的时候如何做到不验证 --> novalidate 或者 formnovalidate示例一:<body...原创 2018-07-15 17:06:06 · 1031 阅读 · 0 评论 -
html5 自带验证美化之伪类和选择器介绍
要做出不一样的表单验证,我们需要了解一些伪类及css选择器1. :required 和 :optional2. :in-range 和 :out-of-range3. :vaild 和 :invalid4. :read-only 和 :read-write 其中, css 两种符号: +,~。“+”用来选择下一个元素,“~”用来选择同一父级下后续所有该类元素。 ...原创 2018-07-22 11:06:01 · 237 阅读 · 0 评论 -
一个 h5 表单验证美化综合案例
其中,使用了三个事件: - oninput 事件 (用户输入时触发,input、textarea 的值发生改变时触发) - oninvalid 事件 (验证有误时触发) - onchange 事件<!DOCTYPE html><html><head> <title>html5表单美化综合例子</title>...原创 2018-07-22 13:43:29 · 985 阅读 · 1 评论 -
sessionStorage
sessionStorage 会话存储 sessionStorage 是HTML5新增的会话存储对象,用于临时保存同一窗口(标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 在JS中,可以通过window.sessionStorage 或者 sessionStorage 调用此对象。 sessionStorage 对象的特点 1)同源策略限制 ...转载 2018-10-10 11:01:14 · 410 阅读 · 0 评论