html5+css+js简单了解

最近敲了敲HTML5的代码，感觉真的是很吸引人的东西，反正我是非常喜欢的，所以想写一点关于HTML的东xi
首先呢我了解的不多，所以也是想写一点点我对它的认识。
说起HTML5是打开Pycharm敲python代码的时候才发现可以编写html5的代码，也是很强大的编辑器了吧。
html5编写起来并没有那么的难，若果没有css色彩和js的动态感觉html5也是特别的单调。还有一点是html编写错误之后是可以运行的，所以要好好且认真的去编写，省的到最后千行代码之中去检查哪个字符的错误，Pycharm可以自动首字母提示代码行，很不错，所以说VS老大，无论现在谁是老大，以后可能Pycharm老二吧，谁让它是python主导呢。
demo.html代码段

"en">

    "UTF-8">
    

    "stylesheet prefetch" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
   "stylesheet" href="css/style.css">




"text-align: center;clear: both;">
    
    


class="sidebar">
    
"leftside-navigation" class="nano">
        
class="nano-content">
            

                "demo.html">class="fa fa-dashboard">^_^
            

            
class="sub-menu">
                "javascript:void(0);">class="fa fa-cogs">AAAAA class="arrow fa fa-angle-right pul-right"> 
               

                   
"ui-alerts-notifications.html" >Alerts & Notifcations>
                   

                   
"ui-pan.html">Panels
                   
                   
"demo.html">Buttons
                   
                   
"demo.html">Sliders & Progress
                   
                   
"demo.html">Modals & Popups
                   
                   
"demo.html">Icons
                   
                   
"demo.html">Grid
                   

               
            

        
class="sub-menu">
            "javascript:void(0);">class="fa fa-table">BBBBBBclass ="arrow fa fa-angle-right pull-right">
             

                 
"demo.html">Basic Tables
                 

                 
"demo.html">Data Tables
                 
             
        

            
class="sub-menu">
                "javascript:void(0);">class="fa fa fa-tasks">ZhangYangclass="arrow fa fa-angle-right pull-right">
                

                    
"demo.html">ZhangYang
                    
                    
"demo.html">Work
                    
                    
"demo.html">Work
                    
                    
"demo.html">Work
                    
                
            
        
    

只有***html5***展示的效果，是很单调的

 

 style.css代码段

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');
body {
color: #5D5F63;
background: #293949;
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.sidebar-toggle {
margin-left: -240px;
}
.sidebar {
width: 240px;
height: 100%;
background: #293949;
position: absolute;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 100;
}
.sidebar #leftside-navigation ul,
.sidebar #leftside-navigation ul ul {
margin: -2px 0 0;
padding: 0;
}
.sidebar #leftside-navigation ul li {
list-style-type: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar #leftside-navigation ul li.active > a {
color: #1abc9c;
}
.sidebar #leftside-navigation ul li.active ul {
display: block;
}
.sidebar #leftside-navigation ul li a {
color: #aeb2b7;
text-decoration: none;
display: block;
padding: 18px 0 18px 25px;
font-size: 12px;
outline: 0;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.sidebar #leftside-navigation ul li a:hover {
color: #1abc9c;
}
.sidebar #leftside-navigation ul li a span {
display: inline-block;
}
.sidebar #leftside-navigation ul li a i {
width: 20px;
}
.sidebar #leftside-navigation ul li a i .fa-angle-left,
.sidebar #leftside-navigation ul li a i .fa-angle-right {
padding-top: 3px;
}
.sidebar #leftside-navigation ul ul {
display: none;
}
.sidebar #leftside-navigation ul ul li {
background: #23313f;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
border-bottom: none;
}
.sidebar #leftside-navigation ul ul li a {
font-size: 12px;
padding-top: 13px;
padding-bottom: 13px;
color: #aeb2b7;
}

添加***css文件***以后的显示，无动态效果。

 

 index.js文件代码

$("#leftside-navigation .sub-menu > a").click(function(e) {
  $("#leftside-navigation ul ul").slideUp(), $(this).next().is(":visible") || $(this).next().slideDown(),
  e.stopPropagation()
})

当然加上js和css的代码，还缺少一个东西那就是js的框架，要不然写的js文件它也不知道找哪个爸爸做依靠呀，

 

 

最终展示效果