一个多礼拜的学习，我对前端有了一定的认识，在这期间的学习中我掌握的不止是知识，更多的是学习知识的方法，人们常说：孰能生巧，在这学习的日子里，我摒弃了懒惰，学会了勤能补拙。
希望以后的日子自己能不断坚持，从菜鸟变大佬，希望大家一起监督，让我们一起变成更好的自己。不说了，分享下今天学习的知识咯！！
css文件代码压缩
一、安装node和npm（不做介绍,在我之前转载的博客中有） 二、安装ckstyle npm install -g ckstyle 三、安装ckstyle-serve（仅仅代码压缩可以不用安装这个） npm install -g ckstyle-serve 使用介绍:
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n4" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">先把需要压缩的文件上传至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</pre>
代码压缩之前样式显示:
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n6" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">vim basem.css
1</pre>
查看压缩后的文件:
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n8" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">vim basem-min.css
1</pre>
明显看出变得密密麻麻,中间少了许多间隙。[代码太多,仅提供部分以供参考]
html5常用标签
header：定义文档的页眉 头部 nav: 定义导航链接的部分 footer:定义文档或节页脚 底部 article: 定义文章 section:定义区段 aside: 定义其所处内容之外的内容 侧边 datalist 定义选项列表，请与input元素配合使用该元素
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n12" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><input type="text" name="" id="" value="请输入明星" list="star">
<datalist id="star">
<option value="刘德华">刘某</option> 低版本的浏览器需要value有值才行。
<option value="刘若英">刘女士</option>
<option value="爱丽丝">爱丽丝女士</option>
<option value="成吉思汗">成吉思汗</option>
</datalist>
12345678</pre>
fieldset元素可将表单内的相关元素分组，打包 和legend搭配使用。
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n14" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><fielset>
<legend>用户登录界面</legend>
用户 ：<input type="text" name="" id="">
</fielset>
1234</pre>
input新增表单
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n16" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">email:email邮箱
<input type="email" name="" id="" width="100px" height="30px">
tel:手机号码 //引入required 表示该字段必须输入值。
<input type="tel" name="" id="" placeholder="请输入手机号" autofocus required > //自动聚焦,且输入字体后，请输入手机号文件会消失
url:地址
<input type="url" name="" id="" accesskey="c" > //使用快捷键聚焦
number: 数字
<input type="number" name="" id="" placeholder="请输入手机号" autofocus > //只能输入数字。
time: 时间
<input type="time" name="" id="" autofocus >
date: 日期
<input type="date" name="" id="" autofocus >
search: 搜索
<input type="search" name="" id="">
range: 滑动条
<input type="range" name="" id="" placeholder="请输入手机号" autofocus >
file: 引入multiple 多个文件上传
<input type="file" name="" id="" autofocus required multiple width="80px">
12345678910111213141516171819</pre>
插入视频和音频
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这两种格式
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n20" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><audio controls autoplay loop> // 可以调节 自动播放 循环
<source src="../audio/bgsound.mp3" > 先播放第一个音频，不行则跳至第二个,都不行，则显示“你的浏览器版本过低”
<source src="../audio/music.ogg">
你的浏览器版本过低
</audio>
1234567</pre>
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文件格式。
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n22" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><video controls loop>
<source src="../video/movie04.ogg">
<source src="../video/mp4.mp4">
你的浏览器版本过低
</video>
1234567</pre>
插入视频:
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n24" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><iframe height=1000 width=1000 src='http://player.youku.com/embed/XNDI0MzE3NTUyOA==' frameborder=0 'allowfullscreen'></iframe>
1</pre>
结构伪类选择器、属性选择器、伪元素选择器
结构伪类选择器
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n27" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">html结构:
<ul class="ul">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
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</pre>
属性伪类选择器
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n29" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">html结构：
<div class="attr"><a href="#" class="ad">包含属性</a>
<a href="#" name="mingzi">有名字</a>
<a href="#" class="testh">test开头</a>
<a href="#"class="testf">test开头</a>
<a href="#" class="af">包含属性</a>
</div>
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</pre>
伪元素选择器
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n31" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">html结构：
<p>乐居财经讯 杨倩 7月3日，因原董事长王振华被刑事拘留，新城控股董事会选举产生新任董事长，王振华之子王晓松接任董事长一职。期间，网络上出现涉及王晓松的传闻，称“儿子做局”、“这次的案发或许是父子相争”等。</p>
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</pre>
before 和after 伪元素
demo：
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n34" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">html：
<div class="ifont">
<input type="text" name="" id="">
</div>
css：
.ifont::before{
/在该标签前面添加一个盒子，默认是行内元素，没有宽高./
content: "我是谁";
}
.ifont::after{
/在该标签后面添加一个伪元素,/
content: "我在哪里？";
}
1234567891011121314151617</pre>
和图标字体联合使用：
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n37" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">html结构：
<div class="icfont">
<input type="text" class="in">
</div>
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</pre>
练习实现如下效果
悬浮前：
悬浮后:
