H5C3 学习(一) ---- 新增表单属性,C3伪类选择器

一. 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.表单类

部分类型是针对移动端生效的,具有一定的兼容性

H5表单类型

类型	使用示例	含义
email	<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.表单属性

H5表单属性

属性	用法	含义
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  被选中的区域