HTML到CSS的知识点复习

1、HTML的知识总结

常用的HTML标签中，有以下部分标签

• h1~h6 标题标签 ：1、随着h标签的数字越来越大，然后标题的大小变小 2、h标签 独占一行

• p段落标签 ：文字分为一段的标签，p标签定义的段落之间有一个空隙，将所包裹的内容单独成段，随着窗口大小自动换行

• br 换行标签 是html中唯一可以换行的标签 该标签为但标签

• strong 或 b标签， 字体加粗标签， 一般使用strong标签，语义比较明确

• em 或 i 标签， 字体倾斜标签，使字体倾斜，一般使用em

• del 或s 标签，字体划上删除线标签 一般使用del

• ins或u标签，字体下划线标签，一般使用ins

• div 和 span 标签 盒子标签， div是大盒子，所谓大盒子，就是指可以独占一行，span是小盒子，一行可以有多行

• img 图像标签 向网页中插入图片，该标签有以一个必须写的属性，src 图片路径，可以是相对路径，可以是绝对路径。绝对路径，是图片的具体位置 如：c://user/images/图片 ，相对路径，是图片相对于当前html图片的位置，上层路径就用 …/ 返回上层路径，./ html与图片同级或下级路劲,具体位置。

  图片标签的属性设置 ：src 图片路径，alt 图片不能正常显示时，显示该文字，能显示图片是，就不显示该文字，title 鼠标悬浮在图片上时，就显示该文字，width 和 height 设置图片的宽和高单位是像素px，

  img 除了加载本地图片，还可以加载网络图片,

• a标签 链接标签 必须属性 href ,链接地址， 此外还有 target 属性，设置_self 当前网页中打开链接 , 会关闭当前网页 ,_blank 新建的网页中打开链接，不会关闭当前网页。

  当 href属性中写的是图片时，会显示该图片，是文件时，会下载该文件。

  href 是 # 时 ，空链接，用于测试，不会跳转。

  还可以用于同一页面进行跳转，相当于导航栏，在需要被导航时，就在需要被导航的位置写一个标签 ，给该标签写上 id 属性(值唯一) 如

  <h2 id="a">``<h2> 在需要导航到此处时可写 <a href="#a">。

• table 表格标签

  <!-- align 设置表格的水平位置 left 靠左  center 居中 right 		靠右 -->
  <!-- border 设置表格的边框 边框为0时，没有单元格边框  边框为1		  时，就有单元格 -->
  <!-- cellpadding 设置内容 和单元格边界之间的举例 -->
  <!-- cellspacing 设置（单元格边界——表格外边界) (单元格边界-单元		  格边界)，之间的距离  -->
  <!-- width 设置表格的宽度 属性值： 数字、百分比（相对于父元素的宽度值的百分数，父元素改变时，table也随之改变） -->
  
  <!-- 注意：border的内容就是数字没有单位，其余 width\cell...\cell.. 以像素为单位 --> 
  <table>
          <!-- tr -> table row 表格的一行 -->
          <tr>
              <!-- td -> table data 表格的数据 -->
              <!-- 包含关系 并列关系 -->
              <!-- <td>项目</td> -->
  
              <!-- 表头单元格 th -> table head 表头-->
              <th>项目</th>
              <th>单价（元）</th>
              <th>数量</th>
              <th>金额（元）</th>
          </tr>
          <!-- 数据新增一行，就在table中继续添加tr标记 -->
          <tr>
              <td>五年高考三年模拟</td>
              <td>29</td>
              <td>100</td>
              <td>2900</td>
          </tr>
      </table>
  

  合并单元格问题：需要合并单元格时，可以使用以下步骤

  1、判断是合并 行，还是合并 列

  2、需要合并的数量 （合并的本质不是将三个td合并，而且将设置rowspan或者colspan的大小给单元格）

  3、删除掉多余的单元格

• 无序列表

  ul中的li标签（列表项）没有顺序

  ul中除了li标签外，不能防止任何文字或者元素标签

  li中可以定义任意元素。

• 有序列表

  ol中的li标签（列表项）有顺序的

  ol中除了li标签外，不能防止任何文字或者元素标签

  li中可以定义任意元素。

• 自定义列表 dl中只有 dt 和 dd两种标签

• form 表单域 ：表单域中可以定义“表单元素”

  action=“服务器地址” http链接 或者 链接地址

  method=“” 可选值 GET和 POST get ：得到，从服务 器获取信息，比如下载 post：上传，给服务器信息

  name=“” 表单的名字 当网页中存在多个form表单域时，可以通过name区分表单域

