感谢:来自 知乎,脚本之家,简书:GarenWang ,大前端 的文章。
语义化的好处
去掉样式能让页面结构呈现清晰。普通人容易读
屏幕阅读器会按标记“读”你的网页。屏幕容易读
有益于SEO。爬虫容易读
便于团队开发和维护。程序猿容易读
H5是什么?
- h5指的是一系列技术做的移动端ppt,主要技术有:
- 1.页面素材加载技术,使用使用createJS之中的preloadJS(现成的库)
- 2.音乐加载播放技术,createJS中同样有soundJS可以实现(又是它)
- 3.可以滑动的页面,这不就是ppt吗?用了swiper.js这个Jquery插件(又是库)
- 4.可以随意涂抹修改,使用canvas叠加层,canvas是HTML5标准里面的标签。这不是ppt吗?
- 5.有动态的文字和图片,常见的是使用了css3或者直接使用js动画,这不是ppt吗?
- 6.可以填表报名,使用最基本的表单
- 7.可以支持分享自定义的文案和图片
HTML5是什么?
- HTML5是一系列的HTML标准
doctype声明
<!DOCTYPE html>
常见结构标签
article:页面上
结构完整
并且内容独立 例如文章
aside:非正文内容, 例如广告侧边栏
section:文档中的节,例如小说中的一章
header:文章的头部,通常是一些引导
和导航
信息
footer:定义section或document的页脚
nav:定义显示导航链接
canvas:画布
video:视频流
audio:音频流
source:定义媒介资源(video,audio)
progress:进度条,max 进度最大值,value为当前值
details:描述文档某个部分细节,可以折叠
summary:默认显示的details元素的标题,details包含summary
mark:标记需要突出显示的文本,markdown也可以用哦。
command:命令按钮,如单选按钮,复选框,按钮。
localStorage
- localStorage对象可以将数据长期保存在客户端,除非人为清除。
- 1.存储:localStorage.setItem(key,value)如果key存在时,更新value
- 2.获取 localStorage.getItem(key)如果key不存在返回null
- 3.删除 localStorage.removeItem(key)一旦删除,key对应的数据将会全部删除
- 4.全部清除
localStorage.clear()
使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据注意
:localStorage存数的数据是不能跨浏览器
共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M。
IE低版本兼容
- 使用html5shiv可以解决ie低版本不兼容的问题,只需要在head中加上,当版本低于IE9时,浏览器会加载html5.js脚本,使得支持html5的新功能。
一定要是head部分
因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)。
<head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--> </head>
input的新成员
color,date,month,tel,time,week
email 用于检测是否为email格式
number 用于应该包含数值的输入域,可以设定对输入值的限定
range 用于定义一个滑动条,表示范围min, max, step
search 用于搜索,比如站点搜索或 Google 搜索
url 输入网址
表单新增属性
placeholder:输入框提示信息
autofocus:指定表单获取输入焦点
required:必填字段
pattern:正则验证
form:规定输入域所属的一个或多个表单(form属性所以用表单的id)
formaction:重写表单的action属性
formmethod:重写表单的method属性
autocomplete:on/off,是否自动补全之前提交的数据,以用于下一次输入建议
新增表单验证
novalidate:表单取消验证
formnovalidate:submit元素取消验证
setCustomValidity:自定义验证信息