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());
待续。
html css js知识整理,Html+Css+Js实用知识汇总(持续更新中...)相关推荐
- 技术问题收集整理汇总——持续更新中...
此文章的目的是收集自己在网上看到的不错的文章或帖子,并将这些文章的索引统一收集在这里,并持续更新中....大家有好的东西也可以分享过来哦! 1.关于java为什么要使用继承(或java使用继承有什么用 ...
- 2019 CSS经典面试题(史上最全,持续更新中...)
这些是我自己在学习过程中总结的一些知识点,本篇文章我将以面试题的形式分享给大家,希望对大家有所帮助,本文篇幅较长,您若认真看完,并且反复阅读,我相信对您的学习或者是面试,都会有一定帮助,同时希望大家批 ...
- 【前端基础知识笔记】 【项目导向型】(持续更新中)
我在做项目的过程中,学习了一些前端基础知识.为了方便以后的查询,将这些知识集中在这篇博客中,方便以后的查询. 注意!这些知识是不成体系的,因为我只是按照遇到的先后顺序记载于此.这是为了方便结合项目开发 ...
- Css之【字体系列】综合技巧总结(持续更新中...)
一.CSS 字体系列 body {font-family: 宋体;} 二.斜体文本 该属性有三个值: normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示 ...
- 前端知识点总结——JS高级(持续更新中)
前端知识点总结--JS高级(持续更新中) 1.字符串 什么是: 连续存储多个字符的字符数组 相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
- Java自学视频整理(持续更新中...)
1.Java基础视频 <张孝祥JAVA视频教程>完整版[RMVB](东西网) 历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播客) 张孝祥2010年贺岁视频:Java高新技术 ...
- 2020今日头条面试真题及答案整理最新最全持续更新中~~~~
大家好,我是好好学习天天编程的天天 一个整天在互联网上爬虫的程序员,每天给大家分享学习干货的攻城狮 2020今日头条面试真题及答案整理&最新最全&持续更新中~~~~ 2020今日头条面 ...
- 最值得收藏的 数字图像处理 全部知识点思维导图整理(武汉大学慕课课程)(持续更新中)
本文的思维导图根据慕课上的武汉大学数字图像处理国家精品课程整理而来并标记出重点内容 思维导图就整理了这么多,之后应该也不会更新此内容了, 有需要的可以去 我的主页 了解更多学科的精品思维导图整理 本文 ...
- Python爬虫及其它函数知识读记及简单用法,持续更新中...
Python爬虫相关函数知识读记及简单用法,持续更新中- requests [riˈkwests] n. 请求,要求( request的名词复数 ): 需要: 所请求的事物: 申请书 函数或单词- 音 ...
最新文章
- Java基础教程——包装类
- 更新elementui图标不显示_超简单elementui主题及变量修改方案
- 在AI领域每月投资一次,全面解析腾讯的人工智能奇招
- vmware克隆server2008R2造成SID冲突
- Maximum upload size exceede上传文件大小超出解决
- Zabbix 3.0 配置企业微信报警(注册---测试)
- linux下mtr命令,如何使用Linux mtr命令
- 访问属性与类数据成员
- (49)FPGA面试技能提升篇(仿真加速平台Palladium、Zebu、Veloce)
- Google 宣布 Kotlin-first 已四年,为什么 Java 开发者仍不买账?
- 用GO语言开发editplus编辑器插件(附源码)
- Maven自定义配置生成包名
- matlab 系数矩阵存储,用Matlab对矩阵进行LU分解法 值得收藏
- wifi物理地址怎么改_怎样修改手机的物理地址
- 尺规作图将任意角度三等分
- ffmpeg提取音频数据
- 利用NATAPP隧道解决微信公众号开发之本地调试难题
- Python采集--小说一键保存txt文本
- 流行和声(2)Major6和弦
- 01.MySQL数据库初识