HTML和CSS相关知识点

HTML部分网页中的内容标题

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
页面中的普通文字字号大小为16像素（16px）
h1-h6标签的文字是加粗的，并且字号从h1-h6是逐渐变小的，h1-h6标签的权重也是逐渐变小的（浏览器的搜索抓取）
h1这个标签在页面上通常会包裹我们的logo
就是一段文字描述我们用<p>段落</p>标签包裹起来
--------------------------------------------------------
无序列表
<ul>
<li>列表项</li>
</ul>

有序列表
<ol>
<li>列表项</li>
</ol>

定义列表
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
<dd>名词解释</dd>
<dd>名词解释</dd>
</dl>

表格标签
<table>
表头
<thead>
<tr>行
<th>单元格1</th><th>单元格2</th><th>单元格3</th>
</tr>
</thead>
表身
<tbody>
<tr>行
<td>单元格1</td><td>单元格2</td><td>单元格3</td>
</tr>
</tbody>
表尾
<tfoot>
<tr>行
<td>单元格1</td><td>单元格2</td><td>单元格3</td>
</tr>
</tfoot>
<table>
th中的内容是居中加粗的，它代表了一个表格重要的部分--头部
thead和tfoot在一个表格中只有一对 但是tbody可以有多个
tfoot一般写在thead的后面，而不是整个表格的最后面，页面显示的效果tfoot依然会在表格的最后面

div标签 是html标签中没有意义的一个标签，我们一般用它来搭建页面的结构（区分结构）

span标签是html标签中没有意义的一个标签，我们一般用它来区分文字这种小的结构

hr标签 水平分隔线 用来分割不同的模块

form 表单标签 用来包裹所有的表单小标签  文本框  按钮  下拉菜单 单选框 多选框

i  em        都是可以让文字变成斜体  em的意义是强调
b strong  都是可以让文字加粗    strong的意义是强调

del  删除线    s不推荐使用

u  下划线   下划线这个效果 我们不使用标签来完成 css属性来完成下划线的效果

sub 下标

sup 上标

CSS部分

1、display属性的区别

display，可以将标签区分为块级元素（块级标签）和行内元素（行内标签）
display:block; 块级元素 大结构的划分 我们用块级元素
特点：
1、独占一行显示
2、可以直接设置宽度和高度，内外边距
3、在没有人为设置宽度的时候，宽度是其父级元素内容的宽度，在没有设置高度的时候，高度是其本身内容的高度
4、块级元素可以嵌套任何标签
display:inline; 行内元素 小细节的描述 我们用行内元素
特点：
1、不能直接设置宽度和高度
2、行内元素会在一行显示，达到父级盒子的最大宽度后折行
3、行内元素不允许嵌套块级元素
4、行内元素设置内外边距的时候，只有左右起作用，上下没有效果
5、每一个行内元素的左右都会因为空格产生一定的距离
display:inline-block; 行内块级元素 是将行内元素的特点和块级元素的特点结合
特点：
1、可以直接设置宽度高度、内外边距
2、可以在一行显示
3、每一个行内元素的左右都会因为空格产生一定的距离
元素display这个属性的属性值是可以互相转化的
display:none; 将元素隐藏，不在页面上进行展示
display:block;还可以使属性为display:none;的元素显示出来

2、css常用属性

  width: 100px;  /*宽度*/
  height :100px; /*高度*/
  line-height:100px; /*行高*/
  font-family: SimSun,"Microsoft YaHei"; /*字体*/
  font-size : 16px ;/*字体大小*/
  font-style :italic; /*字体风格*/
  font-weight: bold; /*字体加粗*/
  color: #ccc;/*字体颜色*/
  border-width: 10px;/*四边边框粗细*/
  border-style: solid;/*四边边框的风格*/
  border-color: red; /*四边边框的颜色*/
  border:10px solid red; /*border-width,border-style,border-color的简写*/
  border-top-width: 10px;/*上边框的粗细*/
  border-top-style:dashed; /*上边框的风格*/
  border-top-color: red;/*上边框的颜色*/
  border-top:10px solid red;/*上面三个简写*/
  text-align: center;/*left,center,right,justify 水平方向居中*/
  letter-spacing: 10px; /*字间距*/
  word-spacing: 10px;/*单词之间的间距*/
  text-indent: 10px; /*首行缩进*/
  margin-top:10px;/*上外边距*/
  margin:10px;/*四边外边距*/
  padding-top:10px;/*上内边距*/
  padding :10px;/*可以设置一,二,三,四种值.内边距*/
  float:left;/*right  左浮动,右浮动*/
  clear :both ;/*清除浮动,,清除左浮动或者右浮动*/
  position:relative;/*相对定位*/
  position:absolute;/*绝对定位*/
  position:fixed;/*固定定位*/
  z-index: 1;/*设置层叠元素的上下位置*/
  background-color: #ddd;/*背景颜色*/
  overflow: hidden;/*溢出部分隐藏*/
  visibility: hidden;/*隐藏*/
  display:block;/*设为块状元素*/
  display:inline;/*设为行内元素*/
  display:inline-block;/*非块状元素的块状盒子*/
  display: none;/*隐藏*/
  opacity:0.5;
  filter:alpha(opacity=50)/*设置透明度*/

