000 (H5*) 常见代码

目录：

1：HTML

2：CSS

3：JS

4：Vue

 

 

正文

1：HTML

 1：块级元素(block-level)

、

、
、

1. ~

    

   2：行内元素(inline-level)

   、

   、、、、、、、

    

   3：行内块元素（inline-block）

   、、

    

   4: img标签

     

   src:图像路径

   title：鼠标悬浮的时候显示的文本

   alt：图片不显示的时候，替换文本

   border：边框

    

   5：表单元素

   text" value="北京" style="color: #ccc;" 

   password" value="北京" style="color: #ccc;"

    

   radio" value="北京" style="color: #ccc;" 

   checkbox" value="北京" style="color: #ccc;" 

    

   button" value="北京" style="color: #ccc;" 

   submit" value="北京" style="color: #ccc;" 

   reset" value="北京" style="color: #ccc;" 

   image" value="北京" style="color: #ccc;" 

    

   file" value="北京" style="color: #ccc;" 

    

   text   password 文本  密码

   radio checkbox(要有name属性)  单选框 复选框

   button submit  reset image    普通按钮  提交按钮 重置按钮  背景图片按钮

   file 上传文件按钮

    

   6：自定义列表  dl

   <dl> 

      <dt>css网站 

      <dd>网址为www.divcss5.com 

     

   div css网站
    

     

   网址为www.divcss5.com
    

     

   div+css网站
    

     

   网址为www.divcss5.com
    

    

   dl：defined list 自定义列表

   dt:　　defined title 列表项标题

   dd：　　defined　　description　　列表项描述

    

   7：表格  Table

    

         

         

            

               

            

          

          

              

                

      

              

           

   个人信息表

   姓名
   小王

    

   table：表格

   caption：标题

   thead  表头

   tbody：表格主体

   tr：一行

   th：表头的单元格

   td:  表格主体单元格

    

    

   2：CSS

   标签 类 id 通配符

   后代 子代

   交集  并集

   伪类

    

    

   1：标签选择器：

   th {

   　color:red;

   }

    

   2：class选择器

   .suibian {

   　　 color: blue;

   }

    

    

   3：id选择器

   #last {

   　　color: pink;

   }

    

   4：通配选择器

   * {  /** 代表所有标签的意思 使用较少 */

      color: pink;

   }

    

   5：后代选择器

   div p  {  

   　　color: pink;

   }

    

   6：子代选择器

   ul > li > a {

      color: pink; 

   }

    

   7：交集选择器

   标签选择器和类选择器

   div.red {  /*交集选择器  既是 div  又 叫 red  满足条件 用的较少 特殊情况使用  了解 */

   　　color: red;

   }

    

    

   8：并集选择器

   div, 

   p, 

   span {   /*并集选择器  用逗号隔开  , 代表  和  集体声明 适合于相同样式   */

    color: red;

   }

    

    

   9：链接伪类选择器  LV hao

   a:link {  /* 未访问过的连接状态*/

           color: #3c3c3c;

   }

   a:visited {  /*这个链接我们已经点过的样子  已访问过链接*/

           color: orange;

   }

   a:hover {  /*鼠标经过连接时候的样子*/

           color: #f10215;

   }

   a:active {  /*鼠标按下时候的样子*/

           color: green;

   }

    

   10：font 风格 权重  大小 字体

   选择器{font: font-style  font-weight  font-size/line-height  font-family;  风格 权重  大小 字体}

   h1 {

           font: italic 700 12px "微软雅黑";

   }

    

   11：装饰  text-decoration

   div {

             /*text-decoration: none;  取消装饰*/

             text-decoration: underline; /*下划线*/

             /*text-decoration: overline; 上划线*/

             /*text-decoration: line-through;  删除线*/

   }

    

   12：背景  background

   background: red url(image.jpg) repeat-y  scroll 50% 0 ; 

   background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置x轴  y轴

   如果是关键字

   top center bottom

   left center right

    

   13： 阴影  shadow

   box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4) outset/inset;

   box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  外/内阴影；

    

   14：边框 border

   border: 1px solid red; /*上边框*/

   大小 风格 颜色

   none：没有边框即忽略所有边框的宽度（默认值）

   solid：边框为单实线(最为常用的)

   dashed：边框为虚线  

   dotted：边框为点线

    

   15：内边距 padding

   /*上下左右都是 20px*/

   padding: 20px; 

    /*上下 10  左右 20*/

   padding: 10px 20px;

   /*上 10  左右 20  下 是 30*/

   padding: 10px 20px 30px; 

   /* 上 10  右20  下 30 左 40*/

   padding: 10px 20px 30px 40px;