1. 取消了过时的显示效果标记 <font></font> 和 <center></center>等...
2. 新语义标签的引入
3. 新表单元素引入
4. canvas标签(图形设计)
5. 本地数据库(本地存储)
6. 一些API
pc端浏览器支持不是特别友好,造成用户体验不佳(随着移动端的发展不断扩大和win10(ie10)的大量推广,这一缺点将被无限缩小)
HTML5新语义标签
HTML5新标签的数量在25个左右具体也没有找到详细的资料来查看(每个网站显示的数量都不一样)
另外推荐大家在使用新语义标签的时候尽量每个独立的页面只使用一个标签作为包裹,语义化的作用就是seo(具体可百度),就是让搜索引擎知道网上到底有些什么,如header 、main、footer标签等等,当然你也可以写100个!
以下总结出HTML5常用的标签:
以下为菜鸟教程对html5新标签的注解 http://www.runoob.com/html/html5-new-element.html
<video>
<source src="code/多媒体标签/trailer.mp4">
<source src="trailer.ogg">
<source src="trailer.WebM">
</video>
◆form属性:
autocomplete=on | off 自动完成
novalidate=true | false 是否关闭校验
◆ input属性:
autofocus : 自动获取焦点
<input type="text" list="abc"/>
<datalist id="abc">
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
</datalist>
multiple: 实现多选效果
placeholder : 占位符 (提示信息)
required:必填项
以前获取节点通过
document.getElementById("ID名称")这些还有className,name,tagname等等方式获取返回当前节点
H5新增的节点获取方法只有两个
document.querySelector("选择器"); 返回节点
document.querySelectorAll("选择器"); 返回数组
可以完美的代替以前或者节点的方式,如果无需兼容ie10以下的话
H5中对class的操作
classList.add("类名")
添加class类名 不返回任何值 如果你把它赋值给一个变量 得到结果是undefined
classList.remove("类名"); 删除
classList.contains("类名");
检查has className 是否存在返回布尔值 即true and false
classList.toggle("active");
查询active 是否存在,存在就删除,不存在就添加 ,省去了if判断!返回布尔值如果执行多条 即 true false true false.
自定义属性 (小案例分析体验自定义属性) data-自定义属性名
console.log('Hello World')
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。