HTML+CSS

html

1. 文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面

2.告诉浏览器或者搜索引擎这是一个英文网站

3.必须写。采取UTF-8来保存文字。如果不写就会出现乱码

4.常用标签

1. 标题标签<h1>-<h6>

2. 段落标签<p> </p>

3. 换行标签<br / >

4. 文本格式化标签

   加粗<strong></strong>或<b></b>

   倾斜<em></em>或<i></i>

   删除线<del></del>或<s></s>

   下划线<ins></ins>或<u></u>

5. 盒子用来装内容：

   一行只能放一个和 一行可以放多个

6. 图像标签<img src="图像URL"/> src是标签的属性；其他属性：

   alt 替换文本图像显示不出来的时候用文字替换

   title提示文本 鼠标放到图像上显示提示的文字

   width height设定图像高度和宽度

   border设置图像的边框粗细

   属性与属性之间用空格隔开

   <img src="1.gpg" width="300" height="300" border="3" title="这是一个图片" />

7. 相对路径：同一级路径；下一级路径"/";上一级路径“…/";

8. 绝对路径：”\"

9. 超链接标签：

   <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

   href用于指定链接目标的url地址，

   target用于指定链接页面的打开方式，_self为默认值，_blank为在新窗口中打开方式

   内部链接：网站内部页面之间的链接

   空链接：

   下载链接：如果href里面地址是一个文件或者是压缩包等形式

   网页元素的链接：在网页中的各种网页元素都可以添加超链接

   例如<a href="http://baidu.com" ><img src="1.gpg"/></a>

   锚点链接：通过点击链接可以快速定位到页面中的某个位置

   在链接文本的href属性中，<a href="#one"></a>

   找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="one"></h3>

10. 注释： 或者用ctrl+/ 不执行且不显示到页面中

11. 空格符： 小于号：<大于号：>

12. 表格：显示数据

    <table>
        <tr>
            <th>表头单元格</th>
            <td> 单元格</td>
        </tr>
    </table>
    

    1.table用于定义一个表格标签；tr标签用于定义行；td用于定义单元格

​ 2.表格属性（后面通过CSS来设置）（要写在table的标签里）

​

align="left/center/right"规定表格相对周围元素的对齐方式

​ border=1或“”规定表格单元周围是否拥有边框，默认为“”，表示没有边框

​ cellpadding=像素值，规定单元边沿与其内容之间的空白，默认1像素

​ cellspacing=像素值，规定单元格之间的空白，默认2像素

​ width=像素值或百分比，规定表格的宽度

​ 3.表格结构标签：为了更好的表示表格的语义；标签表格的头部区域标签表格的主体区域

<table>
    <thead>
        <tr></tr>
    </thead>
    <tbody>
        <tr></tr>
    </tbody>
</table>

​ 4.合并单元格 跨行合并rowspan=“合并单元格的个数”,选择最上 面的单元格

​ 跨列合并colspan=""，选择最左边的单元格

​ 最后删除没有用的单元格

13. 列表标签

    无序列表：<ul></ul>表示无序列表；<li></li>定义列表项

    有序列表：<ol></ol>表示有序列表；<li></li>定义列表项

    自定义列表：<dl></dl>定义描述列表；

    <dl>
        <dt>名词</dt>
        <dd>名词解释1</dd>
        <dd>名词解释2</dd>
    </dl>
    

14. 表单标签

    表单域：标签用于定义表单域，把它范围内的表单元素信息提交给服务器

    <from action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    </from>
    action 用于指定接收并处理表单数据的服务器程序的url地址
    method get/post
    name   用于指定表单的名称，以区分同一个页面中的多个表单域
    

    表单控件

    1. input输入：包含一个type属性，根据type属性值，输入字段有很多种形式(文本框，复选框，按钮等)

       button 按钮
       checkbox 复选框
       file  定义输入字段和“浏览”按钮共文件上传
       hidden 定义隐藏的输入字段
       image  定义图像的提交按钮
       password 定义密码字段
       radio 定义单选按钮
       reset 重置按钮，会清除表单中的所有数据
       submit 提交按钮，把表单数据发送到服务器
       text   定义单行的输入字段，用户可以其中输入文本。
       

       name定义input元素的名称，要求单选按钮和复选框要有相同的name值

       value规定input元素的值

       checked 规定input元素首次加载时应当被选中，主要针对单选按钮和复选框，主要作用一打开页面就要可以默认选中某个表单元素

       maxlength 规定输入字段中的字符的最大长度

       name和value是每个表单元素都有的属性值主要给后台人员使用

       用户名：<input type="text" name="username" value="请输入用户名" maxlength="6">
       密码：<input type="password" name="pwd">
       性别：男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
       <input type="submit" value="免费注册">
       <input type="reset" value="重新填写">
       

    2. 标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上用来增加用户体验

       <label for="sex">男</label>
       <input type="radio" name="sex" id="sex" />
       label标签的for属性应该与id属性一样
       

​ 3.select下拉表单元素

​ 在页面中，如果有多个选择让用户选择，下拉列表

          <from>
          籍贯：
          <select>
              <option>山东</option>
              <option>河南</option>
              <option selected="selectes">火星</option>当前项为默认选中项
          </select>

​ 4. textarea文本域元素：定义多行文本输入的控件

          <textarea rows="3" cols="20">
          文本内容
          </textarea>

​ 这三组表单元素都应该包含在form表单域里面，并且有name属性

         <from>
             <input type="text" name="username">
             <select name="籍贯">
                 <option>北京</option>
                 <option>上海</option>
             </select>
             <textarea name="message"></textarea>
        </from>

CSS

1.css规定：选择器以及一条或多条声明;选择器是用于指定CSS样式的html标签

h1 {color:red; font-size:25px;}

2.写在<style>里面

3.空格规范：冒号和选择器与大括号之间有一个空格

4.基础选择器

1. 标签选择器

2. 类选择器 （样式点定义 结构类调用）

   .类名{
        属性1：属性值1；
        ...
        }
   .red{
       color:red;
       }
   结构需要用class属性来调用class类
   <div class='red'>变红色</div>
   多类名：在标签class属性中写多个类名；多个类名中间必须用空格分开
   

3. id选择器：可以为标有特定id的html元素指定特定的样式

   #id名{属性1：属性值1；}

   注意：id属性只能在每个html文档中出现一次。

   4.通配符选择器：用“*”定义表示选取页面中所有元素（标签）
   不需要调用，自动就给所有的元素使用样式

5.字体属性

1. 字体系列：font-family属性定义文本的字体系列

各种字体之间必须使用英文状态下的逗号隔开；有空格隔开的多个单 词组成的字体加引号
最常用的字体：Microsoft YaHei，Tahoma，Arial，hiragino sans GB

2. 大小：font-size：20px;

3. 粗细：font-weight

   normal（默认值，不加粗 400）bold(加粗的 700) 100~900用数字表示粗细，注意数字后面不跟单位

4. 文字样式：font-style (italic浏览器会显示斜体的字体样式)

5. 字体复合属性

   body{
      font:font-style font-weight font-size/line-height font-family;
   }
   使用font属性时，必须按照语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
   不需要设置的属性可以省略，但必须保留size和family属性，否则font属性将不起作用
   

6.文本属性

1. 文本颜色color (预定义的颜色值，十六进制，RGB代码)

2. 对齐文本text-align (left,right,center)

3. 装饰文本text-decoration （none默认，underline下划线，overline上划线，line-through删除线）

4. 文本缩进text-indent

   text-indent:10px;
   text-indent:2em;
   em是一个相对单位，就是当前元素1个文字的大小
   

5. 行间距line-height (用于设置行间的距离)

7.引入方式

1. 行内样式表–将所有的CSS代码抽取出来，单独放到一个<style>标签中

2. 行内样式表–在元素标签内部的style属性中设定CSS样式

   <div style="color:red;font-size:12px;">青春不常在</div>
   

3. 外部样式表

   新建一个后缀名为.css的样式文件，在HTML页面中，使用<link>标签引入这个文件
   <link rel="stylesheet" href="css文件路径">
   rel--定义当前文档与被链接文档之间的关系，“stylesheet"表示被链接的文档是一个样式表文件
   

8.复合选择器

1. 后代选择器–可以选择父元素里面子元素

   元素1 元素2{样式声明}
   例如：
   <div class="nav">
        <ul>
            <li><a href="#">百度</a></li>
            <li><a href="#">百度</a></li>
        </ul>
   </div>
   .nav ul li a{
       color:red;
   }
   

