2020.4.10.第十八天

<!--

    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:表单里面新增标签

        <datalist>    做提示信息的  必须和list属性结合使用

            <option value="">      可以追加一个label属性

        </datalist> 


        <output for="关联的是要做运算的元素的id名称"><output>  做输出的(计算结果的输出)

-->

<!-- 

    css3 存在一些浏览器不能识别的语法规则  ( 浏览器前缀 )

    为了考虑兼容: 低版本  高版本

    渐进增强\优雅降级

-->

<!-- 

    渐进增强:举例说明:

        需求: 一个贫穷的小山村,为了能让所有的村民都能 "照明"!!!

        方案:

            通电 -> "照明"

            根据现实情况: 小山村地势\交通情况, 不能短时间通电

            先保证最基本的业务需求 ->  "照明"  -> 每户发蜡烛(用户体验不好)

            然后保证基本功能实现之后 -> 通电 ( 提升用户体验度 )

        渐进增强过程:先从最基本的版本开始,保证最基本的功能的实现,然后针对性的考虑高版本,提升用户体验.

    优雅降级:举例说明:

        需求: 一个贫穷的小山村,为了保障人均GDP的增长,缩小贫富差距

        方案: 劫富济贫  ->  打土豪.

        优雅降级: 开始就构造特别完美的需求方案, 再针对性的 例如:通过减少用户体验,向低版本过渡.

-->

<!-- 

    css属性选择器:  通过html属性选择对应的标签

        1 选择符[属性名]{  }          当一个元素有当前html属性值名称则匹配成功.

        2 选择符[属性名="属性值"]      属性和属性名都匹配成功才做选中

        3 选择符[属性~="属性值"]      当前属性的属性值为一个词列表(多个单词以空格隔开) ,  只要有当前指定的词就能匹配.

        4 选择符[属性^="字符"]      当这个属性值开头的时候被匹配(只要开头匹配就行)

        5 选择符[属性$="字符"]      当这个属性值结尾的时候被匹配(只要结尾匹配就行)

        6 选择符[属性*="字符"]      只要属性值里面包含这个字符就能匹配

        7 选择符[属性|="字符"]      属性值仅有当前字符 或者 以字符-开头的 (left-con)

-->

<!-- 

    情景1:

        狮子园里面的狮子是散养状态(到处都是,没有规则),

        如果想区分每一只,必须给每一只取名字.

        情景1出现的问题:需要起很多名称区分


    情景2:

        如果狮子训练有素,每次出来的时候必须排队,

        既然排队,产生一个虚拟的编号,

        然后通过第几只进行查找.

    情景3:

        在一群狮子里面有其他动物,

        选中狮子的前提 先把其他的动画排除掉

        然后再通过第几只进行查找


-->

<!-- 

    结构性伪类选择器 : 通过第几个进行查找

        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选择

-->

<!-- 

    补充:

        :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

-->

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容