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
查看所有更新日志