2. 子选择器–只能选择作为某元素的最近一级子元素

   元素1>元素2{样式声明}
   例如：
   <div class="hot">
        <a href="#">大肘子</a>
        <ul>
           <li><a href="#">猪头</a></li>
           <li><a href="#">猪尾巴</a></li>
        </ul>
   </div>
   .hot>a{
       color:red;
   }
   

3. 并集选择器–通过逗号连接多组标签，为他们定义相同的样式

   元素1，元素2{样式声明}
   

4. 伪类选择器–用：表示项某些选择器添加特殊的效果

   按照LVHA的顺序声明:link,:visited,:hover;:active
   因为a链接在浏览器中具有默认样式，所以在实际工作中都需要给链接单独指定样式
   

   1.链接伪类选择器

   /*a是标签选择器 所有的链接*/
   a{color:gray;}
   /*:hover是链接伪类选择器 鼠标经过(由原来的灰色变成了红色*/
   a:hover{
     color:red;
   }
   

   2.：focus伪类选择器–用于获取获得焦点的表单元素

   焦点就是光标，一般情况<input>类表单元素才能获取，主要针对于表单元素来说
   input:focus{
       background-color:yellow;
   }
   

9.元素显示模式

1. <h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>块级元素–可以设置宽高
   文字类的元素内不能使用块级元素，<p>和<h1>~<h6>都是文字类块级标签不能放其他块级元素

2. <a>,<strong>,<b>,<em>,<span>行内元素，只能容纳文本或其他行内元素–不可以设置宽和高

   链接里面不能再放链接；特殊情况链接<a>里面可以放块级元素，但<a>转换一下块级模式最安全

3. 行内块元素–<img />,<input />,<td>同时具有块元素和行内元素的特点–可以设置宽高

4. 元素显示模式转换

   转换为块元素：display:block;

   转换为行内元素：dispaly:inline;

   转换为行内块：display:inline-block;

   <head>
       <style>
           a{
               width:150px;
               height:50px;
               background-color:pink;
               /*把行内元素a转换为块级元素*/
               display:block;
           }
       </style>
   </head>
   
   <body>
       <a href="#">hh</a>
   </body>
   

10.snipase截图工具，可以将截图贴回屏幕上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单版小米侧边栏</title>
    <style>
         /*1.把a转换为块级元素*/
         a {
             display:block;
             width:230px;
             height:40px;
             background-color: rgb(76, 76, 82);
             font-size:14px;
             color:coral;
             text-decoration:none;
             text-indent:2em;
         }
         /*2.鼠标经过链接变换背景颜色*/
         a:hover {
                background-color: cyan;
         }
    </style>
</head>
<body>
    <a href="#">手机 电话</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body> 
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单版小米侧边栏</title>
    <style>
         /*垂直居中：让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中*/
         div {
             display:block;
             width:230px;
             height:40px;
             background-color: rgb(76, 76, 82);
             line-height:40px;
         }        
    </style>
</head>
<body>
    <div>我要居中</div>
</body>
</html> 

11.背景

1. 背景颜色background-color:颜色值

2. 背景图片background-image:none|url

3. 背景平铺background-repeat:repeat|no-repeat|repeat-x|repeat-y

   ​ 不平铺 横向上 纵向上

4. 背景图片位置background-position:x y;x,y坐标.可以使用方位名词或者精确单位

   length百分数|由浮点数字和单位标识符组成的长度值

   position top|center|bottom|left|center|right方位名词

5. 背景图像固定background-attchment:scroll|fixed

   scroll背景图像是随对象内容滚动

   fixed背景图像固定

6. 背景复合写法：写在同一个属性background中

   一般习惯约定顺序background:背景颜色 图片地址 平铺 图像滚动 图片位置