3、CSS选择器

基本选择器：标签选择器、id选择器、类选择器、通配符选择器；其他选择器：后代选择器、子级选择器、并集选择器、交集选择器、伪类选择器、类型选择器

  /*标签选择器*/
    li{color:red;font-size:2em;}
    /*选择当前文档下所有的li标签，使每一个li标签中的内容颜色为红色，字体大小是默认大小的2倍*/
    /*{}中的属性之间用分号隔开，属性名和属性值之间用冒号连接
    （每一个符号都是英文状态）*/
    ---------------------------------------------
    /*id选择器  利用标签中的id属性 取id的属性值，
    利用属性值来区分元素，得到元素*/
    /*#idName{} 基本格式*/
    #list1{color:yellow;}
    /*id选择器具有唯一性 在一个文档下只能出现一次*/
    ---------------------------------------------
      /*类选择器 标签中的class属性，class属性的属性值就是我们的类名，我们可以通过类名来去选择我们要操作的这个元素，类名是我们自己取的名字，需要遵守（1）严格区分大小写（2）不能用汉字、数字命名*/
    /*.className{} 基本格式*/
    .list2{color:blue;}
    --------------------------------------------
     /*通配符选择器 将整个文档下面所有的标签选择到 不推荐使用 这种选择器比较耗费性能*/
    *{display: none;}
     --------------------------------------------
       /*后代选择器*/
        /*css选择器的查找方式是从右到左 靠近{}的这个选择器越精确，查找速度越快，性能耗费的越少，选择器尽量不要太长*/
        /*靠近{}如果是类名 就会比较快速的查找到要操作的元素*/
        ul li{
            color:red;
        }
        ol li{
            color:yellow;
        }
         --------------------------------------------
        /*子级选择器 通过父级元素选择到第一层级的子级元素*/
        ul li{
            border:1px solid red;
        }*/
        /*div>ul>li{
            border: 1px solid red;
        }
         --------------------------------------------
        /*并集选择器  将相同的css属性给到不同的html元素*/
        div{width:100px;border:1px solid red;}
        ul{width:100px;border:1px solid red;}
        ol{width:100px;border:1px solid red;}
        div,ul,ol{width: 100px;border: 1px solid red;}
         --------------------------------------------
        /*交集选择器  更有针对性的选择要操作的元素（增加权重）*/
        /*交集选择器就是将标签名和类名组合，或者是将类名组合，在组合的时候中间没有任何的间隙和符号*/
        /*标签和类名组合的时候 标签名写在类名的前面*/
        .list{color:red;}
        #list1,#list2,#list3{color:green;}
        .list1{color: green;}
        li ul li{color:green;}
        /*.list li{color: green;}/!*11*!/*/
        #pink{color:pink;}
        /* .pink{color:pink;}/!*10*!/ */
        .list .pink{color:pink;}
        /*li.pink{color:yellow;}/!*11*!/*/
        /*.pinkli{}*/
        /*.list1.pink{color:pink;}/!*20*!/
         --------------------------------------------
        /*伪类选择器 指的是这个元素的一种状态*/
        /*基本格式   选择器:伪类{}*/
        li:hover{font-size:50px;color:red;}
        /*hover 鼠标经过效果*/
         --------------------------------------------
        /*类型选择器  通过元素的type属性中的属性值来得到不同元素*/
        input[type=submit]{background-color:orange;}
        input{background-color: red;}
        .btn{background-color: blue;}
        /*类型选择器的权重大于10*/

