html和css概括总结

一、HTML学习

Ⅰ、HTML常见元素和理解

head区元素：页面中的一些资源或者信息描述，不会直接显示在页面中
body区元素：能够在页面上显示出来的内容

2.png

1. 列表标签

1.1 无序列表

属性：

type:

1. circle 空心圆
2. disc圆点
3. square正方形

     
项目一
     
项目二
     
项目三

1.2 有序列表

属性：

type类型：

1. 1 阿拉伯数字
2. a 小写英文字母
3. A 大写英文字母
4. i 小写罗马数字
5. I 大写罗马数字

start:

序号的起始位置（比如：下面代码中 2 ，就是从 b 开始）

      
时间
     
金钱
     
权利
     
自由

1.3 自定义列表

---用来解释名词的列表
标签解释：

dl: definition-list 定义自定义列表
dt: definition-title 定义自定义项目
dd: definition-description 定义自定义描述
代码演示：

         

            
水果
            
苹果
            
香蕉
            
橘子
            
……
            
动漫
            
斗罗大陆
            
斗破苍穹
            
魔道祖师
            
……
        
        

            
☆ 无序列表 
不以数字为开始，而是使用一个符号作为分项标记的列表。
            
☆ 有序列表 
使用数字编号，分项带有顺序性质的列表。
            
☆ 定义列表 
用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。
        

Ⅱ、表格table

    

        
表格
        

            

                

                    
姓名
                    
性别
                    
爱好
                
            
            

                

                    
小刘
                    
男
                    
唱歌
                
                

                    
小徐
                    
女
                
                

                    
小张
                    
男
                    
吹牛
                
                

                    
男
                    
吹牛
                
            
        
    

tt.png

2. html大纲

工具：h5o: (https://h5o.github.io/)
可以显示出HTML文档的结构，所以要求HTML结构要划分合理

3. HTML版本

image.png

4. 嵌套关系

image.png

解读：
p标签是块级元素，不能在包含块级元素
a标签是行内元素，却可以包含块级元素
a为什么可以包含块级元素呢？
--因为a标签在解读的时候是transparent， 不参与解读，就是当作不存在的。下面代码解读时相当于body中直接包了一个div

// 合法的

  
啦啦啦

// 不合法，因为a解读的时候是被自动去掉的，所以下面相当于p包裹了一个div,解读时会出错

  
啦啦啦

5. HTML面试真题

image.png

image.png

image.png

说明：

1. 新的语义化元素，比如section，artical, header, main, footer ,,
2. 表单增强，比如input里面的一些新特性，表单验证功能等

3. 新的API

   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   
   image.png
   
   
   image.png

二、css学习

1. 非布局样式

1.1 字体

1.1.1 字体族：每个字体族都是一堆有相同特征的字体，比如衬线体和非衬线体。
注意：每一个字体族都包含很多的字体，当我们指定某个字体族的时候，系统会为我们选出这个字体族中的某个字体，但不能保证是什么字体

serif: 衬线体，字体周围会有一些装饰性的弯弯，勾勾，小横线……，比如宋体
sans-serif: 非衬线体，就是没有什么装饰性的东西，比如黑体
monospace: 等宽字体，就是每个字母所占据的宽度都是一样的
cursive: 手写体
fantasy: 花体

1.1.2 多字体fallback: 可以指定一系列的字体，如果前面的字体找不到，会依次往后面找
很多的网站都会有很长的字体，这是因为他们要去适配不同的平台，因为每个平台下都有自己独特的，显示最好的字体，而且我们要把范围小的字体尽量放到前面
比如：
font-family: "PingFang SC", "Microsoft Yahei", monospace;
mac的默认字体是PingFang SC，但是mac用户安装office时安装上了Microsoft Yahei字体，所以如果微软雅黑写在前面，那么会有一部分的mac用户会使用微软雅黑来渲染页面，而在mac上，PingFang SC是显示最好的
1.1.3 网络字体、自定义字体: 使用网络字体，或者使用自定义字体
注意：使用网络字体，注意跨域的问题

// 引用本地下载好的字体文件


    
你好 hello world

引用外部网站为我们提供的字体css

// css里面已经包含了字体的定义，名字



    
你好 hello world

1.1.4 iconfont: 字体图标
---阿里巴巴矢量字体图标库

1.2 背景

1.2.1 背景渐变

背景渐变画出的图：

111222.png

1.2.2 背景图

1.2.3 注意要点

1. 背景是可以相互叠加的，所以纯色背景，线性渐变背景，中心发射背景通过叠加可以做出很多酷炫的效果
2. background-size不只是可以调节背景图片的尺寸，还可以调节渐变背景的尺寸。
3. 背景图片与纯色背景叠加默认图片在上，背景图片默认平铺。
4. 精灵图的使用就是因为背景图片可叠加这一重要特性。精灵图的好处：可以减少http请求的次数，页面响应速度快。
5. 多分辨率适配：原理就是本来一个像素显示改成2到3个像素共同显示，就是把背景图缩小2到3倍
6. base64的使用：把一张图片的url转换成base64编码，就相当于把图片放在了css文件中，减少了单独请求图片的http次数，不过转码之后css文件体积会变大，加载css文件的时间会变长，所以一般对小图片才实行base64编码。

1.3 边框

1.3.1 边框的线型，大小，颜色

1.3.2 边框背景图

---将图片作为边框使用

1.3.3 边框衔接（三角形）

原理：边框的衔接是斜切的

.c3 {
            width: 0;
            height: 200px;
            border-bottom: 80px solid red;
            border-right: 80px solid transparent;
            border-left: 80px solid transparent;
        }

2. css布局

2.1 表格布局（过时）

特点：1. 表格布局语义化不明确

2. 表格布局单元格内容会自动垂直居中

   

       

           
左
           
右
       
   
 

表格布局display: table的使用，更加灵活

   

       

           
左
           
右
       
   
 
   

       

           
左
           
右
       
   

3. css动画总结

css动画分类：

1. transition 补间动画
2. keyframe 关键帧动画
3. 逐帧动画

3.1 transition 补间动画

---补间动画，就是给出初始和结束状态，中间状态由css自行脑补
既然中间状态由css自己运算，那么就不可能所有的属性变化都能运算，只能部分能够运算。

可以进行补间动画的属性：

• 位置-平移（left/right/margin/transform）
• 方位-旋转（transform）
• 大小-缩放（scale）
• 透明度（opacity）
• 其他-线性变换（transform）

3.2 关键帧动画

• 相当于多个补间动画
• 与元素状态的变化无关（补间动画必须元素状态改变，动画才执行，比如上文中必须 hover 动画执行；关键帧动画则进入页面会直接执行）
• 定义更加灵活

3.3 逐帧动画

• 是使用关键帧技术来实现的
• 使用于无法补间计算的动画
• 资源较大
• 使用steps()