一. H5的概念
H5代表着互联网技术发展的一个阶段,是一套前端技术的统称(移动端开发)
包括 : html5 css3 新增 js API
二. H5语法规范
更简洁:
更宽松: 单标签 省略 关闭符号
双标签 省略 结束标签
html body head 完全省略
meta标签的作用 L描述网页信息
三.语义标签
header 头部 footer 底部 nav 导航
section 区域 article 文章 aside 侧边栏
好处:有语义
对于html5的语义标签的兼容问题,可以通过引入htmlshiv.min.js来解决:
条件注释: 满足条件就是执行,不满足就是一个普通的注释, 只有ie能识别
<!--
less 小于
equal 等于
great 大于
than 比较
-->
<!--[if lt ie 9]>
<script src="./html5shiv.min.js"></script>
<![endif]-->
四.表单
1.表单类
部分类型是针对移动端生效的,具有一定的兼容性
| 类型 | 使用示例 | 含义 |
| <input type="email"> | 输入邮箱格式 | |
| tel | <input type="tel"> | 输入手机号码格式 |
| url | <input type="url"> | 输入url格式 |
| number | <input type="number"> | 输入数字格式 |
| search | <input type="search"> | 搜索框（体现语义化） |
| range | <input type="range"> | 自由拖动滑块 |
| color | <input type="color"> | 拾色器 |
| time | <input type="time"> | 时间 |
| date | <input type="date"> | 日期 |
| datetime | <input type="datetime"> | 日期时间 |
| month | <input type="month"> | 月份 |
| week | <input type="week"> | 周 |
2.表单属性
| 属性 | 用法 | 含义 |
| placeholder | <input type="text" placeholder="请输入用户名"> | 占位符 |
| autofocus | <input type="text" autofocus> | 自动获得焦点 |
| multiple | <input type="file" multiple> | 多文件上传 |
| autocomplete | <input type="text" autocomplete="off"> | 自动完成 |
| required | <input type="text" required> | 必填项 |
五.DOM扩展
1.获取元素的新方法
通过css选择器获取元素,返回符合要求的是一个元素,返回的的对象
document.querySelector('css选择器'); 假如有一堆的div,css选择器下的是div,那么只会返回第一个div
通过css选择器获取元素,返回伪数组
document.querySelectorAll('css选择器')
2.类名操作(有兼容性问题)
添加类: node.classList.add("classname");
移出类: node.classList.remove("classname");
切换类: node.classList.toggle("classname");
判断是否有指定的类: node.classList.contains("classname");
3.自定义属性
在html5中我们可以定义属性,其格式为:data-xxx="" ;例如 data-info = "自定义属性"
通过Node,dataset['info']我们可以获取自定义的属性值
Node.dataaet是以对象形式存在的
<div data-name="zs"></div>
<script>
//获取data-name属性的值
var divName = document.querySelector('div').dataset['name'];
</script>六.CSS3 的现状
1.浏览器支持程度比较好,需要添加私有前缀
2.移动端支持优于pc端
使用遵循 渐进增强原则 : 让低版本可以有基本的额功能,版本的浏览器具有更好的用户体验
七,选择器
1.关系选择器
| 语法 | 描述 | 示例 |
| s1>s2 | 子代选择器,选择div的子级中所有的p标签 | div>p |
| s1 s2 | 后代选择器,选择div后代中所有的p标签 | div p |
| s1+s2 | 相邻选择器,选择器紧跟着div后面的p标签 | div+p |
| s1~s2 | 兄弟选择器,选择div后面的所有兄弟元素中的p标签 | div~p |
2.属性选择器
| 语法 | 描述 | 示例 |
| E[attr] | 选择拥有attr属性的元素 | li[title] |
| E[attr="val"] | 选择拥有attr属性,并且值为val的元素 | li[title="aa"] |
| E[attr^="val"] | 选择拥有attr属性,并以为val开头的元素 | li[title^="aa"] |
| E[attr$="val"] | 选择拥有attr属性,并以为val结尾的元素 | li[title$="aa"] |
| E[attr*="val"] | 选择拥有attr属性,并包含val的元素 | li[title*="aa"] |
3.伪类选择器
| 语法 | 描述 | 示例 | |
| E:first-child | 匹配的是li的父元素ul的一个子元素 | li:first-child | |
| E:last-child | 匹配的是li的父元素ul的最后一个子元素 | li:last-child | |
| E:nth-child | 匹配的是li的父元素ul的指定下标的子元素(从1开始) | li:nth-child(1) | |
| E:nth-child(odd) | 匹配的是li的父元素ul中下标为奇数的那些子元素 | li:nth-child(odd) | |
| E:nth-child(2n) | 匹配的是li的父元素ul中下标为偶数的那些子元素 | li:nth-child(2n) |
4.其他选择器
:focus 查找获取到焦点的文本框
:checked 获得选中的checkbox
:disabled 获得不可用的框
:enabled 获得可用的框
:not(selector) 选择不匹配selector的那些元素
:target 获取当前活跃的锚点链接
5.伪元素选择器
E::before 在元素子节点的最前面添加一个内容
E::after 在元素子节点的最后面添加一个内容
注意事项: 1.必须有content属性,可以在content属性中写入文本内容
2.默认是行内样式,无法设置宽高,需要指定display:block;或者position:absolute
E::first-line 选中第一行
E::first-letter 选中第一个字
E::selection 被选中的区域