4、盒子模型 &&基线对齐

css中的盒子模型，是由几个属性组成的 content 、padding 、border 、margin
content指的是内容的宽度和高度（width和height）
padding（内边距）指的是内容距离盒子边框内边缘的距离 它有四个方向
border（边框）边框包裹着内容和内边距 边框可以有宽度 它有四个方向
margin（外边距）不同的盒子边框外边缘距离另一个盒子边框外边缘的距离
盒子模型的兼容问题：
1、margin值：如果两个盒子上下排布，上面的盒子给值margin-bottom，下面的盒子给值margin-top，那么盒子和盒子之间的距离不是他们两个的和，而是取其中的最大值；
解决方式：只将值给一个盒子；将第二个盒子浮动起来，让第二个盒子脱离文档流
2、margin值：当盒子之间是父子级关系的时候，如果父级盒子没有边框值，没有padding值，那么就会发生子级盒子的margin-top值传递给其父级盒子
解决方式：给父级盒子overflow:hidden;这个属性（溢出隐藏）,这里面不是进行隐藏，而是将超出盒子的部分收回来

计算盒子的大小：

一个盒子的总宽度=width+padding-left+padding-right+border-left+border-right
一个盒子的总高度=height+padding-top+padding-bottom+border-top+border-bottom

盒子模型属性的写法：

width
height

padding:10px 20px 30px 40px; 上 右 下 左
padding:10px; 四个方向的值相同
padding:10px 20px 20px;  上  左右  下
padding:10px 20px;  上下  左右

border
border-top-width:20px;
border-top-style:solid;
border-top-color:red;

border-top:20px solid red;

如果盒子四个方向的边框样式相同
border:20px solid red; 四个方向都是20px的宽 实线  红色
border-width:20px;
border-style:solid;
border-color:red;

margin:10px 20px 30px 40px; 上 右 下 左
margin:10px; 四个方向的值相同
margin:10px 20px 20px;  上  左右  下
margin:10px 20px;  上下  左右

每一个元素都有自带的css属性（内置属性），那么每一个浏览器对这些属性的解析是不同的，为了保证所有浏览器显示相同，我们需要进行全局样式的重新定义，给每个元素的初始值设置相同

---

vertical-align:top;    在父级盒子的顶部
vertical-align:middle;   底部在父级盒子的中间位置
vertical-align:bottom;  底部在父级盒子的最下面
vertical-align:text-bottom;
vertical-align:baseline; 基线对齐
img{vertical-align:text-top; }
vertical-align还支持 px
vertical-align:
1、只能作用于行内元素和行内块级元素
2、参照物要么是盛装这个元素的盒子，要么是和他平级的文字
3、vertical-align是垂直方向的对齐方式

5、float有四个属性值

left 从第一个元素开始，从左到右依次排布
right 从第一个元素开始，从右到左依次排布
none 将这个元素的浮动属性去除
inherit 从元素的父级元素上继承浮动属性

浮动元素的特点：
1、脱离文档流 （文档流内的盒子不会去识别这些浮动的盒子）
2、文字、图片、表单元素会围绕着浮动元素进行排布
3、所有的元素设置浮动属性后，都可以一行显示，都可以直接设置盒子模型的所有属性，不设置宽高的情况下，其宽高是本身内容决定的
4、浮动元素来到的是同一个平面，所以浮动元素之间是可以互相识别的

清除浮动的方式：
1、给父级元素设置固定的高度
2、给父级元素设置overflow:hidden;属性
3、向最后一个浮动元素后面添加一个文档流内的元素，这个元素具有clear:both;的属性******
4、父级元素和子级元素同时浮动（只能清除掉父级元素不认识子级的问题）

清除浮动是指，清除掉浮动元素对其他元素的影响 – clear:both;
去除浮动属性，是将这个元素的float属性去掉 – float:none;

清除浮动常用的方式：利用伪元素来清除浮动影响
给浮动元素的父级元素添加伪元素after

父级元素选择器:after{
    //1、将伪元素变成一个元素
    display:block;
    content:"";
    //2、设置clear属性
    clear:both;
}

让给ul识别到li
1、给ul内增加一个文档流内的元素，并且这个元素在所有浮动元素的后面，并且带有clear属性
2、给ul元素增加overflow：hidden；属性
3、给ul高度 无论ul中是否有内容，ul都有高度

