HTML5
约 584 字大约 2 分钟
2025-05-28
认识HTML5
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。
IE8及以下版本不支持html5，需要引入html5shiv.js文件
<!-- 条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->- l：less 更小
- t：than 比
- e：equal等于
- g：great 更大
语义化标签
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>表单
表单类型
email只能输入email格式。自动带有验证功能。tel手机号码。url只能输入url格式。number只能输入数字。search搜索框range滑动条color拾色器time时间date日期datetime时间日期month月份week星期
表单元素
注意
只列出重要的
<input type="text" list="cv">
<datalist id="cv">
<option>义务教育</option>
<option>高中</option>
<option>本科</option>
<option>本科以上</option>
</datalist>表单属性
提示
属性名和属性值一致时，可简写，比如checked
placeholder占位符（提示文字）autofocus自动获取焦点checked多选框设置选中状态multiple文件上传多选或多个邮箱地址autocomplete自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)form指定表单项属于哪个form，处理复杂表单时会需要novalidate关闭默认的验证功能（只能加给form）required表示必填项pattern自定义正则，验证表单。
表单事件
oninput()：用户输入内容时触发，可用于输入字数统计。oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。
DOM操作
获取元素
- document.querySelector("selector") 通过CSS选择器获取符合条件的第一个元素。
- document.querySelectorAll("selector") 通过CSS选择器获取符合条件的所有元素，以类数组形式存在。
类名操作
- Node.classList.add("class") 添加class
- Node.classList.remove("class") 移除class
- Node.classList.toggle("class") 切换class，有则移除，无则添加
- Node.classList.contains("class") 检测是否存在class
更新日志
2025/6/11 14:49
查看所有更新日志