html css js知识整理,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样式引用方法：

内联式：这是红色文字

嵌入式：

外链式：

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

居中布局

水平居中：

定宽块级元素：margin:0 auto;

行内元素：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());

待续。