html+css知识总结

网页的基本结构

1. 首先!DOCTYPE html声明这是一个网页 位于第一行 前边什么都不能加 空格也不行
2. 再写 网页的根元素
3. 在其中加标签(head标签里边放网页的说明 不显示出来 用户看不到) 标签放网页的内容

 示例 




    
    
    


    

标签

单标签

1. 又称自闭和标签
2. 样式<标签/>
3. 举例:

   ---

   
等

双标签

1. 成套出现
2. 样式<标签>
3. 举例:
   等
4. 格式化标签
   加粗
   语气加重
   大号字体
   小号字体
   强调突出
   斜体
   _2下角标
   ^2上角标

列表

1. 无序列表

示例

        
刘备
        
关羽
        
张飞

2. 有序列表

示例
 

        
起床
        
洗漱
        
吃饭
        
上学

3. 自定义列表

示例

        
中国
        
河南
        
河北
        
山东
        
美国
        
纽约
        
华盛顿

• 列表嵌套

示例

        
刘邦
            

                
智力100
                
体力20
                
武力10
            
        
        
项羽
            

                
智力90
                
体力100
                
武力100
            
        

表格

• 用来定义表格
• 代表表格的行
  表示表格的单元格
  一般用于表头 字体加粗居中
  用于表体的单元格 字体靠左
• 普通表格包括 或
• 标准表格包括
• 表格的属性
  • colspan表示单元格跨列
  • rowspan表示单元格跨行
  • border表示边框
  • cellspacing表示单元格间距

示例

    

        

            
姓名
            
 
            
性别
            
 
            
出生年月
            
 
            
 
        
        

            
民族
            
 
            
政治面貌
            
 
            
身高
            
 
            
        
        

            
学制
            
 
            
学历
            
 
            
户籍
            
 
            
        
        

            
专业
            
 
            
毕业学校
            
            
 
            
            
        

    

图片

• 标签格式属于单标签
• 属性src代表图像的路径(url)
• 属性alt代表图片加载不出来时的替代文本
• 属性title代表图片加载出来时鼠标移动到图片时的提示信息
• 注意:图片的路径(url)分为两种
  • 绝对路径:从目标盘符开始的路径例如C盘/…或者网站如http://www.baidu.com这种
  • 相对路径:从当前位置出发找到图片的方式
    ./代表本级…/代表上一级 上上一级

示例
    绝对路径
    
      
    相对路径  
    

• 图片会出现的问题
  图片默认会以基线对齐 所以会使图片与其他内容之间有空隙
  解决方式:使图片不默认基线对齐
  推荐设置居中
  vertical-align: middle;

a标签

• 标签的重要属性:
  herf(规定链接指向的页面的 URL)url是我们要链接到的网页或者文件
  标签如果没有href属性,则鼠标放上去没有悬停小手的样式
  target : 规定在何处打开链接文档
  _blank : 在新窗口
  _self：默认，在相同的框架中打开被链接文档
  _parent：在父框架集中打开被链接文档
  _top：在整个窗口中打开被链接文档
• 各种链接类型:
  1、将文字作为链接对象：
  百度
小米手机
  2、将图像作为链接对象：
  
  3、空链接：
  空链接空链接
空链接
  4、锚点链接：可以链接到同一个页面的指定位置
  实现步骤：
  在要链接到的位置输入：
  
  
  在要建立链接的对象上添加a标签
  小米手机4

form标签(表单)

    

        
        
        
        
        账 号:

        
        
        密 码:

        
        性 别: 男 女

        
        兴趣爱好:篮球

        足球

        羽毛球

        
        

        
        
        
        
        
        
        
        
        
        请选择地址:
        
            --请选择--
            郑州
             洛阳
            驻马店
            平顶山
          
           
                    用户名:
                    
                     
                    男
    

视频音频

• 音频audio必须添加controls控件属性才能显示
  标签内的内容为音频加载不出来时的提示
  audio元素允许多个source元素
  source元素可以链接不同的视频文件
  浏览器将使用第一个可识别的格式

• 视频video同上

css层叠选择器(为标签添加各种样式)

• 标签选择器
  格式:标签{属性1:属性值;属性2:属性值;}
• 通配符选择器 用于所有标签
  格式: *{属性1:属性值;属性2:属性值;}
• 类选择器
  格式: .类名(class值){属性1:属性值;属性2:属性值;}
  注意:一个标签可以有多个类名 多个标签也可以用一个类名
• id选择器
  格式: #id值{属性1:属性值;属性2:属性值;}
  注意:每个标签的id值必须唯一 不能相同
• 相邻选择器
  格式: 标签1+标签2
  注意:相邻选择器表现的是标签1后紧跟着的第一个标签2
• 属性选择器
  格式: 标签[属性名]{} 或者 标签[属性名~=“属性值”]这种表示一个属性名有多个属性值时用
