HTML5是HTML最新的修订版本，具有新的元素，属性和行为。 HTML5规范于2014年10月29日由万维网联盟正式宣布。 随着移动化的进程，HTML5终将成为主流。
H5文档声明与字符集的变化
简化了文档声明：
简化了字符集：
新增语义化元素
新增表单相关新元素、新属性
新增了全局属性
新增API（应用程序接口）：
canvas绘图
多媒体（视频、音频）
本地存储，离线存储、
地理信息
以下的 HTML 4.01 标签在HTML5中已经被删除：
● 定义只取首字母缩写 ● 规定 Java applet 的文件名 ● 定义文档中所有文本的默认颜色、大小和字体 ● 呈现大号字体效果 ● 标签控制文本的居中显示 ● 标签定义目录列表 ● 标签规定文本的字体、字体尺寸、字体颜色 ● 标签定义 frameset 中的一个特定的窗口（框架） ● frameset 元素可定义一个框架集 ● noframes标签向浏览器显示无法处理框架的提示文本 ● <strike> strike 标签可定义加删除线文本定义。</pre> </li> <li> <p>提示：由于H5是向前兼容的，所以在H5中使用这些标签也不会报错或出现异常，但这些元素在H5中已不被W3C标准推荐，建议尽量不要使用。</p> </li> </ul> <h3>现状</h3> <p>HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p> <h1>H5新增的语义元素</h1> <p>HTML5新增了页眉、页脚、内容块等文档结构相关的标签，可以使文档结构更加清晰明确。</p> <h3>article</h3> <ul> <li> <p>语法：</p> <pre><article></article></pre> </li> <li> <p>作用：元素表示文档、页面、应用或网站中的独立结构，可以成为可独立分配的或可复用的结构。</p> </li> <li> <p>典型应用：论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组，或者其他独立的内容项目</p> </li> </ul> <ul> <li> <p>注意：</p> <ul> <li> <p><strong>每个article通常包括标题（h1 - h6元素）作为article元素的子元素</strong></p> </li> <li> <p><strong>可能包含一个或多个section</strong></p> </li> </ul></li> </ul> <h3>section</h3> <ul> <li> <p>语法：</p> <pre><section></section></pre> </li> <li> <p>作用：</p> <ul> <li> <p>定义文档中的节（页面中内容的区段、文章中的章节）。</p> </li> </ul></li> <li> <p>典型应用：</p> </li> </ul> <p>文章中的章节</p> <ul> <li> <p>注意：</p> </li> <li> <p>样式上的分区用div,内容结构上的分区用section</p> <ul> <li> <p><strong>一个section元素通常由内容及标题组成</strong></p> </li> </ul></li> </ul> <h3>nav</h3> <ul> <li> <p>语法</p> <pre><nav></nav></pre> </li> <li> <p>作用：定义导航链接的部分</p> </li> <li> <p>典型应用：主导航、侧边栏导航、页内导航、菜单、面包屑导航、分页、目录和索引等</p> </li> </ul> <h3>aside</h3> <ul> <li> <p>语法</p> <pre><aside></aside></pre> </li> <li> <p>语义：定义当前页面或文章的附属信息部分</p> </li> <li> <p>典型应用：侧边栏、标注框、广告等</p> </li> </ul> <h3>header</h3> <ul> <li> <p>语法</p> <pre><header></header></pre> </li> <li> <p>语义：定义整个文档或文档中一个节段的的头部（页眉）。 作为文档的头部通常搜索表单、相关的logo、站点的名称以及水平菜单（如果有的话）等。 作为一个节段的头部，通常包含了节段的标题和作者名字等。</p> </li> <li> <p>典型应用：整个页面的头部、文章页的包含标题部分的头部</p> </li> </ul> <h3>footer</h3> <ul> <li> <p>语法：</p> <pre><header></header></pre> </li> <li> <p>作用：定义文档或节的页脚 作为文档的页脚通常会包含版权信息和法律声明以及一些其他链接 作为区块的页脚，一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。</p> </li> <li> <p>典型应用:网页中的版权信息，相关阅读链接</p> </li> </ul> <pre><article>, <section>, <aside>, and <nav> 可以拥有它们自己的 <footer> </pre> <h3>兼容问题</h3> <p>问题概述：IE8浏览器中还没有添加对HTML5新标签的支持，当在页面中使用HTML5新标签时，新标签被当作错误处理（IE浏览器中演示解析结果）</p> <h3>解决方案</h3> <p>一、通过document.createElement（tagName）方法即可让浏览器识别新标签， 浏览器支持新标签后，还可以为新标签添加CSS样式。</p> <pre><!--[if lt IE 9]> <script> document.createElement("header"); document.createElement("footer"); </script> <![endif]--></pre> <pre> 由于创建出来的元素是内联元素，所以需要转换成块级，宽度和高度才能生效 header,footer,nav,article,section,aside{ display: block; }</pre> <p>二：使用封装好的插件html5shiv.js解决</p> <p>html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式</p> <pre> <!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]--></pre> <ul> <li> <p>说明</p> <ul> <li> <p>条件注释作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它</p> </li> <li> <p>可以使用本地文件也可以使用外部资源库</p> <ul> <li> <p>Google 资源库：（不稳定）http://html5shiv.googlecode.com/svn/trunk/html5.js</p> </li> <li> <p>百度静态资源库：（国内推荐使用）http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js</p> </li> </ul></li> </ul></li> <li> <p>了解由来</p> <ul> <li> <p>https://github.com/aFarkas/html5shiv</p> </li> <li> <p>https://www.paulirish.com/2011/the-history-of-the-html5-shiv/</p> </li> </ul></li> </ul> <h1>新增表单元素与相关属性</h1> <p>form</p> <p>input</p> <p>type:</p> <p>select</p> <p>textarea</p> <h2>H5 新增的input类型</h2> <p>概述：HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证</p> <h3>search搜索域</h3> <ul> <li> <p>作用：搜索域，比如站点搜索或 Google 搜索</p> </li> <li> <p>代码示例</p> <pre><input type="search"></pre> </li> </ul> <h3>tel电话号码输入域</h3> <ul> <li> <p>作用：输入电话号码的文本域</p> </li> <li> <p>代码示例</p> <pre><input type="tel"></pre> <ul> <li> <p>移动端配合数字键盘的变化</p> </li> <li> <p>一般配合pattern 属性来使用</p> </li> </ul></li> </ul> <h3>url域</h3> <ul> <li> <p>作用： URL 地址的输入域；</p> </li> <li> <p>说明</p> <ul> <li> <p>在提交表单时，会自动验证 url 域的值，输入不合法无法提交弹出提示 <a href="http://img.e-com-net.com/image/info8/583002db497d4efbbe09c18e857abaf6.jpg" target="_blank"><img alt="" height="100" src="http://img.e-com-net.com/image/info8/583002db497d4efbbe09c18e857abaf6.jpg" width="337"></a></p> <p> </p> </li> <li> <p>移动端：配合 .com 键盘变化</p> </li> </ul></li> <li> <p>代码示例</p> <pre><input type="url"></pre> </li> </ul> <h3>email域</h3> <ul> <li> <p>作用：包含 e-mail 地址的输入域</p> </li> <li> <p>说明</p> <ul> <li> <p>在提交表单时，会自动验证 email 域的值</p> </li> <li> <p>移动端： @ 和 .com 选项的 键盘变化<a href="http://img.e-com-net.com/image/info8/fb3e091e9b9d4876bed7a337e3819772.jpg" target="_blank"><img alt="关于H5、CSS3新增的一些元素及属性_第1张图片" height="112" src="http://img.e-com-net.com/image/info8/fb3e091e9b9d4876bed7a337e3819772.jpg" width="557" style="border:1px solid black;"></a></p> <p> </p> <p></p> </li> </ul></li> <li> <p>代码示例</p> <pre><input type="email"></pre> </li> </ul> <h3>number数值输入域</h3> <ul> <li> <p>作用</p> <ul> <li> <p>作用：包含数值的输入域。</p> </li> </ul></li> <li> <p>相关属性</p> <ul> <li> <p>通过以下属性设定对所接受的数字的限定</p> <ul> <li> <p>max:定义允许的最大值</p> </li> <li> <p>min:定义允许的最小值</p> </li> <li> <p>step:定义合法的数字间隔 （步长）</p> </li> <li> <p>value:定义默认值</p> </li> </ul></li> </ul></li> <li> <p>代码示例</p> <pre> <input type="number" value="6" max="10" min="2" step="2"></pre> </li> </ul> <h3>range一定范围内的数值输入域</h3> <ul> <li> <p>作用</p> <ul> <li> <p>用于包含一定范围内数字值的输入域，显示为滑动条。</p> </li> </ul></li> <li> <p>相关属性</p> <ul> <li> <p>通过以下属性设定对所接受的数字的限定</p> </li> <li> <p>max:定义允许的最大值 min:定义允许的最小值 step:定义合法的数字间隔 value:定义默认值</p> </li> </ul></li> <li> <p>代码示例</p> <pre><input type="range"></pre> </li> </ul> <h3>color颜色输入域</h3> <ul> <li> <p>作用：颜色输入域，用于选取颜色</p> </li> <li> <p>代码示例</p> <pre><input type="color"></pre> </li> </ul> <h3>时间日期选择器</h3> <p>date日期</p> <ul> <li> <p>作用：选择一个日期（年月日）</p> </li> <li> <p>代码示例</p> <pre><input type="date"></pre> </li> </ul> <p>time时间</p> <ul> <li> <p>作用：选择小时分钟</p> </li> <li> <p>代码示例</p> <pre><input type="time"></pre> </li> </ul> <h3>datetime-local本地时间</h3> <ul> <li> <p>作用：选择一个日期和时间 (无时区)</p> </li> <li> <p>代码示例</p> <pre><input type="datetime-local"></pre> </li> </ul> <h3>提示：</h3> <p>并不是所有的主流浏览器都支持新的input类型， 即使不被支持，仍然可以显示为常规的文本域</p> <h3>测试地址</h3> <p>手机端效果预览</p> <p> <a href="http://img.e-com-net.com/image/info8/9e9fa63e2c1d428d9ec5c125159a798f.jpg" target="_blank"><img alt="关于H5、CSS3新增的一些元素及属性_第2张图片" height="275" src="http://img.e-com-net.com/image/info8/9e9fa63e2c1d428d9ec5c125159a798f.jpg" width="273" style="border:1px solid black;"></a></p> <p> </p> <p></p> <h2>H5 新增表单属性</h2> <h3>placeholder属性</h3> <ul> <li> <p>作用：提供一种输入提示，描述输入域所期待的值</p> </li> <li> <p>代码示例</p> </li> </ul> <pre><input type="text" placeholder="请输入手机号码"></pre> <h3>min、max 和 step 属性</h3> <ul> <li> <p>作用： max 属性规定输入域所允许的最大值。 min 属性规定输入域所允许的最小值。 step 属性为输入域规定合法的数字间隔</p> </li> <li> <p>代码示例</p> <pre><input type="number" value="4" min="2" max="10" step="2"></pre> </li> <li> <p>提示</p> <p>适用于range和 number类型</p> </li> </ul> <h3>autofocus属性</h3> <ul> <li> <p>作用：规定在页面加载完成时，自动地获得焦点</p> </li> <li> <p>代码示例</p> <pre><input type="text" autofocus></pre> </li> </ul> <h3>autocomplete属性</h3> <ul> <li> <p>作用：当表单元素获取焦点时，会提供选项列表，以供用户选择自动填充</p> </li> <li> <p>取值</p> <ul> <li> <p>on ( 开启)</p> </li> <li> <p>off ( 关闭 )</p> </li> </ul></li> <li> <p>代码示例</p> <pre><form action=""> <input type="text" name="username" autocomplete="off"> <input type="submit" value="提交"> </form></pre> </li> <li> <p>提示：【该功能与浏览器本身的设置】有关，可能需要首先启用浏览器本身的自动完成功能，才能使autocomplete属性起作用。</p> </li> </ul> <h3>required 属性</h3> <ul> <li> <p>作用：规定必须在提交之前验证输入域（不能为空），为空则弹出提示，无法提交</p> </li> <li> <p>代码示例</p> <pre><form action=""> <input type="text" name="testname2" required> <input type="submit" value="提交"> </form></pre> </li> </ul> <h3>pattern 属性</h3> <ul> <li> <p>作用：用于验证 input 域的模式，</p> <ul> <li> <p>提交时会根据指定的模式对输入的值进行验证，</p> </li> <li> <p>输入合法可以提交输入不合法弹出提示，无法提交</p> </li> </ul></li> <li> <p>代码示例</p> <pre><form action=""> <input type="text" name="testname2" pattern="[0-9]"> <input type="submit" value="提交"> </form></pre> </li> </ul> <h3>multiple 属性</h3> <ul> <li> <p>作用：规定输入域中可选择多个值； 一般用于上传域和email类型的输入域。</p> <ul> <li> <p>用于email域 默认email域不支持输入多个email地址，用于email之后则允许输入多个逗号隔开的email地址</p> </li> <li> <p>用于file域 默认file类型只支持选择单个文件来上传， 新增的multiple属性可以使它一次性选择多个文件。</p> </li> </ul></li> <li> <p>代码示例</p> <pre><form action=""> email域： <input type="email" name="testemail" multiple> 文件域： <input type="file" name="testfile" multiple> <input type="submit" value="提交"> </form></pre> </li> </ul> <h3>form 属性</h3> <ul> <li> <p>作用：规定表单元素所从属的表单区域form</p> </li> <li> <p>语法：</p> <ul> <li> <p>form 属性必须引用所属表单区域的 id</p> </li> <li> <p>引用一个以上的表单，使用空格分隔的列表</p> </li> </ul></li> <li> <p>代码示例</p> <pre><form action="#" id="form1"> <input type="text" name="username"/> </form> <input type="reset" form="form1"></pre> </li> </ul> <p>补充：list属性</p> <pre><input type="text" list="listOne"> <datalist id="listOne"> <option value="web"></option> <option value="java"></option> <option value="javaScript"></option> </datalist> </pre> <h1>新增的多媒体元素</h1> <p>网页中大多数视频、音频是通过插件（比如 Flash）来显示的。</p> <p>HTML5 规定了网页包含视频、音频的标准方法</p> <h2>视频</h2> <p>在网页上嵌入视频元素的标准，即使用 <video> 元素。</p> <h3>标签</h3> <pre> <video src="video/movie.mp4"> 您的浏览器已out,不支持欣赏视频 </video></pre> <p>标签兼容</p> <p>video元素在ie9以下不支持</p> <pre> 允许在开始和结束中间放置内容，用于在不支持的浏览器显示</pre> <h3>属性</h3> <ul> <li> <p>src="" 视频资源地址</p> </li> <li> <p>controls 显示播放、暂停控件</p> </li> <li> <p>loop 循环播放</p> </li> <li> <p>muted 静音</p> </li> <li> <p>autoplay 自动播放</p> </li> <li> <p>width="500" height="1000" 宽高只指定一个，另一个按原比例等比缩放，（播放控件的大小）</p> </li> <li> <p>poster = " 图片地址表示视频封面"</p> </li> <li> <p>代码示例</p> </li> </ul> <pre> <video src="video/movie.mp4" controls loop muted width="500" poster="video/pic.png"> 您的浏览器已out,不支持欣赏小视频 </video></pre> <h3>支持的视频格式</h3> <p><a href="http://img.e-com-net.com/image/info8/4da6371084254cb1aae0d0e9ab4878e6.jpg" target="_blank"><img alt="关于H5、CSS3新增的一些元素及属性_第3张图片" height="179" src="http://img.e-com-net.com/image/info8/4da6371084254cb1aae0d0e9ab4878e6.jpg" width="650" style="border:1px solid black;"></a> </p> <p>source标签</p> <p></p> <pre> <video controls loop muted height="500" poster="video/pic.png"> <source src="video/PPAP.webm" type="video/webm"> <source src="video/movie.mp4" type="video/mp4"> <source src="video/butterfly.ogg" type="video/"> 您的浏览器已out,不支持欣赏小视频 </video></pre> <ul> <li> <p>允许使用source标签 引入多个音频资源</p> </li> <li> <p>浏览器会播放第一个【可识别】的格式</p> </li> </ul> <h2>音频</h2> <p>在网页上嵌入视频元素的标准，即使用 <audio> 元素。</p> <h3>标签</h3> <pre> <audio src="audio/hanmai.mp3"></audio></pre> <p>兼容</p> <p>audio元素在ie9以下不支持</p> <p>允许在开始和结束中间放置内容，用于在不支持的浏览器显示</p> <pre><audio src="audio/hanmai.mp3" controls loop autoplay> 您的浏览器已out,不支持欣赏小音乐 </audio></pre> <p>标签兼容</p> <ul> <li> <p>audio元素在ie9以下不支持</p> </li> </ul> <pre> 允许在开始和结束中间放置内容，用于在不支持的浏览器显示</pre> <h3>属性</h3> <ul> <li> <p>src="" 音频资源地址</p> </li> <li> <p>controls 显示播放、暂停控件</p> </li> <li> <p>loop 循环播放</p> </li> <li> <p>muted 静音</p> </li> <li> <p>autoplay 自动播放</p> </li> </ul> <h3>支持的音频格式<a href="http://img.e-com-net.com/image/info8/37c3d0ea3ae54db5be638d49c985307f.jpg" target="_blank"><img alt="关于H5、CSS3新增的一些元素及属性_第4张图片" height="178" src="http://img.e-com-net.com/image/info8/37c3d0ea3ae54db5be638d49c985307f.jpg" width="650" style="border:1px solid black;"></a></h3> <p> </p> <p></p> <h3>source标签</h3> <pre> <video controls loop autoplay> <source src="audio/biubiubiu.ogg" type="audio/ogg"> <source src="audio/hanmai.mp4" type="video/mp4"> <source src="audio/PPAP.wav" type="video/webm"> 您的浏览器已out,不支持欣赏小音乐 </video></pre> <ul> <li> <p>允许使用source标签 引入多个音频资源</p> </li> <li> <p>浏览器会播放第一个【可识别】的格式</p> </li> </ul> <p></p> <h2>全局属性</h2> <p>使用 data-* 属性来嵌入自定义数据</p> <p>data-* 属性包括两部分：</p> <ul> <li> <p>属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符</p> </li> <li> <p>属性值可以是任意字符串</p> </li> </ul> <pre><ul> <li data-en="HOME">首页</li> <li data-en="ABOUT">关于我们</li> <li data-en="Contact">联系我们</li> </ul></pre> <p></p> <h1>CSS3</h1> <h2>CSS3概述</h2> <p>CSS3是CSS（层叠样式表）技术的升级版本，最新的 CSS 标准。 在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些问题，例如圆角、多背景、透明度、阴影等。 CSS2.1是单一的规范，而CSS3被划分成几个模块组，每个模块组都有自己的规范。这样的好处是整个CSS3的规范发布不会因为某部分而影响其他模块的推进。</p> <p>CSS3按模块化进行了全新设计，主要的 CSS3 模块：包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面</p> <h3>现状</h3> <p>现代浏览器已经实现了相当多的 CSS3 属性,CSS3将完全向后兼容</p> <p>浏览器的私有前缀</p> <p>概述：CSS3的浏览器私有属性前缀是一些浏览器生产商经常使用的一种方式，用于对新属性的提前支持，暗示该CSS属性或规则尚未成为W3C标准的一部分。当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候我们可以去掉前缀。</p> <p>各个主流浏览器的私有前缀</p> <table> <thead> <tr> <th>浏览器内核</th> <th>私有前缀</th> <th>浏览器</th> </tr> </thead> <tbody> <tr> <td>WebKit内核</td> <td>-webkit-</td> <td>Chrome、Safari</td> </tr> <tr> <td>Gecko内核</td> <td>-moz-</td> <td>firefox</td> </tr> <tr> <td>Presto内核</td> <td>-o-</td> <td>Opera</td> </tr> <tr> <td>Trident内核</td> <td>-ms-</td> <td>IE</td> </tr> </tbody> </table> <p>autoprefixer插件：</p> <p>Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。</p> <p>把Autoprefixe添加到资源构建工具后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置。</p> <p>写完css之后 按F1 弹窗输入 autoprefixer css</p> <h2>CSS3新增选择器</h2> <h3>属性选择器</h3> <p>通过元素属性和属性值选择元素</p> <p>CSS3新增的属性选择器</p> <ul> <li> <p>[attr^=value] 选择指定属性名且属性值【以value开头】的每个元素</p> </li> <li> <p>[attr$=value] 选择带有指定属性名且属性值【以value结尾】所有元素</p> </li> <li> <p>[attr*=value] 选择指定属性名且属性值【包含value】的每个元素</p> </li> </ul> <pre>/* div[class^="box"]{ background-color: red; } */ /* div[class$="box"]{ background-color: red; } */ [class*="box"]{ background-color: red; }</pre> <p>兼容性<a href="http://img.e-com-net.com/image/info8/a90bcd763a2c411b827936b2de736d96.jpg" target="_blank"><img alt="关于H5、CSS3新增的一些元素及属性_第5张图片" height="206" src="http://img.e-com-net.com/image/info8/a90bcd763a2c411b827936b2de736d96.jpg" width="648" style="border:1px solid black;"></a></p> <p> </p> <p></p> <p>常用属性选择器列表：</p> <p><a href="http://img.e-com-net.com/image/info8/34c1e17660974ca2a27e3e7a358379bb.jpg" target="_blank"><img alt="关于H5、CSS3新增的一些元素及属性_第6张图片" height="263" src="http://img.e-com-net.com/image/info8/34c1e17660974ca2a27e3e7a358379bb.jpg" width="622" style="border:1px solid black;"></a></p> <p> </p> <p></p> <h3>结构性伪类选择器</h3> <p>通过结构关系选择元素</p> <p>css3 新增的结构性伪类</p> <ul> <li> <p>:last-child 选择器：匹配属于其父元素的最后一个子元素的每个元素</p> </li> <li> <p>:nth-child( n ) 选择器：匹配属于其父元素的第 n 个子元素</p> </li> <li> <p>:nth-last-child( n ) 选择器：匹配属于其元素的倒数第 n 个子元素的每个元素</p> </li> <li> <p>:first-of-type 选择其父元素的特定类型的首个子元素的每个元素</p> </li> <li> <p>:last-of-type 选择其父元素的特定类型的最后一个子元素的每个元素。</p> </li> <li> <p>:nth-of-type(n)：选择器匹配属于父元素的特定类型的第n 个子元素。</p> </li> <li> <p>:nth-last-of-type(n)：选择器匹配属于父元素的特定类型的倒数第 n 个子元素的每个元素</p> <ul> <li> <p>说明</p> <ul> <li> <p>n 可以是数字、关键词或公式</p> </li> <li> <p>关键词</p> <ul> <li> <p>odd(偶数，even奇数)</p> </li> </ul></li> <li> <p>公式</p> <ul> <li> <p>(an + b)，(an - b)</p> </li> <li> <p>表示周期的长度，n 是计数器（从 0 开始），b 是偏移值</p> </li> </ul></li> </ul></li> </ul></li> </ul> <p>总结child一组与of-type一组的区别</p> <ul> <li> <p>nth-child强调<strong>结构 关系</strong>，优先确定是否是父元素的子元素，在其中找第几个</p> </li> <li> <p>nth-of-type强调<strong>类型</strong>，选择父元素中指定类型中的第几个</p> </li> </ul> <p>兼容性<a href="http://img.e-com-net.com/image/info8/867085d78b8d425dbf5ca23932467478.jpg" target="_blank"><img alt="关于H5、CSS3新增的一些元素及属性_第7张图片" height="147" src="http://img.e-com-net.com/image/info8/867085d78b8d425dbf5ca23932467478.jpg" width="639" style="border:1px solid black;"></a></p> <p> </p> <p></p> <h1>常用结构性伪类选择器列表<a href="http://img.e-com-net.com/image/info8/b91f66acfe654c65bebef8383ff3280c.jpg" target="_blank"><img alt="关于H5、CSS3新增的一些元素及属性_第8张图片" height="350" src="http://img.e-com-net.com/image/info8/b91f66acfe654c65bebef8383ff3280c.jpg" width="650" style="border:1px solid black;"></a> 思维导图：<a href="http://img.e-com-net.com/image/info8/10dce6568daf400f80e0de90cca4f175.jpg" target="_blank"><img alt="关于H5、CSS3新增的一些元素及属性_第9张图片" height="352" src="http://img.e-com-net.com/image/info8/10dce6568daf400f80e0de90cca4f175.jpg" width="650" style="border:1px solid black;"></a></h1> <p> </p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1449524003759763456"></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/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> <span class="text-muted">红匣子实力推荐</span> <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835123524155568128.htm" title="HTML5概述" target="_blank">HTML5概述</a> <span class="text-muted">WFIT~SKY</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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>1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1</div> </li> <li><a href="/article/1835111175398977536.htm" title="HTML添加文字" target="_blank">HTML添加文字</a> <span class="text-muted">若无心_.</span> <a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一、创建HTML5文档基本标签//定义文档类型//定义HTML文档//定义关于文档的信息文档标题//定义文档的标题//定义文档的字符编码//定义文档的主体二、文字相关标签1.标题文字-标签可定义标题。定义最大的标题。定义最小的标题。Document这是标题1这是标题2这是标题3这是标题4这是标题5这是标题62.文本段落Document这次会晤的主题是“金砖国家在非洲：在第四次工业革命中共谋包容增长</div> </li> <li><a href="/article/1835082840174325760.htm" title="【拖拽】自定义拖拽图标" target="_blank">【拖拽】自定义拖拽图标</a> <span class="text-muted">风露_</span> <div>一、知识点设置被拖拽的元素draggable为true(HTML5新特性)关键方法：voiddataTransfer.setDragImage(img,xOffset,yOffset);注意点：Note:Ifthe[Element]isanexisting[HTMLElement],itneedstobevisibleintheviewportinordertobeshownasadragfeed</div> </li> <li><a href="/article/1835010195202338816.htm" title="css鼠标移上去向上移动,css3鼠标移动图片上移效果" target="_blank">css鼠标移上去向上移动,css3鼠标移动图片上移效果</a> <span class="text-muted">yo xiba</span> <a class="tag" taget="_blank" href="/search/css%E9%BC%A0%E6%A0%87%E7%A7%BB%E4%B8%8A%E5%8E%BB%E5%90%91%E4%B8%8A%E7%A7%BB%E5%8A%A8/1.htm">css鼠标移上去向上移动</a> <div>css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:</div> </li> <li><a href="/article/1835002124283506688.htm" title="css3实现鼠标放到图标上自动切换图标" target="_blank">css3实现鼠标放到图标上自动切换图标</a> <span class="text-muted">黄丫丫07</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}</div> </li> <li><a href="/article/1835001746208944128.htm" title="CSS实现鼠标移动到购物车显示详情" target="_blank">CSS实现鼠标移动到购物车显示详情</a> <span class="text-muted">AsiaFT.</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子</div> </li> <li><a href="/article/1834877187673649152.htm" title="css3溢出隐藏的方法" target="_blank">css3溢出隐藏的方法</a> <span class="text-muted">DDOS防御</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E6%8A%80%E6%9C%AF/1.htm">网络技术</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</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> <div>CSS3提供了几种方法来处理元素内容的溢出问题，以下是一些常见的方法：1.**使用`overflow`属性**：-`overflow:hidden;`：隐藏溢出的内容。-`overflow:scroll;`：如果内容溢出，将显示滚动条。-`overflow:auto;`：如果内容溢出，将显示滚动条，但滚动条只在需要时显示。2.**使用`text-overflow`和`white-space`属性*</div> </li> <li><a href="/article/1834865334453104640.htm" title="CSS 元素超出部分滚动, 并隐藏滚动条（2种方法）" target="_blank">CSS 元素超出部分滚动, 并隐藏滚动条（2种方法）</a> <span class="text-muted">就像风1样</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/CSS%E6%A0%B7%E5%BC%8F%E4%B8%93%E6%A0%8F/1.htm">CSS样式专栏</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%BA%A2%E5%87%BA%E6%BB%9A%E5%8A%A8/1.htm">溢出滚动</a><a class="tag" taget="_blank" href="/search/%E9%9A%90%E8%97%8F%E6%BB%9A%E5%8A%A8%E6%9D%A1/1.htm">隐藏滚动条</a> <div>方法一,利用css3的新特性-webkit-scrollbar,但是这种方式不兼容火狐和IE超出部分隐藏滚动条#box{width:500px;height:300px;overflow-x:hidden;overflow-y:scroll;line-height:30px;text-align:center;}#box::-webkit-scrollbar{display:none;}你好你好你</div> </li> <li><a href="/article/1834814025607770112.htm" title="Cocos2d、Cocos2dx、Cocos Creator、Cocos Studio的区别" target="_blank">Cocos2d、Cocos2dx、Cocos Creator、Cocos Studio的区别</a> <span class="text-muted">Thomas游戏圈</span> <div>一、Cocos2d和Cocos2dx的区别【开发语言】：Cocos2d是Object-C写的，Cocos2dx是C++写的，支持使用C++、Lua或Java进行开发。【运行平台】：Cocos2d只能在IOS下运行，Cocos2dx是跨平台的，适配iOS、Android、HTML5、Windows和Mac系统，功能侧重于原生移动平台。点击链接加入群聊【Unity/Cocos交流群】【国籍】：Coco</div> </li> <li><a href="/article/1834657327760896000.htm" title="2019年面试遇到的笔试题" target="_blank">2019年面试遇到的笔试题</a> <span class="text-muted">程序猿阿峰</span> <div>前端面试，肯定是少不了笔试题，果然，今天去面试就遇到的笔试题，慌了一批。回来赶紧整理了一下一、css3的常用的新特性？flex布局和传统布局有什么区别？css3的新特性那就多啦，简单的列举了几个：过渡transition:CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)动画animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认</div> </li> <li><a href="/article/1834645992071327744.htm" title="web前端达到什么水平，才能找到工作？" target="_blank">web前端达到什么水平，才能找到工作？</a> <span class="text-muted">cj瑾瑜</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/javascript/1.htm">javascript</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>一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义</div> </li> <li><a href="/article/1834504328082190336.htm" title="HTML5（六）canvas 矩形、路径、画板功能" target="_blank">HTML5（六）canvas 矩形、路径、画板功能</a> <span class="text-muted">祝名</span> <div>一.绘制矩形1.什么是canvascanvas标签相当于一个画板；canvas的宽高不要用css去定义，直接在标签中用属性写；2.obj=c.getContext('2d');获得2d绘画环境（相当于铺了一层画布）绘画图像的操作都会在obj这个绘画环境中存储；3.绘画方法及样式x,y为坐标样例：二.canvas路径1.方法2.样例cv.lineJoin='round';//边界类型为弧形三.画板功</div> </li> <li><a href="/article/1834414460463312896.htm" title="HTML5中的数据存储sessionStorage、localStorage" target="_blank">HTML5中的数据存储sessionStorage、localStorage</a> <span class="text-muted">阿立聊代码</span> <a class="tag" taget="_blank" href="/search/HTML%E5%AE%9E%E6%88%98/1.htm">HTML实战</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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>第8章HTML5中的数据存储之前通常使用Cookie存储机制将数据保存在用户的客户端。H5增加了两种全新的数据存储方式：WebStroage和WebSQLDatabase.前者用于临时或永久保存客户端少量数据，后者是客户端本地化的一套数据库系统。8.1WebStorage存储简介WebStorageAPI分为会话数据和长期数据，相应的API分为两类：sessionStorage(保存会话数据)lo</div> </li> <li><a href="/article/1834357354271961088.htm" title="制作炫酷个人网页：用 HTML 和 CSS3 展现你的风格" target="_blank">制作炫酷个人网页：用 HTML 和 CSS3 展现你的风格</a> <span class="text-muted">Passion不晚</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/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>–你是否觉得自己的网站应该看起来更炫酷？今天我将教你如何使用HTML和CSS3制作一个拥有炫酷动画和现代设计风格的个人网页，让它在任何设备上看起来都无敌酷炫！哈哈哈哈哈哈哈哈,我感觉自己有点中二哈哈哈哈~目录炫酷设计理念构建HTML结构CSS3炫酷美化炫酷效果预览1.炫酷设计理念在炫酷网页中，我们将使用：全屏背景渐变：让页面背景充满动感的色彩变化。文字动画：为标题和内容添加动态效果，让它们“飞”入</div> </li> <li><a href="/article/1834156411374891008.htm" title="html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法" target="_blank">html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法</a> <span class="text-muted">RemusrickCat</span> <div>本文实例为大家全面的解析了Bootstrap中Carousel的使用方法，供大家参考，具体内容如下源码文件：Carousel.scssCarousel.js实现原理：隐藏所有要显示的元素，然后指定当前要显示的为block，宽、高自适应源码分析：1、Html结构：主要分为以四个部分1.1、容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆</div> </li> <li><a href="/article/1834155529212096512.htm" title="【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！" target="_blank">【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！</a> <span class="text-muted">wcyd</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/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/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>深入探索HTML5：标签全解析与案例演示！大家好！在上一篇文章中，我们对HTML5有了一个基本的了解。今天，我们将更深入地探索HTML5，全面介绍各种标签及其应用。从基础标签到新增标签，从文档结构到格式标签，我们将一一解析，并提供丰富的案例演示。准备好了吗？让我们开始吧！️HTML5基础结构首先，让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图，指导我们如何构建网页。下面</div> </li> <li><a href="/article/1834148472605995008.htm" title="HTML5中`＜span＞`标签深入解析" target="_blank">HTML5中`＜span＞`标签深入解析</a> <span class="text-muted">软考鸭</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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>引言在HTML5中，标签是一个行内元素，用于对文档中的一小部分文本或内容进行分组，以便于应用CSS样式或JavaScript脚本。与块级元素（如）不同，不会打断文本的流动，而是与其内容一起在同一行内显示。本文将深入解析标签的定义、用法、属性以及在实际开发中的应用。定义与用法标签是一个无语义的行内容器，用于包裹文档中的一部分内容，而不改变文档的结构。它通常与CSS和JavaScript结合使用，以实</div> </li> <li><a href="/article/1834016623552458752.htm" title="CSS3新特性" target="_blank">CSS3新特性</a> <span class="text-muted">FL1623863121</span> <a class="tag" taget="_blank" href="/search/css3/1.htm">css3</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> <div>CSS3新特性CSS3是最新的CSS标准，旨在扩展CSS2.1。圆角通过border-radius属性可以给任何元素制作圆角。border-radius:所有四个边角border-*-*-radius属性的缩写。border-top-left-radius:定义了左上角的弧度。border-top-right-radius:定义了右上角的弧度。border-bottom-right-radius:</div> </li> <li><a href="/article/1833895593613815808.htm" title="479.迪斯尼公主动漫主题网页 大学生期末大作业 Web前端网页制作 html+css+js" target="_blank">479.迪斯尼公主动漫主题网页 大学生期末大作业 Web前端网页制作 html+css+js</a> <span class="text-muted">仙女网页制作</span> <a class="tag" taget="_blank" href="/search/Web%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E5%AE%9E%E4%BE%8B/1.htm">Web网页设计实例</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%BC%AB/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/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！说起Web前端</div> </li> <li><a href="/article/1833664744578445312.htm" title="HTML5 `＜button＞` 标签深入全面解析" target="_blank">HTML5 `＜button＞` 标签深入全面解析</a> <span class="text-muted">软考鸭</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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>引言在HTML5中，标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一。与相比，标签提供了更多的灵活性和样式化的可能性。本文将深入解析HTML5中的标签，详细介绍其属性、样式以及实际应用。标签的基本用法标签内部可以放置内容，如文本、图像或其他HTML元素。这使得标签比更加灵活。点击我在这个简单的例子中，我们创建了一个普通的按钮，其上的文本是“点击我”。标签的属性标签支持多种属性，用于定</div> </li> <li><a href="/article/1833662348959772672.htm" title="HTML5之基础、元信息标签" target="_blank">HTML5之基础、元信息标签</a> <span class="text-muted">Programmer.杨</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF-HTML/1.htm">前端技术-HTML</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/meta/1.htm">meta</a><a class="tag" taget="_blank" href="/search/head/1.htm">head</a><a class="tag" taget="_blank" href="/search/title/1.htm">title</a><a class="tag" taget="_blank" href="/search/%E6%A0%87%E7%AD%BE/1.htm">标签</a> <div>标签声明位于文档中最前面的位置，处于标签之前。声明不是一个HTML标签，它是告知Web浏览器该页面使用了哪种HTML版本（规范），浏览器用此版本（规范）对该文档进行解析，渲染。可声明的DTD有三种：分别是严格版本（strict）、过渡版本（transitional）、以及基于框架的版本（frameset），若文档不遵循其DTD规范，则此文档中的代码不但不能通过代码校验，并且有可能无法正常显示。文档</div> </li> <li><a href="/article/1833656803154554880.htm" title="HTML5中`＜ul＞`标签深入全面解析" target="_blank">HTML5中`＜ul＞`标签深入全面解析</a> <span class="text-muted">软考鸭</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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>在HTML5的广阔天地里，标签作为无序列表的代言人，扮演着举足轻重的角色。它不仅能够整洁地罗列信息，还通过丰富的属性和样式选项，为网页设计师提供了无限的创意空间。本文将深入剖析标签的内核，详细解读其属性与样式，助力你打造更加精致、功能强大的网页。一、标签基础概览，即UnorderedList（无序列表）的缩写，用于在网页中展示一系列无特定顺序的项目。每个项目由（ListItem，列表项）标签包裹，</div> </li> <li><a href="/article/1833656298739167232.htm" title="HTML5全面知识点" target="_blank">HTML5全面知识点</a> <span class="text-muted">A_cot</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML（HyperTextMarkupLanguage）是构建网页的基础语言。以下是全面的HTML知识点：一、HTML基础概念定义：HTML是一种用于描述网页结构的标记语言，通过各种标签来定义网页的内容和布局。版本历史：从HTML的早期版本发展到现在的HTML5，功能不断增强，支持更多的多媒体和交互特性。二、HTML文档结构声明：用于告诉浏览器文档类型是HTML5。标签：整个HTML文档的根元素</div> </li> <li><a href="/article/1833612797511036928.htm" title="html animation 属性,css3学习--css3动画详解一(animation属性）" target="_blank">html animation 属性,css3学习--css3动画详解一(animation属性）</a> <span class="text-muted">蜗牛老湿</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/animation/1.htm">animation</a><a class="tag" taget="_blank" href="/search/%E5%B1%9E%E6%80%A7/1.htm">属性</a> <div>***介绍的属性并不完全，写的都是我认为容易混淆的难点属性，所以属性会在最后综合案例展示~Keyframes介绍：Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframeschangecolor{0%{background:red;}100%{b</div> </li> <li><a href="/article/1833611286173282304.htm" title="css3动画延迟运行 animation-delay" target="_blank">css3动画延迟运行 animation-delay</a> <span class="text-muted">努力，加油，奋斗</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1.语法animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;2.说明name指定要绑定到选择器的关键帧的名称duration动画指定需要多少秒或毫秒完成timing-function设置动画将如何完成一个周期delay设置动画在启动前的延迟间隔。iteration-count定义</div> </li> <li><a href="/article/1833513837786132480.htm" title="python提取数据库数据到前端html5显示_python html提取数据库数据" target="_blank">python提取数据库数据到前端html5显示_python html提取数据库数据</a> <span class="text-muted">weixin_39878745</span> <div>python开源工具列表【持续更新】以下是个人在工作中整理的一些pythonwheel，供参考。这个列表包含与网页抓取和数据处理的Python库网络通用urllib-网络库(stdlib)。requests-网络库。grab–网络库(基于pycurl)。pycurl–网络库(绑定libcurl)。urllib3–...文章武耀文2018-04-253128浏览量8个用于业余项目的优秀Python库</div> </li> <li><a href="/article/122.htm" title="java数字签名三种方式" target="_blank">java数字签名三种方式</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>以下3钟数字签名都是基于jdk7的 1，RSA String password="test"; // 1.初始化密钥 KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA"); keyPairGenerator.initialize(51</div> </li> <li><a href="/article/249.htm" title="Hibernate学习笔记" target="_blank">Hibernate学习笔记</a> <span class="text-muted">caoyong</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>1>、Hibernate是数据访问层框架，是一个ORM(Object Relation Mapping)框架，作者为:Gavin King 2>、搭建Hibernate的开发环境 a>、添加jar包: aa>、hibernatte开发包中/lib/required/所</div> </li> <li><a href="/article/376.htm" title="设计模式之装饰器模式Decorator（结构型）" target="_blank">设计模式之装饰器模式Decorator（结构型）</a> <span class="text-muted">漂泊一剑客</span> <a class="tag" taget="_blank" href="/search/Decorator/1.htm">Decorator</a> <div>1. 概述 若你从事过面向对象开发，实现给一个类或对象增加行为，使用继承机制，这是所有面向对象语言的一个基本特性。如果已经存在的一个类缺少某些方法，或者须要给方法添加更多的功能（魅力），你也许会仅仅继承这个类来产生一个新类—这建立在额外的代码上。 </div> </li> <li><a href="/article/503.htm" title="读取磁盘文件txt，并输入String" target="_blank">读取磁盘文件txt，并输入String</a> <span class="text-muted">一炮送你回车库</span> <a class="tag" taget="_blank" href="/search/String/1.htm">String</a> <div>public static void main(String[] args) throws IOException { String fileContent = readFileContent("d:/aaa.txt"); System.out.println(fileContent); </div> </li> <li><a href="/article/630.htm" title="js三级联动下拉框" target="_blank">js三级联动下拉框</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/%E4%B8%89%E7%BA%A7%E8%81%94%E5%8A%A8/1.htm">三级联动</a> <div> //三级联动 省/直辖市<select id="province"></select> 市/省直辖<select id="city"></select> 县/区 <select id="area"></select> </div> </li> <li><a href="/article/757.htm" title="erlang之parse_transform编译选项的应用" target="_blank">erlang之parse_transform编译选项的应用</a> <span class="text-muted">616050468</span> <a class="tag" taget="_blank" href="/search/parse_transform/1.htm">parse_transform</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">游戏服务器</a><a class="tag" taget="_blank" href="/search/%E5%B1%9E%E6%80%A7%E5%90%8C%E6%AD%A5/1.htm">属性同步</a><a class="tag" taget="_blank" href="/search/abstract_code/1.htm">abstract_code</a> <div> 最近使用erlang重构了游戏服务器的所有代码，之前看过C++/lua写的服务器引擎代码，引擎实现了玩家属性自动同步给前端和增量更新玩家数据到数据库的功能，这也是现在很多游戏服务器的优化方向，在引擎层面去解决数据同步和数据持久化，数据发生变化了业务层不需要关心怎么去同步给前端。由于游戏过程中玩家每个业务中玩家数据更改的量其实是很少</div> </li> <li><a href="/article/884.htm" title="JAVA JSON的解析" target="_blank">JAVA JSON的解析</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> // { // “Total”：“条数”， // Code: 1, // // “PaymentItems”:[ // { // “PaymentItemID”:”支款单ID”, // “PaymentCode”:”支款单编号”, // “PaymentTime”:”支款日期”, // ”ContractNo”:”合同号”， // </div> </li> <li><a href="/article/1011.htm" title="POJ-1273-Drainage Ditches" target="_blank">POJ-1273-Drainage Ditches</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/ACM_POJ/1.htm">ACM_POJ</a> <div>POJ-1273-Drainage Ditches http://poj.org/problem?id=1273 基本的最大流，按LRJ的白书写的 #include<iostream> #include<cstring> #include<queue> using namespace std; #define INF 0x7fffffff int ma</div> </li> <li><a href="/article/1138.htm" title="工作流Activiti5表的命名及含义" target="_blank">工作流Activiti5表的命名及含义</a> <span class="text-muted">atongyeye</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a><a class="tag" taget="_blank" href="/search/Activiti/1.htm">Activiti</a> <div>activiti5 - http://activiti.org/designer/update在线插件安装 activiti5一共23张表 Activiti的表都以ACT_开头。 第二部分是表示表的用途的两个字母标识。 用途也和服务的API对应。 ACT_RE_*: 'RE'表示repository。 这个前缀的表包含了流程定义和流程静态资源 （图片，规则，等等）。 A</div> </li> <li><a href="/article/1265.htm" title="android的广播机制和广播的简单使用" target="_blank">android的广播机制和广播的简单使用</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%B9%BF%E6%92%AD%E6%9C%BA%E5%88%B6/1.htm">广播机制</a><a class="tag" taget="_blank" href="/search/%E5%B9%BF%E6%92%AD%E7%9A%84%E6%B3%A8%E5%86%8C/1.htm">广播的注册</a> <div> Android广播机制简介 在Android中，有一些操作完成以后，会发送广播，比如说发出一条短信，或打出一个电话，如果某个程序接收了这个广播，就会做相应的处理。这个广播跟我们传统意义中的电台广播有些相似之处。之所以叫做广播，就是因为它只负责“说”而不管你“听不听”，也就是不管你接收方如何处理。另外，广播可以被不只一个应用程序所接收，当然也可能不被任何应</div> </li> <li><a href="/article/1392.htm" title="Spring事务传播行为详解" target="_blank">Spring事务传播行为详解</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1%E4%BC%A0%E6%92%AD%E8%A1%8C%E4%B8%BA/1.htm">事务传播行为</a> <div> 在service类前加上@Transactional，声明这个service所有方法需要事务管理。每一个业务方法开始时都会打开一个事务。 Spring默认情况下会对运行期例外(RunTimeException)进行事务回滚。这</div> </li> <li><a href="/article/1519.htm" title="eidtplus operate" target="_blank">eidtplus operate</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/eidtplus/1.htm">eidtplus</a> <div>开启列模式: Alt+C 鼠标选择 OR Alt+鼠标左键拖动 列模式替换或复制内容(多行): 右键-->格式-->填充所选内容-->选择相应操作 OR Ctrl+Shift+V(复制多行数据,必须行数一致) -------------------------------------------------------</div> </li> <li><a href="/article/1646.htm" title="【Kafka一】Kafka入门" target="_blank">【Kafka一】Kafka入门</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>这篇文章来自Spark集成Kafka(http://bit1129.iteye.com/blog/2174765)，这里把它单独取出来，作为Kafka的入门吧 下载Kafka http://mirror.bit.edu.cn/apache/kafka/0.8.1.1/kafka_2.10-0.8.1.1.tgz 2.10表示Scala的版本，而0.8.1.1表示Kafka</div> </li> <li><a href="/article/1773.htm" title="Spring 事务实现机制" target="_blank">Spring 事务实现机制</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86/1.htm">代理</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1/1.htm">事务</a> <div>Spring是以代理的方式实现对事务的管理。我们在Action中所使用的Service对象，其实是代理对象的实例，并不是我们所写的Service对象实例。既然是两个不同的对象，那为什么我们在Action中可以象使用Service对象一样的使用代理对象呢？为了说明问题，假设有个Service类叫AService，它的Spring事务代理类为AProxyService，AService实现了一个接口 </div> </li> <li><a href="/article/1900.htm" title="bootstrap源码学习与示例：bootstrap-dropdown（转帖）" target="_blank">bootstrap源码学习与示例：bootstrap-dropdown（转帖）</a> <span class="text-muted">BreakingBad</span> <a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/dropdown/1.htm">dropdown</a> <div>bootstrap-dropdown组件是个烂东西，我读后的整体感觉。 一个下拉开菜单的设计： <ul class="nav pull-right"> <li id="fat-menu" class="dropdown"> </div> </li> <li><a href="/article/2027.htm" title="读《研磨设计模式》-代码笔记-中介者模式-Mediator" target="_blank">读《研磨设计模式》-代码笔记-中介者模式-Mediator</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* * 中介者模式（Mediator）：用一个中介对象来封装一系列的对象交互。 * 中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。 * * 在我看来，Mediator模式是把多个对象（</div> </li> <li><a href="/article/2154.htm" title="常用代码记录" target="_blank">常用代码记录</a> <span class="text-muted">chenjunt3</span> <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a><a class="tag" taget="_blank" href="/search/J%23/1.htm">J#</a> <div> 1、单据设置某行或某字段不能修改 //i是行号,"cash"是字段名称 getBillCardPanelWrapper().getBillCardPanel().getBillModel().setCellEditable(i, "cash", false); //取得单据表体所有项用以上语句做循环就能设置整行了 getBillC</div> </li> <li><a href="/article/2281.htm" title="搜索引擎与工作流引擎" target="_blank">搜索引擎与工作流引擎</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8/1.htm">网络应用</a> <div> 最近在公司做和搜索有关的工作，(只是简单的应用开源工具集成到自己的产品中)工作流系统的进一步设计暂时放在一边了，偶然看到谷歌的研究员吴军写的数学之美系列中的搜索引擎与图论这篇文章中的介绍，我发现这样一个关系(仅仅是猜想) -----搜索引擎和流程引擎的基础--都是图论，至少像在我在JWFD中引擎算法中用到的是自定义的广度优先</div> </li> <li><a href="/article/2408.htm" title="oracle Health Monitor" target="_blank">oracle Health Monitor</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/Health+Monitor/1.htm">Health Monitor</a> <div>About Health Monitor Beginning with Release 11g, Oracle Database includes a framework called Health Monitor for running diagnostic checks on the database. About Health Monitor Checks Health M</div> </li> <li><a href="/article/2535.htm" title="JSON字符串转换为对象" target="_blank">JSON字符串转换为对象</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div> 作为前言,首先是要吐槽一下公司的脑残编译部署方式,web和core分开部署本来没什么问题,但是这丫居然不把json的包作为基础包而作为web的包,导致了core端不能使用,而且我们的core是可以当web来用的(不要在意这些细节),所以在core中处理json串就是个问题.没办法,跟编译那帮人也扯不清楚,只有自己写json的解析了. </div> </li> <li><a href="/article/2662.htm" title="C语言学习八结构体，综合应用，学生管理系统" target="_blank">C语言学习八结构体，综合应用，学生管理系统</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>实现功能的代码： # include <stdio.h> # include <malloc.h> struct Student { int age; float score; char name[100]; }; int main(void) { int len; struct Student * pArr; int i,</div> </li> <li><a href="/article/2789.htm" title="vagrant学习笔记" target="_blank">vagrant学习笔记</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/vagrant/1.htm">vagrant</a> <div>想了解多主机是如何定义和使用的, 所以又学习了一遍vagrant 1. vagrant virtualbox 下载安装 https://www.vagrantup.com/downloads.html https://www.virtualbox.org/wiki/Downloads 查看安装在命令行输入vagrant 2.</div> </li> <li><a href="/article/2916.htm" title="14.性能优化-优化-软件配置优化" target="_blank">14.性能优化-优化-软件配置优化</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E9%85%8D%E7%BD%AE/1.htm">软件配置</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>1.Tomcat线程池 修改tomcat的server.xml文件： <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxThreads="1200" m</div> </li> <li><a href="/article/3043.htm" title="一个不错的shell 脚本教程 入门级" target="_blank">一个不错的shell 脚本教程 入门级</a> <span class="text-muted">HarborChung</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>一个不错的shell 脚本教程 入门级 建立一个脚本 Linux中有好多中不同的shell，但是通常我们使用bash (bourne again shell) 进行shell编程，因为bash是免费的并且很容易使用。所以在本文中笔者所提供的脚本都是使用bash（但是在大多数情况下，这些脚本同样可以在 bash的大姐，bourne shell中运行）。 如同其他语言一样</div> </li> <li><a href="/article/3170.htm" title="Spring4新特性——核心容器的其他改进" target="_blank">Spring4新特性——核心容器的其他改进</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E4%BB%A3%E7%90%86/1.htm">动态代理</a><a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a><a class="tag" taget="_blank" href="/search/%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5/1.htm">依赖注入</a> <div>Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新</div> </li> <li><a href="/article/3297.htm" title="Linux设置tomcat开机启动" target="_blank">Linux设置tomcat开机启动</a> <span class="text-muted">liuxingguome</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%9C%BA%E8%87%AA%E5%90%AF%E5%8A%A8/1.htm">开机自启动</a> <div>执行命令sudo gedit /etc/init.d/tomcat6 然后把以下英文部分复制过去。（注意第一句#!/bin/sh如果不写，就不是一个shell文件。然后将对应的jdk和tomcat换成你自己的目录就行了。 #!/bin/bash # # /etc/rc.d/init.d/tomcat # init script for tomcat precesses</div> </li> <li><a href="/article/3424.htm" title="第13章 Ajax进阶（下）" target="_blank">第13章 Ajax进阶（下）</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3551.htm" title="Troubleshooting Crystal Reports off BW" target="_blank">Troubleshooting Crystal Reports off BW</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a> <div>http://wiki.sdn.sap.com/wiki/display/BOBJ/Troubleshooting+Crystal+Reports+off+BW#TroubleshootingCrystalReportsoffBW-TracingBOE Quite useful, especially this part: SAP BW connectivity For t</div> </li> <li><a href="/article/3678.htm" title="Java开发熟手该当心的11个错误" target="_blank">Java开发熟手该当心的11个错误</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>#1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收 测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置，那么使它成为</div> </li> <li><a href="/article/3805.htm" title="正则表达式大全" target="_blank">正则表达式大全</a> <span class="text-muted">yang852220741</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div>今天向大家分享正则表达式大全，它可以大提高你的工作效率 正则表达式也可以被当作是一门语言，当你学习一门新的编程语言的时候，他们是一个小的子语言。初看时觉得它没有任何的意义，但是很多时候，你不得不阅读一些教程，或文章来理解这些简单的描述模式。 一、校验数字的表达式 数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$</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>
