Html+Css+Js实用知识汇总(持续更新中...)

Html篇

基本概念：

• html：超文本标记语言(Hyper Text Markup Language)
• html5：下一代的html
• xhtml：更严谨更纯净的html

表头

  
  //页面编码格式
  
  
  //移动端视窗控制
  //重定向
  
    //网站图标
  //引入css样式
  //引入js
  //规定所有链接打开的默认地址
  //所有链接在新窗口打开

常用块元素

• div
• h1-h6
• form
• ol,ul
• table
• p
• pre
• dl
• hr
• blockquote
• address

常用行内元素

• a
• em
• strong
• span
• input
• img
• label
• code
• q

常用内联块状元素

• img
• input

Css篇

css样式引用方法：

• 内联式：这是红色文字
• 嵌入式：
• 外链式：

优先级：内联式>嵌入式>外链式。

居中布局

• 水平居中：
  1. 定宽块级元素：margin:0 auto;
  2. 行内元素：text-align:center;
• 垂直居中：vertical-align:middle;
• 绝对定位居中：
  div{
  position:absolute;
  width:200px;
  height:100px;
  top:50%;
  left:50%;
  margin-top:-100px;//高度的一半
  margin-left:-50px;//宽度的一半
  }

文字超出长度后显示省略号

p{
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
 }

a标签的四种状态：

a:link{color:#FF0000;}  //未访问时的状态
a:visited{color:#00FF00;}  //已访问过的状态
a:hover{color:#FF00FF;}  //鼠标移动到链接上时的状态
a:active{color:#0000FF;}  //鼠标按下去时的状态

选择器

• div > p：选择div中的直接子元素p
• div p：选择div中的所有后代元素p
• div + p：选择与div相邻的元素p
• :nth-child(n)：选择所有后代元素中的第n个元素

清除浮动

/*clearfix 主要是用在浮动层的父层*/
.clearfix::after{
   content: "";
   display: block;
   visibility: hidden;
   clear: both;
   overflow: hidden;
   font-size: 0;
}
/* clear 主要是用在浮动层与浮动层之间，和浮动层同一级，
   如果想要撑开父层的高度，clear 就要放在最后。 */
.clear{clear: both;}

移动端1像素

 @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
    .border-1px::after{
        -webkit-transform:scaleY(0.7);
        transform:scaleY(0.7);
     }
  }
  @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-1px::after{
        -webkit-transform:scaleY(0.5);
        transform:scaleY(0.5);
    }
  }   

.border-1px{position:relative;}
.border-1px:after{
    display: block;
    position: absolute;
    left:0;
    bottom:0;
    width:100%;
    border-bottom:1px solid #000;
    content:' ';
}

Js篇

时间戳和日期互相转换

    // 获取当前时间戳(以s为单位)
    var timestamp = Date.parse(new Date());
    timestamp = timestamp / 1000;
    //当前时间戳为：1403149534
    console.log("当前时间戳为：" + timestamp);

    // 获取某个时间格式的时间戳
    var stringTime = "2014-07-10 10:21:12";
    var timestamp2 = Date.parse(new Date(stringTime));
    timestamp2 = timestamp2 / 1000;
    //2014-07-10 10:21:12的时间戳为：1404958872 
    console.log(stringTime + "的时间戳为：" + timestamp2);

    // 将当前时间换成时间格式字符串
    var timestamp3 = 1403058804;
    var newDate = new Date();
    newDate.setTime(timestamp3 * 1000);
    // Wed Jun 18 2014 
    console.log(newDate.toDateString());

待续。