1：新增加的type类型
email
url
number
range
color
search
time 时间类型
month 月份
week 周
datetime-local 选取本地时间
date 只有年月日
2: 新增的html属性
min
max
required 如果表单没有输入内容的情况下，禁止提交
step 确定一个法定值eg : 3 -6 -3 0 3 6 9
autocomplete 自动提示信息 属性值 on/off
placeholder 文本框的提示信息
autofocus 自动聚焦
pattern 属性值是一个 正则表达式(高效的字符串处理规则)
novalidate 取消验证
multiple 选择（上传）多个 \ 输入框里面把逗号分隔的当作两个提交的信息
list属性 必须和datalist 标签结合使用,绑定的datalist的id名称
3:表单里面新增标签
做提示信息的 必须和list属性结合使用
可以追加一个label属性
做输出的(计算结果的输出)
css3 存在一些浏览器不能识别的语法规则 ( 浏览器前缀 )
为了考虑兼容: 低版本 高版本
渐进增强\优雅降级
渐进增强:举例说明:
需求: 一个贫穷的小山村,为了能让所有的村民都能 “照明”!!!
方案:
通电 -> “照明”
根据现实情况: 小山村地势\交通情况, 不能短时间通电
先保证最基本的业务需求 -> “照明” -> 每户发蜡烛(用户体验不好)
然后保证基本功能实现之后 -> 通电 ( 提升用户体验度 )
渐进增强过程:先从最基本的版本开始,保证最基本的功能的实现,然后针对性的考虑高版本,提升用户体验.
优雅降级:举例说明:
需求: 一个贫穷的小山村,为了保障人均GDP的增长,缩小贫富差距
方案: 劫富济贫 -> 打土豪.
优雅降级: 开始就构造特别完美的需求方案, 再针对性的 例如:通过减少用户体验,向低版本过渡.
css属性选择器: 通过html属性选择对应的标签
1 选择符[属性名]{ } 当一个元素有当前html属性值名称则匹配成功.
2 选择符[属性名=“属性值”] 属性和属性名都匹配成功才做选中
3 选择符[属性~=“属性值”] 当前属性的属性值为一个词列表(多个单词以空格隔开) , 只要有当前指定的词就能匹配.
4 选择符[属性^=“字符”] 当这个属性值开头的时候被匹配(只要开头匹配就行)
5 选择符[属性$=“字符”] 当这个属性值结尾的时候被匹配(只要结尾匹配就行)
6 选择符[属性*=“字符”] 只要属性值里面包含这个字符就能匹配
7 选择符[属性|=“字符”] 属性值仅有当前字符 或者 以字符-开头的 (left-con)
结构性伪类选择器 : 通过第几个进行查找
h2:first-child { } 选中 h2所在 整个 集合里面 第一个h2
h2:last-child { } 选中 h2所在 整个 集合里面 最后一个h2
h2:nth-child(第几个){} 通过第几个进行查找 (第几个) even odd 2n 2n + 1
h2:nth-last-child(倒数第几个){ }
h2:only-child { } 当前集合里面只有一个h2才会被选中
h2:first-of-type { } 选中 h2所在 整个 集合里面 第一个h2
h2:last-of-type { } 选中 h2所在 整个 集合里面 最后一个h2
h2:nth-of-type(第几个){} 通过第几个进行查找 (第几个) even odd 2n 2n + 1
h2:nth-last-of-type(倒数第几个){ }
h2:only-of-type { } 当前集合里面只有一个h2才会被选中
总结: 分析:当前同级元素是否为一类,如果非一类的情况下 选用of-type选择
情景1:
狮子园里面的狮子是散养状态(到处都是,没有规则),
如果想区分每一只,必须给每一只取名字.
情景1出现的问题:需要起很多名称区分
情景2:
如果狮子训练有素,每次出来的时候必须排队,
既然排队,产生一个虚拟的编号,
然后通过第几只进行查找.
情景3:
在一群狮子里面有其他动物,
选中狮子的前提 先把其他的动画排除掉
然后再通过第几只进行查找
补充:
:root{} 选中的是根元素
选择符:empty{} 当一个元素没有任何内容或者任何子元素的时候被选中
:enabled 表单元素可用的时候执行的样式
:disabled 表单元素禁用的时候执行的样式
:checked 表单选中(单选 多选按钮选中的时候)
::selection 文本选中的时候的样式.
E**:link**
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E**:visited**
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E**:active**
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus
用户行为选择器
选择匹配的E元素，而且匹配元素获取焦点
层级选择器：
1：子选择器
父元素选择器>子元素选择器 选中只是父元素最近一层的子元素。
2:兄弟元素选择器
元素1+元素2 同级 选中元素1同级离得最近的下面的兄弟元素
3:通用选择器
元素1~元素2 同级 选中元素1同级下面的所有的元素2
1：结构性伪类：
h2:first-child { } 选中 h2所在 整个 集合里面 第一个h2
h2:last-child { } 选中 h2所在 整个 集合里面 最后一个h2
h2:nth-child(第几个){} 通过第几个进行查找 (第几个) even odd 2n 2n + 1
h2:nth-last-child(倒数第几个){ }
h2:only-child { } 当前集合里面只有一个h2才会被选中
h2:first-of-type { } 选中 h2所在 整个 集合里面 第一个h2
h2:last-of-type { } 选中 h2所在 整个 集合里面 最后一个h2
h2:nth-of-type(第几个){} 通过第几个进行查找 (第几个) even odd 2n 2n + 1
h2:nth-last-of-type(倒数第几个){ }
h2:only-of-type { } 当前集合里面只有一个h2才会被选中
2：目标伪类：
：target
3: 状态伪类：
:enabled 表单元素可用的时候执行的样式
:disabled 表单元素禁用的时候执行的样式
:checked 表单选中(单选 多选按钮选中的时候)
::selection 文本选中的时候的样式.
4：动态伪类：
E**:link**
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E**:visited**
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E**:active**
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus
用户行为选择器
选择匹配的E元素，而且匹配元素获取焦点
今天老师带领我们学习新课程， 1：结构性伪类： 2：目标伪类： 3: 状态伪类：4：动态伪类： 感觉老师讲的太快了，基础太差有些跟不上，这几天外出办事课程跟不上了，听不懂老师讲的了有点怀疑人生了。希望能从头再学一遍多给些练习的时间。老师的期望太高了，我现在只停留在能听懂的阶段，只能比着老师的案例写，问题也归纳不出来，只感觉脑子里一团浆糊。虽然也能听得懂， 但是思维逻辑跟不上，案例方面还有数学运算减行高减间距不太明白等等。到自己单独作的时候，却是有一种无从下手的感觉。也不知道能不能学会这一行，心理也是有一点担忧。只能硬着头皮学下去实在不行的话就留级，好想线下上课主要是家里有琐事打扰，想要全身心投入学习中！因为我想要改变以后的生活，不得不砥砺前行。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