• 表单元素 必须写在form表单中

  <form>
          <!-- 单标签：br hr -->
          <!-- 输入标签 -->
          <!-- input默认是一个输入框标签  input一行可以存在多个 -->
          <!-- <input /> -->
  
          <!-- input中type属性可以决定表单输入内容的类型 -->
          <!-- type="button" 按钮 可点击-->
          <!-- value="" 按钮的名称 -->
          <input type="button" value="这是一个按钮"/> <br />
  
          <!-- 复选框（多选框） -->
          <!-- type="checkbox" 例如：记住密码 -->
          <!-- 表单输入内容：键值对 name="" value="" -->
          <!-- <input type="checkbox" />记住密码 -->
      
          <!-- menu 集合 = ["红烧肉"] -->
          <input type="checkbox" name="menu" value="宫保鸡丁"/>宫保鸡丁<br />
          <input type="checkbox" name="menu" value="红烧肉"/>红烧肉<br />
          <input type="checkbox" name="menu" value="青椒肉丝"/>青椒肉丝<br />
  
          <!-- 单选框 -->
          <!-- type="radio" 例如：性别 -->
          <!-- 表单输入内容：键值对 name="" value="" -->
          <!-- sex = "female" -->
          <input type="radio" name="sex" value="male"/>男<br />
          <input type="radio" name="sex" value="female"/>女<br />
  
          <!-- 文件选择 -->
          <!-- type="file" 例如：文件上传 -->
          <!--  upload = 文件路径（文件） -->
          <input type="file" name="upload"/><br />
  
          <!-- 文本输入 -->
          <!-- type="text" input的默认type值就是text -->
          <!-- 表单输入内容：键值对 name="" value="" -->
          <!-- value实际上就是输入框输入的内容 -->
          <!-- content = "输入的内容" -->
          <input type="text" name="content" value=""/><br />
  
          <!-- type="password" 基本与text一样 输入格式为密码 -->
          <input type="password" name="password" value=""/><br />
          <!-- type="number" 输入格式为数字 -->
          <input type="number" name="number" value=""/><br />
      </form>
  

• select 下拉框选择标签 name属性设置在 select中，

  value就是option中的字符

  city = “北京” selected属性，

  selected =“selected” 下拉选项被默认选中

2、CSS的知识总结

CSS的选择器分类：选择器可分为基础选择器和复合选择器

2.1 基础选择器：

• 标签选择器 通过标签来选择设置对应的属性

• 类选择器，通过给类添加class属性来设置

• id选择器 ，通过给标签添加id属性来设置

• 通配符选择，选择当前HTML中的所有标签来进行设置

  /* 标签选择器*/
  /* 找body下所有标签，并且设置字体颜色为红色 */
  /* 标签选择器，必须知道标签的名称 */
  /* 缺点：会定义所有文档中对应标记的样式 */
  a {
      color:red;
  }
  
  /* 类选择器 */
  /* 使用类选择器的第一步，设置对应标记的class属性 */
  /* 使用类选择器的第二步，“.class属性名称”设置对应的选择器样式 */
  /* 优点：可以给任意元素特定的样式 */
  /* 在设置clsas属性时，可以设置多如 <a href="#" 
   class="cls1 cls2 cls3">*/
  .cls {
      color:red;
  }
  
  
  /* id 选择器*/
  /* 以#开头的标记属性 */
  /*id选择器需要在标记中设置id属性 如<a href="#" id="ids"> */
  /* 与类选择器的区别在于id选择器只能使用一次，而类选择器可以使用多次 */
   #ids {
      color:red;
  }
  
  /* 通配符选择器*/
  /* 会选择body标签下的所有标签*/
  /*通配符基本都在配置全局标签属性中使用，HTML后期就有“消除默认样式”需要通配符  */
  * {
      color:red;
  }
  

2.2 CSS字体属性

            /* 设置字体的大小 */
            /* font-size: 50px; */
            /* 设置字体样式 */
            /* 字体的样式是由 系统决定的 */
            /* 注释：如果系统中不存在对应的字体样式，
            则字体会议默认的字体风格呈现 */
            /* font-family: "楷体"; */

            /* 当font-family的第一个参数设置字体加载不出时，由第二个参数设置字体 */
            /* font-family: "楷体1",sans-serif; */

            /* 设置字体加粗 */
            /* font-weight: 1 ~ 1000 ; 值越大字体越粗 */
            /* font-weight: normal; 默认粗细 400 正常粗细 */
            /* font-weight: bold; 700 加粗 不同浏览器标准不同 */

            /* 设置字体以何种方式显示 normal正常 italic斜体 */
            /* font-style: normal; */

            /* 复合写法 */
            /* 复合写法 font: font-style font-weight font-size/line-height font-family */
            /* font:normal bold 30px/30px "黑体",sans-serif; */
            /* 复合写法中，必须保留 font-size font-family  */
			/*font:30px "黑体",sans-serif;*/

