html5+css3初级程序员

HTML5元素

html5的简介

2014 年 10 月 28 日，W3C 组织公开发布 HTML5 标准规范。
HTML5 针对大量不规范的 HTML 文档，做到了良好的兼容性。

HTML5 和 HTML4 的区别

DTD 的变化：因为HTML4.01基于SGML，HTML5不基于SGML
HTML5 的语法变化
某些元素可以省略结束标签
```
（    等） 
```
没有结束标签的元素
```
(
 等）
```
属性值可以不用引号括起来
标签不再区分大小写
某些标志性的属性可以省略属性值，通常为 boolean 类型

HTML5 的优势

解决跨浏览器，跨平台问题
增强了 web 的应用程序（比如以前用 Flash 来播放视频，现在直接使用 HTML5 来播放视频，使得手机网页也能看视频）

HTML5废弃的标签

big center font frame frameset noframes

HTML5新增的元素

 用于定义文档或节的页眉
 用于定义文档或节的页脚
 用于定义文档内的文章
 用于定义文档中的一个区域（或节）
 用于定义与当前页面或当前文章的内容几乎无关的附属信息
 用于定义页面上的导航链接部分

 
用于定义一段独立的引用，经常与说明(caption)配合使用，通常用在主文中的图片，代码，表格等。
 用于表示是与其相关联的引用的说明/标题，用于描述其父节点
元素里的其他数据。
 用于对多个~
元素进行组合

 
 效果 
 你好
 
 你好 
 
    ![](img/adv1.png)
    图片标题





    
    
    

 
 效果： 
 
 
 

 
  
 

    今天天气凉快吗？
    今天下雨了，天气很凉快

 
 效果： 
 
 
 今天天气凉快吗？
今天下雨了，天气很凉快 
 
 
 ### HTML5的表单控件 
  
    0  100 

    50

 
 ### HTML5新增的type类型 
 color number email
time 生成一个时间选择器
datetime 生成一个 UTC 的日期时间选择器
datetimelocal  生成一个本地化的日期时间选择器
date  显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时间。谷歌识别
 
 ### HTML5新增的表单属性 
 placeholder 主要用在文本框，规定可描述输入字段预期值的简短的提示信息
autofocus 当为某个表单控件增加该属性后，当浏览器打开这个页面， 这个表单控件会自动获得焦点
list 为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择
pattern 用于验证表单输入的内容，通常 HTML5 的 type 属性，比如email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后， 验证会更加高效
required 必需在提交之前填写输入字段
spellcheck 拼写检查，为、等元素新增属性
multiple 一次上传多个文件
maxlength <textarea>新增<br />maxlength：用于规定文本区域最大字符数。
wrap：是否包含换号符（soft/ hard） 
</code></pre> 
 <p>效果：</p> 
 <pre><code><form id="login" action="" method="get">
    用户名：<input type="text" name="username" placeholder="请输出用户名" required><br>
    年龄：<input type="number" name="num" min=10 max=20 step="5" value="10"><br>
    邮箱：<input type="email" name="email"><br>
    生日：<input type="date" name="data"><br>  
    爱好：<select size="2" multiple  name="like">
        <option>篮球</option>
        <option>足球</option>
        <option>羽毛球球</option>
    </select>
    喜欢的颜色：<input type="color" name="color"><br>
    <button type="submit">提交</button>
</form>
</code></pre> 
 <p><form id="login" action="" method="get"></p> 
 <pre><code>用户名：<input type="text" name="username" placeholder="请输出用户名" required><br>
年龄：<input type="number" name="num" min=10 max=20 step="5" value="10"><br>
邮箱：<input type="email" name="email"><br>
生日：<input type="date" name="data"><br>  
爱好：<select size="2" multiple  name="like">
    <option>篮球</option>
    <option>足球</option>
    <option>羽毛球球</option>
</select>
喜欢的颜色：<input type="color" name="color"><br>
<button type="submit">提交</button></code></pre> 
 <p></form></p> 
 <h2>css3选择器</h2> 
 <h3>兄弟选择器</h3> 
 <pre><code>.box~p： 
.box所有的p都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻)
</code></pre> 
 <h3>属性选择器：</h3> 
 <pre><code>E[attribute^=value] 用于选取带有以指定值开头的属性值的元素
E[attribute$=value] 用于选取属性值以指定值结尾的元素
E[attribute*=value] 用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词
</code></pre> 
 <h3>伪类选择器</h3> 
 <pre><code>:root 选择文档的根元素，HTML 里，永远是<html>元素
:last-child 向元素添加样式，且该元素是它的父元素的最后一个子元素
:nth-child(n) 向元素添加样式，且该元素是它的父元素的第 n 个子元素
:nth-last-child(n) 向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素
:only-child 向元素添加样式，且该元素是它的父元素的唯一子元素
:first-of-type 向元素添加样式，且该元素是同级同类型元素中第一个元 素
:last-of-type 向元素添加样式，且该元素是同级同类型元素中最后一个 元素
:nth-of-type(n) 向元素添加样式，且该元素是同级同类型元素中第 n 个元 素
:nth-last-oftype(n)向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
:only-of-type 向元素添加样式，且该元素是同级同类型元素中唯一的元素
:empty 向没有子元素（包括文本内容）的元素添加样式
</code></pre> 
 <h3>伪元素选择器</h3> 
 <pre><code>:enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
:disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的样式
:not(selector) 向不是 selector 元素的元素添加样式
:target 向正在访问的锚点目标元素添加样式


</code></pre> 
 <h2>css3属性</h2> 
 <h3>background</h3> 
 <pre><code>background-clip 设置背景覆盖范围 border-box/padding-box/content-box 
background-origin 设置背景覆盖的起点 border-box/padding-box/content-box 
background-size 设置背景的大小 cover/contain/长度/百分比 
</code></pre> 
 <h3>文字</h3> 
 <pre><code>text-overflow 设置当文本溢出元素框时处理方式 clip/ellipsis 
word-break 只对英文起作用 以字母作为换行依据 normal/break-word 
word-wrap 只对英文起作用 以单词作为换行依据 normal/break-all/keep-all 
white-space:pre-wrap  只对中文起作用，强制换行
</code></pre> 
 <h3>盒子属性</h3> 
 <pre><code>border-radius
box-shadow
resize

</code></pre> 
 <h2>变形</h2> 
 <h3>translate(x,y)</h3> 
 <p>表示元素水平方向移动 x，垂直方向移动 y，其中 y 可以省略，表示垂直方向没有位移</p> 
 <pre><code>translateX(x)：表示元素水平方向移动 x。
