学习笔记~1.4 HTML5新特性
1.4 HTML5新特性
笔者为正在学习web前端开发基础的菜鸟，计划先学习祖传三大件：HTML CSS及JS。写博客主要是为了加深记忆，以及把自己所学分享。本博客的内容主要为学习笔记，由于自学，其中我会借鉴网课老师课堂笔记再加入一些自己的见解，同时会分享一些学习过程中遇到的问题和解决方法。
正文
1.HTML5新特性（面试）
1）增加了audio和video音频播放，抛弃了Flash
2）新增了canvas画布（绘画，制作动画（如小游戏开发等））
3）地理定位
4）增加了离线缓存
5）硬件加速
6）Web Socket（全双工通信）
7）增加了本地存储
8）新增了一些语义化标签
2.网页布局标签
header:页首
nav:导航栏
aside:侧边栏
main:主体
section:区块
article:文章
footer:页尾
PS：这里在布局的时候一定要使用合适的布局标签，不要误导别人或是自己。
<html lang="en">
<head><meta charset="UTF-8"><title>网页布局标签title><style>.container{width: 80%;border: 1px solid black;margin: 10px auto;font-size: 18px;text-align: center;}.header, .footer{width: 100%;background-color: pink;color: white;line-height: 30px;}.main{overflow: hidden;padding: 0 200px;}.cosume{float: left;position: relative;height: 600px;}.nav, .aside{width: 200px;background-color: #999999;}.nav{margin-left: -100%;left: -200px;}.aside{margin-left: -200px;right: -200px;}.aritcle{width: 100%;background-color: #00fff7;}style>
head>
<body>
<div class="container"><div class="header">headerdiv><div class="main"><div class="aritcle cosume">articlediv><div class="nav cosume">navdiv><div class="aside cosume">asidediv>div><div class="footer">footerdiv>
div>
body>
html>
3.HTML5多媒体
1)audio播放音乐或音频。IE9以下的版本不支持。a)支持的格式.mp3/.ogg/.wavb)属性src:文件路径autoplay:自动播放loop:循环controls:控制条muted:静音preload:预加载（当使用autoplay时，preload自动失效）
2)video加载视频。IE9以下的版本不支持。a)支持的格式.mp4/.ogg/.webmb)属性src:文件路径autoplay:自动播放loop:循环controls:控制条muted:静音preload:预加载（当使用autoplay时，preload自动失效）width:宽度height:高度poster:海报
3)embed嵌入内容或加载插件。属性:src:文件路径width:宽度height:高度type:类型
4)canvas画布。是一个容器元素。注意：a.单独使用canvas没有什么意义，它必须结合Javascript使用。它的具体功能体现是通过Javascript体现现来的。b.canvas的宽高最好不要通过css实现，而是直接使用标签属性width和height实现。
4.HTML5常用属性
1）contentEditable将标签转换为可编辑状态。可用于所有标签。它的值有true/false。
2）hidden对元素进行隐藏。一般用来传值或当某个条件成立，执行内容显示。默认值为hidden。
3）data-*用于存储页面或应用程序的私有自定义数据。一般用于传值。
4）multiple规定输入域中可选择多个内容。用于表单组件中，如file/select。
5）required约束表单元互在提交前必须输入值。用于表单组件中，需要结合提交按钮使用。
6）pattern用于验证输入字段的模式。用于表单组件中，需要结合提交按钮使用。
5.表单组件
1）color：颜色
2）email：邮箱
3）tel：电话号码
4）url：网址
5）number：数字
6）range：范围
7）search：搜索
8）date：日期
9）datetime：日期时间
10）datetime-local：本一日期时间
11）year：年份
12）month：月份
13）time：时间
6.表单属性
1）formaction:修改action数据提交的地方
2）formenctype:修改表单请求的类型
3）formmethod:修改数据提交的方法
4）form:设置表单元素属于哪个表单
5）novalidate:不验证
7.input属性
1）autocomplete:自动完成用来帮助用户输入，每一次输入的内容，浏览器是否保存输入的值，以备将来使用。值有：
on/off，默认为on。为了保护敏感数据（如用户帐号、密码等），避免本地浏览器对它们不安全存储，一般需要关闭。
2）autofocus:自动获焦
3）step:步长
4）multiple:多选
5）pattern:正则匹配
6）placeholder:输入提示
7）required:必须输入
总结
HTML5增加的这些新特性，笔者觉得重点要掌握视频音频，如果要插入视频或者音频，最好在标签上直接添加宽高，防止闪烁，图片同理。还有一些很碎的知识点，大家不必记得很清晰，常用的熟练掌握，不常用的现学现用即可。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！