7. 背景色半透明

   background:rgba(0,0,0,0.3)
   最后一个参数是alpha透明度，取值范围在0~1；前三个参数是颜色
   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航</title>
    <style>
         .nav a{
            display:inline-block;
            width:120px;
            height:58px;
            background-color:pink;
            text-align:center;
            line-height:58px;
            color:#fff; 
            text-decoration: none;
         }
        .nav .bg1{
            background:url(images/bg1.png) no-repeat;
        }
        .nav .bg11:hover{
            background-image:url(images/bg11.png);
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
    </div>
</body>
</html> 

14.三大特性

1. 层叠性：遵循就近原则

2. 继承性：子标签会继承父标签的某些样式，如文本颜色和字号，行高

   <style>
            body{
                color:pink;
                font:12px/24px 'Microsoft YaHei';
            }
            /* 24px表示行高 */
            body{
                font:12px/1.5 Microsoft YaHei;
            }
            /* 行高也可以不跟单位，1.5 */
            div{
                /*子元素继承了父元素body的行高1.5*/
                /* 这个1.5就是当前元素文字大小font-size的1.5倍  所以当前div的行高就是21px*/
                font-size:14px;
            }
            /* li没有手动指定文字大小，则会继承父亲的文字文字大小 */
       </style>
   
   </head>
   <body>
   
       <div>粉红色的回忆</div>
       <p>粉红色的回忆</p>
       <ul>
           <li>我没有指定文字大小</li>
       </ul>
   
   </body>
   </html> 
   

3. 优先级：继承或者*0000 元素选择器0001 类选择器/伪类选择器0010 ID选择器0100 行内样式style=""1000！important

   <style>
          body{
              color:black;
          }
           div{
              color:pink!important;
          }
          .text{
              color:red;
          } 
          #demo{
              color:green;
          }
       /*a链接浏览器默认制定了一个样式 蓝色的有下划线，不能继承，需要单独定义*/
       a{
           color:green;
       }
       </style>
   </head>
   <body>
      <div class="text" id="demo" style="color:cyan">你笑起来真好看</div>
      <a href="#">hh</a>
   </body>
   
   <title>权重的叠加</title>
       <style>
           /* 权重虽然会叠加，但是永远不会有进位的问题 */
          /* 复合选择器会有权重叠加的问题 */
          /* ul li权重 0001+0001=0002 */
          ul li{
              color:cyan;
          }
          /* li的权重是0001 */
          li{
              color:darkblue;
          }
          /* .nav li权重 0010+0001=0011 */
          .nav li{
              color:pink;
          }
       </style>
   </head>
   <body>
      <ul class="nav">
          <li>玉米</li>
          <li>火锅</li>
          <li>菠萝</li>
      </ul>
   </body>
   
   <style>
           /* 权重为11 */
         .nav li{
             color:red;
         }
         /* 权重为10 */
         .pink{
             color:pink;
             font-weight:700;
         }
         /* 权重为20 */
         .nav .pink{
             color:pink;
         }
       </style>
   </head>
   <body>
     <ul class="nav">
         <li class="pink">人生四大悲</li>
         <li>家里没宽带</li>
         <li>网速不够快</li>
         <li>手机没流量</li>
         <li>学校没wife</li>
     </ul>
   </body>
   

15.盒子模型

1. 边框border

   border:border-width||border-style||border-color
   边框简写：border:1px solid red;
   边框分开：border-top:1px solid red;/*只设定上边框*/
   

   border-style:

   none:没有边框

   solid:边框为单实线

   dashed:边框为虚线

   dotted:边框为点线

2. border-collapse:collapse;响铃边框合并在一起

3. 边框会影响盒子实际大小

4. padding内边距；padding属性可以有一到四个值；padding会影响盒子实际大小

   padding影响盒子好处：内边距可以撑开盒子，因为导航栏里面的字数不一样多，所以不用给每个盒子宽度了

5. margin外边距：控制盒子与盒子之间的距离

   外边距可以让块级盒子水平居中–盒子制定了宽度，盒子左右的外边距都设置为auto

   1.相邻块元素垂直外边距的合并

   2.嵌套块元素垂直外边距的塌陷

   对于两个嵌套关系的块元素，父元素有上边距同时子元素也有外边距，此时父元素会塌陷较大的外边距值

16.浮动

1.标准流

块级元素会独占一行，从上向下顺序排列div,hr,p,h1~h6,ul,ol,dl,form,table

行内元素会按照顺序从左到右顺序排列，碰到父元素边缘则自动换行span,a,i,em

2.浮动流

float属性用于创建浮动框float:属性值；

浮动的盒子不再保留原先的位置

浮动的元素是互相贴靠在一起的，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

1）先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2）先设置盒子大小，之后设置盒子位置

如果一个盒子浮动了，其余的兄弟也浮动

浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流

3.清除浮动

1.如果父盒子本身有高度，则不需要清除浮动

2.清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父亲有了高度就不会影响下面的标准流了

3.选择器{clear:属性值；}一般属性都用both同时清除左右两侧浮动的影响

4.额外标签法

在浮动元素末尾添加一个空的标签,例如，

,或者其他标签