浮动：
1、浮动就是为了让元素在一行显示，摆脱块级元素和行内元素的一些弊端
2、浮动元素可以识别它父级元素的宽度
3、浮动元素会在尽可能的宽度内进行排布
（当父子元素有浮动属性的时候，如果子元素少，那么父级的宽度是子元素的宽度的总和，如果子元素多，那么这个父元素
就会去主动读取父元素的父元素的宽度，进行排布）

PS的使用(简单说明)

新建文件 ctrl+N

打开一个文件 直接拖拽到操作页面/【文件】–【打开】–【选择文件】–【确定/打开】

ctrl+1 文件还原 原大小展示

H 抓手工具 如果图片大于操作窗口 可以通过这个工具进行移动 / 点击空格键不放 可以临时切换到抓手工具

M 矩形选框工具 可以进行测量

改变ps中单位 【编辑】-【首选项】-【单位与标尺】 （像素 点 点 像素/英寸 像素/英寸）

ctrl+R 显示标尺 【视图】–【标尺】

Z 缩放工具

Ctrl + “+” 方法
ctrl + “-” 缩小

alt+鼠标滑轮 放大缩小

V 移动工具

ctrl+; 隐藏显示辅助线

ctrl+‘ 隐藏显示网格 网格的大小设置【编辑】-【首选项】-【参考线、网格和切片】

C 切片工具

alt+shift+ctrl+S 保存切片 保存为web所用格式

常用的图片格式（颜色格式是RGB格式）
jpg（jpeg） 不能设置背景透明 可以选择图片质量 质量越高的图片所占内存越大
png png24 背景透明
gif 动态图 背景透明

6、定位 && z-index

