一个多礼拜的学习，我对前端有了一定的认识，在这期间的学习中我掌握的不止是知识，更多的是学习知识的方法，人们常说：孰能生巧，在这学习的日子里，我摒弃了懒惰，学会了勤能补拙。
希望以后的日子自己能不断坚持，从菜鸟变大佬，希望大家一起监督，让我们一起变成更好的自己。不说了，分享下今天学习的知识咯！！
css文件代码压缩
一、安装node和npm（不做介绍,在我之前转载的博客中有） 二、安装ckstyle npm install -g ckstyle 三、安装ckstyle-serve（仅仅代码压缩可以不用安装这个） npm install -g ckstyle-serve 使用介绍:
先把需要压缩的文件上传至linux系统中去 example: rz basem.css.
新建一个basem-min.css文件. touch basem-min.css chmod +755 basem-min.css
ckstyle compress basem.css 代码压缩。
ckstyle compress basem.css >basem-min.css 将basem.css文件压缩后写入basem-min.css文件中。
1234
代码压缩之前样式显示:
vim basem.css就截图部分代码图片以示参考。
1
查看压缩后的文件:
vim basem-min.css
1
明显看出变得密密麻麻,中间少了许多间隙。[代码太多,仅提供部分以供参考]
html5常用标签
header：定义文档的页眉 头部 nav: 定义导航链接的部分 footer:定义文档或节页脚 底部 article: 定义文章 section:定义区段 aside: 定义其所处内容之外的内容 侧边 datalist 定义选项列表，请与input元素配合使用该元素
12345678
fieldset元素可将表单内的相关元素分组，打包 和legend搭配使用。
用户 ：
1234
input新增表单
email:email邮箱效果图： time date range
tel:手机号码 //引入required 表示该字段必须输入值。
//自动聚焦,且输入字体后，请输入手机号文件会消失
url:地址
//使用快捷键聚焦
number: 数字
//只能输入数字。
time: 时间
date: 日期
search: 搜索
range: 滑动条
file: 引入multiple 多个文件上传
12345678910111213141516171819
插入视频和音频
Audio Firefox：支持 Ogg Vorbis和WAV Opera ：支持Ogg Vorbis和WAV Safari ：支持MP3，AAC格式 ，和MP4 Chrome ：支持Ogg Vorbis，MP3，WAV，AAC和MP4 Internet Explorer 9+ ：支持MP3，AAC格式 ，和MP4 IOS ：支持MP3，AAC格式 ，和MP4 Android ：支持AAC和MP3 为了最大程度支持所有上面提到的浏览器，建议开发者使用Ogg Vorbis和MP3这两种格式
1234567
Video Firefox ：支持Ogg Theora格式和WEBM Opera ：支持Ogg Theora格式和WEBM Safari ：支持MP4 Chrome ：支持Ogg Theora格式，MP4和WEBM Internet Explorer 9 ：支持MP4和WEBM(需要安装插件) IOS ：支持MP4 Android ：支持MP4和WEBM(Android 2.3版本以上) 为了支持上述所有的浏览器，建议使用ogg和MP4视频文件作为source元素,也可以使用MP4和WEBM文件格式。
1234567
插入视频:
1
结构伪类选择器、属性选择器、伪元素选择器
结构伪类选择器
html结构:
- 第一个
- 第二个
- 第三个
- 第四个
- 第五个
css样式:
.ul{
margin-top: 10px;
padding-left: 20px;
width: 100%;
list-style: none;
}
li:first-child{
background-color: #999999;
}
li:last-child{
background-color: green;
}
li:nth-child(even){
background-color: rosybrown;
}
li:nth-child(odd){
font-size: 20px;
}
li:nth-child(3){
background-color: yellow;
}
li:nth-child(4n){
font-weight: 700;
font-style: italic;
}
ul :first-child{
background-color:royalblue; /这个效果这 li:first-child 一样。都是选中第一个li/
}
1234567891011121314151617181920212223242526272829303132333435363738394041
属性伪类选择器
html结构：
css样式：
.attr{
width: 400px;
margin: 20px auto;
height: 100px;
}
.attr a{
display: inline-block;
height: 20px;
font-size: 14px;
line-height: 20px;
text-decoration: none;
color: #999999;
}
.attr a[class]{ //选中包含class属性的所有的a标签
color: #00aaee;
}
.attr a[class="ad"]{ //选中class=“ad” 的a 标签
font-weight: bolder;
}
.attr a[name]{ //选中包含name属性的所有的a标签
color: #ecc000;
}
.attr a[class^="test"]{ //选中a标签中class 以 test 开头的
color: #ff3333;
}
.attr a[class$="f"]{ /选中以 “f” 结尾的a标签
font-style: italic;
}
.attr a[class*="t"]{ //选中class 中包含 t 的标签
font-family: 方正粗黑宋简体;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445
伪元素选择器
html结构：
乐居财经讯 杨倩 7月3日，因原董事长王振华被刑事拘留，新城控股董事会选举产生新任董事长，王振华之子王晓松接任董事长一职。期间，网络上出现涉及王晓松的传闻，称“儿子做局”、“这次的案发或许是父子相争”等。
css样式：
p{
margin: auto;
width: 500px;
line-height: 20px;
}
p:first-letter{ //第一个字体
font-size: 30px;
}
p:first-line{ //第一行
background-color: #00aaee;
}
p::selection{ // 文字选中之后的效果
color: #ffb300;
background-color: pink;
}1234567891011121314151617181920212223
before 和after 伪元素
demo：
html：效果如下：
css：
.ifont::before{
/在该标签前面添加一个盒子，默认是行内元素，没有宽高./
content: "我是谁";
}
.ifont::after{
/在该标签后面添加一个伪元素,/
content: "我在哪里？";
}
1234567891011121314151617
和图标字体联合使用：
html结构：悬浮之前：
css样式：
@font-face {
font-family: 'icomoon';
src: url('../icomoon/fonts/icomoon.eot?90ytl7');
src: url('../icomoon/fonts/icomoon.eot?90ytl7#iefix') format('embedded-opentype'),
url('../icomoon/fonts/icomoon.ttf?90ytl7') format('truetype'),
url('../icomoon/fonts/icomoon.woff?90ytl7') format('woff'),
url('../icomoon/fonts/icomoon.svg?90ytl7#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.icfont{
position: relative;
width: 100px;
height: 25px;
margin: auto;
box-sizing: border-box;
}
.icfont::before{
content: "\ea2e";
font-family: icomoon;
font-style: normal;
font-size: 12px;
font-weight: normal;
position: absolute;
right: 5px;
top: 6px;
transition: all 0.5s;
}
.icfont:hover{
border: 1px solid #ff3333;
}
.icfont:hover .in{
border: 0;
}
.icfont:hover::before{
color: red;
transform: rotate(90deg);
}
.in{
margin: 0px;
padding: 2px 6px ;
outline: none;
width: 100%;
height: 100%;
box-sizing: border-box;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
练习实现如下效果
悬浮前：悬浮后: