对HTML的全新认识

对HTML的全新认识

1. 对HTML的基础更细化的了解

• 对于html作为一个解释型语言的认知更加完善了，从使用方式上了解html为什么可以直接被浏览器解析。
  另一方面对原有的html基础有了进一步的巩固，关于标签，比如块级别标签与行级别标签的区别，以及他们各自包含的标签的名称，使用方法和特点。

2. 对CSS的进一步学习

(1)CSS的基础技术入门

• 在这个部分重新对已经学习过的css进行复习，对css的作用语法用法进行了回顾，同时在此基础上对css的使用案列进行分析（如：可以使用css完成的动画效果不使用js等；）明确了css更加美观且方便进行开发的层次结构。

(2)CSS选择器的细化学习

• 在这一部分中我对css的选择器有了更全面的认识，也是对HTML全新认识中收获最多的一部分

• 过滤器的类型有

• 1）核心选择器

•   1.标签（元素）选择器
       标签（元素）{
          
       }
  

•   2.id选择器
       #one {}    
       <div id="one">one</div>
       <div id="two">two</div>
  

•   3.class选择器
       .first {}
        <div id="one" class="first">one</div>
        <div id="two" class="first">two</div>
        <div id="three" class="first">one</div>
  

•   4.并且选择器
      div.first {}
      p#five {}
  

•   5.或者选择器
     div,.first {}
  

•   6.普遍选择器
    *
  

• 2）层次选择器

•  1.子代选择器
      .top_nav > ul > li
       选中class为top_nav的元素的直接后代ul元素的直接后代li元素
  

•  2.后代选择器
      .top_nav li
  

•  3.下一个项目选择器
      .top_nav li + *
  

•  4.之后所有项目选择器
     .top_nav li ~ *
  

• 3）过滤器

•  1.属性过滤器
      selector[name] 已选择到的元素具有name属性
      selector[name=v] 已选择到的元素具有name属性，并且name属性的值为v
      selector[name^=v] 已选择到的元素具有name属性，并且name属性的值以'v'开头
      selector[name$=v] 已选择到的元素具有name属性，并且name属性的值以'v'结尾
      selector[name*=v] 已选择到的元素具有name属性，并且name属性的值中包含了'v'
  

•  2.伪类过滤器
      selector:first-child  过滤出已选择元素中的是第一个孩子的元素
      selector:last-child  过滤出已选择元素中的是最后一个孩子的元素
      selector:nth-child(2)  过滤出已选择元素中的是第二个孩子的元素
      selector:nth-child(even) 过滤出已选择元素中的是双数孩子的元素
      ……  
  

•  3.伪元素过滤器（特点： 可以产生出来一个虚拟元素（行内元素））
       div::before {
       }
       div::after {
       }