html+css笔记

图片格式
jpeg(jpg)适合保存一些颜色较多的图片
gif支持的颜色较少但是支持动图
png支持的颜色多，清楚，各方面都很好，但是图片大小比较大
webp谷歌新推出的，都比较好，内存也小，但是兼容性不好
base64可以让图片和网页一起加载，可以将图片转化成字符。
图片使用原则：
效果不一致，使用效果好的
效果一致，使用小的
网页加载流程
先加载网页结构，然后在加载外部资源，包括css,js，图片，各种插件等。
超链接，两个功能，两个属性，一个补充
默认样式：字体颜色，下划线，可以点击的
超链接：行内元素，特殊的行内元素，可以包裹任何元素，除了它自己
超链接可以是文字，图片，表格，各种内容
功能：1.点击可以从一个页面跳到另一个页面 _blank
2.在当前页进行跳转 _self
3.下载
属性：
1.href属性 指定跳转的地址 地址写法可以是绝对路径，相对路径
2.target属性 指定超链接打开的方式 新页面打开；在当前页面打开
补充
空连接的两种写法
<a herf="#"></a>
<a herf="javascript:;></a>
锚点功能（在当前页跳转）
1.去顶部 href里什么都没写，就可以实现,但规范来说，必须要写内容，一般写#
2.去任意位置，需要配合id 属性来实现
id属性 相当于给对应的标签打个标记
步骤
（1）给要去的位置，打个id属性值
（2）在超链接href里面，标明标记 语法：#id属性值
注意：id属性值
不能是数字开头
不能重复使用
最好不要是汉字
audio标签用来向页面引入一个外部的音频文件
video标签向页面中引入一个视频
src 引入路径
controls 控制用户是否可以播放
loop 循环播放

html：中文名字 超文本标记语言
css 层叠样式表
css语法：选择器 声明块
选择器：如何
css样式：名值对的结构 样式名：样式值
font-size:30px; 设置字体大小
color：red;设置字体颜色
background：black;设置背景颜色
第一种方式：内联样式、行内样式
在开始标签内，配置style属性，在style属性里写css样式
可以写多组css样式，样式与样式之间用；隔开
缺点:1.结构和样式耦合
2.不容易修改
总结：不建议使用
第二种方式：内部样式表
在head标签里配置style标签，通过选择器选中对应html结构
在花括号里面设置css声明块，可以写多组css样式
语法：选择器{css声明块}
缺点：不方便复用
总结：比较大的项目，或者重复使用率高的不建议使用
第三种方式：外部样式表
在html文件外新建一个.css文件，在css文件里
通过link标签，将html文件和css文件联系在一起
总结：大项目，重复率高，推荐使用
css选择器
1.元素选择器
作用：通过标签名选中对应的项目
2.id选择器
作用：通过id属性值，选中对应的结构
语法：#id属性值{}
注意：id属性值不能重复使用，不能以数字开头，不能是汉字
3.class选择器
作用：通过指定class属性值，选中对应的结构
语法：.class属性值{}
复合选择器：
交集选择器
作用：选中满足多个条件的元素
语法：选择器1 选择器2 选择器3......{}
注意：如果选择器中有元素选择器，元素选择器要放在第一位
并集选择器
作用：选中多个选择器对应的内容
语法：选择器1，选择器2，选择器3....{}
关系选择器
子元素选择器
作用：通过指定的父元素找到指定的子元素
语法：父元素>子元素{}
后代选择器
作用：通过指定的祖先元素找到指定的后代元素
语法：祖先元素 后代元素{}
下一个兄弟选择器
作用：通过指定兄找到紧挨着下一个兄弟
语法：兄+弟{}
选择所有兄弟选择器
作用：通过指定兄找到下面所有兄弟
语法：兄～弟{}
属性选择器
       1:属性选择器  通过指定的属性名或属性值来选中对应的内容
      语法：[属性名]{} 选择含有指定属性的元素
                 [属性名=属性值]{} 选择含有指定属性和属性值的元素
                 [属性名^=属性值]{} 选择属性值以指定值开头的元素  
                 [属性名$=属性值]{} 选择属性值以指定值结尾的元素
                 [属性名*=属性值]{} 选择属性值含有某值的元素
一 、伪类（不存在的类，特殊的类）
          -伪类不特指某一个元素，指的是一个元素的特殊状态
           -比如：第一个元素，被点击的元素，鼠标移入的元素···
          -特点：一般请情况下，使用：开头
             1、 :first-child  第一个子元素
             2、 :last-child   最后一个子元素
             3、 :nth-child()  选中第n个子元素
                   特殊值： n    所有的
                          2n或even  选中偶数
                          2n+1或odd  选中奇数
          —以上这些伪类都是根据所有的子元素进行排序

             1、:first-of-type  选中第一个子元素
             2、:last-of-type    选中最后一个子元素
             3、:nth-of-type()   选中第n个子元素
                  功能跟上面相似，
              不同的是，这是在同类型的子元素中去选择
二、:not() 否定伪类
将符合条件的元素从选择器中去除