translateY(y)：表示元素垂直方向移动y。
</code></pre> 
 <h3>rotate(angle)</h3> 
 <p>表示元素顺时针旋转 angle 角度，angle 的单位通常为 deg</p> 
 <h3>scale(x,y)</h3> 
 <p>表示元素水平方向缩放比为 x，垂直方向上缩放比为y，其中y可以省略，表示y和 x相同，以保持缩放比。</p> 
 <pre><code>scaleX(x)：表示元素水平方向缩放比为 x。
scaleY(y)：表示元素垂直方向上缩放比为 y。
</code></pre> 
 <h3>skew(angleX ,angleY)</h3> 
 <p>表示元素沿着 x 轴方向倾斜angleX角度，沿着y轴方向倾斜angleY角度，其中 angleY可以省略，表示 Y 轴方向不倾斜。</p> 
 <pre><code>skewX(angleX)：表示元素沿着 x 轴方向倾斜angleX 角度。
skewY(angleY)：表示元素沿着 y 轴方向倾斜 angleY 角度。
</code></pre> 
 <h3>transform-origin</h3> 
 <p>表示元素旋转的中心点</p> 
 <p>默认值为 50% 50%。</p> 
 <ul> 
  <li>第一个值表 示元素旋转中心点的水平位置，它还可以赋值 left、right、center、长度、百分比；</li> 
  <li>第二个值表示元素旋转中心点的垂直位置，它还可以赋值 top、bottom、 center、长度、百分比。</li> 
 </ul> 
 <h3>CSS3 的 3D 变形属性</h3> 
 <p>transform 增加了三个变形函数：</p> 
 <pre><code>rotateX：表示元素沿着 x 轴旋转。
rotateY：表示元素沿着 y 轴旋转。
rotateZ：表示元素沿着 z 轴旋转。
</code></pre> 
 <h3>transform-style</h3> 
 <p>用来设置嵌套的子元素在 3D 空间中显示效果。它可以设置两个属性值，flat（子元素不保留其 3D 位置，默认值）和 preserve-3d（子元 素保留它的 3D 位置）。</p> 
 <h3>perspective</h3> 
 <p>设置成透视效果，透视效果为近大远小。该属性值用来设置 3D 元素距离视图的距离，单位为像素，已经内置了，我们只需要写具体数值即可，默认值为 0。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。</p> 
 <h3>perspective-origin</h3> 
 <p>设置 3D 元素所基于的 x 轴和 y 轴，改变 3D 元素的底部位置，该属性取值同transform-origin，默认值为 50% 50%。</p> 
 <p><style></p> 
 <pre><code>.box{
    width: 300px;
    height: 300px;
    margin: 50px auto;
    perspective: 500px;
}
.con{
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -150px;
    animation: rotate 4s infinite;
}
.con .side{
    position: absolute;
    width: 300px;
    height: 300px;
    font-size: 44px;
    line-height: 300px;
    text-align: center;
}
.con .before{
    background-color: rgba(0,0,0,0.4);
}
.con .left{
    background-color: rgba(255,0,0,0.4);
    left: -300px;
    top: 0;
    transform: rotateY(-90deg);
    transform-origin:right;
}
.con .right{
    background-color: rgba(255,255,0,0.4);
    left: 300px;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: left;
}
.con .top{
    background-color: rgba(0,255,0,0.4);
    left: 0;
    top: -300px;
    transform: rotateX(90deg);
    transform-origin: bottom;
}
.con .bottom{
    background-color: rgba(0,0,255,0.4);
    left: 0;
    top: 300px;
    transform: rotateX(-90deg);
    transform-origin: top;
}
.con .back{
    background-color: rgba(200,122,0,0.4);
    transform: translateZ(-300px);
}

@keyframes rotate{
    0%{
        transform:rotateX(0) rotateY(0);
    }
    50%{
        transform:rotateX(0) rotateY(360deg);
    }
    100%{
        transform:rotateX(360deg) rotateY(360deg);
    }
}</code></pre> 
 <p></style></p> 
 <p><div class="box"></p> 
 <pre><code><div class="con">
    <div class="side before">前</div>
    <div class="side back">后</div>
    <div class="side top">上</div>
    <div class="side bottom">下</div>
    <div class="side left">左</div>
    <div class="side right">右</div>
