HTML+CSS笔记

HTML

1.标签：用尖括号括起来的被称为标签##

标签分类：
       单标签：有开始标签或者结束标签
       双标签：既有开始标签又有结束标签
标签的关系：
       嵌套(父子)
       并列(兄弟)

2.快速创建页面

    英文状态下的  !+enter   !+tab
    输入html 选择html:5

3.标题标签

    h1~h6
    特点：
       1.独占一行
       2.让字体变大变粗
       3.重要性依次递减

4.段落标签

    p
    特点：
    1.独占一行
    2.段落与段落之间存在间隙

5.换行和水平线

br hr

6.特殊字符

      空格
   <    左箭头
   >    右箭头

7.文本格式化标签

   b/strong   让字体加粗
   i/em       斜体
   s/del      删除线
   u/ins      下划线
   特点：
     1.不独占一行

8.div和span

属性:写在开始标签里面，多个属性之间用空格隔开

div标签
特点：
  1.独占一行(默认宽度100%)
  2.可以设置宽高

span标签
特点：
  1.不独占一行
  2.设置宽高不生效

9.图像标签img

  特点：
   1.不独占一行
   2.可以设置宽高

   属性：
   1.src  图片的引用地址
   2.alt  图片加载失败时的提示信息
   3.title   鼠标悬停的提示信息

10.路径

      绝对路径
          网络地址 https://
          本地磁盘 C:
      相对路径
          ./   当前文件所在的文件夹
         ../   当前文件所在文件夹的上一级文件夹(上一级)
          /    放在前面表示根目录(浏览器会识别成C盘)
               放在后面表示进入文件夹

11.链接标签 a

   特点：
     1.不独占一行
     2.设置宽高不生效

   属性：
     1.href   引用链接地址
              网络地址  https://
              本地文件  路径
              下载      zip/txt/word
              空链接    #(回到页面顶部)
     
     2.target   控制页面的跳转方式
               _self  当前页面发生跳转
               _blank  新开页面发生跳转

    注意：
     a标签可以嵌套其他任何标签，但是不能嵌套a标签

12.锚点定位

    a标签里面的href属性与id值一一对应
     href = #id值

13.base标签

     属性：
      1.href  全局链接(当前页面的链接会优先基于当前链接进行跳转)
      2.target  全局跳转方式

14.列表标签

    ol>li  有序列表

    ul>li  无序列表

    dl>dt+dd 自定义列表

15.input输入框

   特点：
     1.不独占一行
     2.可以设置宽高

   属性：
     1.type   输入框的类型
             text  文本输入框
             password  密码输入框
             radio   单选
             checkbox  复选框
             image   图片形式的提交按钮
             button   按钮
             file    文件形式的提交
             submit    提交
             reset     重置

     2.name  提交的键名(单选框的绑定)
     3.value  默认值(提交的键值)
     4.placeholder  占位符
     5.maxlength    最长输入字符数
     6.checked  选中
     7.disabled   禁止选中
     8.multiple    多文件

CSS

CSS的引入方式

    1.行内引入
    2.内部引入
    3.外部引入

    优先级
      行内>内部=外部(优先级相同的情况，写在后面的优先作用)

1. 基础选择器

   1.标签选择器:会选择所有同名的标签
   一般用来清除默认样式

   2.类选择器:会选择所用同名的类名
   类名可以重复
   一个标签可以有多个类名

   3.id选择器
   注意id值唯一

   4.通配符选择器:会选择页面所有的元素
   一般用来清除浏览器的默认样式

2.复合选择器

1.交集选择器:既是什么选择器又是什么选择器
格式：
选择器选择器 {
属性:属性值
}
注意：如果有标签选择器则把标签放在第一个

2.并集选择器:表示选择器和选择器
     格式:
       选择器,选择器 {
          属性:属性值
       }
    注意:逗号隔开的一整个选择器

3.子代选择器:会选择所有同名的子代！！！
      格式：
        选择器>选择器 {
            属性:属性值
        }
    注意:只会选择子代

4.后代选择器:会选择所有同名的后代！！！
      格式：
        选择器 选择器 {
            属性:属性值
        }

5.兄弟选择器
    +:选择下一个相邻的兄弟
    ~:选择下面所有同名的兄弟
       格式:
       选择器+选择器    选择器~选择器

6.属性选择器
    格式：
      [属性]  或  [属性="属性值"]

      [属性^="属性值"]  以属性值作为开头
      [属性*="属性值"]  包含当前的属性值
      [属性$="属性值"]  以属性值作为结尾

.

3.CSS的三大特性

    1.层叠性   后来者居上

    2.继承性
       以font/color/text/line  为开头
       一些标签有自身的特性，不会被继承所影响(a标签不会继承color)

    3.优先级(权重)
      !important>行内(1,0,0,0)>id选择器(0,1,0,0)>类选择器/伪类/属性(0,0,1,0)>标签/伪元素(0,0,0,1)>通配符/兄弟/子代>继承
        权重的计算：从左往右依次比较 ，不会进制

display 显示模式

      1.display:block   块级元素      div   h1   p   ol  ul  li  
         特点：
          1.独占一行
          2.可以设置宽高
          3.水平垂直方向的margin/padding 生效

      2.display:inline-block   行内块级元素
         特点:
          1.不独占一行
          2.可以设置宽高
          3.水平垂直方向的margin/padding 生效

      3.display:inline  行内元素
         特点：
           1.不独占一行
           2.设置宽高不生效
           3.垂直方向上的margin/padding不生效

      4.display:none   元素消失(原来的位置不在了)

      5.visibility:hidden  元素消失(原来的位置依然存在)

4.盒子模型

标准盒子模型: content(height+width)+padding+border+margin
怪异盒子模型: (content+padding+border)(height+width)+margin

    标准盒子转怪异盒子: box-sizing:border-box

1.padding  内边距
    会在盒子内部产生距离，让盒子变大

    padding:10px  四周
            10px 20px  上下10  左右20
            10px 20px 30px  上10  左右20  下30
            10px 20px 30px 40px  顺时针

    padding-left/right/top/bottom

    padding可以使盒子内部的元素水平垂直居中

2.border  边框
    border:width  style   color

    border-width
    border-style
              solid  实线
              dashed 虚线
              dotted 圆点
              double  双实线
    border-color
              transparent  透明

    border-left/right/top/bottom-width/style/color
3.margin  外边距
     margin:10px  四周
            10px 20px  上下10  左右20
            10px 20px 30px  上10  左右20  下30
            10px 20px 30px 40px  顺时针

     margin-left/right/top/bottom

     margin:auto   水平方向自适应(水平居中)
     使用条件：
          1.必须使块级元素
          2.本身必须要有宽度

5.浮动

     float:  脱离文档流，尽可能向左或向右浮动，直到碰到另一个元素的边框壁
          如果一行占不下，就会自动换行
         left  向左浮动
         right  向右浮动

6.定位

   1.relative   相对定位
         1.相对于自身进行偏移的
         2.不脱离文档流，原来的位置依然存在

   2.absolute   绝对定位
         1.脱离文档流，原来的位置不在了
         2.如果父级或者祖先元素存在非static定位，那么相对于父级或祖先元素进行定位
           如果父级或者祖先元素没有定位或者有static定位，那么相对于浏览器进行定位
           优先作用最近的定位元素

   3.子绝父相
        如果一个元素要设置定位，一般将该元素设置为绝对定位，将其父级或祖先元素设置
        为相对定位，让该元素相对于其父级或者祖先元素进行定位
   4.fixed
    特点：
      1.脱离文档流，原来的位置不在了
      2.始终相对于浏览器进行定位