前端入门简介

1.基本概念

1.1：W3C的建立

伯纳斯李1994年建立万维网联盟（W3C）

W3C的出现为了制订网页开发的标准，以使同一个网页在不同的浏览器中有相同的效果。

所以，我们需要制订我们编写的网页都需要遵循W3C的规范！

1.2:网页的结构思想

 

• 结构（骨架）：HTML用于买哦书页面的结构

• 表现（皮肤）：CSS用于控制页面种元素的样式

• 行为（交互）：JavaScript用于响应用户操作

1.3常见的字符集

1.3.1：

• ASCII

• ISO-8859-1

• GB2312

  GB2312（信息交换用汉字编码字符集）是由中国国家标准总局1980年发布。基本集共收入汉字6763个和非汉字图形字符682个。GB 2312的出现，基本满足了汉字的计算机处理需要，它所收录的汉字已经覆盖中国大陆99.75%的使用频率。

• UTF-8

  UTF-8（8位元，Universal Character Set/Unicode Transformation Format）是针对Unicode的一种可变长度字符编码，也叫万国码、统一码。它可以用来表示Unicode标准中的任何字符，而且其编码中的第一个字节仍与ASCII相容，使得原来处理ASCII字符的软件无须或只进行少部分修改后，便可继续使用。

• UTF-16

  UTF-16是Unicode的其中一个使用方式。UTF-16比起UTF-8，好处在于大部分字符都以固定长度的字节（2字节）储存，但UTF-16却无法兼容于ASCII编码。

• Unicode

  Unicode只是一组字符设定或者说是从数字和字符之间的逻辑映射的概念编码，但是它并没有指定代码点如何在计算机上存储。UCS4、UTF-8、UTF-16（UTF后的数字代表编码的最小单位，如UTF-8表示最小单位1字节，所以它可以使用1、2、3字节等进行编码，UTF-16表示最小单位2字节，所以它可以使用2、4字节进行编码）都是Unicode的编码方案。UTF-8因可以兼容ASCII而被广泛使用。

  如果把各种文字编码形容为各地的方言，那么Unicode就是世界各国合作开发的一种语言。

图片格式：

1. jpg：

   支持的颜色比较丰富，不支持透明度

   一般用来显示照片

2. gif

   支持他颜色较少，支持简单透明，支持动图

   呀白色单一的图片，动图

3. png

   支持颜色丰富，支持复杂透明，不支持动图

   颜色丰富，复杂透明图片（主要用于网页）

4. webp

   谷歌新推出的专门用来表示网页中的图片的一种格式

   具备其他图片的所有优点，文件还小

   emmet语法：

       使用类似于 CSS 选择器的语法来描述生成的树和元素属性中的元素位置（快速构建html结构的快捷语法）

   - 嵌套运算法

       1. 子代操作符：>

           例：div>div>p 表示div下有个子代div，子代div下有个p标签 

       2. 兄弟操作符：+

           例：div>div+p 表示div下有子代div和p标签，子代div和p标签属于同级

       3. 返回上级操作符：^

           例：div>div+p^div 表示一个div下有子代div和p标签和一个div标签，最后一个div与第一个div是同级的

       4. 乘法操作符：*

           例：ul>li*2 表示ul标签下有两个li子标签

       5. 分组操作符：()

           例：div>(header>ul>li*2>a)+footer>p 表示div下有header和footer两个同级标签，即包含两组

   - 属性操作符

       1. id和class分别使用“#”和“.”表示，若是class属性不唯一时，可并列书写

           例：div#header>p.news*2 表示div有id为header，p标签有class为new

               div#header>p.news.new-tip 表示表示div有id为header，p标签有class为new和new-tip

       2. 定制属性：[]

           例：a[target='' title='hello world']*2

       3. 数值计算运算符：$（按一定的数字进行排列）

           例：div>ul>li.item-$*3 表示li的class有三个，分别为：item-1，item-2，item-3

               div>ul>li.item-$@3*3 表示li的class属性的数字从指定数字开始

       4. 本文操作符：{}

           例：div#news>p{Hello,World!} 表示p标签的内容是Hello,World

2.css

2.1:值

像素单位 px

相对单位em

相对父元素的文字大小

相对单位rem

相对html根元素的文字大小

2.2：选择器

• 基本选择器

  通用选择器：

  • 作用：选中页面中的所有元素

  *{
      color:red;
   }

  id选择器：

  • 作用：根据元素的id属性值选中一个元素

   #red{
      color:red;
   }

  class类选择器

  • 作用：根据元素的class属性值选中一组元素

  .blue{
      color:blue;
   }
   .size{
      font-size: 20px;
   }

  class是一个标签的属性，它和id类似，不同的是class

  1. 可以重复使用

  2. 可以通过class属性来为元素分组

  3. 可以同时为一个元素指定多个class属性

  标签选择器（元素选择器）

  • 作用：根据标签名来选中指定的元素

  p{
      color:red;
   }
   ​
   h1{
    color:green;  
   }

• 复合选择器

  后代选择器

  • 选中指定元素内的指定后代元素

   div span{
      color:skyblue;
   }

  子代选择器

  • 作用：选中指定父元素的指定子元素

  div.box > p > span{
      
   }

  并集选择器

  • 作用：同时选择多个选择器对应的元素

   #b1,.p1,h1,span,div.red{}

   h1,span{
      color:green;
   }

  结构伪类选择器

  伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.…

  伪类一般情况下都是使用:开头

  :first-child第一个子元素 :last-child最后一个子元素 :nth-child() 选中第n个子元素 n：第n个，n的范围0到正无穷 2n或even：选中偶数位的元素 2n+1或odd：选中奇数位的元素 以上这些伪类都是根据所有的子元素进行排序的

  :first-of-type 同类型中的第一个子元素 :last-of-type同类型中的最后一个子元素 :nth-of-type()选中同类型中的第n个子元素

  /* ul下所有li，黑色 */
   ul>li {
    color: black;
   }
   ​
   /* ul下第偶数个li，黄色 */
   ul>li:nth-child(2n) {
    color: yellow;
   }
   ​
   /* ul下第奇数个li，绿色 */
   ul>li:nth-child(odd) {
    color: green;
   }
   ​
   /* ul下第一个li，红色 */
   ul>li:first-child {
    color: red;
   }
   ​
   /* ul下最后一个li，黄色 */
   ul>li:last-child {
    color: orange;
   }
  :link 未访问的链接
  
  :visited
  
  
  
  已访问的链接
  
  由于隐私的原因，所以visited这个伪类只能修改链接的颜色
  
  :hover 鼠标悬停的链接
  
  :active 鼠标点击的链接
  
   /* unvisited link */
   a:link {
   color: red;
   }
   ​
   /* visited link */
   a:visited {
   color: yellow;
   }
   ​
   /* mouse over link */
   a:hover {
   color: green;
   }
   ​
   /* selected link */
   a:active {
   color: blue;
   }