大熊软糖M

前端学习笔记 HTML5 新特性

参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS

参考文档：HTML 教程 W3school

文章目录

XHTML规范
HTML5语法变化
HTML5元素与属性变化

新增的元素
废除的元素
新增的属性
废除的属性

HTML5新特性详解

全局属性

contentEditable
designMode
hidden
spellcheck
tabindex

新增元素：article
新增元素：section
新增元素：nav
新增元素：aside
新增元素：time（微格式）

新增属性：pubdate

新增元素：header与footer
新增元素：hgroup
新增元素：address
表单的新增属性

form
formaction与formmethod
formenctype
formtarget
autofocus
required
label
control
文本框placeholder
文本框list与datalist
文本框augocomplete
文本框pattern
文本框selectiondirection
复选框indeterminate
input为image类型时，提交的width和height

XHTML规范

文档方面：

必须定义文档类型（DTD）和你的名字空间

标签方面：

所有标签均要小写，合理嵌套，关闭，ID不能重复
标签属性要有值，属性值要加双引号且不能为空
图片一定要加alt属性
表格标签不准使用height属性，可以使用width属性（但单元格可以使用）
禁止使用</code>标签 链接不准使用target属性 </blockquote> <ul> <li>内容模型：</li> </ul> <blockquote> body form blockquote仅能包含块状元素 文本图像链接等内联元素不允许直接裸露在body中，必须被p或者div等块状元素包含 内链元素不能包含块状元素 </blockquote> <ul> <li>其他方面：</li> </ul> <blockquote> 注释中禁止使用"-----" 所用特殊符号用编码表示（在DW代码里"&" 会自动引用） </blockquote> <h1>HTML5语法变化</h1> <blockquote> 1、标签不再区分大小写 2、元素可以省略结束标签 （1）空元素语法的元素：area、base、br、col、command、embed、hr、img、input、keygen、link、mata、param、source、wbr （2）可以省略结束标签的元素：colgroup、dt、dd、li、optgroup、p、rt、rp、thread、tbody、tfoot、tr、td、th （3）可以全部省略标签的元素：html、head、body、tbody 3、允许省略属性值的属性 4、允许属性值不使用引号 5、添加了布尔值，类似checked，selected </blockquote> <h1>HTML5元素与属性变化</h1> 参考文档：HTML5新增的标签和废除的标签 参考文档：html5新增及废除属性 <h2>新增的元素</h2> <ul> <li>新增的结构元素：</li> </ul> <blockquote> section、article、aside、header、hgroup、footer、nav、figure </blockquote> <ul> <li>新增的其他元素：</li> </ul> <blockquote> video、audio、embed、mark、progress、meter、time、ruby、rt、rp、wbr、convas、command、details、datagrid、keygen、output、source、menu </blockquote> <ul> <li>新增的input元素的类型：</li> </ul> <blockquote> email、url、number、range、Date Pickers </blockquote> <h2>废除的元素</h2> <blockquote> 能使用CSS替代的元素：basefont、big、center、font、s、tt、u等 不再使用frame框架 只有部分浏览器支持的元素 其他被废除的元素 </blockquote> <h2>新增的属性</h2> <blockquote> 表单相关的属性 链接相关的属性 其他属性 </blockquote> <h2>废除的属性</h2> <blockquote> 删除了一些可以用css代替的属性，多余属性和其他属性。 </blockquote> <h1>HTML5新特性详解</h1> <h2>全局属性</h2> <h3>contentEditable</h3> 布尔类型，有<code>true</code>和<code>false</code>两种状态。 用来表示是否允许编辑内容。 继承：如未指定状态，则由父级/继承决定。 <ul> <li>普通写法：</li> </ul> <pre><code class="prism language-clike"> <ul contenteditable="true"> <li>1</li> <li>2</li> <li>3</li> </ul> </code></pre> <ul> <li>利用HTML5布尔特性写法：</li> </ul> <pre><code class="prism language-clike"> <ul contenteditable> <li>1</li> <li>2</li> <li>3</li> </ul> </code></pre> 同样，也可以是空字符串<code>contenteditable=""</code>。 <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/5afa681dd1ff4e808f84b602c7b54811.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/5afa681dd1ff4e808f84b602c7b54811.png" alt="前端学习笔记 HTML5 新特性_第1张图片" width="147" height="125" style="border:1px solid black;"></a> 均为可编辑状态。 </li> </ul> <h3>designMode</h3> 布尔类型，有<code>on</code>和<code>off</code>两种状态。 只允许在js脚本中使用。 用来表示整个页面是否可编辑。 <h3>hidden</h3> 布尔类型。 使浏览器不渲染（内容不可见）。 <pre><code class="prism language-clike"> <ul hidden> <li>1</li> <li>2</li> <li>3</li> </ul> </code></pre> <h3>spellcheck</h3> 布尔类型，有<code>true</code>和<code>false</code>两种状态。 用于输入框的拼写检查。 <pre><code class="prism language-clike"><input type="text" spellcheck="true"> </code></pre> <h3>tabindex</h3> int值，一般取正数。 使用tab建遍历，用于指定遍历过程中第几个被访问到。 主要用于链接和表单类型。 也可以给原本不能获取tab定位的元素添加<code>tabindex</code>，来使用tab访问。比如列表。 <pre><code class="prism language-clike"> <a href="index.html" tabindex="2">1</a><br/> <a href="index.html" tabindex="3">2</a><br/> <a href="index.html" tabindex="1">3</a><br/> </code></pre> <ul> <li> 代码结果： <a href="http://img.e-com-net.com/image/info8/ba1de103940447999037258b68681c78.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/ba1de103940447999037258b68681c78.png" alt="在这里插入图片描述" width="57" height="108"></a> </li> <li> 使用三次tab结果： <a href="http://img.e-com-net.com/image/info8/0ffce4062df54022a3f79be5d1dd4c83.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/0ffce4062df54022a3f79be5d1dd4c83.png" alt="在这里插入图片描述" width="60" height="117"></a> <a href="http://img.e-com-net.com/image/info8/db463eeb662c40238d85004404981507.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/db463eeb662c40238d85004404981507.png" alt="在这里插入图片描述" width="59" height="114"></a> <a href="http://img.e-com-net.com/image/info8/8f09f7be0cf44db2afbdb8db72f01f6a.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/8f09f7be0cf44db2afbdb8db72f01f6a.png" alt="在这里插入图片描述" width="59" height="112"></a> 可以看到按照我们给定的<code>tabindex</code>顺序进行tab的访问。 </li> </ul> <h2>新增元素：article</h2> 代表文档。 可以嵌套使用。 可以用来表示插件。 <ul> <li>正常使用：</li> </ul> <pre><code class="prism language-clike"> <article> <h1>标题</h1> <p>内容</p> </article> </code></pre> <ul> <li>嵌套使用：</li> </ul> <pre><code class="prism language-clike"> <article> <h1>标题</h1> <p>内容</p> <article> <h2>标题2</h2> <p>内容2</p> </article> </article> </code></pre> 插件嵌入： <pre><code class="prism language-clike"><body> 当前页面 <article> <object> <embed src="#" width="200" height="400"> </object> </article> </body> </code></pre> 其中<code>#</code>指的是当前页面的链接。 <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/fefc77fd6e104cadbdcd989f7f4532e8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fefc77fd6e104cadbdcd989f7f4532e8.jpg" alt="前端学习笔记 HTML5 新特性_第2张图片" width="322" height="641" style="border:1px solid black;"></a> 可以看到内嵌结果。 </li> </ul> <h2>新增元素：section</h2> 用于页面内容分块，由内容和<code>标题</code>组成。 <code>section</code>并非普通容器元素，需要定义样式和脚本行为时仍然建议用<code>div</code>。 <ul> <li>正常使用：</li> </ul> <pre><code class="prism language-clike"> <section> <h1>标题</h1> <p>内容</p> </section> </code></pre> <ul> <li>和<code>article</code>嵌套使用：</li> </ul> <pre><code class="prism language-clike"> <article> <h1>标题1</h1> <p>内容1</p> <section> <h2>标题2</h2> <p>内容2</p> </section> <section> <h3>标题3</h3> <p>内容3</p> </section> </article> </code></pre> <pre><code class="prism language-clike"> <section> <h1>标题1</h1> <p>内容1</p> <article> <h2>标题2</h2> <p>内容2</p> </article> <article> <h3>标题3</h3> <p>内容3</p> </article> </section> </code></pre> <code>section</code>强调分块，<code>article</code>强调独立性，<code>article</code>可以看作一种特殊的<code>section</code>。 独立完整的内容使用<code>article</code>，分块使用<code>section</code>。 <h2>新增元素：nav</h2> 用作页面导航的连接组。 主要应用于：传统导航条，侧边栏导航，页内导航，翻页操作。 <pre><code class="prism language-clike"> <nav> <ol> <li> <a href="index.html">1</a> </li> <li> <a href="index.html">2</a> </li> </ol> </nav> </code></pre> <h2>新增元素：aside</h2> 表示附属信息部分，引用、侧边栏、广告等。 <pre><code class="prism language-clike"> <aside> <p>内容</p> </aside> </code></pre> <h2>新增元素：time（微格式）</h2> <pre><code class="prism language-clike"> <time datetime="2020-07-03">time</time> <time datetime="2020-07-03T18:14">time</time> <time datetime="2020-07-03T18:14Z">time</time> <time datetime="2020-07-03T18:14+01:00">time</time> </code></pre> <code>T</code>是分隔符，<code>Z</code>是UTC标准时间，<code>+</code>时差。 <ul> <li>微格式：</li> </ul> <blockquote> 微格式（microformats）:是结构化数据的开放标准。是包含数据的结构化的XHTML代码块的定义格式，由于是XHTML代码块，所以很适合人类阅读，由于是结构化的，又很容易被机器处理，很容易和外部进行数据通信。 </blockquote> <h3>新增属性：pubdate</h3> <pre><code class="prism language-clike"><article> <time datetime="2020-07-03" pubdate></time> </article> </code></pre> <blockquote> pubdate 属性指示 <code><time></code> 元素中的日期 / 时间是文档（或最近的前辈 <code><article></code> 元素）的发布日期。 </blockquote> <blockquote> 目前所有主流浏览器都不支持 <code><pubdate></code> 标签。 </blockquote> <h2>新增元素：header与footer</h2> 用于页面逻辑，数量不限。 可以在整个页面使用，也可以在单个区域内使用。 <pre><code class="prism language-clike"> <header>头部</header> <footer>尾部</footer> </code></pre> <ul> <li>用于代替曾经的 <code>div</code>写法：</li> </ul> <pre><code class="prism language-clike"> <div class="footer"> <p>内容</p> </div> </code></pre> <h2>新增元素：hgroup</h2> 将<code>h1</code>到<code>h6</code>分组。 <pre><code class="prism language-clike"> <hgroup> <h1>h1</h1> <h2>h2</h2> </hgroup> </code></pre> <h2>新增元素：address</h2> 联系信息。 一般出现在底部。 <pre><code class="prism language-clike"> <address> <p>内容</p> </address> </code></pre> <h2>表单的新增属性</h2> <h3>form</h3> <pre><code class="prism language-clike"> <form id="t1"> <input type="text" name="s1" value="v1"> </form> <textarea form="t1"> </textarea> </code></pre> 通过<code>form</code>属性指向先前的表单域<code>id</code>，表示当前从属于哪个表单域。 可以在表单区域外创建任何表单内容。 <h3>formaction与formmethod</h3> 对应旧式<code>form</code>的<code>action</code>与<code>method</code>属性。 <ul> <li>旧式属性<code>action</code>与<code>method</code>：</li> </ul> <pre><code class="prism language-clike"><form action="index.html" method="post"> <input type="submit"> </form> </code></pre> <ul> <li>使用新属性<code>formaction</code>与<code>formmethod</code>：</li> </ul> <pre><code class="prism language-clike"><form> <input type="submit" formaction="index.html" formmethod="post"> </form> </code></pre> <code>formaction</code>同时解决了先前一个表单只能提交一次的问题，现在可以利用<code>formaction</code>提交到多个网页。 <ul> <li>多<code>formaction</code>提交：</li> </ul> <pre><code class="prism language-clike"> <form> <input type="submit" formaction="a.html"> <input type="submit" formaction="b.html"> <input type="submit" formaction="c.html"> </form> </code></pre> <h3>formenctype</h3> 对应旧式<code>form</code>的<code>enctype</code>属性，用于指定编码。 <ul> <li>旧式：</li> </ul> <pre><code class="prism language-clike"><form enctype="text/plain"> <input type="submit"> </form> </code></pre> <ul> <li>新式：</li> </ul> <pre><code class="prism language-clike"><form> <input type="submit" formenctype="text/plain"> </form> </code></pre> <ul> <li>关于取值：</li> </ul> <table> <thead> <tr> <th>取值</th> <th>结果</th> </tr> </thead> <tbody> <tr> <td>application/x-www-form-urlencoded</td> <td>在发送前编码所有字符（默认）</td> </tr> <tr> <td>multipart/form-data</td> <td>不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。</td> </tr> <tr> <td>text/plain</td> <td>空格转换为 “+” 加号，但不对特殊字符编码。</td> </tr> </tbody> </table> <h3>formtarget</h3> 对应a链接的<code>target</code>属性，用于指定打开跳转界面。 和<code>formaction</code>结合使用。 <pre><code class="prism language-clike"><form> <input type="submit" formtarget="_blank" formaction="a.html"> <input type="submit" formtarget="_self" formaction="b.html"> <input type="submit" formtarget="_parent" formaction="c.html"> </form> </code></pre> <h3>autofocus</h3> 类似布尔类型，用于指定刚打开Web时自动获得焦点的表单控件。 <pre><code class="prism language-clike"><form> <input type="submit"> <input type="submit" autofocus> </form> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/9176c8605fbe481b9669e99ab0262972.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/9176c8605fbe481b9669e99ab0262972.png" alt="在这里插入图片描述" width="154" height="49"></a> </li> </ul> <h3>required</h3> 类似布尔类型，应用于输入，当输入为空时禁止提交。 <pre><code class="prism language-clike"><form> <input type="text" required> <input type="submit"> </form> </code></pre> <ul> <li>代码结果（提交空结果）： <a href="http://img.e-com-net.com/image/info8/8a32508644c14812a21e1505de3988f8.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/8a32508644c14812a21e1505de3988f8.png" alt="前端学习笔记 HTML5 新特性_第3张图片" width="340" height="126" style="border:1px solid black;"></a> </li> </ul> <h3>label</h3> 参考文档：HTML 标签 参考文档：使用labels属性有什么优势吗？ HTML5 中的新属性。属性值描述<code>for id</code>规定<code>label</code>绑定到哪个表单元素。 <ul> <li>带有两个输入字段和相关标记的简单 HTML 表单：</li> </ul> <pre><code class="prism language-clike"><form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> </code></pre> <ul> <li>label的优势：</li> </ul> <blockquote> label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <code><label></code> 标签的 for 属性应当与相关元素的 id 属性相同。 </blockquote> <h3>control</h3> 参考文档：HTML5新标签control属性 在HTML5中，可以在<code><label></code>标签内部放置一个表单元素，并通过该标签的<code>control</code>属性来访问该表单的属性。 <h3>文本框placeholder</h3> 文本框未处于输入状态时，显示的输入提示。 <pre><code class="prism language-clike"><form> <input type="text" placeholder="请输入"> </form> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/45c0c2bbf23e4faab5aba1cb4b77ea78.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/45c0c2bbf23e4faab5aba1cb4b77ea78.png" alt="在这里插入图片描述" width="290" height="62"></a> </li> </ul> <h3>文本框list与datalist</h3> <pre><code class="prism language-clike"><form> <input type="text" name="input1" list="A"> <datalist id="A" style="display: none"> <option value="1">选择1</option> <option value="2">选择2</option> </datalist> </form> </code></pre> 通过指定<code>list</code>的值，对应到一个<code>datalist</code>（同样是HTML5新增）中，提供选择功能。 <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/ca974fec958a4e96b73c918342c232c2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ca974fec958a4e96b73c918342c232c2.jpg" alt="前端学习笔记 HTML5 新特性_第4张图片" width="315" height="262" style="border:1px solid black;"></a> </li> </ul> <h3>文本框augocomplete</h3> 布尔属性，<code>on</code>和<code>off</code>。 自动完成功能。 <pre><code class="prism language-clike"><form> <input type="text" autocomplete="on"> </form> </code></pre> <h3>文本框pattern</h3> 将属性值设置为某个格式的正则表达式，提交时检查。 <pre><code class="prism language-clike"><form>  <input pattern="[A-Z]{3}"> <input type="submit"> </form> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/62c1d2e8ada24a10bbbbd3f27814a89d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/62c1d2e8ada24a10bbbbd3f27814a89d.png" alt="前端学习笔记 HTML5 新特性_第5张图片" width="363" height="135" style="border:1px solid black;"></a> </li> </ul> <h3>文本框selectiondirection</h3> 参考文档：文本框的SelectionDirection属性 针对<code>input</code>和<code>textarea</code>元素。 选取文字时，可以用此属性来获得用户的选取方向。 正向选取时为<code>forward</code>，反向选取时为<code>backward</code>。 <h3>复选框indeterminate</h3> 参考文档：HTML5中indeterminate属性 使用JS脚本，指定复选框第三种状态（除“选取”、“未选取”）“尚未明确是否选取”。 <h3>input为image类型时，提交的width和height</h3> <pre><code class="prism language-clike"><form> <input type="image" src="myjpg.jpg" width="50" height="50"> </form> </code></pre> 指定提交图片的长和宽。 </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1288834878728642560"></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">  <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>  <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>  <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/1756032433184063488.htm" title="人力资源智能化管理项目（day04:组织架构）" target="_blank">人力资源智能化管理项目（day04:组织架构）</a> 我是如此相信ᯤ⁶⁶ᴳ <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%8A%9B%E8%B5%84%E6%BA%90%E6%99%BA%E8%83%BD%E5%8C%96%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE/1.htm">人力资源智能化管理项目</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>学习源码可以看我的个人前端学习笔记(github.com):qdxzw/humanResourceIntelligentManagementProject觉得有帮助的同学，可以点心心支持一下哈树组件应用depts:[{name:'传智教育',children:[{name:'总裁办'},{name:'行政部'},{name:'人事部',children:[{name:'财务核算部'},{name:</div> </li> <li><a href="/article/1756032179529334784.htm" title="人力资源智能化管理项目（day03:主页模块）" target="_blank">人力资源智能化管理项目（day03:主页模块）</a> 我是如此相信ᯤ⁶⁶ᴳ <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%8A%9B%E8%B5%84%E6%BA%90%E6%99%BA%E8%83%BD%E5%8C%96%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE/1.htm">人力资源智能化管理项目</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>学习源码可以看我的个人前端学习笔记(github.com):qdxzw/humanResourceIntelligentManagementProject觉得有帮助的同学，可以点心心支持一下哈主页权限验证(permission.js)importrouterfrom'@/router'importnprogressfrom'nprogress'//进度条import'nprogress/nprog</div> </li> <li><a href="/article/1755621366918299648.htm" title="Web前端学习笔记" target="_blank">Web前端学习笔记</a> jusw123456 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>文章目录HTML+CSS系列学习笔记①之拨云见日1、什么是HTML、CSS？2、VSCode编译器（宇宙第一编译器）3、五大浏览器4、深入了解网站开发5、web前端的三大核心技术6、HTML基本结构和属性7、HTML初始代码8、HTML注释9、标题与段落10、文本修饰标签11、引入文件的地址路径12、图片标签13、跳转链接14、跳转锚点15、特殊符号16、列表标签17、表格标签18、表格属性19、</div> </li> <li><a href="/article/1754699924143882240.htm" title="前端学习笔记day02--CSS" target="_blank">前端学习笔记day02--CSS</a> m0_38077048 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%87%AA%E7%94%A8/1.htm">学习自用</a><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>前端学习笔记day02–CSS一、CSS知识CSS（cascadingstylesheet）：层叠样式表（级联样式表）作用：设置html标签的字体、颜色、背景、边框、边距和宽高等，使界面美观、漂亮，从而提高用户体验。html搭起结构，CSS起美观作用，html和CSS分离、解耦，方便统一修改维护。二、CSS和html结合写法：选择器{声明；（属性名：属性值；）}1.行内样式行内样式作用域小，只作用</div> </li> <li><a href="/article/1753962196007665664.htm" title="[前端学习笔记1] 前端学习路线" target="_blank">[前端学习笔记1] 前端学习路线</a> Lumos_zbj <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>按顺序学习一、做网页HTML：定义网页结构CSS（Cascadingstylesheets层叠样式表）：对网页进行装饰JS（JavaScript）：网页与用户的交互效果，【重要】WebAPI：将HTML,CSS,JS结合在一起，通过JS可以改变HTML,CSS.JQuery：老牌框架，了解即可。Bootstrap：响应式页面，了解即可移动端开发：【重要】二、数据库和服务器数据库：mongoDB（J</div> </li> <li><a href="/article/1753961295721283584.htm" title="爬虫配套学习-前端学习笔记03" target="_blank">爬虫配套学习-前端学习笔记03</a> 丰。。 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">爬虫学习笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>插入图片水平线无 月 的 中 秋据说每年八月十五的时候，夜空中的月亮是一年中最大，最圆，最亮，最美的月亮，中秋节的来历，这就是月饼的来历，大家会在这一天，和嘉园也，吃月饼，赏月。®效果图像的超链接水平线无 月 的 中 秋据说每年八月十五的时候，夜空中的月亮是一年中最大，最圆，最亮，最美的月亮，中秋节的来历，这</div> </li> <li><a href="/article/1753680734431756288.htm" title="前端学习笔记 | CSS动画+移动web" target="_blank">前端学习笔记 | CSS动画+移动web</a> 简·AI <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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>一、平面转换为元素添加动态效果，一般与过渡配合使用。1、设置transition给元素本身，表示过渡变换方式和时间2、在元素hover设置transform（动态效果）transform:【移动】translate(x方向，y方向)、translateX（x、translateY(y)位移【旋转】rotate(数字+deg）【缩放】scele(数字)大于1放大，小于1缩小【倾斜】skew（数字+d</div> </li> <li><a href="/article/1753680735337725952.htm" title="前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）" target="_blank">前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）</a> 简·AI <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>注：本文的css样式均使用less写法1、字体居中（1）先text-align:center;行内元素水平居中（2）再line-heigh:(盒子高度);行内元素垂直居中text-align:center;line-height:(30/@vw);2、盒子居中情景1：版心居中margin:0auto;情景2：标题栏制作时让左右两个弹性盒子居中的方法（1）设置浮动（2）给父级添加行高line-hei</div> </li> <li><a href="/article/1753680733899079680.htm" title="前端学习笔记 | CSS高级技巧" target="_blank">前端学习笔记 | CSS高级技巧</a> 简·AI <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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>一、定位注：需要同时设置定位模式和边偏移才生效。1、定位模式相对定位-position:relative特点：（1）灵活改变盒子在网页中的位置，改变位置的参照物是自己原来的位置（2）不脱标，占位（3）标签显示模式特点不变绝对定位-position:abusolute(子级绝对定位，父级相对定位-子绝父相)特点：（1）脱标，不占位（2）参照物先找祖先元素，如果祖先没有定位，则参照浏览器可视区域位置（</div> </li> <li><a href="/article/1753680347956002816.htm" title="前端学习笔记 | 响应式网页+Boostrap" target="_blank">前端学习笔记 | 响应式网页+Boostrap</a> 简·AI <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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一、响应式网页一套代码适应多端1、媒体查询@media(条件){css}max-width小于等于max-width生效min-width【案例】左侧隐藏因为CSS的层叠性，书写顺序：max-width从大到小；min-width从小到大。【媒体查询完整写法】在html中link用于不同视口的css样式，media=""中一定要加（），否则不生效。2、BootstrapBootstrap是由Twi</div> </li> <li><a href="/article/1752411665669832704.htm" title="自学前端学习笔记html5(简称H5)" target="_blank">自学前端学习笔记html5(简称H5)</a> Informal杨 <div>image.pngimage.pngimage.pngH5在语义上的改进在此基础上，HTML5增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。我们常见的css+div布局是：image.png在html5中，我们可以这样写：image.pngH5的经典网页布局：H5中新增的语义标签表示区块表示文章。如文章、评论、帖</div> </li> <li><a href="/article/1752186248874704896.htm" title="前端自己整理的学习面试笔记" target="_blank">前端自己整理的学习面试笔记</a> 小江的博客 <a class="tag" taget="_blank" href="/search/IT%E8%B5%84%E6%BA%90/1.htm">IT资源</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>简介以下是本人一年多整理的前端学习笔记，现汇总分享给大家，很多问题都是面试必问的更多学习资源，可以点击我获取更多1js数据类型原始类型：nullundefinednumberstringbooleanSymbolBigInt引用类型：对象2判断一个对象属性是否存在本身属性判断：obj.hasOwnProperty(key)包括了上级属性判断：keyinobjReflect.get(obj,‘key</div> </li> <li><a href="/article/1750673224204566528.htm" title="前端学习笔记一一HTML常用标签之列表标签" target="_blank">前端学习笔记一一HTML常用标签之列表标签</a> 前前前端小飞 <div>HTML常用标签之列表标签列表标签的用途，就是用于编排短语句的文字。1.无序列表在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。设置无序列表的类型—type无序列表的默认符号是圆点（●）。�元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：�disc(圆●)、circle（圆圈○）、square（方块■）定</div> </li> <li><a href="/article/1750239918862385152.htm" title="字节跳动内部前端学习笔记在互联网上火了，在Github标星33K+，完整版开放下载" target="_blank">字节跳动内部前端学习笔记在互联网上火了，在Github标星33K+，完整版开放下载</a> 书苏 <div>一、入门前端三剑客1、HTMLhtml学起来还是挺简单的，无论你是否有编程基础，我觉得都可以快速入门，对于新手，我推荐找个入门的视频看一下，然后跟着视频打代码就可以了，入门教程随便在网上找个免费的视频就可以了，随便搜索「html入门」即可，或者看菜鸟教程的一个入门教程也行。看完视频，也可以看一下文字版的教程，不知道大家有没有看过阮一峰写过的教程，我觉得他写的教程都很棒，所以这里我也推荐下大家看一下</div> </li> <li><a href="/article/1750013266047811584.htm" title="前端学习笔记-HTML、CSS、Javascript基础知识" target="_blank">前端学习笔记-HTML、CSS、Javascript基础知识</a> m0_53527658 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><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> <div>认识web网站的开发模式采用前后端分离技术开发Web前端三个组成部分HTML：负责网页结构（页面元素的内容）CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）JavaScript：负责网页的行为（交互效果）HTML和CSSHTML：超文本标记语言：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容；HTML标签都是预定义好的。例如：使用展示超</div> </li> <li><a href="/article/1748709809311465472.htm" title="ES6前端学习笔记" target="_blank">ES6前端学习笔记</a> 已注销 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>修正ES6是ECMA为JavaScript制定的第6个标准版本，相关历史可查看此章节《ES6-ECMAScript6简介》。标准委员会最终决定，标准在每年6月正式发布并作为当年的正式版本，接下来的时间里就在此版本的基础上进行改动，直到下一年6月草案就自然变成新一年的版本，这样一来就无需以前的版本号，只要用年份标记即可。ECMAscript2015是在2015年6月发布ES6的第一个版本。以此类推，</div> </li> <li><a href="/article/1748701032117977088.htm" title="【前端学习笔记1】css基础" target="_blank">【前端学习笔记1】css基础</a> __dh <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>css可以使页面更漂亮，即美化网页css：层叠样式表标签选择器：类选择器：id只能单次调用，类似人的身份证css里只要是word里面有的功能，他们都有对应的，不会的时候查一下就行实现垂直居中:height等于line-height就行font-family：可以修改字体font顺序：是否倾斜字号行高字体必须严格按照这个顺序来与文本相关text-indent：文本缩进text-align：cente</div> </li> <li><a href="/article/1748700142363492352.htm" title="【前端学习笔记2】javaScript基础" target="_blank">【前端学习笔记2】javaScript基础</a> __dh <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>是什么：是一种运行在客户端（服务器的编程语言）javacript分为行内JavaScript，内部JavaScript，外部JavaScript内部JavaScript直接写在html中body里面alert（“hello，world”）我们将script放在html文件的地步附近的原因是浏览器会按照代码在文件中的顺序加载html如果先加载的JavaScript期望修改其下方的html，那么他可能</div> </li> <li><a href="/article/1747616622635401216.htm" title="自学前端学习笔记-02CSS基础样式语法" target="_blank">自学前端学习笔记-02CSS基础样式语法</a> Informal杨 <div>◆CSS三大特性1.继承性2.层叠性3.优先级继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important继承<*{css}<div{css}<.(class命名){css}<#(class命名){}<style=""<!important{权限最高,不推荐使用}image.png不需要理解,后期使用less或者sass就可以了!◆PxCook的基本使用官方网站https:</div> </li> <li><a href="/article/1746907254134685696.htm" title="【wow-ts】前端学习笔记Typescript基础语法（一）" target="_blank">【wow-ts】前端学习笔记Typescript基础语法（一）</a> miskirito <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>项目地址是https://github.com/datawhalechina/wow-ts。我选择的是ts前端课程Typescript笔记TypeScript入门介绍基础数据类型TypeScript基础数据结构TypeScript变量声明变量作用域TypeScript入门介绍第一次接触ts，先去了解了下ts的内容，复制内容如下TypeScript是JavaScript的一个超集，支持ECMAScr</div> </li> <li><a href="/article/1745473629660921856.htm" title="前端学习笔记 5：大事件" target="_blank">前端学习笔记 5：大事件</a> 魔芋红茶 <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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记5：大事件本文将学习一个示例项目（大事件）的前端搭建过程。1.准备工作1.1.创建工程创建一个名称为big-event的Vue3项目，具体可以参考这篇文章。1.2.安装插件安装ElementPlus：npminstallelement-plus--save安装好后还需要在main.js中导入相关模块和样式：import'./assets/main.scss'import{createA</div> </li> <li><a href="/article/1745473499478114304.htm" title="前端学习笔记 6：Pinia" target="_blank">前端学习笔记 6：Pinia</a> 魔芋红茶 <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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记6：PiniaPinia是Vue的一个官方库，用于状态管理。1.安装首先创建一个Vue3项目，具体方式可以参考这里。安装Pinia：npminstallpinia创建一个pinia实例(根store)并将其传递给应用：import'./assets/main.css'import{createApp}from'vue'import{createPinia}from'pinia'impo</div> </li> <li><a href="/article/1745377282232434688.htm" title="【前端学习笔记3——选不中按钮、全局变量、表格不显示、查看变量值】" target="_blank">【前端学习笔记3——选不中按钮、全局变量、表格不显示、查看变量值】</a> weixin_47227105 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前端学习笔记三，覆盖button选不中，可能是被别的元件覆盖了，用开发者工具选择元件，可以在样式里添加z-index或者用position把相对定位变为绝对定位。.back{z-index:99999999;position:absolute;right:40px;top:95px;}el-option筛选框里不显示label，显示value，而且有的列筛选框有label有value全局变量写法，</div> </li> <li><a href="/article/1745191168452345856.htm" title="暑期字节青训营前端学习笔记——简略" target="_blank">暑期字节青训营前端学习笔记——简略</a> 放荡不羁的小雨鸽 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>文章目录前端与HTML什么是前端？前端应该关注那些方面？注意HTML标签的语义化web开发的基本情况关于前端的开发：起源、架构、变迁前端应用的领域前端应用领域---浏览器前端应用领域---服务器前端应用领域---终端和跨端语言、框架、工具浏览器、网络、服务器Web标准标准组织：HTTP协议初识HTTP协议什么是HTTP协议协议分析报文methodWeb安全攻击防御对于XSS攻击：CSRF的防御Ty</div> </li> <li><a href="/article/1743025266642403328.htm" title="【前端学习笔记】HTML5中的video和audio" target="_blank">【前端学习笔记】HTML5中的video和audio</a> 花上 <div>标签定义声音，比如音乐或者其他音频流。标签定义视频，比如电影片段或其他视频流。video和audio的优点：都不需要第三方插件就能播放音频和视频，可以直接插入，并且用同一的API接口控制。video和audio的缺点：1）暂时没有对流视频的支持和规范。流媒体分HTTP渐进式下载和实时流式传播，video和audio属于HTTP属于渐进式下载，不需要流媒体服务器，普通HTTP服务器就可以。2）播放媒</div> </li> <li><a href="/article/1742449223162413056.htm" title="前端学习笔记 3：Vue 工程" target="_blank">前端学习笔记 3：Vue 工程</a> 魔芋红茶 <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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记3：Vue工程上一篇文章介绍了如何在单一Html页面中使用Vue，本文介绍如何从头开始用Vue构建一个前端工程项目。环境准备Vue框架代码的创建依赖于Node.js，因此需要先安装Node.js。创建和启动创建通过以下命令可以创建Vue的框架代码：npmcreatevue@latest该命令执行后会先检查是否安装create-vue工具，如果没有，就安装。然后再使用create-vue</div> </li> <li><a href="/article/1742449095500382208.htm" title="前端学习笔记 2：Vue" target="_blank">前端学习笔记 2：Vue</a> 魔芋红茶 <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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>前端学习笔记2：VueVue是一个目前最流行的前端响应式框架，关于它的简单介绍可以观看这里。1.快速入门Vue的官网提供一个快速上手指南，有多种方式可以安装和使用Vue，这里展示一个最简单的方式——直接导入官方提供的在线的核心JS文件进行使用。这里展示的内容相当于官方快速上手指南中的使用ES模块构建版本。需要先像在之前文章中介绍的那样，在JS模块中导入Vue的createApp函数：import{</div> </li> <li><a href="/article/1742448967309869056.htm" title="前端学习笔记 1：js 导入导出" target="_blank">前端学习笔记 1：js 导入导出</a> 魔芋红茶 <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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记1：js导入导出1.传统引用一般性的，用以下方式引入JS中定义的函数或对象到Html中使用：functionshowMessage(){console.log("hello");}functionshowChineseMessage(){console.log("你好");}hello按我有惊喜document.getElementById("btn").onclick=functio</div> </li> <li><a href="/article/1742448711952252928.htm" title="前端学习笔记 4：Element Plus" target="_blank">前端学习笔记 4：Element Plus</a> 魔芋红茶 <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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记4：ElementPlus1.准备工作在使用ElementPlus之前，需要先创建一个Vue工程，具体可以参考上一篇文章。创建好后就可以按照官方文档中的指示，在工程目录下安装Element依赖：npminstallelement-plus--save注意，Element和ElementPlus是两个不同的项目，前者适用于Vue2.X，后者适用于Vue3.X。这里使用的是后者。2.快速开</div> </li> <li><a href="/article/1740617393400463360.htm" title="2021-08-25_vue环境搭建前端学习笔记" target="_blank">2021-08-25_vue环境搭建前端学习笔记</a> kikop <div>20210825_vue环境搭建前端学习笔记1概述1.1目录结构image-20211001195604044.png1.2项目配置细节1.2.1配置拦截器//E:\workdirectory\Dev\remotestudy\technicaltools\C050myvueelementdemo\myvue_front\src\config\http.js//接口请求拦截器importVuefro</div> </li> <li><a href="/article/122.htm" title="java数字签名三种方式" target="_blank">java数字签名三种方式</a> 知了ing <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> caoyong <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> 漂泊一剑客 <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> 一炮送你回车库 <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> 3213213333332132 <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> 616050468 <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> darkranger <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> aijuans <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> atongyeye <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> 百合不是茶 <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> bijian1013 <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> 征客丶 <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> bit1129 <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> BlueSkator <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> BreakingBad <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> bylijinnan <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> chenjunt3 <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> comsci <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> daizj <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> dieslrae <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> dcj3sjt126com <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> dcj3sjt126com <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> frank1234 <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> HarborChung <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> jinnianshilongnian <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> liuxingguome <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> onestopweb <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> blueoxygen <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> tomcat_oracle <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> yang852220741 <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"> 按字母分类： <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.  </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>