注意：要求这个新的空标签必须是块级元素

.clear{
  clear:both;
}
<div class="footer"></div>

5.父级添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden,auto或scroll;缺点：无法显示溢出的部分

6.父亲:after伪元素法

.clearfix:after{
     content:"";
     display:block;
     height:0;
     clear:both;
     visibility:hidden;
}
.clearfix{
     *zoom:1;
}

没有增加标签，结构更简单

7.父亲双伪元素清除浮动

.clearfix:before,.clearfix:after{
   content:"";
   display:table;
}
.clearfix:after{
   clear:both;
}
.clearfix{
   *zoom:1;
}

17.PS切图

1.常见图片格式

1. jpg图片格式：JPEG对色彩的信息保存较好，高清，产品类的图片常用jpg格式
2. gif:最多可以存储256色，所以通常用来显示简单图形及字体，实际经常用于一些图片小动画效果
3. png：具有存储形式丰富的特点，能够保持透明背景。
4. PSD：是Photoshop的占用格式，里面可以存放图层，通道，遮罩等多种设计稿

2.图层切图：右击图层->导出PNG切片

很多情况需要合并图层：图层菜单->合并图层

3.切片切图：

利用切片工具手动划出；文件菜单->导出->存储为web设备所用格式04->选择我们要的图片格式->存储

4.PS插件切图

Cutterman是一款插件，能够自动将需要的图层进行输出

18.定位

将盒子定在某一个位置，所以定位也是在摆盒子，按照定位的方式移动盒子

定位=定位模式+边偏移

1.定位模式：用于指定元素在文档中的定位方式，通过position属性来设置

static静态定位

relative相对定位

absolute绝对定位

fixed固定定位

2.边偏移：决定了该元素的最终位置，有top,bottom,left和right4个属性

3.静态定位：是元素的默认定位方式，无定位的意思（标准流）

4.相对定位：是元素移动位置的时候，是相当于它原来的位置来说的

原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

5.绝对定位：

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

2.如果祖先元素有定位，则以最近一级的有定位的父元素为参考

3.绝对定位不在占有原来的位置

6.子绝父相

因为父级需要占有位置，用相对定位；子盒子不需要占有位置，用绝对定位

1.子级绝对定位不会占有位置，可以放到父盒子的任何一个地方不会影响其他的兄弟盒子

2.父盒子需要加定位限制子盒子在父盒子内显示

7.固定定位：是元素固定于浏览器可视区的位置。可以在浏览器页面滚动时元素的位置不会改变

1.以浏览器的可视窗口为参照点移动

2.跟父元素没有任何关系

3.不随滚动条滚动

4.不占有原来的位置

8.固定定位小技巧：固定在版心右侧位置

让固定定位的盒子left:50%(走到浏览器可视区的一半位置)

让固定定位的盒子margin-left:版心宽度的一半距离

9.粘性定位sticky（了解）

选择器{position:sticky;top:10px;}
1.以浏览器的可视窗口为参考点移动元素
2.占有原来的位置
3.必须添加top,bottom,left,right其中元素采用效果

10.定位叠放次序z-index

使用z-index来控制盒子的前后次序
选择器{z-index:1;}
数字后面不能加单位
只有定位的盒子才有z-index属性

11.定位的扩展

1. 绝对定位的盒子居中

① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。

② margin-left: -100px;：让盒子向左移动自身宽度的一半

2. 定位特殊特性

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度

2.块级元素添加绝对或者固定定位，如果不给宽度或者宽度，默认大小是内容的大小

3.浮动元素、绝对定位元素都不会触发外边距合并的问题

4.浮动的元素不会压住下面标准流的文字；但是绝对定位会压住下面标准流所有的内容

（浮动一开始是做文字环绕效果的）

19.元素的显示与隐藏

1.display显示隐藏–用于设置一个元素应如何显示

display:none;隐藏对象
display:block;除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不在占有原来的位置

2.visibility可见性–用于指定一个元素应可见还是隐藏

visibility:visible;元素可视
visibility:hiddlen;元素隐藏，继续占有原来的位置

3.overflow溢出–指定如果内容溢出一个元素的框时，会发生什么

visible:不剪切内容也不添加滚动条
hidden:不显示超过对象尺寸的内容，超出部分隐藏掉
scroll:不管超出内容否，总是显示滚动条
auto:超出自动显示滚动条，不超出不显示滚动条