• 伪类选择器
  格式:
  标签:link a:link选择所有未被访问的链接
  标签:visited a:visited 选择所有已被访问的链接
  标签:hover a:hover 选择鼠标指针位于其上的链接
  标签:active a:active 选择活动链接

css引入方式

• 从CSS 样式代码插入的形式来看基本可以分为以下3种：
  内联式（行内样式）
  内嵌式（内部样式）
  外联式（外部样式）

css三大特性

1. 层叠性
   所谓层叠性，就是后定义的样式，会层叠（可以理解为覆盖）掉前面定义的样式。我们说的层叠性，是在样式产生冲突的时候才层叠，不冲突就不层叠。

2. 继承性
   所谓继承性，就是如果子元素没有定义样式，那么他默认会以父元素的样式来继承。
   不是所有的样式都会继承，比如高度就从来不会继承，通常能继承的是一些文字相关的样式。
   比如font-系列，text-系列，color 文字颜色，line-height行高等

3. 优先级（权重高的生效）
   1 行内样式的优先级最高,内部和外部样式遵循就近原则 谁离标签近谁优先
   2 选择器的权重
   权重规则:权值相加 大的优先
   继承过来的选择器 权值为0
   标签选择器 权值为1
   类、伪类、属性选择器 权值为10
   id选择器 权值为100
   行内样式 权值为1000

font字体属性

• 字体大小
  font-size: 30px;
• 字体样式
  font-style: italic;
• 字体粗细
  font-weight: bold;
• 行高
  line-height: 50px;
• 字体系列
  font-family: “仿宋”;
• font属性为简写属性
  简写顺序:font-style： font-variant：指定文本是否为小型的大写字母 font-weight font-size/line-height font-family(其中font-size 和font-family 不能省略不写)

示例
font: italic bold 50px/55px "楷体"; 
font: bold italic 50px/55px "楷体";
font: 50px/55px "楷体"; 
font: 50px"楷体";  

text文本属性

• 定义块状元素内容的水平对齐方式
  text-align: center;
• 定义元素的文本装饰
  text-decoration: underline;
• 定义块内文本首行缩进
  text-indent: 30px;
• 定义字符间距
  letter-spacing: 20px;
• 定义单词间距
  word-spacing: 20px;
• 定义图片与文字的对齐方式，默认是基线对齐的
  vertical-align: middle;

示例
 
   
what is your name
   
这是一个在段落中的图片

css中的标签类型