1、相对定位 relative

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        div{width: 200px;height: 200px;background-color: #ff6709;border: 3px solid black;}
        /*.box1{margin: 50px 0 0 50px;}
        .box2{margin-top: -50px;}*/
        /*.box1{position:relative;top:50px;left:50px;}*/
        /*top  left  right  bottom*/
        .box1{position:relative;top:50px;left:50px;bottom:50px;right:50px;}
        .box2{position:relative;}
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<!--
1、没有脱离文档流
2、不会影响其他的元素
3、相对定位的元素会覆盖在文档流内元素的上面
4、参照物是本身
5、当四个方向值都设置的情况下，只执行top和left
6、当元素都有相对定位属性的时候，后面的元素会覆盖在前面的元素上面
-->
</body>
</html>

2、绝对定位 absolute

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        *{margin:0;padding:0;}
        /*div{position:absolute;border:3px solid black;width:200px;height:200px;background-color:red;}*/
        /*.box1{z-index: 2;}*/
        /*.box2{background-color: yellow;*/
            /*top: 20px;left:20px;z-index: 1;}/!*ai bo se lu te*!/*/
        /*.box1{position: absolute;}
        .box2{position:absolute;right:0;width: 100px;height: 100px;background-color: yellow;}*/
        .box3{background-color: blue;top:50px;}
    </style>
</head>
<body>
<!--div.className+tab-->
<!--<div class="box1">一一一一一</div>
<div class="box2">二</div>
<div class="box3">三</div>
<p style="height: 1000px;"></p>-->

<!--<div class="box1">
    &lt;!&ndash;<div class="box2"></div>&ndash;&gt;
    <span class="box2"></span>
</div>-->
<style>
    .box{position: absolute;
        border: 2px solid red;
        width: 600px;height: 600px;
    }
    .box1{position: relative;left: 0;width: 400px;height: 400px;background-color: yellow;}
    .box2{width: 200px;height: 200px;background-color: black;position: absolute;left:100px;}
</style>
<div class="box">
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</div>

<!--
1、脱离文档流
2、定位的元素将文档流内的元素覆盖
3、绝对定位元素默认的参照物是它第一次读取的可视窗口的位置，如果这个页面加宽，加高，也不会改变定位元素的位置
4、绝对定位的参照物是可以人为设置的，{1）参照物需要是定位元素的父级元素；2）这个父级元素需要有position这个属性（相对行为、绝对定位、固定定位）}
5、当有多个父级元素，都有定位属性的时候，绝对定位元素找的参照物是最近的那个父级元素
-->
<!--
脱离文档流的元素只影响下面的元素，不影响上面的元素
-->
</body>
</html>

3、固定定位

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        div{width: 100%;height: 2000px;background-color: #ccc;position:relative;}
        p{position:fixed;right: 5%;top:20%;width: 200px;height: 200px;background-color:red;}
        /*一直保持在浏览器可视窗口的某个位置*/
    </style>
</head>
<body>
<div>
    <p></p>
</div>

<!--
1、脱离文档流
2、参照物是浏览器的可视窗口
-->
</body>
</html>

4、 z-index

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        .box1{position: absolute;width: 400px;height: 400px;background-color: blue;}
        .content1{position: absolute;width: 100px;height: 100px;background-color:yellow;z-index: 2;}
        .box2{position: absolute;top:30px;left:0;width: 300px;height: 300px;background-color:red;z-index: 3}
    </style>
</head>
<body>
<div class="box1">
    <p class="content1"></p>
</div>
<div class="box2">
    <p class="content2"></p>
</div>

<!--
1、父子元素不参与z-index的比较
2、两个盒子比较z-index的时候，如果同级盒子都有z-index值，那么同级之间比较，如果两个同级盒子没有这个值，那么里面的子级盒子的z-index起作用（只作用于这个子级盒子）
3、只要父级元素没有z-index值，子集就会参与比较
-->
</body>
</html>

7、透明度 && border属性

 background: rgba(255,255,255,.5);
 background: #fff;
 display: none;
 opacity: 0;
 /*让盒子在视野中消失 但是还是在页面上占据空间 盒子依然可以被鼠标识别*/
 /*0-1 0是完全透明 1是不透明*/
 visibility: hidden;
 /*盒子隐藏透明，但是盒子依然占据页面的空间，但是鼠标选中不了*/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        div{
            margin:20px auto 0;
            /*border-top-width:10px;
            border-top-style:solid;  实线
            border-top-color:red;*/
            /*border-top:10px solid red;*/

            /*border-right-width:20px;
            border-right-style: dotted;/!*点状线*!/
            border-right-color:green;*/
            /*border-right:20px dotted green;
            border-bottom:30px dashed blue;/!*虚线*!/
            border-left:40px double gold;/!*双实线*!/*/

            /*border-width:3px 4px 5px 6px;
            border-style:solid dashed double dotted;
            border-color: red yellow orange green;*/
            border:10px solid red;/*四个方向的边框 样式 宽度 颜色是一致的*/
            /*border:none none blue; 错误的*/
            /*border的style不写 边框没有实体 也就不出效果*/
            /*border 是一个符合属性  属性值不写不代表没有 而是none*/
            /*border-color:blue;/!*只改变border中的颜色，其他属性不改变*!/*/
            border-color:red blue green transparent;
            /*transparent 透明*/
            width: 200px;
            height:200px;
            background-color:grey;
        }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

---

border制作三角形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding:0;}
        div,p{
            border: 10px solid;
            /*border-color: red green blue yellow;*/
            /*width: 0;height: 20px;*/
            border-color: transparent transparent transparent black;
        }
        p{
            position: absolute;
            top:0;
            left: -1px;
            border-color:transparent transparent transparent white;
        }
    </style>
</head>
<body>

<div></div>
<p></p>
</body>
</html>

8、表格属性

cellspacing 单元格和单元格之间的距离
cellpadding 单元格中内容距离边框的距离
rowspan 合并行
colspan 和并列

9、表单元素

当label标签中for里面的值和表单元素中id里面的值一致的时候，那么这个label标签中的内容点击后直接跳转到该表单元素，也就是起到一个快捷提示的作用

placeholder用来给表单元素书写提示信息的地方 是html5才有的标签属性 所以在用的时候，文档声明必须是html5的生命
checked=“checked” /checked 都可以达到选中状态
maxlength 输入内容的最大长度

input：
type="text" 文本框/输入框
type="password"  密码框
type="radio"     单选框  标签中name属性的属性值相同的时候，才可以单选
type="checkbox"  多选框
type="file"      上传文件  任何格式都支持
type="button"    普通按钮
type="reset"     重置按钮
type="submit"    提交按钮

<select>下拉列表
    <option>列表项</option>
</select>
<textarea>多文本框</textarea>

action 里面的文件大多是接口
method 是规定了获取到的值是通过什么方式返回
get  操作简单 安全性低
post 操作复杂 安全性高