</div></code></pre> 
 <p></div></p> 
 <p>代码：</p> 
 <pre><code><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>立方体</title>
    <style>
        
        .box{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            perspective: 500px;
        }
        .con{
            position:relative;
            width:300px;
            height:300px;
            transform-style:preserve-3d;
            transform-origin:50% 50% -150px;
            animation:rotate 4s infinite;
        }
        .con .side{
            position:absolute;
            width:300px;
            height:300px;
            font-size:44px;
            line-height: 300px;
            text-align: center;
        }
        .con .before{
            background-color: rgba(0,0,0,0.4);
        }
        .con .left{
            background-color: rgba(255,0,0,0.4);
            left:-300px;
            top:0;
            transform:rotateY(-90deg);
            transform-origin:right;
        }
        .con .right{
            background-color: rgba(255,255,0,0.4);
            left:300px;
            top:0;
            transform:rotateY(90deg);
            transform-origin:left;
        }
        .con .top{
            background-color: rgba(0,255,0,0.4);
            left:0;
            top:-300px;
            transform:rotateX(90deg);
            transform-origin:bottom;
        }
        .con .bottom{
            background-color: rgba(0,0,255,0.4);
            left:0;
            top:300px;
            transform:rotateX(-90deg);
            transform-origin:top;
        }
        .con .back{
            background-color: rgba(200,122,0,0.4);
            transform:translateZ(-300px);
        }

        @keyframes rotate{
            0%{
                transform:rotateX(0) rotateY(0);
            }
            50%{
                transform:rotateX(0) rotateY(360deg);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="con">
        <div class="side before">前</div>
        <div class="side back">后</div>
        <div class="side top">上</div>
        <div class="side bottom">下</div>
        <div class="side left">左</div>
        <div class="side right">右</div>
    </div>
</div>
</body>
</html>
</code></pre> 
 <h2>说明</h2> 
 <h3>CSS3 perspective 属性</h3> 
 <p>实例，设置元素被查看位置的视图：</p> 
 <pre><code>div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}
</code></pre> 
 <p><style></p> 
 <h1>div1</h1> 
 <p>{<br>position: relative;<br>height: 150px;<br>width: 150px;<br>margin: 50px;<br>padding:10px;<br>border: 1px solid black;<br>perspective:150;<br>-webkit-perspective:150; /<em> Safari and Chrome </em>/<br>}</p> 
 <h1>div2</h1> 
 <p>{<br>padding:50px;<br>position: absolute;<br>border: 1px solid black;<br>background-color: yellow;<br>transform: rotateX(45deg);<br>-webkit-transform: rotateX(45deg); /<em> Safari and Chrome </em>/<br>}<br></style></p> 
 <p><div id="div1"><br> <div id="div2">HELLO</div><br></div></p> 
 <p>代码：</p> 
 <pre><code><!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>

<body>

<div id="div1">
<div id="div2">HELLO</div>
</div>

</body>
</html>
</code></pre> 
 <h3>浏览器支持</h3> 
 <p>目前浏览器都不支持 perspective 属性。</p> 
 <p>Chrome 和 Safari 支持替代的 -webkit-perspective 属性。</p> 
 <h3>定义和用法</h3> 
 <p>perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。</p> 
 <p>当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。</p> 
 <p><strong>注释</strong>：perspective 属性只影响 3D 转换元素。</p> 
 <p><strong>提示</strong>：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。</p> 
 <h2>过渡动画</h2> 
 <pre><code>transition:property transition-duration transition-delay transition-timing-function     

transition-delay 设置过渡的延迟时间
transition-duration 设置过渡的过渡时间
transition-timing-function 设置过渡的时间曲线

linear/ease/ease-in/easeout/ease-in-out/

transition-property 设置哪条 CSS 使用过渡
none/all/CSS 属性名称列表

@keyframes name{

}

animation:name duration delay count state

animation-name  使用@keyframes 定义的动画
animation-delay 设置动画的延迟时间

animation-timing-function 设置动画的时间曲线
linear/ease/ease-in/easeout/ease-in-out

animation-iteration-count  设置动画播放次数数字 /infinite
animation-direction 设置动画反向播放 normal/alternate
animation-play-state 设置动画播放状态 paused/running
animation-fill-mode: forwards 动画保持最终状态
</code></pre> 
 <h2>动画</h2> 
 <p><style></p> 
 <pre><code>.box{
    position: relative;
    width: 600px;
    height: 400px;
    border:2px solid blue;
    overflow: hidden;
}
.box .main{
    width: 100px;
    height: 100px;
    background-color: red;
    animation:translate 2s 1s 1 linear forwards;
    
}
.box:hover .main{
    animation-play-state: paused;
}

@keyframes translate{
    0%{
        transform: translateX(0) translateY(0);
    }
    25%{
        transform: translateX(500px) translateY(0);
    }
    50%{
        transform: translateX(500px) translateY(300px);
    }
    75%{
        transform: translateX(0) translateY(300px);
    }
    100%{
        transform: translateX(0) translateY(300px);
    }
}</code></pre> 
 <p></style></p> 
 <p><div class="box"></p> 
 <pre><code><div class="main"></div></code></pre> 
 <p></div></p> 
 <p>代码：</p> 
 <pre><code><!DOCTYPE html>
<html>
<head>
<title>过渡动画</title>
<meta charset="utf-8">
<style>
    .box{
        position: relative;
        width: 600px;
        height: 400px;
        border:2px solid blue;
        overflow: hidden;
    }
    .box .main{
        width: 100px;
        height: 100px;
        background-color: red;
        animation:translate 2s 1s 1 linear forwards;
        
    }
    .box:hover .main{
        animation-play-state: paused;
    }

    @keyframes translate{
        0%{
            transform: translateX(0) translateY(0);
        }
        25%{
            transform: translateX(500px) translateY(0);
        }
        50%{
            transform: translateX(500px) translateY(300px);
        }
        75%{
            transform: translateX(0) translateY(300px);
        }
        100%{
            transform: translateX(0) translateY(300px);
        }
    }
</style>
</head>
<body>
<div class="box">
    <div class="main"></div>
</div>
</body>
</html>

</code></pre> 
 <h2>弹性盒子</h2> 
 <p>CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。</p> 
 <h3>弹性盒模型概念</h3> 
 <p>任何一个容器都可以指定弹性布局</p> 
 <p>设置 flex 布局以后，子元素的 float,clear,vertical-align 等样式全部失效</p> 
 <pre><code>display:flex;或 display:inline-flex;
</code></pre> 
 <h3>弹性父元素属性</h3> 
 <pre><code>display:flex;
flex-direction: row|row-reverse|column| column-reverse
指定了弹性子元素在父容器中的位置。

juestify-content: flex-start|flex-end|center|space-between| space-around 
水平对齐方式

align-items:flex-start | flex-end | center | baseline | stretch 
垂直对齐方式

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

align-content:
当flex-wrap起作用发生换行时，该属性控制每行的对齐方式
</code></pre> 
 <h3>弹性子元素属性</h3> 
 <p>order:num 数值小的排在前面。可以为负值</p> 
 <p>flex 属性用于指定弹性子元素如何分配空间</p> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1357921744790249472"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html5+css3初级程序员)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1832626394996240384.htm"
                           title="用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码" target="_blank">用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码</a>
                        <span class="text-muted">天眼查</span>
<a class="tag" taget="_blank" href="/search/%E7%94%A8html%E5%86%99%E5%87%BA%E7%94%9F%E6%97%A5%E8%9B%8B%E7%B3%95/1.htm">用html写出生日蛋糕</a>
                        <div>.birthday.container{width:600px;height:600px;margin:0pxauto;background:#fafafa;border-radius:5px;position:relative;}/****顶层的**/.birthday.top-one{position:absolute;width:280px;height:280px;bottom:200px</div>
                    </li>
                    <li><a href="/article/1831551939771461632.htm"
                           title="linux的webkit桌面应用,使用node-webkit构建桌面应用程序" target="_blank">linux的webkit桌面应用,使用node-webkit构建桌面应用程序</a>
                        <span class="text-muted">萌萌爱恋</span>

                        <div>Web前端的现状目前的Web前端的现状较之5-6年前，简直不能同日而语：从所使用的技术、工具、框架到开发一个产品所需要付出的工作量，从前端开发从业人员的数量到Web应用的数量，从企业对于Web前端的重要程度的认识到Web实际上为企业带来的回报，一切都有了翻天覆地的变化。借助HTML5+CSS3的普及，加上一些开箱即用的CSS框架(如bootstrap，foundation等)支持，人们已经可以非常</div>
                    </li>
                    <li><a href="/article/1828906454971674624.htm"
                           title="新书速览|HTML5+CSS3 Web前端开发与实例教程：微课视频版" target="_blank">新书速览|HTML5+CSS3 Web前端开发与实例教程：微课视频版</a>
                        <span class="text-muted">全栈开发圈</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
                        <div>《HTML5+CSS3Web前端开发与实例教程：微课视频版》本书内容《HTML5+CSS3Web前端开发与实例教程：微课视频版》秉承“思政引领，立德树人”的教育理念，自然融入多维度、深层次的思政元素，全面对标企业和行业需求；引入现代Web前端开发的核心技术，如Flex布局、Grid布局，以及人工智能编程插件，同时融入企业开发实践，确保学习内容与实际工作紧密相关。全书以一个完整案例为主线，结合综合项</div>
                    </li>
                    <li><a href="/article/1826736948258107392.htm"
                           title="HTML5+CSS3小实例：抽屉式相册" target="_blank">HTML5+CSS3小实例：抽屉式相册</a>
                        <span class="text-muted">艾恩小灰灰</span>

                        <div>HTML5+CSS3小实例：抽屉式相册技术栈：HTML+CSS效果：源码：抽屉式相册*{/*初始化取消内外边距*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*弹性布局水平垂直居中*/display:flex;justify-content:center;align-items:center;background-color:#000;}.</div>
                    </li>
                    <li><a href="/article/1768164627641860096.htm"
                           title="HTML5+CSS3小实例：3D分层图像悬停效果" target="_blank">HTML5+CSS3小实例：3D分层图像悬停效果</a>
                        <span class="text-muted">艾恩小灰灰</span>

                        <div>实例：3D分层图像悬停效果技术栈：HTML+CSS效果：源码：【html】3D分层图像悬停效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*弹性布局居中*/display:flex;justify-content:center;align-items:center;overflow:hidden;/*渐变背景*/</div>
                    </li>
                    <li><a href="/article/1759904069578747904.htm"
                           title="高级 Java 必须突破的 10 个知识点，你get到几个了？" target="_blank">高级 Java 必须突破的 10 个知识点，你get到几个了？</a>
                        <span class="text-muted">LiJiaSi</span>

                        <div>对于搞开发的我们其实也是一样，现在流行的框架越来越多，封装的也越来越完善，各种框架可以搞定一切，几乎不用关注底层的实现，初级程序员只要熟悉基本的使用方法，便可以快速的开发上线；但对于高级程序员来讲，内功的修炼却越发的重要，比如算法、设计模式、底层原理等，只有把这些基础熟练之后，才能在开发过程中知其然知其所以然，出现问题时能快速定位到问题的本质。1、Java基础技术体系、JVM内存分配、垃圾回收、类</div>
                    </li>
                    <li><a href="/article/1759900109346271232.htm"
                           title="HTML5+CSS3小实例：有点小酷的input输入框动画" target="_blank">HTML5+CSS3小实例：有点小酷的input输入框动画</a>
                        <span class="text-muted">艾恩小灰灰</span>

                        <div>HTML5+CSS3实现有点小酷的input输入框动画，带动画的输入框，总是让人忍不住去点它。先看效果：源代码：您的姓名*{margin:0;padding:0;outline:none;/*这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的*/box-sizing:border-box;}body{/*弹性布局水平垂直居中*/display:flex;align-items:cen</div>
                    </li>
                    <li><a href="/article/1759870046122897408.htm"
                           title="HTML5+CSS3小实例：广告灯牌效果的loading动画" target="_blank">HTML5+CSS3小实例：广告灯牌效果的loading动画</a>
                        <span class="text-muted">艾恩小灰灰</span>

                        <div>实例：广告灯牌效果的loading动画技术栈：HTML+CSS效果：源码：【html】广告灯牌效果的loading动画拼命加载中...【css】*{/*初始化*/margin:0;padding:0;/*box-sizing:border-box;*/}body{/*100%窗口高度*/min-height:100vh;/*弹性布局水平+垂直居中*/display:flex;justify-con</div>
                    </li>
                    <li><a href="/article/1755940551531708416.htm"
                           title="自学大数据：大数据学习线路及各阶段学习书籍" target="_blank">自学大数据：大数据学习线路及各阶段学习书籍</a>
                        <span class="text-muted">yoku酱</span>

                        <div>大数据学习路线及各阶段学习书籍推荐！阶段一、大数据基础——java语言基础方面（1）Java语言基础Java开发介绍、熟悉Eclipse开发工具、Java语言基础、Java流程控制、Java字符串、Java数组与类和对象、数字处理类与核心技术、I/O与反射、多线程、Swing程序与集合类（2）HTML、CSS与JavaScriptPC端网站布局、HTML5+CSS3基础、WebApp页面布局、原生</div>
                    </li>
                    <li><a href="/article/1755937613862158336.htm"
                           title="HTML5+CSS3学习与实践" target="_blank">HTML5+CSS3学习与实践</a>
                        <span class="text-muted">技术人生-小草</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%B8%8E%E5%AE%9E%E8%B7%B5/1.htm">学习与实践</a><a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/CSS3/1.htm">CSS3</a>
                        <div>文章目录学习资料HTML4开发者文档HTML标准结构文档声明字符编码设置语言标签排版标签语义化标签块级元素与行内元素文本标签图片标签超链接常用属性跳转锚点唤起指定应用列表有序列表无序列表列表嵌套自定义列表表格基本结构常用属性跨行与跨列常用标签补充表单基本结构提交按钮重置按钮禁用表单控件label标签fieldset与legend的使用（了解即可）框架标签HTML全局属性meta元信息CSS3CSS</div>
                    </li>
                    <li><a href="/article/1755885590336782336.htm"
                           title="【web前端开发】HTML及CSS简单页面布局练习" target="_blank">【web前端开发】HTML及CSS简单页面布局练习</a>
                        <span class="text-muted">爱写代码的July</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">web前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>案例一网页课程案例一网页课程课程体系实战课程案例二商品详情页案例二商品详情商品详情产品参数：产品名称：HTML5+CSS3网页设计  ISBN编号：9787302480723  书名：HTML5+CSS3网页设计作者：刘玉红，蒲娟 出版时间：2017-09  定价：78.00元出版社名称：清华大学出版社  开</div>
                    </li>
                    <li><a href="/article/1755535538078629888.htm"
                           title="web期末作业设计网页：学校网站设计——个人介绍1(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：学校网站设计——个人介绍1(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535410542428160.htm"
                           title="web期末作业设计网页：动漫网站设计——大鱼海棠(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：动漫网站设计——大鱼海棠(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535411142213632.htm"
                           title="web期末作业设计网页：学校网站设计——我的学校(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：学校网站设计——我的学校(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535411746193408.htm"
                           title="web期末作业设计网页：学校网站设计——Ditto(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：学校网站设计——Ditto(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535283639566336.htm"
                           title="web期末作业设计网页：动漫网站设计——蜡笔小新(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：动漫网站设计——蜡笔小新(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535284180631552.htm"
                           title="web期末作业设计网页：动漫网站设计——千与千寻(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：动漫网站设计——千与千寻(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/html%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html期末大作业</a><a class="tag" taget="_blank" href="/search/dw%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">dw静态网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">web前端网页设计</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1755535282301583360.htm"
                           title="web期末作业设计网页：动漫网站设计——海绵宝宝(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：动漫网站设计——海绵宝宝(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/html%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html期末大作业</a><a class="tag" taget="_blank" href="/search/dw%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">dw静态网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">web前端网页设计</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作海绵宝宝网站，请一起学习吧。作品</div>
                    </li>
                    <li><a href="/article/1755533999012331520.htm"
                           title="web期末作业设计网页：动漫网站设计——哆啦A梦(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业" target="_blank">web期末作业设计网页：动漫网站设计——哆啦A梦(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业</a>
                        <span class="text-muted">深巷积木青春</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业,可满足大学生网页大作业网页设计需求,喜欢的可以下载!嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。作品目录一、</div>
                    </li>
                    <li><a href="/article/1754193720636358656.htm"
                           title="web前端开发需要掌握哪些技术就可以拿到高薪？" target="_blank">web前端开发需要掌握哪些技术就可以拿到高薪？</a>
                        <span class="text-muted">web前端学习指南</span>

                        <div>首先我们来看看web前端的基本工作职责首先，你必须是一个合格的“页面仔”，这个叫法不好听，但很生动。我们都知道，所有呈现的内容都是基于HTML网页的。如果你的html、css（包括现在的HTML5+CSS3）基础不会，或者不够扎实，都很难在有大的进步，或者你的JS很好，但布局基础不行，还是不能算合格的web前端。其次，前端主要负责实现视觉和交互功能，以及与后端服务器通信，完成业务逻辑。现在前端的核</div>
                    </li>
                    <li><a href="/article/1753680735337725952.htm"
                           title="前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）" target="_blank">前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）</a>
                        <span class="text-muted">简·AI</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>注：本文的css样式均使用less写法1、字体居中（1）先text-align:center;行内元素水平居中（2）再line-heigh:(盒子高度);行内元素垂直居中text-align:center;line-height:(30/@vw);2、盒子居中情景1：版心居中margin:0auto;情景2：标题栏制作时让左右两个弹性盒子居中的方法（1）设置浮动（2）给父级添加行高line-hei</div>
                    </li>
                    <li><a href="/article/1753477729853915136.htm"
                           title="【web前端实例代码】Html5+css3+JavaScript创建点击打开照片库网页图标效果~适合初学者练手~超简单 ~" target="_blank">【web前端实例代码】Html5+css3+JavaScript创建点击打开照片库网页图标效果~适合初学者练手~超简单 ~</a>
                        <span class="text-muted">南北极之间</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E7%89%B9%E6%95%88%E6%BA%90%E7%A0%81/1.htm">web前端特效源码</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E7%BC%96%E7%A8%8B%E5%85%A5%E9%97%A8%E4%BB%A3%E7%A0%81/1.htm">网页设计编程入门代码</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%85%A5%E9%97%A8/1.htm">编程入门</a>
                        <div>b站视频演示效果：效果图：完整代码：照片库【前端实例代码】Html5+css3创建点击打开照片库网页图标效果~适合初学者练手~超简单~body{</div>
                    </li>
                    <li><a href="/article/1752450996736376832.htm"
                           title="Notepad++设置与查看字符编码以及查看二进制" target="_blank">Notepad++设置与查看字符编码以及查看二进制</a>
                        <span class="text-muted">曹元_</span>

                        <div>Notepad++可以说是最常用的文本编辑器了，免费且小巧。Notepad++本身能够识别文本的编码，因此拿到一个文本文件时，直接使用Notepad++打开，一般不会出现乱码。作为一个初级程序员，经常想查看下java文件使用的字符编码，或者想研究下class文件。就需要对Notepad++里面的字符编码功能有所了解啦。字符编码相关的菜单Notepad++中字符编码相关的菜单是“编码(N)”。常用四</div>
                    </li>
                    <li><a href="/article/1752401276945055744.htm"
                           title="SpringSecurity前传--与springboot2.0初步集成" target="_blank">SpringSecurity前传--与springboot2.0初步集成</a>
                        <span class="text-muted">青衣敖王侯</span>

                        <div>  相信大家都知道登录功能，初级程序员的脑海里面就是账号，密码，登录按钮然后到后台数据库查询一下信息就OK了。但其实登录没有这么简单，因为：1.我们所面临的登录认证模式很复杂1.1短信的登录1.2微信的登录1.3QQ的登录2.我们要支持多种前端渠道2.1网页登录2.2APP登录3.支持集群环境，跨应用工作，Session控制，控制用户权限，说防护与身份认证相关的攻击  认证和授权如此复杂，因此也诞</div>
                    </li>
                    <li><a href="/article/1752210404836130816.htm"
                           title="Java程序员最常用的20％的技术" target="_blank">Java程序员最常用的20％的技术</a>
                        <span class="text-muted">青春埋在这</span>

                        <div>我听说编程语言，经常使用的是其中20％的技术。在Java这门语言中，这20％包括哪些内容？要想找到一份Java初级程序员的工作，有哪些是必须掌握的，有哪些是可以现学现卖的？一个完整的Javaweb项目，有哪些具体模块，每个模块用到的技术是哪些？常用api（String，StringBuffer/StringBuilder等）1.集合类，线程类。2.Servlet（很少用纯粹的servlet写，但你</div>
                    </li>
                    <li><a href="/article/1751736623076229120.htm"
                           title="跟着pink老师前端入门教程-day12" target="_blank">跟着pink老师前端入门教程-day12</a>
                        <span class="text-muted">axiu呀</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%87%AA%E5%AD%A6/1.htm">前端自学</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>二十六、HTML5+CSS3的提高1、HTML5的新特性HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。声明：1.新特性增加了很多，但是我们专注于开发常用的新特性。2.基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。1.1HTML5新增的</div>
                    </li>
                    <li><a href="/article/1751449030350618624.htm"
                           title="HTML5+CSS3高颜值好看的登录注册PC端和移动端界面，赶紧收藏起来吧！" target="_blank">HTML5+CSS3高颜值好看的登录注册PC端和移动端界面，赶紧收藏起来吧！</a>
                        <span class="text-muted">℡古壹</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>代码1登录使用账号或者手机号密码登录其他方式登录代码2登录欢迎来到登录界面，您可以通过这个界面登录，也可以通过其他方式实现登录使用QQ登录登录还没有账号？注册代码3登录Login没有账号?注册代码4注 册注册登 录找回密码登录SignInSignUp需要代码的小伙伴可以在评论区拿哦！！！</div>
                    </li>
                    <li><a href="/article/1751081871548104704.htm"
                           title="基于SpringBoot实现策略模式提供系统接口扩展能力" target="_blank">基于SpringBoot实现策略模式提供系统接口扩展能力</a>
                        <span class="text-muted">人帝</span>
<a class="tag" taget="_blank" href="/search/%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F/1.htm">策略模式</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a>
                        <div>相信我们对策略模式都有耳闻，但是可能不知道它在项目中具体能有什么作用，我们需要在什么场景下才能去尽可能得去使用策略模式。这里我简单的列出一个我之前在公司做的一个需求：跟第三方oa系统对接接口，对方需要回调我们当前系统，但是是不同的业务接口回调，我们系统可以根据一个字段来区分需要走哪个业务分支，可能初级程序员刚接触这个需求的时候想法是，多个接口回调，那就写多个接口罢了，强调接口隔离；或者直接一个接口</div>
                    </li>
                    <li><a href="/article/1751044201241395200.htm"
                           title="HTML5+CSS3小实例：3D卡片hover翻转效果" target="_blank">HTML5+CSS3小实例：3D卡片hover翻转效果</a>
                        <span class="text-muted">艾恩小灰灰</span>

                        <div>实例：3D卡片hover翻转效果技术栈：HTML+CSS效果：源码：【html】3D卡片hover翻转效果蒙奇·D·路飞蒙奇·D·路飞，日本漫画《航海王》及其衍生作品中的男主角。外号“草帽”路飞，是草帽一伙、草帽大船团的船长，极恶的世代之一。橡胶果实能力者，悬赏金15亿贝里。梦想是找到传说中的OnePiece，成为海贼王。罗罗诺亚·索隆罗罗诺亚・索隆，日本漫画《航海王》及其衍生作品中的角色。“草帽</div>
                    </li>
                    <li><a href="/article/1750772385449000960.htm"
                           title="网站制作流程，favicon图标，SEO优化，首页制作，logo SEO优化" target="_blank">网站制作流程，favicon图标，SEO优化，首页制作，logo SEO优化</a>
                        <span class="text-muted">Everything_na</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>网站制作流程开发工具以及技术栈1.开发工具VScode，ps，主流浏览器2.技术栈利用HTML5+CSS3手动布局，可以大量使用H5新增标签和样式采用结构与样式相分离，模块化开发良好的代码规范ClassName命名命名应尽量精短，明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线连接。制作首页，列表页，注册页三个页面项目搭建工作1.需要创建如下文件夹：项目文件夹样式类图片文件夹：i</div>
                    </li>
                                <li><a href="/article/62.htm"
                                       title="关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题" target="_blank">关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题</a>
                                    <span class="text-muted">何必如此</span>
<a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/%E8%B6%85%E9%93%BE%E6%8E%A5/1.htm">超链接</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/1.htm">文件下载</a><a class="tag" taget="_blank" href="/search/%E7%AA%97%E5%8F%A3/1.htm">窗口</a>
                                    <div>生成下载页面是需要选择“录入提交页面”，生成之后默认的下载页面<a>标签超链接为：<a href="<%=root_stimage%>stimage/image.jsp?filename=<%=strfile234%>&attachname=<%=java.net.URLEncoder.encode(file234filesourc</div>
                                </li>
                                <li><a href="/article/189.htm"
                                       title="【Spark九十八】Standalone Cluster Mode下的资源调度源代码分析" target="_blank">【Spark九十八】Standalone Cluster Mode下的资源调度源代码分析</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/cluster/1.htm">cluster</a>
                                    <div>在分析源代码之前，首先对Standalone Cluster Mode的资源调度有一个基本的认识： 
首先，运行一个Application需要Driver进程和一组Executor进程。在Standalone Cluster Mode下，Driver和Executor都是在Master的监护下给Worker发消息创建(Driver进程和Executor进程都需要分配内存和CPU，这就需要Maste</div>
                                </li>
                                <li><a href="/article/316.htm"
                                       title="linux上独立安装部署spark" target="_blank">linux上独立安装部署spark</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85/1.htm">安装</a><a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/1.4/1.htm">1.4</a><a class="tag" taget="_blank" href="/search/%E9%83%A8%E7%BD%B2/1.htm">部署</a>
                                    <div>下面讲一下linux上安装spark，以 Standalone Mode 安装 
  
1）首先安装JDK 
  
下载JDK：jdk-7u79-linux-x64.tar.gz  ，版本是1.7以上都行，解压 tar -zxvf jdk-7u79-linux-x64.tar.gz   
  
然后配置 ~/.bashrc&nb</div>
                                </li>
                                <li><a href="/article/443.htm"
                                       title="Java 字节码之解析一" target="_blank">Java 字节码之解析一</a>
                                    <span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81/1.htm">字节码</a><a class="tag" taget="_blank" href="/search/javap/1.htm">javap</a>
                                    <div>  
         
  
一：  Java  字节代码的组织形式    
  
类文件 {  
     OxCAFEBABE ，小版本号，大版本号，常量池大小，常量池数组，访问控制标记，当前类信息，父类信息，实现的接口个数，实现的接口信息数组，域个数，域信息数组，方法个数，方法信息数组，属性个数，属性信息数组  
}  
&nbs</div>
                                </li>
                                <li><a href="/article/570.htm"
                                       title="java各种小工具代码" target="_blank">java各种小工具代码</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>1.数组转换成List 
import java.util.Arrays;

Arrays.asList(Object[] obj); 2.判断一个String型是否有值 
import org.springframework.util.StringUtils;

if (StringUtils.hasText(str)) 3.判断一个List是否有值 
import org.spring</div>
                                </li>
                                <li><a href="/article/697.htm"
                                       title="加快FineReport报表设计的几个心得体会" target="_blank">加快FineReport报表设计的几个心得体会</a>
                                    <span class="text-muted">老A不折腾</span>
<a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a>
                                    <div>一、从远程服务器大批量取数进行表样设计时，最好按“列顺序”取一个“空的SQL语句”，这样可提高设计速度。否则每次设计时模板均要从远程读取数据，速度相当慢！！ 
二、找一个富文本编辑软件（如NOTEPAD+）编辑SQL语句，这样会很好地检查语法。有时候带参数较多检查语法复杂时，结合FineReport中生成的日志，再找一个第三方数据库访问软件（如PL/SQL）进行数据检索，可以很快定位语法错误。 
</div>
                                </li>
                                <li><a href="/article/824.htm"
                                       title="mysql linux启动与停止" target="_blank">mysql linux启动与停止</a>
                                    <span class="text-muted">墙头上一根草</span>

                                    <div>如何启动/停止/重启MySQL一、启动方式1、使用 service 启动：service mysqld start2、使用 mysqld 脚本启动：/etc/inint.d/mysqld start3、使用 safe_mysqld 启动：safe_mysqld&二、停止1、使用 service 启动：service mysqld stop2、使用 mysqld 脚本启动：/etc/inin</div>
                                </li>
                                <li><a href="/article/951.htm"
                                       title="Spring中事务管理浅谈" target="_blank">Spring中事务管理浅谈</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1%E7%AE%A1%E7%90%86/1.htm">事务管理</a>
                                    <div>   
Spring中事务管理浅谈  
By Tony Jiang@2012-1-20 Spring中对事务的声明式管理 
拿一个XML举例    
[html]  
view plain 
copy 
print 
?    
 
 <?xml version="1.0" encoding="UTF-8"?>&nb</div>
                                </li>
                                <li><a href="/article/1078.htm"
                                       title="php中隐形字符65279（utf-8的BOM头）问题" target="_blank">php中隐形字符65279（utf-8的BOM头）问题</a>
                                    <span class="text-muted">alxw4616</span>

                                    <div>php中隐形字符65279（utf-8的BOM头）问题 
今天遇到一个问题. php输出JSON 前端在解析时发生问题:parsererror. 
  
调试: 
1.仔细对比字符串发现字符串拼写正确.怀疑是 非打印字符的问题. 
2.逐一将字符串还原为unicode编码. 发现在字符串头的位置出现了一个 65279的非打印字符. 
  
     </div>
                                </li>
                                <li><a href="/article/1205.htm"
                                       title="调用对象是否需要传递对象(初学者一定要注意这个问题)" target="_blank">调用对象是否需要传递对象(初学者一定要注意这个问题)</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BC%A0%E9%80%92%E4%B8%8E%E8%B0%83%E7%94%A8%E6%8A%80%E5%B7%A7/1.htm">对象的传递与调用技巧</a>
                                    <div>  
  
类和对象的简单的复习,在做项目的过程中有时候不知道怎样来调用类创建的对象,简单的几个类可以看清楚,一般在项目中创建十几个类往往就不知道怎么来看 
  
为了以后能够看清楚,现在来回顾一下类和对象的创建,对象的调用和传递(前面写过一篇) 
  
类和对象的基础概念: 
  
JAVA中万事万物都是类 类有字段(属性),方法,嵌套类和嵌套接</div>
                                </li>
                                <li><a href="/article/1332.htm"
                                       title="JDK1.5 AtomicLong实例" target="_blank">JDK1.5 AtomicLong实例</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/AtomicLong/1.htm">AtomicLong</a>
                                    <div>JDK1.5 AtomicLong实例 
类 AtomicLong 
可以用原子方式更新的 long 值。有关原子变量属性的描述，请参阅 java.util.concurrent.atomic 包规范。AtomicLong 可用在应用程序中（如以原子方式增加的序列号），并且不能用于替换 Long。但是，此类确实扩展了 Number，允许那些处理基于数字类的工具和实用工具进行统一访问。 
 </div>
                                </li>
                                <li><a href="/article/1459.htm"
                                       title="自定义的RPC的Java实现" target="_blank">自定义的RPC的Java实现</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/rpc/1.htm">rpc</a>
                                    <div>        网上看到纯java实现的RPC，很不错。 
        RPC的全名Remote Process Call，即远程过程调用。使用RPC，可以像使用本地的程序一样使用远程服务器上的程序。下面是一个简单的RPC 调用实例，从中可以看到RPC如何</div>
                                </li>
                                <li><a href="/article/1586.htm"
                                       title="【RPC框架Hessian一】Hessian RPC Hello World" target="_blank">【RPC框架Hessian一】Hessian RPC Hello World</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Hello+world/1.htm">Hello world</a>
                                    <div>什么是Hessian 
The Hessian binary web service protocol makes web services usable without requiring a large framework, and without learning yet another alphabet soup of protocols. Because it is a binary p</div>
                                </li>
                                <li><a href="/article/1713.htm"
                                       title="【Spark九十五】Spark Shell操作Spark SQL" target="_blank">【Spark九十五】Spark Shell操作Spark SQL</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a>
                                    <div>在Spark Shell上，通过创建HiveContext可以直接进行Hive操作 
  
1. 操作Hive中已存在的表 
  
[hadoop@hadoop bin]$ ./spark-shell
Spark assembly has been built with Hive, including Datanucleus jars on classpath
Welcom</div>
                                </li>
                                <li><a href="/article/1840.htm"
                                       title="F5　往header加入客户端的ip" target="_blank">F5　往header加入客户端的ip</a>
                                    <span class="text-muted">ronin47</span>

                                    <div>when HTTP_RESPONSE {if {[HTTP::is_redirect]}{         HTTP::header replace Location [string map {:port/ /} [HTTP::header value Location]]HTTP::header replace Lo</div>
                                </li>
                                <li><a href="/article/1967.htm"
                                       title="java-61-在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差. 求所有数对之差的最大值。例如在数组{2, 4, 1, 16, 7, 5," target="_blank">java-61-在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差. 求所有数对之差的最大值。例如在数组{2, 4, 1, 16, 7, 5,</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>思路来自： 
http://zhedahht.blog.163.com/blog/static/2541117420116135376632/ 
写了个java版的 
 
 


public class GreatestLeftRightDiff {

	/**
	 * Q61.在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差。
	 * 求所有数对之差的最大值。例如在数组</div>
                                </li>
                                <li><a href="/article/2094.htm"
                                       title="mongoDB 索引" target="_blank">mongoDB 索引</a>
                                    <span class="text-muted">开窍的石头</span>
<a class="tag" taget="_blank" href="/search/mongoDB%E7%B4%A2%E5%BC%95/1.htm">mongoDB索引</a>
                                    <div>在这一节中我们讲讲在mongo中如何创建索引 
      得到当前查询的索引信息 
     db.user.find(_id:12).explain(); 
       cursor: basicCoursor 指的是没有索引 
 &</div>
                                </li>
                                <li><a href="/article/2221.htm"
                                       title="[硬件和系统]迎峰度夏" target="_blank">[硬件和系统]迎峰度夏</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F/1.htm">系统</a>
                                    <div>  从这几天的气温来看，今年夏天的高温天气可能会维持在一个比较长的时间内 
 
   所以，从现在开始准备渡过炎热的夏天。。。。 
 
   每间房屋要有一个落地电风扇，一个空调(空调的功率和房间的面积有密切的关系) 
   坐的，躺的地方要有凉垫，床上要有凉席 
   
   电脑的机箱</div>
                                </li>
                                <li><a href="/article/2348.htm"
                                       title="基于ThinkPHP开发的公司官网" target="_blank">基于ThinkPHP开发的公司官网</a>
                                    <span class="text-muted">cuiyadll</span>
<a class="tag" taget="_blank" href="/search/%E8%A1%8C%E4%B8%9A%E7%B3%BB%E7%BB%9F/1.htm">行业系统</a>
                                    <div>后端基于ThinkPHP，前端基于jQuery和BootstrapCo.MZ 企业系统 
 
 轻量级企业网站管理系统 
 运行环境:PHP5.3+, MySQL5.0 
 
系统预览 
 
 系统下载：http://www.tecmz.com  
 预览地址：http://co.tecmz.com  
 
各种设备自适应 
 
 响应式的网站设计能够对用户产生友好度，并且对于</div>
                                </li>
                                <li><a href="/article/2475.htm"
                                       title="Transaction and redelivery in JMS (JMS的事务和失败消息重发机制)" target="_blank">Transaction and redelivery in JMS (JMS的事务和失败消息重发机制)</a>
                                    <span class="text-muted">darrenzhu</span>
<a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1/1.htm">事务</a><a class="tag" taget="_blank" href="/search/%E6%89%BF%E8%AE%A4/1.htm">承认</a><a class="tag" taget="_blank" href="/search/MQ/1.htm">MQ</a><a class="tag" taget="_blank" href="/search/acknowledge/1.htm">acknowledge</a>
                                    <div>JMS Message Delivery Reliability and Acknowledgement Patterns 
 
http://wso2.com/library/articles/2013/01/jms-message-delivery-reliability-acknowledgement-patterns/ 
 
 
Transaction and redelivery in </div>
                                </li>
                                <li><a href="/article/2602.htm"
                                       title="Centos添加硬盘完全教程" target="_blank">Centos添加硬盘完全教程</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/hardware/1.htm">hardware</a>
                                    <div>Linux的硬盘识别: 
 sda        表示第1块SCSI硬盘 
 hda       表示第1块IDE硬盘 
 scd0      表示第1个USB光驱 
 一般使用“fdisk -l”命</div>
                                </li>
                                <li><a href="/article/2729.htm"
                                       title="yii2 restful web服务路由" target="_blank">yii2 restful web服务路由</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a>
                                    <div>路由 
随着资源和控制器类准备，您可以使用URL如 http://localhost/index.php?r=user/create访问资源，类似于你可以用正常的Web应用程序做法。 
在实践中，你通常要用美观的URL并采取有优势的HTTP动词。 例如，请求POST /users意味着访问user/create动作。 这可以很容易地通过配置urlManager应用程序组件来完成 如下所示</div>
                                </li>
                                <li><a href="/article/2856.htm"
                                       title="MongoDB查询(4)——游标和分页[八]" target="_blank">MongoDB查询(4)——游标和分页[八]</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/MongoDB%E6%B8%B8%E6%A0%87/1.htm">MongoDB游标</a><a class="tag" taget="_blank" href="/search/MongoDB%E6%B7%B1%E5%88%86%E9%A1%B5/1.htm">MongoDB深分页</a>
                                    <div>转载请出自出处：http://eksliang.iteye.com/blog/2177567 一、游标 
        数据库使用游标返回find的执行结果。客户端对游标的实现通常能够对最终结果进行有效控制，从shell中定义一个游标非常简单，就是将查询结果分配给一个变量（用var声明的变量就是局部变量），便创建了一个游标，如下所示： 
> var </div>
                                </li>
                                <li><a href="/article/2983.htm"
                                       title="Activity的四种启动模式和onNewIntent()" target="_blank">Activity的四种启动模式和onNewIntent()</a>
                                    <span class="text-muted">gundumw100</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>Android中Activity启动模式详解 
 
　　在Android中每个界面都是一个Activity，切换界面操作其实是多个不同Activity之间的实例化操作。在Android中Activity的启动模式决定了Activity的启动运行方式。 
 
　　Android总Activity的启动模式分为四种： 
 
 

Activity启动模式设置：

        <acti</div>
                                </li>
                                <li><a href="/article/3110.htm"
                                       title="攻城狮送女友的CSS3生日蛋糕" target="_blank">攻城狮送女友的CSS3生日蛋糕</a>
                                    <span class="text-muted">ini</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
                                    <div>在线预览：http://keleyi.com/keleyi/phtml/html5/29.htm 
  
代码如下： 
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>攻城狮送女友的CSS3生日蛋糕-柯乐义<</div>
                                </li>
                                <li><a href="/article/3237.htm"
                                       title="读源码学Servlet（1）GenericServlet 源码分析" target="_blank">读源码学Servlet（1）GenericServlet 源码分析</a>
                                    <span class="text-muted">jzinfo</span>
<a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8/1.htm">网络应用</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a>
                                    <div>Servlet API的核心就是javax.servlet.Servlet接口，所有的Servlet 类（抽象的或者自己写的）都必须实现这个接口。在Servlet接口中定义了5个方法，其中有3个方法是由Servlet 容器在Servlet的生命周期的不同阶段来调用的特定方法。 
  
  
先看javax.servlet.servlet接口源码：  
package </div>
                                </li>
                                <li><a href="/article/3364.htm"
                                       title="JAVA进阶：VO(DTO)与PO(DAO)之间的转换" target="_blank">JAVA进阶：VO(DTO)与PO(DAO)之间的转换</a>
                                    <span class="text-muted">snoopy7713</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/po/1.htm">po</a>
                                    <div>  
PO即 Persistence Object　　VO即 Value Object 
　VO和PO的主要区别在于：　　VO是独立的Java Object。　　PO是由Hibernate纳入其实体容器（Entity Map）的对象，它代表了与数据库中某条记录对应的Hibernate实体，PO的变化在事务提交时将反应到实际数据库中。 
　实际上，这个VO被用作Data Transfer </div>
                                </li>
                                <li><a href="/article/3491.htm"
                                       title="mongodb group by date 聚合查询日期 统计每天数据（信息量）" target="_blank">mongodb group by date 聚合查询日期 统计每天数据（信息量）</a>
                                    <span class="text-muted">qiaolevip</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a>
                                    <div>/* 1 */
{
    "_id" : ObjectId("557ac1e2153c43c320393d9d"),
    "msgType" : "text",
    "sendTime" : ISODate("2015-06-12T11:26:26.000Z")</div>
                                </li>
                                <li><a href="/article/3618.htm"
                                       title="java之18天 常用的类(一)" target="_blank">java之18天 常用的类(一)</a>
                                    <span class="text-muted">Luob.</span>
<a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/Date/1.htm">Date</a><a class="tag" taget="_blank" href="/search/System/1.htm">System</a><a class="tag" taget="_blank" href="/search/Runtime/1.htm">Runtime</a><a class="tag" taget="_blank" href="/search/Rundom/1.htm">Rundom</a>
                                    <div>System类 
 

import java.util.Properties;

/**
 * System:
 *  out:标准输出,默认是控制台
 *  in:标准输入,默认是键盘
 * 
 *  描述系统的一些信息
 *  获取系统的属性信息:Properties getProperties();
 *  
 * 
 *
 */
public class Sy</div>
                                </li>
                                <li><a href="/article/3745.htm"
                                       title="maven" target="_blank">maven</a>
                                    <span class="text-muted">wuai</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                                    <div>1、安装maven：解压缩、添加M2_HOME、添加环境变量path 
2、创建maven_home文件夹，创建项目mvn_ch01,在其下面建立src、pom.xml，在src下面简历main、test、main下面建立java文件夹 
3、编写类，在java文件夹下面依照类的包逐层创建文件夹，将此类放入最后一级文件夹 
4、进入mvn_ch01 
 4.1、mvn compile ,执行后会在</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>