HTML5学习(一)
一、什么是H5C3?
我们在之前学习的html是什么？
网页开发： HTML结构 4.0
CSS 样式 2.0
JS 行为 用户交互
那么我们现在学习的H5C3就是他们的升级版
HTML5是html4.0 升级版
结构 Html5 、样式 css3 、行为JS: API 都有所增强
从广义上来讲：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合。
H5范称是 HTML + CSS3 + JS
那么，她和我们之前学习的html有什么区别呢？
我们在上面已经说了它是html的升级版 那么肯定会新增很多东西来让我们更加方便的使用
二、语义标签
2.1.语法规范
现在我们在写代码的时候 双标签可以省略结束标签了（实际开发中要注意书写规范！不建议！）
<body><div>我是div<h1>我是h1
</body>2.2. 语义标签
语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。
先让我们来看一下传统的布局（样式省略）
<body><div class="header"></div><div class="nav"></div><div class="section"><div class="aside"></div><div class="articlr"></div></div><div class="footer"></div>
</body>那么我们再来看一下H5的网页布局
<body><header>头部</header><nav>nav</nav><section><aside>侧边栏</aside><article>文章</article></section><footer>页脚</footer></body>
传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页面具有语义性，但是不具有通用性。
HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。
2.2（1） 常用新语义标签
<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章 如文章、评论、帖子、博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 与 ul > li 做个比较
<mark> 表示标记 (文本有背景颜色,表示标记)
<progress> 表示进度
<time> 表示日期 ( 包裹时间 )
三、表单
3.1输入类型
伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
email 输入email格式
tel 手机号码
url 只能输入url格式
number 只能输入数字
search 搜索框
range 范围 滑动条
color 拾色器
time 时间
date 日期 不是绝对的
datetime-local 时间日期
month 月份
week 星期
我们想使用这些新的表单类型只需要把它写在type类型里就可以使用了
3.2表单元素
3.2（1）智能表单（输入指定文本提供备选）
数据列表与input 配合使用
<input type="text" list="aaa"><datalist id="aaa"><option>basdkj1</option><option>basdkj1</option><option>basdkj1</option><option>basdkj1</option><option>basdkj1</option></datalist>
3.2（2）进度条
<!-- 进度条 --><progress max="100" value="20"></progress>进度条里面有两个参数
max表示完成的值 value表示进程的当前值
3.2（3）度量器（不建议用作进度条）
<!-- 度量器 --><meter value="50" min="0" max="100" low="60" high="80"></meter>max和min规定范围的最大最小值
high和low规定被视为高和低的值的范围
value规定度量的当前值（必须要有！）
3.3 表单属性
placeholder 占位符
autofocus 获取焦点 (打开页面焦点自动锁定在当前目标)
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)需要放在表单内，同时加上name属性，同时成功提交，默认是autocomplete="on" 关闭autocomplete="off"(记录上次输入的信息,e-mail默认不会记录)form 指定表单项属于哪个form，处理复杂表单时会需要novalidate 关闭验证，可用于<form>标签 (写在form,不会对表单进行验证)required 必填项 (不填写无法提交表单)pattern 正则表达式 验证表单手机号:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$"<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- novalidate 关闭验证 需要写在forml里 --><form action="" novalidate id="aaa"><!-- placeholder 占位符 --><!-- autofocus 自动获取焦点 --><!-- autocomplete="off" 阻止搜索记忆(上次输入的信息) 默认开启 -->用户名:<input type="text" name="username" placeholder="请输入用户名" autofocus autocomplete="off"><br><!-- pattern="" 正则验证 -->手机号: <input type="tel" pattern="正则验证" name="" id=""><br> 邮箱: <input type="email" name="" id=""><input type="submit" name="" id=""><!-- multiple 文件多选 --><input type="file" multiple></form><!-- form作为属性 指定表单 --><input type="text" form="aaa"><input type="text" placeholder="lalala" autofocus><input type="file" multiple>
</body></html>3.4表单事件
oninput 用户输入内容时触发，可用于移动端输入字数统计(js直接调用)
oninvalid 验证不通过时触发(js直接调用)
<body><form action=""><input type="text" name="" id="inp1"><input type="email" name="" id="inp2"><input type="submit" name="" id=""></form><script>var inp1 = document.getElementById('inp1')var inp2 = document.getElementById('inp2')var num = 0// oninput 用户输入内容时触发 可以用于计算输入字符inp1.oninput = function () {num++inp1.value = numconsole.log(num);}// oninvalid 验证不通过时触发 js调用inp2.oninvalid = function () {// setCustomValidity("") 修改提示语 自定义提示信息this.setCustomValidity('请输入正确的')console.log(1)}</script>
</body>