• 块状元素
  
  、

  、

  、

  和
  • 等都是块级元素
    特点:
    1 默认独占一行
    2宽高可以设置 宽度不设置的情况下默认父容器宽度的100%
  • 行内元素
    、、、 和就是典型的行内元素（inline）元素
    特点:
    1一行多个
    2宽高不能设置 默认为内容的宽度
  • 行内块元素
    同时具备行内元素、块状元素的特点 代表标签：img input
    特点:
    1、和其他元素都在一行上
    2、元素的高度、宽度可设置
  • 标签类型的转换
    display:block;将行内、行内块元素转为块
    display:inline;将块元素转为行内（一般不将块元素转为行内元素）
    display:inline-block; 将块和行内元素转为行内块

  盒子模型

  • 标签就可称为一个盒子模型
    包括:
    外边距 margin
    内边距 padding
    边框 border
    内容

  margin属性

  • 代表外边距
    margin:10px; 四边
    margin:10px 20px; 第一个值上下 第二个值代表左右
    margin:10px 20px 30px; 第一个值上 第二个值左右 第三个下
    margin:1px 2px 3px 4px;上右下左
  • 设置margin遇到的问题:
    在子框中设置margin-top时,并没有与父框顶部产生距离还是与父框紧贴,处理方式:
    1.给父框加个边框
    2.给父框加个padding值 但会使盒子变大
    3.给父框设置overflow:hidden属性
    4.设置伪类:before(选择器在被选元素的内容前面插入内容)

  padding属性

  • 代表内间距(边框与内容之间的距离)
    写法同上
    注意事项:
    （1）如果盒子有宽度和高度，再加padding值，则盒子一定会变大。
    （2）如果盒子没有设置宽度，且默认宽度等于是父亲的宽度，则这个盒子，加padding并不影响盒子的宽度,只影响高度。
    （3）一个盒子真实占有的宽度：等于width+左padding+右padding+左border+右border
    （4）一个盒子真实占有的高度：等于height+上padding+下padding+上border+下border

  border属性

  • 代表盒子的边框
    写法 border:边框宽度 样式 颜色;
    某一边的写法border-left:边框宽度 样式 颜色;
    border-right:边框宽度 样式 颜色;
    border-top:边框宽度 样式 颜色;
    border-bottom:边框宽度 样式 颜色;

  精灵图片

  • 精灵图片是指多个小图片做成一个图片供多个标签使用为背景图片的图片
  • 精灵图片可以提高网页加载速度 只需加载一张图片足以
  • 需要使用background-position定位 默认以标签的top left为x y轴

  浮动float

  • 浮动元素 脱离了文档流 (半脱离文字仍然在文档流中)
  • 浮动元素会去找离它最近的有浮动的元素的边贴
  • 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行
  • 右浮动会颠倒盒子顺序
  • 行内显示模式的标签加了浮动后，可以直接设置宽高，无需转换
  • 块显示模式的元素，如果没有设置宽度，添加了浮动后，会收缩到内容的大小
  • 浮动元素会脱离文档流，会压住下一个块元素，但不会压住其内容

  清除浮动

  • 由于元素浮动脱离文档流,会影响没有浮动的元素的位置 未浮动的元素会占据在浮动元素浮动前的位置,这种情况也叫浮动塌陷 为了防止布局乱掉 所以需要清除浮动
  • 方式:
    1.给父框设置一个高度
    2.clear清除浮动left清除左浮动 right清除右浮动 both清除左右浮动
    3.在父框中添加overflow:hidden属性(塌陷处理)
    4.设置伪类:after清除浮动

  示例 
  
  
  
  
      
      
      
      
  
  
      
  
          
  
          
  
          
  
      
      
  
  
     
  

  选择器

  
  
  
  
      
      
      
      
  
  
  
      
  
          
  1暗示的内裤了
          
  2深刻的扣篮时时刻都没你快来撒
          
  3更加快乐发过来看看了
          
  4交罚款了什么看
      
      
  5深刻的扣篮时时刻都没你快来撒
      
  6深刻的扣篮时时刻都没你快来撒
      
  7深刻的扣篮时时刻都没你快来撒
      
  8发来的生命力方面是多么
      
  9深刻的那款是卡拉是看到你
      
  10发来的生命力方面是多么
      
  11发来的生命力方面是多么
      
  12时刻都开始打卡的那是的旅客
  
  
  

  自定义字体

  
  
  
      
      
      
      
  
  
      
  你好吗
  
    
  

  字体图标

  • 用字体显示成图标的样式 通过调整字体属性可以设置图标样式

  css3过渡

  • transition 属性设置元素当过渡效果，四个简写属性为：
    transition-property规定设置过渡效果的 CSS 属性的名称
    transition-duration规定完成过渡效果需要多少秒或毫秒
    注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果
    transition-delay 定义过渡效果何时开始
    transition-timing-function规定速度效果的速度曲线 取值:
    • linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
    • ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
    • ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
    • ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
    • ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
    • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

  css3渐变

  文字渐变

  
  
  
      
      
      
      
  
      
  这是一段渐变文字
  
    
  

  css3盒子阴影

  box-shadow 属性向框添加一个或多个阴影(多个阴影之间用逗号隔开)
  语法 box-shadow: 水平偏移(必需) 垂直偏移(必需) 模糊程度 阴影尺寸 颜色 inset(加上代表内阴影 不加代表外阴影);

  文字阴影

  text-shadow 属性向文本添加一个或多个阴影(多个阴影之间用逗号隔开)
  语法 text-shadow: 水平偏移 垂直偏移 模糊程度 颜色;

  
  
  
      
      
      
      
  
  
      
  这是一段有阴影的文字
  
    
  

  边框圆角

  边框背景图象

  background-origin属性

  • background-origin 属性规定 background-position 属性相对于什么位置来定位
    background-origin: padding-box;景图像从内边距左上角开始填充(不设置时 浏览器默认)
    background-origin: border-box;背景图像从边框左上角开始填充
    background-origin: content-box;背景图像从内容左上角开始填充

  
  
  
      
      
      
      
  
  
      
  
          内容 可放大了卡萨富兰克林开发NDS发
      
  
    
  

  background-clip属性

  • background-clip 属性规定背景的绘制区域
    background-clip: border-box;默认值背景绘制在边框方框内（剪切成边框方框）
    background-clip: padding-box;背景绘制在衬距方框内（剪切成衬距方框）
    background-clip: content-box;背景绘制在内容方框内（剪切成内容方框）
    background-clip: text;背景绘制在文本内（剪切成文本背景）

  
  
  
      
      
      
      
  
  
      
  
          内容 可放大了卡萨富兰克林开发NDS发
      
  
    
  

  box-sizing属性

  • box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式
  • 一般我们设置盒子宽高 默认的是内容区的宽高并没有加上内边距和边框,因此当盒子有边框border和padding时,盒子的实际宽高会增加,使用box-sizing: border-box;使盒子的宽高把边框和内边距都算进去,这时盒子的实际宽高不变

  sizing 最主要的用法是规定容器元素的最终尺寸计算方式

  • 一般我们设置盒子宽高 默认的是内容区的宽高并没有加上内边距和边框,因此当盒子有边框border和padding时,盒子的实际宽高会增加,使用box-sizing: border-box;使盒子的宽高把边框和内边距都算进去,这时盒子的实际宽高不变