Html+Css+Js实用知识汇总(持续更新中...)
2016-11-25 本文已影响0人
佳勋学长
Html篇
基本概念：
- html：超文本标记语言(Hyper Text Markup Language)
- html5：下一代的html
- xhtml：更严谨更纯净的html
表头
<head>
<title>网站标题</title>
<meta charset="utf-8" />//页面编码格式
<meta name="keywords" content="网页关键词" />
<meta name="description" content="网页描述" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />//移动端视窗控制
<meta http-equiv="Refresh" content="3;url=www.baidu.com" />//重定向
<link rel="icon" href="/favicon.ico" type="image/x-icon" />//网站图标
<link rel="stylesheet" href="css/style.css" />//引入css样式
<script src="js/mine.js"></script>//引入js
<base href="www.baidu.com" />//规定所有链接打开的默认地址
<base target="_blank" />//所有链接在新窗口打开
</head>
常用块元素
- 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样式引用方法：
- 内联式：<span style="color:red;">这是红色文字</span>
- 嵌入式：<style type="text/css">span{color:red;}</style>
- 外链式：<link rel="stylesheet" type="text/css" href="style.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());
待续。