2.3 文本属性

			/* 设置背景颜色 */
            background-color: orange;
            /* 设置字体大小 */
            font-size: 40px;
            /* 设置标签中“文字”的位置 */
            /* text-align: left\center\right */
            text-align: center;

            /* 为文本设置 下划线、删除线、上划线 */
            /* text-decoration:underline; 下划线 */
            /* text-decoration: line-through; 删除线*/
            /* text-decoration:overline; 上划线 */

			/* text-indent 缩进属性 */
            /* 缩进两个字 */
            /* 1em 代表一个字的大小，这个大小会随之字体变化而变化 */
            /* text-indent:40px */
            text-indent: 2em;

            /* 设置行间距 */
            line-height: 60px;

2.4 CSS引入方式

/*CSS的引入方式有三种 */
/*1. 行内样式  即直接在标签中写style属性，在后面写样式
/*2.内部样式 在head中写style，通过选择器对属性经行设置
/*3.外部样式 在外部写css文件 通过在html中用style引入
    <!-- 如何引入外部的.css文件: 用link标签 -->
    <!-- rel 引入方式 stylesheet 外部样式 （这是引入文件必须定义的内容） -->
    <!-- type 引入内容的类型 text/css  -->
    <!-- href 引入的外部文件的相对路径 -->
    <link rel="stylesheet" type="text/css" href="./css/a.css" />

2.5 复合选择器

/* 后代选择器 */
/* 将无序列表设置为红色 有序列表设置为蓝色 */
/* 后代选择器 “父级选择器 子级选择器” ,其中的选择器都是基础选择器,彼此间有空格 */
   /* ul li{
      color: red;
   } */
/* 其中 基础选择器 可以是 类选择器 id选择器 标签选择器 */

/* 子元素选择器 */
       /* 父级选择器>子级选择器 */
       .a>.b{
           color: red;
       }

       /* 设置子级元素时，不一定要写全所有选择器关系 */
       .nav ul li a{
           color: red;
       }
       .nav a{
           color: red;
       }
       /* 设置直接子级 */
       .nav1>a{
           color: greenyellow;
       }
/* 并集选择器 */
/* .a{
           color: red;
       }
     .b{
           color: red;
       } */

       /* 将上述代码精简 */
       /*  选择器1,选择器2,....{}  所有的选择器可以设置相同的样式 */
       .a,.b{
           color: red;
       }


/*  链接的伪类选择器· */
       /* 当鼠标悬浮在链接标记上，会出发该效果 */
       .link01:hover{
           font-size: 40px;
           color: cornflowerblue;
       }

       /* 当访问的链接，没有被鼠标点击或者访问过，呈现的效果 */
       /* 当该链接被访问过，则效果不会生效， */
       /* 浏览器中有cookies 清除数据缓存既可 */
       .link02:link{
           font-size: 40px;
           color: orange;
       }

       /* 当该访问链接，被浏览过或者点击过，呈现的效果 */
       .link03:visited{
           color: red;
       }

       /* 当鼠标点击按住链接，不松开时，呈现的效果 */
       .link04:active{
           color: greenyellow;
       }

2.6元素的显示模式

