HTML5的新标签及其特性、CSS3新增选择器
HTML5的新标签及特性
字符设定
HTML与XHTML中：
"text/html" ; charset = "utf-8" >
HTML5中：
常用新标签
- header：定义文档的页眉，头部
- nav：定义导航链接的部分
- footer：定义文档或节的页脚、底部
- article：定义文章
- section：定义文档中的节（section、区段）
- aside：定义其所处内容之外的内容
如，写网页的头部时，可以直接采用第二种方式
</ title>
<style>
heater</span> <span class="token punctuation">{
</span> <span class="token punctuation">}</span>
</ style>
</ head>
<body>
<header></ header>
</body>
</code></pre>
<ul>
<li>datalist：定义选项列表。与输入元素配合使用</li>
</ul>
<pre><code class="prism language-css"><input type=<span class="token string">"text"</span> list=<span class="token string">"guitar"</span>/>
<datalist id=<span class="token string">"guitar"</span>>
<option value=<span class="token string">"吉他入门零基础"</span>>吉他入门零基础</option>
<option value=<span class="token string">"吉他和弦指法图"</span>>吉他和弦指法图</option>
<option value=<span class="token string">"吉他的英文"</span>>吉他的英文</option>
<option value=<span class="token string">"吉他谱"</span>>吉他谱</option>
</datalist>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/7e561cc357e741db9c2d187d614f6a0d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7e561cc357e741db9c2d187d614f6a0d.jpg" alt="HTML5的新标签及其特性、CSS3新增选择器_第1张图片" width="458" height="140" style="border:1px solid black;"></a></p>
<ul>
<li>fieldset：元素可将表单内的相关元素分组、打包。与legend配合使用。</li>
</ul>
<pre><code class="prism language-css"><fieldset id=<span class="token string">""</span>>
<legend>用户登录</legend>
用户名：<input type=<span class="token string">"text"</span> /> <br />
密码：<input type=<span class="token string">"password"</span> />
</fieldset>
</code></pre>
<h3>新增的表单（input type）属性</h3>
<table>
<thead>
<tr>
<th>类型</th>
<th>使用示例</th>
<th>含义</th>
</tr>
</thead>
<tbody>
<tr>
<td>email</td>
<td><code><input type =“ email”></code></td>
<td>输入邮箱格式</td>
</tr>
<tr>
<td>tel</td>
<td><code><INPUT TYPE = “电话”></code></td>
<td>输入侧手机号码酒店格式</td>
</tr>
<tr>
<td>url</td>
<td><code><input type =“ url”></code></td>
<td>输入URL格式</td>
</tr>
<tr>
<td>number</td>
<td><code><input type =“ number”></code></td>
<td>输入数字格式</td>
</tr>
<tr>
<td>search</td>
<td><code><input type =“ search”></code></td>
<td>搜索框（体现语义化）</td>
</tr>
<tr>
<td>range</td>
<td><code><input type =“ range”></code></td>
<td>自由赋予滑块</td>
</tr>
<tr>
<td>time</td>
<td><code><input type =“ time”></code></td>
<td>小时分钟</td>
</tr>
<tr>
<td>date</td>
<td><code><input type =“ date”></code></td>
<td>年月日</td>
</tr>
<tr>
<td>datetime</td>
<td><code><input type =“ datetime”></code></td>
<td>时间</td>
</tr>
<tr>
<td>month</td>
<td><code><input type =“ month”></code></td>
<td>-年-月</td>
</tr>
<tr>
<td>week</td>
<td><code><INPUT TYPE = “周”></code></td>
<td>-年-周</td>
</tr>
</tbody>
</table>
<h4>常用新属性</h4>
<table>
<thead>
<tr>
<th>属性</th>
<th>用法</th>
<th>含义</th>
</tr>
</thead>
<tbody>
<tr>
<td>placeholder</td>
<td><code><input type="text" placeholder="请输入用户名"></code></td>
<td>占位符 当用户输入的时候 里面的文字消失 ；删除所有文字，自动返回</td>
</tr>
<tr>
<td>autofocus</td>
<td><code><input type="text" autofocus></code></td>
<td>规定当页面加载时 input 元素应该自动获得焦点</td>
</tr>
<tr>
<td>multiple</td>
<td><code><input type="file" multiple></code></td>
<td>多文件上传</td>
</tr>
<tr>
<td>autocomplete</td>
<td><code><input type="text" autocomplete="off"></code></td>
<td>规定表单是否应该启用自动完成功能，有2个值，一个是on ，一个是off， on 代表记录已经输入的值 。1.autocomplete 需要提交按钮 2.这个表单必须给他名字</td>
</tr>
<tr>
<td>required</td>
<td><code><input type="text" required></code></td>
<td>必填项， 内容不能为空</td>
</tr>
<tr>
<td>accesskey</td>
<td><code><input type="text" accesskey="s"></code></td>
<td>规定激活（使元素获得焦点）元素的快捷键，采用 alt + s的形式</td>
</tr>
</tbody>
</table>
<pre><code class="prism language-css"><form action=<span class="token string">""</span>>
用户名：<input type=<span class="token string">"text"</span> placeholder=<span class="token string">"请输入用户名"</span> autocomplete=<span class="token string">"on"</span>/> <br />
上传头像：<input type=<span class="token string">"file"</span> multiple=<span class="token string">""</span>/> <br />
昵称：<input type=<span class="token string">"text"</span> required=<span class="token string">""</span>/>
<input type=<span class="token string">"submit"</span> value=<span class="token string">"提交"</span>/>
</form>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/5b113709237e439f917915d7f9635d28.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/5b113709237e439f917915d7f9635d28.gif" alt="HTML5的新标签及其特性、CSS3新增选择器_第2张图片" width="560" height="260" style="border:1px solid black;"></a></p>
<h3>多媒体标签</h3>
<ul>
<li>embed：标签定义嵌入的内容</li>
<li>audio：播放音频</li>
<li>video：播放视频</li>
</ul>
<h4>多媒体embed</h4>
<p>embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。</p>
<p>插入网络视频：</p>
<pre><code class="prism language-css"><embed src=<span class="token string">"http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf"</span> allowFullScreen=<span class="token string">"true"</span> quality=<span class="token string">"high"</span> width=<span class="token string">"480"</span> height=<span class="token string">"400"</span> align=<span class="token string">"middle"</span> allowScriptAccess=<span class="token string">"always"</span> type=<span class="token string">"application/x-shockwave-flash"</span>></embed>
</code></pre>
<h4>多媒体音频</h4>
<p>HTML5通过 audio 标签解决音频播放的问题：</p>
<pre><code class="prism language-css"><audio src = <span class="token string">"bgsound.mp3"</span> autoplay=<span class="token string">"autoplay"</span> controls=<span class="token string">"controls"</span>></ audio>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/1c6d2065c665423bb0cae6b0e9758d9a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1c6d2065c665423bb0cae6b0e9758d9a.jpg" alt="HTML5的新标签及其特性、CSS3新增选择器_第3张图片" width="477" height="108" style="border:1px solid black;"></a></p>
<blockquote>
<p>可以通过附加属性控制音频的播放，如：</p>
<ul>
<li>autoplay 自动播放</li>
<li>controls 是否显不默认播放控件</li>
<li>loop 循环播放 如果这个属性不写 默认播放一次 loop</li>
<li>loop = “loop” 表示无限循环</li>
</ul>
</blockquote>
<p>由于版权等原因，不同的浏览器可支持播放的格式是不一样的。</p>
<table>
<thead>
<tr>
<th></th>
<th>IE 9</th>
<th>Firefox 3.5</th>
<th>Opera 10.5</th>
<th>Chrome 3.0</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ogg Vorbis</td>
<td></td>
<td>√</td>
<td>√</td>
<td>√</td>
</tr>
<tr>
<td>MP3</td>
<td>√</td>
<td></td>
<td></td>
<td>√</td>
</tr>
<tr>
<td>Wav</td>
<td></td>
<td>√</td>
<td>√</td>
<td></td>
</tr>
</tbody>
</table>
<p>多浏览器支持的方案：</p>
<pre><code class="prism language-css"><audio autoplay=<span class="token string">"autoplay"</span> controls=<span class="token string">"controls"</span>>
<source src=<span class="token string">"bgsound.mp3"</span>/>
<source src=<span class="token string">"music.ogg"</span>/>
您的浏览器不支持音频播放功能 <span class="token comment">/* 版本太低了，救不了 */</span>
</audio>
</code></pre>
<p>source 标签允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或编解码器的支持进行选择</p>
<h3>多媒体视频</h3>
<p>HTML5通过 video 标签解决视频播放问题：</p>
<pre><code class="prism language-css"> <video src=<span class="token string">"movic04.0gg"</span> width=<span class="token string">"600px"</span> height=<span class="token string">"600px"</span>></video>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/9e55b76f3bcf4d5ab715ab6eee2698b7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9e55b76f3bcf4d5ab715ab6eee2698b7.jpg" alt="HTML5的新标签及其特性、CSS3新增选择器_第4张图片" width="458" height="389" style="border:1px solid black;"></a></p>
<blockquote>
<p>通过附加属性控制视频的播放：</p>
<ul>
<li> <p>autoplay 自动播放</p> </li>
<li> <p>controls 是否显示默认播放控件</p> </li>
<li> <p>loop 循环播放</p> </li>
<li> <p>width 设置播放窗口宽度</p> </li>
<li> <p>height 设置播放窗口的高度</p> </li>
</ul>
</blockquote>
<p>由于版权等原因，不同的浏览器可支持播放的格式是不一样的：</p>
<table>
<thead>
<tr>
<th>格式</th>
<th>IE</th>
<th>Firefox</th>
<th>Opera</th>
<th>Chrome</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ogg</td>
<td>×</td>
<td>3.5+</td>
<td>10.5+</td>
<td>5.0+</td>
</tr>
<tr>
<td>MPEG 4</td>
<td>9.0+</td>
<td>×</td>
<td>×</td>
<td>5.0+</td>
</tr>
<tr>
<td>WebM</td>
<td>×</td>
<td>4.0+</td>
<td>10.6+</td>
<td>6.0+</td>
</tr>
</tbody>
</table>
<p>多浏览器支持的方案：</p>
<pre><code class="prism language-css"><video autoplay controls>
<source src=<span class="token string">"movie04.ogg"</span>/>
<source src=<span class="token string">"mp4.mp4"</span>/>
您的浏览器版本不适合播放视频
</video>
</code></pre>
<h1>CSS3 新增选择器</h1>
<h4>结构（位置）伪类选择器</h4>
<ul>
<li>:first-child 选取属于其父元素的首个子元素的指定选择器</li>
<li>:last-child 选取属于其父元素的最后一个子元素的指定选择器</li>
<li>:nth-child(n/even/odd) 匹配属于其父元素的第n个子元素，不论元素的类型</li>
<li>:nth-last-child(n/even/odd) 选择器匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。</li>
</ul>
<blockquote>
<p>n 可以是数字、关键词或公式<br> even 是选择所有偶数 == 2n<br> odd 是选择所有奇数 == 2n + 1<br> 如果直接给 n ，就是选择所有<br> 如果是 4n ，结果就是4，8，12。。。</p>
</blockquote>
<p>举个栗子：</p>
<pre><code class="prism language-css"><span class="token selector">li:first-child</span> <span class="token punctuation">{
</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:nth-child(2)</span> <span class="token punctuation">{
</span>
<span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:last-child</span> <span class="token punctuation">{
</span>
<span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/4ef3721d539c4cc6ab5cd70f30ff7678.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4ef3721d539c4cc6ab5cd70f30ff7678.jpg" alt="HTML5的新标签及其特性、CSS3新增选择器_第5张图片" width="129" height="187" style="border:1px solid black;"></a></p>
<pre><code class="prism language-css"><span class="token selector">li:nth-child(even)</span> <span class="token punctuation">{
</span>
<span class="token comment">/*even 选择所有的偶数行，同理，odd是选择所有的奇数行*/</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/969b388623ed4e99b758eccf50bcdaa7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/969b388623ed4e99b758eccf50bcdaa7.jpg" alt="HTML5的新标签及其特性、CSS3新增选择器_第6张图片" width="388" height="187" style="border:1px solid black;"></a></p>
<h4>目标伪类选择器</h4>
<p>:target目标伪类选择器 :选择器可用于选取当前活动的目标元素</p>
<pre><code class="prism language-css"><span class="token selector">:target</span> <span class="token punctuation">{
</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h3>属性选择器</h3>
<p>挑选标签带有某些特殊属性的选择器，称为属性选择器</p>
<pre><code class="prism language-css"><span class="token selector"><style>
div[class]</span> <span class="token punctuation">{
</span> / *选择出所有带有类属性的盒子 */
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>
</head>
<body>
<div class=<span class="token string">"one"</span>>1</div>
<div>2</div>
<div>3</div>
<div class=<span class="token string">"four"</span>>4</div>
<div class=<span class="token string">"one1"</span>>5</div>
<div class=<span class="token string">"2one"</span>>6</div>
</body>
</code></pre>
<blockquote>
<p>div [class]：选出所有带有类属性的盒子<br> div [class = one]：选出 class == one 的盒子<br> div [class ^ = one]：选出所有one开头的盒子，即一个，one1。2one不能选择<br> div [class $ = one]：选出所有one终结的盒子，即one，2one<br> div [class * = one]：选出所有带有one的盒子，即one，one1， 2one</p>
</blockquote>
<h3>伪元素选择器</h3>
<ol>
<li>E :: first-letter文本的第一个单词或字（如中文，日文，韩文等）</li>
<li>E :: fiest-line文本第一行</li>
<li>E :: selection可更改替代文本的样式</li>
</ol>
<pre><code class="prism language-css"><span class="token selector">p::first-letter</span> <span class="token punctuation">{
</span> <span class="token comment">/*选择第一个字*/</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">p::first-line</span> <span class="token punctuation">{
</span> <span class="token comment">/*选择第一行,并随着浏览器窗口的缩放改变*/</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">p::selection</span> <span class="token punctuation">{
</span> <span class="token comment">/*选择文字时的状态*/</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/6a3af1531b7043fe865d55c2dc5b62c0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6a3af1531b7043fe865d55c2dc5b62c0.jpg" alt="HTML5的新标签及其特性、CSS3新增选择器_第7张图片" width="650" height="205" style="border:1px solid black;"></a><br> 4. E ::之前和E ::之后</p>
<p>在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，并且必须要结合内容属性使用。</p>
<pre><code class="prism language-css"><span class="token comment">/* <div>123</div> */</span>
<span class="token selector">div::before</span> <span class="token punctuation">{
</span> <span class="token comment">/*必须带一个属性 content*/</span>
<span class="token comment">/*其实before是一个盒子,并且是行内的*/</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"0"</span><span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div::after</span> <span class="token punctuation">{
</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"4"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/860a92e20b924c96a3ec302e22a9e814.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/860a92e20b924c96a3ec302e22a9e814.jpg" alt="" width="145" height="93"></a><br> 伪元素：before和：after添加的内容替换为inline element；这个两个伪元素的内容属性，表示伪元素的内容，设置：before和：after时<strong>必须</strong>设置其** content **属性，否则伪元素就不起作用。</p>
<blockquote>
<p>“:” 与 “::” 区别在于区分伪类和伪元素。之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。</p>
</blockquote>
<p><em><strong>在前面的清除浮动里，也有提及伪元素</strong></em></p>
<p><strong>1. 使用after伪元素清除浮动</strong></p>
<p>:after 方式为空元素的升级版，可以不用单独加标签。</p>
<p>使用方法：</p>
<pre><code class="prism language-css"><span class="token selector">.clearfix:after</span> <span class="token punctuation">{
</span><span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
<span class="token property">visibiluty</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.clearfix</span> <span class="token punctuation">{
</span>
<span class="token property">zoom</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token comment">/* IE6、7专有 */</span>
</code></pre>
<p><strong>2. 使用before和after双伪元素清除浮动</strong></p>
<p>使用方法：</p>
<pre><code class="prism language-css"><span class="token selector">.clearfix:before, .clearfix:after</span> <span class="token punctuation">{
</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span>table<span class="token punctuation">;</span>
<span class="token comment">/* 这句话可以触发BFC，BFC可以清除浮动 */</span>
<span class="token punctuation">}</span>
<span class="token selector">.clearfix:after</span> <span class="token punctuation">{
</span>
<span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.clearfix</span> <span class="token punctuation">{
</span>
*<span class="token property">zoom</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h3>背景缩放(CSS3)</h3>
<p>通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。</p>
<p>其参数设置如下：</p>
<blockquote>
<ol>
<li> <p>可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）</p> </li>
<li> <p>设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多</p> </li>
<li> <p>设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。</p> </li>
<li> <p>如果background-size只有一个值，后面一个值默认为auto，等比例缩放</p> </li>
<li> <p>percentge 以父元素的百分比来设置背景图的宽高，第一个值宽，第二个值高，只有一个<br> 值，后面一个值默认为auto</p> </li>
</ol>
</blockquote>
<pre><code class="prism language-css"><span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url('images/01.jpg')</span><span class="token punctuation">;</span>
<span class="token property">background-size</span><span class="token punctuation">:</span> 300px 100px<span class="token punctuation">;</span>
<span class="token comment">/* background-size: contain; */</span>
<span class="token comment">/* background-size: cover; */</span>
</code></pre>
<h3>多背景(CSS3)</h3>
<p>以逗号分隔可以设置多背景，可用于自适应布局</p>
<blockquote>
<ol>
<li>一个元素可以设置多重背景图像。</li>
<li>每组属性间使用逗号分隔。</li>
<li>如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。</li>
<li>为了避免背景色将图像盖住，<strong>背景色</strong>通常都定义在<strong>最后</strong>一组上，防止被叠加</li>
</ol>
</blockquote>
<pre><code class="prism language-css"><span class="token property">background</span><span class="token punctuation">:</span><span class="token url">url(test1.jpg)</span> no-repeat scroll 10px 20px/50px 60px ,
<span class="token url">url(test1.jpg)</span> no-repeat scroll 10px 20px/70px 90px ,
<span class="token url">url(test1.jpg)</span> no-repeat scroll 10px 20px/110px 130px c #aaa<span class="token punctuation">;</span>
</code></pre>
<h3>凹凸文字</h3>
<pre><code class="prism language-css"><span class="token selector">body</span> <span class="token punctuation">{
</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div</span> <span class="token punctuation">{
</span>
<span class="token property">color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
<span class="token property">font</span><span class="token punctuation">:</span> 700 80px <span class="token string">"微软雅黑"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div:first-child</span> <span class="token punctuation">{
</span>
<span class="token comment">/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */</span>
<span class="token property">text-shadow</span><span class="token punctuation">:</span> 1px 1px 1px #000, -1px -1px 1px #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div:last-child</span> <span class="token punctuation">{
</span>
<span class="token comment">/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */</span>
<span class="token property">text-shadow</span><span class="token punctuation">:</span> -1px -1px 1px #000, 1px 1px 1px #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<body>
<div>凸</div>
<div>凹</div>
</body>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/c1c5e8705dd04237b28091097c2f3693.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c1c5e8705dd04237b28091097c2f3693.jpg" alt="HTML5的新标签及其特性、CSS3新增选择器_第8张图片" width="148" height="349" style="border:1px solid black;"></a></p>
<h3>CSS3盒模型</h3>
<p>CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。</p>
<blockquote>
<p>可以分成两种情况：</p>
<ol>
<li> <p>box-sizing: content-box 盒子大小为 width + padding + border<br> content-box:此值为其默认值，其让元素维持W3C的标准Box Mode</p> </li>
<li> <p>box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的</p> </li>
</ol>
<p>注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。</p>
</blockquote>
<pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{
</span>
<span class="token property">width</span><span class="token punctuation">:</span> 296px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div:hover::after</span> <span class="token punctuation">{
</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 10px solid <span class="token function">rgba</span><span class="token punctuation">(</span>255,255,255,0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/8e180d0322704306be7894e5702c51ae.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/8e180d0322704306be7894e5702c51ae.gif" alt="HTML5的新标签及其特性、CSS3新增选择器_第9张图片" width="560" height="346" style="border:1px solid black;"></a></p>
<h3>过渡（CSS3）</h3>
<p>过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。</p>
<blockquote>
<p>过度动画：从一个状态渐渐地过渡到另一个状态</p>
<p>帧动画：通过一帧一帧地画面按照固定顺序和速度播放，如电影胶片</p>
</blockquote>
<p>语法格式：</p>
<pre><code class="prism language-css"><span class="token property">transition</span><span class="token punctuation">:</span> 要过渡的属性 花费时间 运动曲线 何时开始<span class="token punctuation">;</span>
</code></pre>
<p>如果有多组属性变化，还是用逗号隔开。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>transition</td>
<td>简写属性，用于在一个属性中设置四个过渡属性</td>
</tr>
<tr>
<td>transition-property</td>
<td>规定应用过渡地CSS属性的名称</td>
</tr>
<tr>
<td>transition-duration</td>
<td>定义过渡效果花费的时间。默认是0。单位必须写</td>
</tr>
<tr>
<td>transition-timing-function</td>
<td>规定过渡效果的时间曲线。默认是“ease”</td>
</tr>
<tr>
<td>transition-delay</td>
<td>规定过渡效果何时开始。默认是0</td>
</tr>
</tbody>
</table>
<p><strong>如果想要所有的属性都变化过渡，写一个all就可以。</strong></p>
<table>
<thead>
<tr>
<th>运动曲线</th>
<th>速度</th>
</tr>
</thead>
<tbody>
<tr>
<td>linear</td>
<td>匀速</td>
</tr>
<tr>
<td>ease</td>
<td>逐渐慢下来</td>
</tr>
<tr>
<td>ease-in</td>
<td>加速</td>
</tr>
<tr>
<td>ease-out</td>
<td>减速</td>
</tr>
</tbody>
</table>
<pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{
</span>
<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token comment">/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */</span>
<span class="token property">transition</span><span class="token punctuation">:</span> width 0.6s ease 0s, height 0.3s ease-in 1s<span class="token punctuation">;</span>
<span class="token comment">/* transtion 过渡 这句话写到div里面而不是 hover里面 */</span>
<span class="token punctuation">}</span>
<span class="token selector">div:hover</span> <span class="token punctuation">{
</span> <span class="token comment">/* 鼠标经过盒子，我们的宽度变为400 */</span>
<span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 300px
<span class="token punctuation">}</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all 0.6s<span class="token punctuation">;</span> <span class="token comment">/* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */</span>
</code></pre>
<p>过渡颜色：</p>
<pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{
</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all 2s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div:hover</span> <span class="token punctuation">{
</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/434767702a2943119cf6e13f7a88f224.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/434767702a2943119cf6e13f7a88f224.gif" alt="HTML5的新标签及其特性、CSS3新增选择器_第10张图片" width="351" height="260" style="border:1px solid black;"></a></p>
<h3>2D变形(CSS3) transform</h3>
<p>transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。</p>
<h5>移动 translate(x, y)</h5>
<p>translate 移动平移</p>
<blockquote>
<p>如：使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。</p>
<p><code>css translate(50px,50px);</code></p>
</blockquote>
<p><strong>注意</strong>：</p>
<ol>
<li>中间用“<strong>,</strong>”隔开！<br> 2.<strong>仅</strong>水平/垂直方向移动时，<strong>X/Y要大写</strong></li>
</ol>
<p>可以改变元素的位置，x、y可为负值：</p>
<ul>
<li>translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）</li>
<li>translateX(x)仅水平方向移动（X轴移动）</li>
<li>translateY(y)仅垂直方向移动（Y轴移动）</li>
</ul>
<blockquote>
<p>如：实现定位的盒子水平居中</p>
</blockquote>
<pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{
</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%,-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* translate x为-50%,他跟父亲没关系,是走自己盒子宽度的一半
y为-50%,他跟父亲没关系,是走自己盒子高度的一半 */</span>
<span class="token punctuation">}</span>
</code></pre>
<h5>缩放 scale(x, y)</h5>
<blockquote>
<p>如：使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放</p>
<p><code>transform:scale(0.8,1); /* 宽度变为原来的80%，高度不变 */</code><br> <code>transform:scale(0.8); /* 高度省略，默认和宽度一起缩放，都是0.8 */</code></p>
</blockquote>
<p>可以对元素进行水平和垂直方向的缩放：</p>
<ul>
<li>scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）</li>
<li>scaleX(x)元素仅水平方向缩放（X轴缩放）</li>
<li>scaleY(y)元素仅垂直方向缩放（Y轴缩放）</li>
</ul>
<p>scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。</p>
<h5>旋转 rotate(deg)</h5>
<p>可以对元素进行旋转，正值为顺时针，负值为逆时针；</p>
<blockquote>
<p>如：顺时针旋转45°：</p>
<p><code>transform:rotate(45deg);</code></p>
</blockquote>
<p>注意单位是 deg 度数</p>
<h5>transform-origin 调整元素转换变形的原点</h5>
<p>transform-origin 可以调整元素转换变形的原点。</p>
<pre><code class="prism language-css"> <span class="token selector">div</span> <span class="token punctuation">{
</span>
<span class="token property">transform-origin</span><span class="token punctuation">:</span> left top<span class="token punctuation">;</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token comment">/* 改变元素原点到左上角，然后进行顺时旋转45度 */</span>
</code></pre>
<p>如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。</p>
<pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{
</span>
<span class="token property">transform-origin</span><span class="token punctuation">:</span> 10px 10px<span class="token punctuation">;</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token comment">/* 改变元素原点到x 为10 y 为10，然后进行顺时旋转45度 */</span>
</code></pre>
<h5>倾斜 skew(deg, deg)</h5>
<p>使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。</p>
<blockquote>
<p>如：通过skew方法把元素水平方向上倾斜30度，处置方向保持不变</p>
<p><code>transform:skew(30deg,0deg);</code></p>
</blockquote>
<h3>3D变形(CSS3) transform</h3>
<p>3d x y z</p>
<blockquote>
<p>简单记住他们的坐标：</p>
<p>x左边是负的，右边是正的</p>
<p>y 上面是负的， 下面是正的</p>
<p>z 里面是负的， 外面是正的</p>
</blockquote>
<h5>rotateX()</h5>
<p>就是沿着 x 立体旋转.</p>
<pre><code class="prism language-css"><span class="token selector">img</span> <span class="token punctuation">{
</span>
<span class="token property">transition</span><span class="token punctuation">:</span>all 0.5s ease 0s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">img:hove</span> <span class="token punctuation">{
</span>
<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateX</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h5>rotateY()</h5>
<p>沿着y轴进行旋转</p>
<pre><code class="prism language-css"><span class="token selector">img</span> <span class="token punctuation">{
</span>
<span class="token property">transition</span><span class="token punctuation">:</span>all 0.5s ease 0s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">img:hove</span> <span class="token punctuation">{
</span>
<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateX</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h5>rotateZ()</h5>
<p>沿着z轴进行旋转</p>
<pre><code class="prism language-css"><span class="token selector">img</span> <span class="token punctuation">{
</span>
<span class="token property">transition</span><span class="token punctuation">:</span>all .25s ease-in 0s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">img:hover</span> <span class="token punctuation">{
</span>
<span class="token comment">/* transform:rotateX(180deg); */</span>
<span class="token comment">/* transform:rotateY(180deg); */</span>
<span class="token comment">/* transform:rotateZ(180deg); */</span>
<span class="token comment">/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */</span>
<span class="token punctuation">}</span>
</code></pre>
<h3>透视(perspective)</h3>
<p>电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。</p>
<p>透视可以将一个2D平面，在转换的过程当中，呈现3D效果。</p>
<ul>
<li>透视原理： 近大远小 。</li>
<li>浏览器透视：把近大远小的所有图像，透视在屏幕上。</li>
<li>perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置</li>
</ul>
<p>注：并非任何情况下需要透视效果，根据开发需要进行设置。</p>
<p>perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素</p>
<h4>translateZ(z)</h4>
<p>transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。</p>
<h4>translate3d(x,y,z)</h4>
<p>x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值</p>
<h3>backface-visibility</h3>
<p>backface-visibility 属性定义当元素不面向屏幕时是否可见。</p>
<p>翻转盒子：</p>
<pre><code class="prism language-css"> <span class="token selector">*</span> <span class="token punctuation">{
</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span> <span class="token punctuation">{
</span>
<span class="token punctuation">}</span>
<span class="token selector">div</span> <span class="token punctuation">{
</span>
<span class="token property">width</span><span class="token punctuation">:</span> 224px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 224px<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div img</span> <span class="token punctuation">{
</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all 2s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div:hover img</span> <span class="token punctuation">{
</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div img:last-child</span> <span class="token punctuation">{
</span>
<span class="token property">backface-visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/8d0fa3f7cf264687a8253c70f48487d3.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/8d0fa3f7cf264687a8253c70f48487d3.gif" alt="HTML5的新标签及其特性、CSS3新增选择器_第11张图片" width="404" height="362" style="border:1px solid black;"></a></p>
<h3>动画(CSS3) animation</h3>
<p>animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向。</p>
<p>语法格式：</p>
<pre><code class="prism language-css"><span class="token property">animation</span><span class="token punctuation">:</span>动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向<span class="token punctuation">;</span>
</code></pre>
<p>下列表格列出了 @keyframes 规则和所有动画属性</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>@keyframe</td>
<td>规定动画</td>
</tr>
<tr>
<td>animation</td>
<td>所有动画的简写属性，除了animation-play-state属性</td>
</tr>
<tr>
<td>animation-name</td>
<td>规定 @keyframe 动画的名称</td>
</tr>
<tr>
<td>animation-duration</td>
<td>规定动画完成一个周期所花费的秒或毫秒。默认是0</td>
</tr>
<tr>
<td>animation-timing-function</td>
<td>规定动画的速度曲线。默认是“ease”</td>
</tr>
<tr>
<td>animation-delay</td>
<td>规定动画何时开始。默认是0</td>
</tr>
<tr>
<td>animation-iteration-count</td>
<td>规定动画的播放次数。默认是1</td>
</tr>
<tr>
<td>animation-direction</td>
<td>规定动画是否在下一周期逆向地播放。默认是“normal”</td>
</tr>
<tr>
<td>animation-play-state</td>
<td>规定动画是否正在运行或暂停。默认“running”</td>
</tr>
<tr>
<td>animation-fill-mode</td>
<td>规定对象动画时间之外的状态</td>
</tr>
</tbody>
</table>
<p>关于几个值，除了名字、动画时间、延时有严格顺序要求之外，其他随意。</p>
<pre><code class="prism language-css"><span class="token atrule"><span class="token rule">@keyframes</span> 动画名称</span> <span class="token punctuation">{
</span> <span class="token comment">/*声明动画 关键帧*/</span>
<span class="token selector">from</span><span class="token punctuation">{
</span> 开始位置 <span class="token punctuation">}</span> <span class="token selector">0%
to</span><span class="token punctuation">{
</span> 结束 <span class="token punctuation">}</span> 100%
<span class="token punctuation">}</span>
</code></pre>
<pre><code class="prism language-css"><span class="token property">animation-iteration-count</span><span class="token punctuation">:</span>infinite<span class="token punctuation">;</span> 无限循环播放
<span class="token property">animation-play-state</span><span class="token punctuation">:</span>paused<span class="token punctuation">;</span> 暂停动画
<span class="token property">animation-directon</span><span class="token punctuation">:</span>alternate<span class="token punctuation">;</span> 动画轮流反向播放
</code></pre>
<blockquote>
<p>举例：</p>
<pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{
</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token comment">/*调用动画*/</span>
<span class="token comment">/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/</span>
<span class="token property">animation</span><span class="token punctuation">:</span> move 3s ease 0s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> move</span> <span class="token punctuation">{
</span> <span class="token comment">/*声明动画 关键帧*/</span>
<span class="token selector">from</span> <span class="token punctuation">{
</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">to</span> <span class="token punctuation">{
</span>
<span class="token property">left</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</blockquote>
<p><a href="http://img.e-com-net.com/image/info8/3146cd436c524b5cb668e1c84105500a.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/3146cd436c524b5cb668e1c84105500a.gif" alt="HTML5的新标签及其特性、CSS3新增选择器_第12张图片" width="1096" height="249" style="border:1px solid black;"></a></p>
<h3>伸缩布局(CSS3)</h3>
<p>CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。</p>
<ul>
<li> <p>主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向</p> </li>
<li> <p>侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的</p> </li>
<li> <p>方向：默认主轴从左向右，侧轴默认从上到下</p> </li>
</ul>
<p>主轴和侧轴并不是固定不变的，通过flex-direction可以互换。</p>
<pre><code class="prism language-css"><span class="token selector"><style>
section</span> <span class="token punctuation">{
</span>
<span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token comment">/*父亲添加伸缩布局*/</span>
<span class="token punctuation">}</span>
<span class="token selector">section div</span> <span class="token punctuation">{
</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token comment">/*孩子的份数 各占一份*/</span>
<span class="token punctuation">}</span>
<span class="token selector">section div:nth-child(1)</span> <span class="token punctuation">{
</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">flex</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token comment">/*红占两份,蓝绿各一份*/</span>
<span class="token punctuation">}</span>
<span class="token selector">section div:nth-child(2)</span> <span class="token punctuation">{
</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">section div:nth-child(3)</span> <span class="token punctuation">{
</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/20efd74ca4f94663a7726e82437b278f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/20efd74ca4f94663a7726e82437b278f.jpg" alt="HTML5的新标签及其特性、CSS3新增选择器_第13张图片" width="650" height="136" style="border:1px solid black;"></a><br> 伸缩情况下：<br> <a href="http://img.e-com-net.com/image/info8/307709acbfde47939c205641b772e680.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/307709acbfde47939c205641b772e680.gif" alt="HTML5的新标签及其特性、CSS3新增选择器_第14张图片" width="1306" height="322" style="border:1px solid black;"></a></p>
<h5>各属性详解</h5>
<p><strong>1. flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配</strong></p>
<blockquote>
<ul>
<li>min-width 最小值 min-width: 280px。 最小宽度 不能小于 280。</li>
<li>max-width: 1280px 最大宽度 不能大于 1280</li>
</ul>
</blockquote>
<pre><code class="prism language-css"><span class="token property">min-width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token comment">/* 当窗口宽度缩到500px就禁止压缩了，最小宽度就是500px */</span>
</code></pre>
<p><strong>2. flex-direction调整主轴方向（默认为水平方向）</strong></p>
<blockquote>
<ul>
<li>flex-direction: column 垂直排列</li>
<li>flex-direction: row 水平排列</li>
</ul>
</blockquote>
<p><strong>3. justify-content调整主轴对齐（水平对齐）</strong></p>
<p>子盒子如何在父盒子里面水平对齐</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>白话文</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex-start</td>
<td>默认值。项目位于容器的开头。</td>
<td>让子元素从父容器的开头开始排序但是盒子顺序不变</td>
</tr>
<tr>
<td>flex-end</td>
<td>项目位于容器的结尾。</td>
<td>让子元素从父容器的后面开始排序但是盒子顺序不变</td>
</tr>
<tr>
<td>center</td>
<td>项目位于容器的中心。</td>
<td>让子元素在父容器中间显示</td>
</tr>
<tr>
<td>space-between</td>
<td>项目位于各行之间留有空白的容器内。</td>
<td>左右的盒子贴近父盒子，中间的平均分布空白间距</td>
</tr>
<tr>
<td>space-around</td>
<td>项目位于各行之前、之间、之后都留有空白的容器内。</td>
<td>相当于给每个盒子添加了左右margin外边距</td>
</tr>
</tbody>
</table>
<p><strong>4. align-items调整侧轴对齐（垂直对齐）</strong></p>
<p>子盒子如何在父盒子里面垂直对齐（单行）</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>白话文</th>
</tr>
</thead>
<tbody>
<tr>
<td>stretch</td>
<td>默认值。项目被拉伸以适应容器。</td>
<td>让子元素的高度拉伸适用父容器（子元素不给高度的前提下)</td>
</tr>
<tr>
<td>center</td>
<td>项目位于容器的中心。</td>
<td>垂直居中</td>
</tr>
<tr>
<td>flex-start</td>
<td>项目位于容器的开头。</td>
<td>垂直对齐开始位置 上对齐</td>
</tr>
<tr>
<td>flex-end</td>
<td>项目位于容器的结尾。</td>
<td>垂直对齐结束位置 底对齐</td>
</tr>
</tbody>
</table>
<p><strong>5. flex-wrap控制是否换行</strong></p>
<p>当我们子盒子内容宽度多于父盒子的时候如何处理</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>nowrap</td>
<td>默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示</td>
</tr>
<tr>
<td>wrap</td>
<td>规定灵活的项目在必要的时候拆行或拆列。</td>
</tr>
<tr>
<td>wrap-reverse</td>
<td>规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。</td>
</tr>
</tbody>
</table>
<p><strong>6. flex-flow是flex-direction、flex-wrap的简写形式</strong></p>
<pre><code class="prism language-css"><span class="token property">flex-flow</span><span class="token punctuation">:</span> flex-direction flex-wrap<span class="token punctuation">;</span> <span class="token comment">/* 排列方向 是否换行 */</span>
</code></pre>
<p>中间用空格隔开。</p>
<p>例如：</p>
<pre><code class="prism language-css"><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token comment">/* flex-direction: row;
flex-wrap: wrap; 这两句话等价于下面的这句话*/</span>
<span class="token property">flex-flow</span><span class="token punctuation">:</span> column wrap<span class="token punctuation">;</span> <span class="token comment">/* 两者的综合 */</span>
</code></pre>
<p><strong>7. align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐</strong></p>
<p>align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。</p>
<p>必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>stretch</td>
<td>默认值。项目被拉伸以适应容器。</td>
</tr>
<tr>
<td>center</td>
<td>项目位于容器的中心。</td>
</tr>
<tr>
<td>flex-start</td>
<td>项目位于容器的开头。</td>
</tr>
<tr>
<td>flex-end</td>
<td>项目位于容器的结尾。</td>
</tr>
<tr>
<td>space-between</td>
<td>项目位于各行之间留有空白的容器内。</td>
</tr>
<tr>
<td>space-around</td>
<td>项目位于各行之前、之间、之后都留有空白的容器内。</td>
</tr>
</tbody>
</table>
<p><strong>8. order控制子项目的排列顺序，正序方式排序，从小到大</strong></p>
<p>用css 来控制盒子的前后顺序。 用order 就可以</p>
<p>用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0</p>
<pre><code class="prism language-css"><span class="token property">order</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
</code></pre>
<h3>文字阴影(CSS3)</h3>
<pre><code class="prism language-css"><span class="token property">text-shadow</span><span class="token punctuation">:</span>水平位置 垂直位置 模糊距离 阴影颜色<span class="token punctuation">;</span>
</code></pre>
<p>前两项是必须写的。 后两项可以选写。</p>
<h3>优雅降级和渐进增强</h3>
<p><strong>渐进增强 progressive enhancement：</strong></p>
<p>针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。</p>
<p><strong>优雅降级 graceful degradation：</strong></p>
<p>一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。</p>
<blockquote>
<p>区别：渐进增强是向上兼容，优雅降级是向下兼容。</p>
</blockquote>
<blockquote>
<p>建议一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。</p>
</blockquote>
<h3>浏览器前缀</h3>
<table>
<thead>
<tr>
<th>浏览器前缀</th>
<th>浏览器</th>
</tr>
</thead>
<tbody>
<tr>
<td>-webkit-</td>
<td>Google Chrome, Safari, Android Browser</td>
</tr>
<tr>
<td>-moz-</td>
<td>Firefox</td>
</tr>
<tr>
<td>-o-</td>
<td>Opera</td>
</tr>
<tr>
<td>-ms-</td>
<td>Internet Explorer, Edge</td>
</tr>
<tr>
<td>-khtm-l</td>
<td>Konqueror</td>
</tr>
</tbody>
</table>
<h3>背景渐变</h3>
<p>在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。</p>
<p>线性渐变:</p>
<p>语法格式：</p>
<pre><code class="prism language-css"><span class="token property">background</span><span class="token punctuation">:</span><span class="token function">-webkit-linear-gradient</span><span class="token punctuation">(</span>渐变的起始位置， 起始颜色， 结束颜色<span class="token punctuation">)</span>；
</code></pre>
<pre><code class="prism language-css"><span class="token property">background</span><span class="token punctuation">:</span><span class="token function">-webkit-linear-gradient</span><span class="token punctuation">(</span>渐变的起始位置， 颜色 位置， 颜色位置....<span class="token punctuation">)</span>；
</code></pre>
<p>如：第一种格式</p>
<pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{
</span>
<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">-webkit-linear-gradient</span><span class="token punctuation">(</span>top,red,pink<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/af9b65f7e4a94cdea589b9cd7b5c00dd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/af9b65f7e4a94cdea589b9cd7b5c00dd.jpg" alt="HTML5的新标签及其特性、CSS3新增选择器_第15张图片" width="478" height="187" style="border:1px solid black;"></a><br> 第二种格式：</p>
<pre><code class="prism language-css"><span class="token selector">div</span> <span class="token punctuation">{
</span>
<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">-webkit-linear-gradient</span><span class="token punctuation">(</span>top,red 0%,pink 50%,orange 100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><a href="http://img.e-com-net.com/image/info8/b4361f057c584ca09e6c010c41f4c44b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b4361f057c584ca09e6c010c41f4c44b.jpg" alt="HTML5的新标签及其特性、CSS3新增选择器_第16张图片" width="481" height="189" style="border:1px solid black;"></a></p>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1353190267921969152"></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">你可能感兴趣的:(前端笔记)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1827874635652362240.htm"
title="前端笔记+面试" target="_blank">前端笔记+面试</a>
<span class="text-muted">huahua1112520</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
<div>一：JS基础部分原型链和原型每个对象都有_proto_属性，并且指向它的原型对象每个构造函数都有它的prototype原型对象prototype原型对象里的constructor指向它的构造函数new一个构造函数会形成它的实例对象深拷贝与浅拷贝涉及堆栈内存、引用类型的区别如何深拷贝：递归拷贝&&利用JSON函数深拷贝JSON.parse(JSON.stringify({对象}))堆栈内存堆内存：接</div>
</li>
<li><a href="/article/1757459823798009856.htm"
title="前端笔记(2)" target="_blank">前端笔记(2)</a>
<span class="text-muted">rtrhhthth</span>
<div>一.代码：（1）css样式cssp{color:green;font-size:30px;}-->先天下之忧而忧后天下之乐而乐-->先天下之忧而忧，后天下之乐而乐(2)css语法CSS语法/*CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是CSS文件中CSS的语法：选择器声明块选择器：-通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上</div>
</li>
<li><a href="/article/1755366709264400384.htm"
title="前端笔记——JavaScript" target="_blank">前端笔记——JavaScript</a>
<span class="text-muted">ALLIN5</span>
<div>一、什么是JavaScript？概念：JavaScript是运行在浏览器端的'脚本语言'，JavaScript是浏览器解释执行的作用：JavaScript主要解决的是前端与用户交互的问题，包括'使用交互'与'数据交互'。意义：负责'页面行为'：部分动画效果、页面与用户的交互、页面功能；二、嵌入页面的三种方式1、行间事件（主要用于事件）2、页面script标签嵌入alert('ok！');3、外部引</div>
</li>
<li><a href="/article/1754107951653601280.htm"
title="前端笔记（14）" target="_blank">前端笔记（14）</a>
<span class="text-muted">rtrhhthth</span>
<div>代码：1.新增选择器新增选择器window.onload=function(){varoDiv=document.querySelector('#div1');alert(oDiv);//弹出[objectHTMLDivElement]，表示选择了该Div//如果要选择多个元素用querySelectorAllvaraLi=document.querySelectorAll('.listli');</div>
</li>
<li><a href="/article/1753594298760183808.htm"
title="Web前端笔记 -- CSS①" target="_blank">Web前端笔记 -- CSS①</a>
<span class="text-muted">十八岁讨厌编程</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/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</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/html/1.htm">html</a>
<div>文章目录CSS简介HTML的局限性CSS-网页的美容师CSS语法规范CSS代码风格样式格式书写样式大小写空格规范CSS基础选择器CSS选择器的作用选择器分类标签选择器类选择器类选择器-多类名id选择器通配符选择器基础选择器总结CSS字体属性字体系列字体大小字体粗细文字样式字体复合属性字体属性总结CSS文本样式文本颜色对齐文本装饰文本文本缩进行间距文本属性总结CSS的引入方式CSS的三种样式表内部样</div>
</li>
<li><a href="/article/1753593659648917504.htm"
title="【Web前端笔记06】CSS常用属性" target="_blank">【Web前端笔记06】CSS常用属性</a>
<span class="text-muted">墨倾许</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>目录一、字体属性1、color字体颜色2、font-size字体大小（默认16px)3、font-weight文本粗细4、font-style字体样式5、font-family指定一个元素的字体二、背景属性1、background-color背景颜色2、background-image:url("img/do.png");背景图片3、background-repeat背景图片是否重复4、backg</div>
</li>
<li><a href="/article/1753591869708713984.htm"
title="【Web前端笔记07】CSS选择器" target="_blank">【Web前端笔记07】CSS选择器</a>
<span class="text-muted">墨倾许</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>目录07CSS选择器一、关系选择器二、伪类选择器三、伪对象选择器四、属性选择器总结07CSS选择器一、关系选择器后代选择器EF{}(所有被E元素包含的F元素，中间用空格隔开)通用兄弟选择器E~F{}(选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开)相邻兄弟选择器E+F{}(选择紧跟E元素后的F元素，用加好表示，选择相邻的第一个兄弟元素)子代选择器E>F{}(选择所有作为E元素的直接子元素</div>
</li>
<li><a href="/article/1750640515834986496.htm"
title="前端笔记(6)" target="_blank">前端笔记(6)</a>
<span class="text-muted">rtrhhthth</span>
<div>代码：1.元素的层级元素的层级.box1{width:200px;height:200px;background-color:red;position:relative;z-index:2;opacity:0.5;filter:alpha(opacity=50);}.box2{width:200px;height:200px;background-color:yellow;/*开启绝对定位*/po</div>
</li>
<li><a href="/article/1750532711073726464.htm"
title="Web前端笔记——表单" target="_blank">Web前端笔记——表单</a>
<span class="text-muted">墨倾许</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/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/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>目录章节03表单一、Form表单二、表单元素1、表单2、表单元素三、HTML5新增type类型1、email2、url3、search4、tel5、color6、number7、range8、date9、month10、year四、HTML5新增属性1、autofocus属性2、multiple属性3、placeholder属性4、required属性五、实体字符章节03表单一、Form表单表单在</div>
</li>
<li><a href="/article/1750031383419437056.htm"
title="【链接目录】" target="_blank">【链接目录】</a>
<span class="text-muted">刘恒123456789</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>推荐链接环境配置PhpStormWindows浏览器插件键盘特殊符号dockerdocker基础Windows10dockerdockerfileLinuxApacheComposerUbuntu后门程序技术Excel压力测试工具GitWampServer前端笔记JavaScript+jQueryLayuiVUESQL笔记MySQLSQLServerRedisPHPPHP笔记PHP设计模式Thin</div>
</li>
<li><a href="/article/1748795355312439296.htm"
title="web前端笔记整理，从入门到上天，周周更新" target="_blank">web前端笔记整理，从入门到上天，周周更新</a>
<span class="text-muted">weixin_30527551</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a>
<div>由于大前端知识点太多，所以一一做了分类整理，详情可见本人博客http://www.cnblogs.com/luxiaoyao/一、HTML1.注释格式：作用：1.解释说明代码的含义（代码量大，后期维护，便于新人交接）2.调试代码2.head内标签//meta:定义关于HTML文档的元信息3s之后刷新3s之后刷新并跳转到百度//title：定义文档的标题网站的标题//link:定义文档与外部资源的关</div>
</li>
<li><a href="/article/1745814395830681600.htm"
title="前端笔记（11）" target="_blank">前端笔记（11）</a>
<span class="text-muted">rtrhhthth</span>
<div>代码：（1）函数传参函数传参window.onload=function(){varoDiv=document.getElementById('div1');changeStyle('color','gold');changeStyle('background','red');changeStyle('width','300px');changeStyle('height','300px');ch</div>
</li>
<li><a href="/article/1744714442794352640.htm"
title="前端笔记（2）JavaScript面向对象" target="_blank">前端笔记（2）JavaScript面向对象</a>
<span class="text-muted">sullay</span>
<div>javaScript是不是面向对象语言？JavaScript（es6之前）有对象的概念，却没有类的概念，JavaScript对象可以任意添加属性，而java、c++等其他语言却不能。以至于有些人认为JavaScript并非是面向对象的语言，而是基于对象的语言。实际上JavaScript无疑是面向对象的语言，只不多例如java、c++等语言才用的是“类”的方式来描述对象，这也是最为成功的描述对象方式</div>
</li>
<li><a href="/article/1742123730710052864.htm"
title="【自学】前端笔记-布局" target="_blank">【自学】前端笔记-布局</a>
<span class="text-muted">该用户已疯</span>
<div>document之间是一个容器，可以包含图片、段落、表格等各种html元素-->html标签块级标签:占据一行，换行～行内标签:在一行，不换行嵌套规则块级元素能嵌套行内元素和一部分块级元素行内元素不能嵌套块级元素，只能嵌套行内元素块级元素不能放在标签内特殊块级元素只能包含行内元素，不能包含块级元素，如～、、块级元素与块级元素并列，行内元素与行内元素并列</div>
</li>
<li><a href="/article/1740648875707875328.htm"
title="前端笔记（四）Flex 布局" target="_blank">前端笔记（四）Flex 布局</a>
<span class="text-muted">*Soo_Young*</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>标准流标准流也叫文档流，指的是标签在页面中默认的派不规则，例如：块元素独占一行，行内元素可以一行显示多个。但是很多的网页布局都是块元素在一行中显示的，这时候就需要浮动和Flex布局，浮动只需要了解即可浮动可以让块元素水平排列给块元素加上float属性可以使得块元素往左边或者往右边浮动，使得两个块元素可以出现在一行里面。浮动后的格子会脱离标准流的控制，不再占用标准流的范围。浮动-产品区域布局Docu</div>
</li>
<li><a href="/article/1740558414506901504.htm"
title="基于Springboot+vue的员工管理系统--前端笔记" target="_blank">基于Springboot+vue的员工管理系统--前端笔记</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/vue.js/1.htm">vue.js</a>
<div>1.前言之前我们员工管理系统的后端笔记已经书写完毕，现在我们整理一下前端的笔记。2.安装Vue环境，并新建Vue的项目过程比较简单，此处省略....3.登录界面的开发一般的登录界面就是简单的表单：用户名、登录密码、验证码。然后我们涉及到的后台交互有2个：获取登录验证码提交表单完成登录登录交互的过程：浏览器打开登录页面动态加载登录验证码，后端生成的验证码存在前端的sessionStorage中前端提</div>
</li>
<li><a href="/article/1740281061784436736.htm"
title="前端笔记 ---ES 新特性与 TypeScript、JS 性能优化" target="_blank">前端笔记 ---ES 新特性与 TypeScript、JS 性能优化</a>
<span class="text-muted">WEB前端含光</span>
<div>ES新特性首先了解一下什么是ESES(ECMAScript)，具体背景什么的就不介绍了，需要记住ES是JS(JavaScript)的一种语法规范，换句话说，ES是JS的规范，JS是ES的一种实现ES只提供基本语法，所以只停留在语言层面ES2015(ES6)ES2015在2015年6月发布，后续简称ES6ES6主要为了解决以下四类问题1.解决原有语法不足或问题2.对原有语法进行增强3.全新的方法，对</div>
</li>
<li><a href="/article/1739418636306628608.htm"
title="前端笔记 css（8）css初始化" target="_blank">前端笔记 css（8）css初始化</a>
<span class="text-muted">Flyoungbuhu</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>1.css初始化不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对html文本呈现的差异，照顾浏览器的兼容，我们需要对css初始化简单理解：css初始化就是指重设浏览器的样式。（也成cssreset）/*把我们所有标签的内外边距清零*/*{margin:0;padding:0}/*em和i斜体的文字不倾斜*/em,i{font-style:normal}/*去掉li的小圆点*/li{lis</div>
</li>
<li><a href="/article/1739077966383603712.htm"
title="前端笔记六（js面向对象的公有属性与私有属性）" target="_blank">前端笔记六（js面向对象的公有属性与私有属性）</a>
<span class="text-muted">沐雨芝录</span>
<div>定义：公有属性：是指在对象外可以访问到对象内的某个属性。私有属性：只在函数内部可以访问，外部强行访问则会报错。公共属性方法：functionPublic(name,age){this.name=namethis.age=age}Public.prototype=({who:function(){console.log(this.name)},old:function(){console.log(t</div>
</li>
<li><a href="/article/1738419548752764928.htm"
title="Web前端笔记——表格表单框架实体元信息等笔记" target="_blank">Web前端笔记——表格表单框架实体元信息等笔记</a>
<span class="text-muted">Komorebi_9999</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>基本结构表格标题表格头部默认样式就是头部整体加粗h:heads表格主体d:data表格脚注常用属性table表格width：设置表格的宽度双height：设置表格最小高度，表格最终高度可能比设置的值大border:设置表格边框宽度cellspacing:设置单元格之间的间距thead表格头部height:设置表格头部高度双align:设置单元格的水平对齐方式，可选值如下：left:左对齐cente</div>
</li>
<li><a href="/article/1737347250562064384.htm"
title="前端笔记之typescript基础" target="_blank">前端笔记之typescript基础</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a>
<div>前端笔记之typescript基础1.数据类型：2.联合类型3.接口4.函数5.类型别名6.元组7.枚举8.类8.1构造器8.2属性权限描述符8.3存取器8.4类的继承8.5静态方法和静态属性8.6readonly修饰符8.7抽象类8.8接口继承类9.声明合并10.泛型10.1泛型定义10.2泛型约束10.3泛型接口11.声明文件和内置对象11.1声明文件11.2内置对象12.typescript</div>
</li>
<li><a href="/article/1737347123613065216.htm"
title="前端笔记之Array.fill的坑" target="_blank">前端笔记之Array.fill的坑</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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>Array.fill填充引用型数据类型的坑众所周知，Array.fill可以将我们声明既有元素个数的数组填充全部或者部分的元素，但是很坑的就是他在填充引用型数据类型的时候，填充的是同一个内存地址的对象，也就意味着之后你改动其中一个元素的属性，所有的元素都会跟着改变，即便是使用了new关键词，我本来以为使用new之后就会避免这个问题的。。。所以嘞，那该怎么处理，去循环里面给予元素新的对象，确实这样可</div>
</li>
<li><a href="/article/1737347124187684864.htm"
title="前端笔记之截图选择" target="_blank">前端笔记之截图选择</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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>纯原生实现截图选择实现思路代码实现最近在写自己的ui组件（没错，我已经不满足做一个只会cv的程序猿！！！），目前想写一个上传图片的组件，之前笔记里也记载了如何上传图片。但是我想做一个可以实现裁剪的图片上传，那么图片上传已经实现了，剩下的就是裁剪图片了。这里主要记录原生js实现一个图片裁剪。代码主要体现实现思路，所以会有代码冗余繁琐等问题。实现思路首先是文件上传预览，因为要实现裁剪上传，所以就不能传</div>
</li>
<li><a href="/article/1737347122832924672.htm"
title="前端笔记之vue3 之 render函数和createVNode函数使用" target="_blank">前端笔记之vue3 之 render函数和createVNode函数使用</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>初学vue3的时候倒是扒了一点点源码，似是而非，而且一直做的工作都是很简单的功能，怎么说呢，ui框架也几乎让我很容易的就可以写出一个成型的页面，有时就忘了初学的时候的一些心得。本内容只说createVNode函数的用法，不做源码探究1.简单使用-创建一个组件import{defineComponent,createVNode}from"vue";constRenderTest=defineComp</div>
</li>
<li><a href="/article/1731640754754891776.htm"
title="前端笔记（4）JavaScript宏观与微观任务" target="_blank">前端笔记（4）JavaScript宏观与微观任务</a>
<span class="text-muted">sullay</span>
<div>宏观和微观任务在ES3和更早的版本中，JavaScript本身还没有异步执行代码的能力，这也就意味着，宿主环境传递给JavaScript引擎一段代码，引擎就把代码直接顺次执行了，这个任务也就是宿主发起的任务。但是，在ES5之后，JavaScript引入了Promise，这样，不需要浏览器的安排，JavaScript引擎本身也可以发起任务了。由于我们这里主要讲JavaScript语言，那么采纳JSC</div>
</li>
<li><a href="/article/1731439435234488320.htm"
title="前端笔记（二）：CSS 选择器与特性" target="_blank">前端笔记（二）：CSS 选择器与特性</a>
<span class="text-muted">*Soo_Young*</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>CSS（层叠样式表）是一种样式表语言，用于描述HTML或XML文档的呈现方式。它定义了如何在屏幕、纸张或其他媒体上显示文档的样式、布局和外观。里面的代码由选择器+{}组成体验CSSCSS可以让我们界面变得更加美观，这是CSS的一个效果展现Documentp{/*文字颜色*/color:red;/*字号*/font-size:50px;}这是一个段落CSS的引入方式CSS有三种引入方式，内部样式表、</div>
</li>
<li><a href="/article/1731092315637886976.htm"
title="前端笔记（一）：HTML5 入门学习" target="_blank">前端笔记（一）：HTML5 入门学习</a>
<span class="text-muted">*Soo_Young*</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>前言：在完成Java的SpringBoot学习并练习了几个项目后，出于对编程的兴趣和没有组织的局限性，为了开发一些个人的小项目，我将开始前端部分的学习，预计会学到Vue框架，同时会把自己的学习笔记发布成博客，希望与大家共勉！HTML（超文本标记语言）是一种标记语言，用于创建网页结构。它由一系列称为标签（tags）的元素组成，每个标签描述了文档中不同的内容类型，如文本、图像、链接等。HTML标签以尖</div>
</li>
<li><a href="/article/1730948653109030912.htm"
title="梅科尔工作室-李庆浩 鸿蒙前端笔记1" target="_blank">梅科尔工作室-李庆浩 鸿蒙前端笔记1</a>
<span class="text-muted">心之所向，我之所望</span>
<a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%89%8D%E7%AB%AF/1.htm">鸿蒙前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>1.应用介绍1.1应用开发目录介绍1.2使用规则2.初入注意事项（1）在进行预览时，要先选择预览所对应的hml等文件下才能进行预览；（2）在config.json里要配置所对应的页的文件路径；（3）配置路径以后单纯刷新是不能显示新配置的页面的，要重新进入预览；（4）创建项目名称,注意首字母大写;（5）引用代码文件，需使用相对路径，比如:../common/utils.js（6）引用资源文件,推荐使</div>
</li>
<li><a href="/article/1730256611122950144.htm"
title="前端笔记（8）css选择器（二）" target="_blank">前端笔记（8）css选择器（二）</a>
<span class="text-muted">sullay</span>
<div>选择器的组合选择器列表是一个由逗号分隔的复杂选择器序列；复杂选择器则是用“空格”、“~”、“+”、“>”、“||”连接的复合选择器；复合选择器则是连写的简单选择器。选择器的连接方式可以理解为四则运算一样有优先级。第一优先级：无连接符号，表示“且”第二优先级：“空格”、“~”、“+”、“>”、“||”第三优先级：“,”表示“或”复杂选择器规定了五种连接符号。“空格”：后代，表示选中所有符合条件的后代</div>
</li>
<li><a href="/article/1730196117343252480.htm"
title="前端笔记：React的form表单全部置空或者某个操作框置空的做法" target="_blank">前端笔记：React的form表单全部置空或者某个操作框置空的做法</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a>
<div>原创/朱季谦在React框架前端开发中，经常会有弹出框的开发，涉及到弹出框，难免就会有表单。一般在关闭弹出框或者对表单联动时，往往都需要考虑对表单进行置空操作了。我以前在工作就遇到过这类问题，正好顺便对表单置空这块做一些总结小记录。主要有两种情况，一种是对整个表单置空，一种是想灵活对其中个别选框置空。1.全部置空的做法,一般在弹出框关闭同时，重置该form所有表单，使用方法如下：this.prop</div>
</li>
<li><a href="/article/64.htm"
title="关于旗正规则引擎中的MD5加密问题" target="_blank">关于旗正规则引擎中的MD5加密问题</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/MD5/1.htm">MD5</a><a class="tag" taget="_blank" href="/search/%E8%A7%84%E5%88%99/1.htm">规则</a><a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%AF%86/1.htm">加密</a>
<div>一般情况下，为了防止个人隐私的泄露，我们都会对用户登录密码进行加密，使数据库相应字段保存的是加密后的字符串，而非原始密码。
在旗正规则引擎中，通过外部调用，可以实现MD5的加密，具体步骤如下：
1.在对象库中选择外部调用，选择“com.flagleader.util.MD5”，在子选项中选择“com.flagleader.util.MD5.getMD5ofStr({arg1})”；
2.在规</div>
</li>
<li><a href="/article/191.htm"
title="【Spark101】Scala Promise/Future在Spark中的应用" target="_blank">【Spark101】Scala Promise/Future在Spark中的应用</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Promise/1.htm">Promise</a>
<div>Promise和Future是Scala用于异步调用并实现结果汇集的并发原语，Scala的Future同JUC里面的Future接口含义相同，Promise理解起来就有些绕。等有时间了再仔细的研究下Promise和Future的语义以及应用场景，具体参见Scala在线文档：http://docs.scala-lang.org/sips/completed/futures-promises.html</div>
</li>
<li><a href="/article/318.htm"
title="spark sql 访问hive数据的配置详解" target="_blank">spark sql 访问hive数据的配置详解</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/spark+sql/1.htm">spark sql</a><a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/thriftserver/1.htm">thriftserver</a>
<div>spark sql 能够通过thriftserver 访问hive数据，默认spark编译的版本是不支持访问hive，因为hive依赖比较多，因此打的包中不包含hive和thriftserver,因此需要自己下载源码进行编译，将hive，thriftserver打包进去才能够访问，详细配置步骤如下：
1、下载源码
2、下载Maven,并配置
此配置简单，就略过</div>
</li>
<li><a href="/article/445.htm"
title="HTTP 协议通信" target="_blank">HTTP 协议通信</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/httpclient/1.htm">httpclient</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E9%80%9A%E4%BF%A1/1.htm">通信</a>
<div>
一：简介
HTTPCLIENT，通过JAVA基于HTTP协议进行点与点间的通信！
二： 代码举例
测试类：
import java</div>
</li>
<li><a href="/article/572.htm"
title="java unix时间戳转换" target="_blank">java unix时间戳转换</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>把java时间戳转换成unix时间戳：
Timestamp appointTime=Timestamp.valueOf(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()))
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd hh:m</div>
</li>
<li><a href="/article/699.htm"
title="web报表工具FineReport常用函数的用法总结（报表函数）" target="_blank">web报表工具FineReport常用函数的用法总结（报表函数）</a>
<span class="text-muted">老A不折腾</span>
<a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8/1.htm">web报表</a><a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a>
<div>说明：本次总结中，凡是以tableName或viewName作为参数因子的。函数在调用的时候均按照先从私有数据源中查找，然后再从公有数据源中查找的顺序。
CLASS
CLASS(object):返回object对象的所属的类。
CNMONEY
CNMONEY(number,unit)返回人民币大写。
number:需要转换的数值型的数。
unit:单位，</div>
</li>
<li><a href="/article/826.htm"
title="java jni调用c++ 代码 报错" target="_blank">java jni调用c++ 代码 报错</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/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/jni/1.htm">jni</a>
<div>#
# A fatal error has been detected by the Java Runtime Environment:
#
# EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x00000000777c3290, pid=5632, tid=6656
#
# JRE version: Java(TM) SE Ru</div>
</li>
<li><a href="/article/953.htm"
title="Spring中事件处理de小技巧" target="_blank">Spring中事件处理de小技巧</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/Spring+%E6%95%99%E7%A8%8B/1.htm">Spring 教程</a><a class="tag" taget="_blank" href="/search/Spring+%E5%AE%9E%E4%BE%8B/1.htm">Spring 实例</a><a class="tag" taget="_blank" href="/search/Spring+%E5%85%A5%E9%97%A8/1.htm">Spring 入门</a><a class="tag" taget="_blank" href="/search/Spring3/1.htm">Spring3</a>
<div>Spring 中提供一些Aware相关de接口，BeanFactoryAware、 ApplicationContextAware、ResourceLoaderAware、ServletContextAware等等，其中最常用到de匙ApplicationContextAware.实现ApplicationContextAwaredeBean，在Bean被初始后，将会被注入 Applicati</div>
</li>
<li><a href="/article/1080.htm"
title="linux shell ls脚本样例" target="_blank">linux shell ls脚本样例</a>
<span class="text-muted">annan211</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux+ls%E6%BA%90%E7%A0%81/1.htm">linux ls源码</a><a class="tag" taget="_blank" href="/search/linux+%E6%BA%90%E7%A0%81/1.htm">linux 源码</a>
<div>
#! /bin/sh -
#查找输入文件的路径
#在查找路径下寻找一个或多个原始文件或文件模式
# 查找路径由特定的环境变量所定义
#标准输出所产生的结果 通常是查找路径下找到的每个文件的第一个实体的完整路径
# 或是filename :not found 的标准错误输出。
#如果文件没有找到 则退出码为0
#否则 即为找不到的文件个数
#语法 pathfind [--</div>
</li>
<li><a href="/article/1207.htm"
title="List,Set,Map遍历方式 (收集的资源,值得看一下)" target="_blank">List,Set,Map遍历方式 (收集的资源,值得看一下)</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/set/1.htm">set</a><a class="tag" taget="_blank" href="/search/Map%E9%81%8D%E5%8E%86%E6%96%B9%E5%BC%8F/1.htm">Map遍历方式</a>
<div>List特点：元素有放入顺序，元素可重复
Map特点：元素按键值对存储，无放入顺序
Set特点：元素无放入顺序，元素不可重复（注意：元素虽然无放入顺序，但是元素在set中的位置是有该元素的HashCode决定的，其位置其实是固定的）
List接口有三个实现类：LinkedList，ArrayList，Vector
LinkedList：底层基于链表实现，链表内存是散乱的，每一个元素存储本身</div>
</li>
<li><a href="/article/1334.htm"
title="解决SimpleDateFormat的线程不安全问题的方法" target="_blank">解决SimpleDateFormat的线程不安全问题的方法</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/%E7%BA%BF%E7%A8%8B%E5%AE%89%E5%85%A8/1.htm">线程安全</a>
<div>在Java项目中，我们通常会自己写一个DateUtil类，处理日期和字符串的转换，如下所示：
public class DateUtil01 {
private SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
public void format(Date d</div>
</li>
<li><a href="/article/1461.htm"
title="http请求测试实例（采用fastjson解析）" target="_blank">http请求测试实例（采用fastjson解析）</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95/1.htm">测试</a>
<div> 在实际开发中，我们经常会去做http请求的开发，下面则是如何请求的单元测试小实例，仅供参考。
import java.util.HashMap;
import java.util.Map;
import org.apache.commons.httpclient.HttpClient;
import </div>
</li>
<li><a href="/article/1588.htm"
title="【RPC框架Hessian三】Hessian 异常处理" target="_blank">【RPC框架Hessian三】Hessian 异常处理</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hessian/1.htm">hessian</a>
<div>RPC异常处理概述
RPC异常处理指是，当客户端调用远端的服务，如果服务执行过程中发生异常，这个异常能否序列到客户端？
如果服务在执行过程中可能发生异常，那么在服务接口的声明中，就该声明该接口可能抛出的异常。
在Hessian中，服务器端发生异常，可以将异常信息从服务器端序列化到客户端，因为Exception本身是实现了Serializable的</div>
</li>
<li><a href="/article/1715.htm"
title="【日志分析】日志分析工具" target="_blank">【日志分析】日志分析工具</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97%E5%88%86%E6%9E%90/1.htm">日志分析</a>
<div>1. 网站日志实时分析工具 GoAccess
http://www.vpsee.com/2014/02/a-real-time-web-log-analyzer-goaccess/
2. 通过日志监控并收集 Java 应用程序性能数据(Perf4J)
http://www.ibm.com/developerworks/cn/java/j-lo-logforperf/
3.log.io
和</div>
</li>
<li><a href="/article/1842.htm"
title="nginx优化加强战斗力及遇到的坑解决" target="_blank">nginx优化加强战斗力及遇到的坑解决</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+%E4%BC%98%E5%8C%96/1.htm">nginx 优化</a>
<div> 先说遇到个坑，第一个是负载问题，这个问题与架构有关，由于我设计架构多了两层，结果导致会话负载只转向一个。解决这样的问题思路有两个：一是改变负载策略，二是更改架构设计。
由于采用动静分离部署，而nginx又设计了静态，结果客户端去读nginx静态，访问量上来，页面加载很慢。解决：二者留其一。最好是保留apache服务器。
来以下优化：
</div>
</li>
<li><a href="/article/1969.htm"
title="java-50-输入两棵二叉树A和B，判断树B是不是A的子结构" target="_blank">java-50-输入两棵二叉树A和B，判断树B是不是A的子结构</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/25411174201011445550396/
import ljn.help.*;
public class HasSubtree {
/**Q50.
* 输入两棵二叉树A和B，判断树B是不是A的子结构。
例如，下图中的两棵树A和B，由于A中有一部分子树的结构和B是一</div>
</li>
<li><a href="/article/2096.htm"
title="mongoDB 备份与恢复" target="_blank">mongoDB 备份与恢复</a>
<span class="text-muted">开窍的石头</span>
<a class="tag" taget="_blank" href="/search/mongDB%E5%A4%87%E4%BB%BD%E4%B8%8E%E6%81%A2%E5%A4%8D/1.htm">mongDB备份与恢复</a>
<div>Mongodb导出与导入
1: 导入/导出可以操作的是本地的mongodb服务器,也可以是远程的.
所以,都有如下通用选项:
-h host 主机
--port port 端口
-u username 用户名
-p passwd 密码
2: mongoexport 导出json格式的文件 </div>
</li>
<li><a href="/article/2223.htm"
title="[网络与通讯]椭圆轨道计算的一些问题" target="_blank">[网络与通讯]椭圆轨道计算的一些问题</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>
如果按照中国古代农历的历法，现在应该是某个季节的开始，但是由于农历历法是3000年前的天文观测数据，如果按照现在的天文学记录来进行修正的话，这个季节已经过去一段时间了。。。。。
也就是说，还要再等3000年。才有机会了，太阳系的行星的椭圆轨道受到外来天体的干扰，轨道次序发生了变</div>
</li>
<li><a href="/article/2350.htm"
title="软件专利如何申请" target="_blank">软件专利如何申请</a>
<span class="text-muted">cuiyadll</span>
<a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E4%B8%93%E5%88%A9/1.htm">软件专利</a><a class="tag" taget="_blank" href="/search/%E7%94%B3%E8%AF%B7/1.htm">申请</a>
<div>软件技术可以申请软件著作权以保护软件源代码，也可以申请发明专利以保护软件流程中的步骤执行方式。专利保护的是软件解决问题的思想，而软件著作权保护的是软件代码（即软件思想的表达形式）。例如，离线传送文件，那发明专利保护是如何实现离线传送文件。基于相同的软件思想，但实现离线传送的程序代码有千千万万种，每种代码都可以享有各自的软件著作权。申请一个软件发明专利的代理费大概需要5000-8000申请发明专利可</div>
</li>
<li><a href="/article/2477.htm"
title="Android学习笔记" target="_blank">Android学习笔记</a>
<span class="text-muted">darrenzhu</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>1.启动一个AVD
2.命令行运行adb shell可连接到AVD,这也就是命令行客户端
3.如何启动一个程序
am start -n package name/.activityName
am start -n com.example.helloworld/.MainActivity
启动Android设置工具的命令如下所示：
# am start -</div>
</li>
<li><a href="/article/2604.htm"
title="apache虚拟机配置，本地多域名访问本地网站" target="_blank">apache虚拟机配置，本地多域名访问本地网站</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a>
<div>现在假定你有两个目录，一个存在于 /htdocs/a，另一个存在于 /htdocs/b 。
现在你想要在本地测试的时候访问 www.freeman.com 对应的目录是 /xampp/htdocs/freeman ,访问 www.duchengjiu.com 对应的目录是 /htdocs/duchengjiu。
1、首先修改C盘WINDOWS\system32\drivers\etc目录下的 </div>
</li>
<li><a href="/article/2731.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>速率限制
为防止滥用，你应该考虑增加速率限制到您的API。 例如，您可以限制每个用户的API的使用是在10分钟内最多100次的API调用。 如果一个用户同一个时间段内太多的请求被接收， 将返回响应状态代码 429 (这意味着过多的请求)。
要启用速率限制, [[yii\web\User::identityClass|user identity class]] 应该实现 [[yii\filter</div>
</li>
<li><a href="/article/2858.htm"
title="Hadoop2.5.2安装——单机模式" target="_blank">Hadoop2.5.2安装——单机模式</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/hadoop%E5%8D%95%E6%9C%BA%E9%83%A8%E7%BD%B2/1.htm">hadoop单机部署</a>
<div>转载请出自出处：http://eksliang.iteye.com/blog/2185414 一、概述
Hadoop有三种模式 单机模式、伪分布模式和完全分布模式，这里先简单介绍单机模式 ，默认情况下，Hadoop被配置成一个非分布式模式，独立运行JAVA进程，适合开始做调试工作。
二、下载地址
Hadoop 网址http:</div>
</li>
<li><a href="/article/2985.htm"
title="LoadMoreListView+SwipeRefreshLayout（分页下拉）基本结构" target="_blank">LoadMoreListView+SwipeRefreshLayout（分页下拉）基本结构</a>
<span class="text-muted">gundumw100</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>一切为了快速迭代
import java.util.ArrayList;
import org.json.JSONObject;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v4.widget.SwipeRefreshLayo</div>
</li>
<li><a href="/article/3112.htm"
title="三道简单的前端HTML/CSS题目" target="_blank">三道简单的前端HTML/CSS题目</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E7%9B%AE/1.htm">题目</a>
<div>使用CSS为多个网页进行相同风格的布局和外观设置时，为了方便对这些网页进行修改，最好使用（ ）。http://hovertree.com/shortanswer/bjae/7bd72acca3206862.htm
在HTML中加入<table style=”color:red; font-size:10pt”>，此为（ ）。http://hovertree.com/s</div>
</li>
<li><a href="/article/3239.htm"
title="overrided方法编译错误" target="_blank">overrided方法编译错误</a>
<span class="text-muted">kane_xie</span>
<a class="tag" taget="_blank" href="/search/override/1.htm">override</a>
<div>
问题描述：
在实现类中的某一或某几个Override方法发生编译错误如下：
Name clash: The method put(String) of type XXXServiceImpl has the same erasure as put(String) of type XXXService but does not override it
当去掉@Over</div>
</li>
<li><a href="/article/3366.htm"
title="Java中使用代理IP获取网址内容（防IP被封，做数据爬虫）" target="_blank">Java中使用代理IP获取网址内容（防IP被封，做数据爬虫）</a>
<span class="text-muted">mcj8089</span>
<a class="tag" taget="_blank" href="/search/%E5%85%8D%E8%B4%B9%E4%BB%A3%E7%90%86IP/1.htm">免费代理IP</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86IP/1.htm">代理IP</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%88%AC%E8%99%AB/1.htm">数据爬虫</a><a class="tag" taget="_blank" href="/search/JAVA%E8%AE%BE%E7%BD%AE%E4%BB%A3%E7%90%86IP/1.htm">JAVA设置代理IP</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E5%B0%81IP/1.htm">爬虫封IP</a>
<div>推荐两个代理IP网站：
1. 全网代理IP：http://proxy.goubanjia.com/
2. 敲代码免费IP：http://ip.qiaodm.com/
Java语言有两种方式使用代理IP访问网址并获取内容，
方式一，设置System系统属性
// 设置代理IP
System.getProper</div>
</li>
<li><a href="/article/3493.htm"
title="Nodejs Express 报错之 listen EADDRINUSE" target="_blank">Nodejs Express 报错之 listen EADDRINUSE</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/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a>
<div>当你启动 nodejs服务报错：
>node app
Express server listening on port 80
events.js:85
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE
at exports._errnoException (</div>
</li>
<li><a href="/article/3620.htm"
title="C++中三种new的用法" target="_blank">C++中三种new的用法</a>
<span class="text-muted">_荆棘鸟_</span>
<a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/new/1.htm">new</a>
<div>转载自：http://news.ccidnet.com/art/32855/20100713/2114025_1.html
作者: mt
其一是new operator，也叫new表达式；其二是operator new，也叫new操作符。这两个英文名称起的也太绝了，很容易搞混，那就记中文名称吧。new表达式比较常见，也最常用，例如：
string* ps = new string("</div>
</li>
<li><a href="/article/3747.htm"
title="Ruby深入研究笔记1" target="_blank">Ruby深入研究笔记1</a>
<span class="text-muted">wudixiaotie</span>
<a class="tag" taget="_blank" href="/search/Ruby/1.htm">Ruby</a>
<div>module是可以定义private方法的
module MTest
def aaa
puts "aaa"
private_method
end
private
def private_method
puts "this is private_method"
end
end
</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>