.a{
            /* 块标记 可以设置宽高度 */
            /* width: 200px; 用像素值设置宽度 */
            /* width: 100%; 该元素的宽度所占它的父元素的宽度的百分比 div.width = body.width * 100% */
            /* 快标记 默认独占一行，且在不设置宽度的情况下 宽度为100% (width:100%;) */
            height: 100px;
            /* 设置背景颜色 */
            background-color: orange;
        }
        /* 在块元素中，可以继续包含任意的元素 */
        .b{
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        /* 行内元素不会独占一行 */
        /* 行内元素不能设置宽高 width和height属性对于行内标记无效 */
        /* 行内元素会因为窗口大小，自动换行 */
        /* 行内元素中尽量只用行内元素或者文字，不要使用块元素 */
        span{
            width: 200px;
            height: 100px;
            background-color: gray;
        }

元素模式的转化

		 /* li 是块元素 独占一行 */
        /* 转化元素的显示模式 display */
        /* inline 行内元素 block 块元素 inline-block */
        li{
            display: inline-block;
            /* 设置宽高 */
            width: 120px;
            height: 40px;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 40px;
            /* 设置字体颜色 */
            color: #CCCCCC;
        }

2.7 border属性及盒子模型

/* border属性 */
        .a{
            width: 200px;
            height: 200px;
            /* border-width 边框宽度 */
            border-width: 10px;
            /* border-style 边框样式 */
            /* solid 实线 */
            /* dotted 点线 */
            /* dashed 虚线 */
            border-style: solid;
            /* border-color 边框颜色 */
            border-color: red;

            /* border复合属性 */
            /* border:border-width border-style border-color */
            border: 10px solid red;

        }

盒子模型的padding和margin值

.a{
            display: inline-block;
            width: 200px;
            height: 200px;
            border: 1px solid black;

            /* 设置内容到标签顶部的距离 */
            /* 设置padding也会影响盒子的大小 */
            padding-top: 20px;

            /* padding-left: ;  左侧内边距 */
            /* padding-right: ; 右侧内边距*/
            /* padding-bottom: ; 底部内边距*/

            /* padding: a b c d ; 设置上右下左的内边距 */
            /* padding: a b 设置上下、左右的内边距 */
            /* padding: a  设置上下左右的内边距 */
        }

/* margin 设置外边界 margin 人与人之间的距离 padding 心脏对于人身体内部的距离 */
        .a{
            width: 200px;
            height: 200px;
            /* 图片 相对于div边界内侧的外边距  */
            margin-top: 20px;

            /* margin-left: ; 左侧外边距*/
            /* margin-right: ; 右侧外边距*/
            /* margin-bottom: ; 底部外边距*/
            
            /* margin: a b c d ; 设置上右下左的外边距 */
            /* margin: a b 设置上下、左右的外边距 */
            /* margin: a  设置上下左右的外边距 */

        }

2.8 浮动

 /* 在盒子模型中设置margin 会影响其它元素标记的位置 */
 /* 浮动特性 将元素通过“脱离文档流”的方式，移动到指定位置 */
   .a{
      /* margin-left: 200px; */
      /* float 浮动的属性 left左浮动 right右浮动 none不浮动 */
       float: right;
      }
/* 浮动设置 */
            /* 向左浮动 */
/* 脱离文档流 1、元素浮动后呈现的位置，已经高于原本的层级 */
/*           2、浮动之后的元素都在同一层级，所以会相互排列 */
/*           3、当块元素设置浮动属性 会变成行内块标记 */
/*              行内元素设置浮动属性 会变成行内快标记 */
/*           4、 当一个元素在没有浮动属性的前面元素下，设置浮动属性后，不能高于这个前面的元素  */
	.b{
      /* 因为浮动的影响，导致元素不能正常显示 */
      /* 清除浮动带来的影响 */
      /* 回到前面的元素没有设置浮动之前的状态 */
      clear: left;
      background-color: orange;
      }

/*浮动带来的盒子坍塌问题*/
.c{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 设置浮动 */
/* 当a标记中的b标记设置浮动之后，导致高度丢失，叫做高度坍塌 */
            float: left;
/* 解决高度坍塌的办法 */
/* 1、父元素设置高度, 该方法还要设置消除浮动的属性 */
/* 2、父元素设置overflow:auto 可以解决高度坍塌的问题 IE6 zoom:1; */
/* 3、父元素中设置一个伪类标签after */
/* 浮动 不能超过前面的元素 */
        }

2.9 定位

/*定位的属性 position
定位属性的值 relative 相对定位 absolute 绝对定位 fixed 固定定位*/ 
.son1{
            width: 100px;
            height: 100px;
            background-color: red;
/* 相对定位 */
/* 相对：该元素相对于自己原来位置的变化 */
/* relative：不会改变该元素原来的位置，只是在显示上会偏移 */
            position:relative;
/* position 属性设置后，使用top\left\bottom\right */
            left:200px;
            top: 100px;
        }

/*绝对定位*/
 .son1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
/* 脱离文档流 */
/* 设置top/left/bottom/right */
            top: 0px;
            left: 0px;
/* 绝对定位 和相对定位 */
/* 1、相对定位不会脱离文档流 而绝对定位会脱离文档流 */
/* 2、定位的位置不同的，相对定位相对原本的位置进行定位绝对定位是相对于有定位级的父级进行定位 */    
      /* 父级中设置定位 定位级元素就会以父级为起点*/
        }


.a{
            /* 设置固定定位 */
            position: fixed;
            /* 设置 top/left/bottom/right */
            bottom:100px;
            right: 100px;
            width: 200px;
            height: 160px;
            background-image: url("./images/b.jpeg");
            background-size: 100%;
        }