齐在

web前端学习笔记（四）——表单

HTML表单结构

定义：表单是手机用户数据信息的各种表单元素的集合区域。

作用：实现网页上的数据交互，手机客户端输入的数据信息，提交到网站服务器端进行处理。

最常见的应用：1. 注册/登录 2. 搜索 3. 留言/评论 4. 文件上传/文章编辑

结构：表单区域+表单控件（表单元素）

表单标签：双标签，块状元素。用来定义网页中的交互输入的区域（表单区）。所有的表单控件必须包含在

元素中。

基本属性：

name属性和id属性的区别：

1. id在页面中具有唯一性，name可以重复

2. name主要对应服务器端，用于对提交到服务器后的表单数据进行标志。要实现数据交互功能，表单和表单控件都需要使用name属性。

3. name的另一个功能是对应脚本（javascript），来处理表单中的各种数据值。而id主要对应css样式的应用。

HTML：表单控件

1. 输入型控件：用户在控件中可以直接输入数据信息

通用文本输入型控件：

1.文本框（单行文本）：标签创建文本框，type属性指定其具体类型，单标签，一个代表一个表单控件。

2.文本域（多行文本）：标签创建文本域。双标签，创建一个可以输入多行文本内容的区域。没有value属性，标签形成的区域中放置的内容实际上就是value的值。创建的文本域有默认样式，可以通过CSS来控制和修改。</p> <p style="text-indent:50px;">HTML5新增输入型控件：</p> <p style="text-indent:50px;"> <a href="http://img.e-com-net.com/image/info8/0750cb0500904e558af0e7436942b80d.jpg" target="_blank"><img alt="web前端学习笔记（四）——表单_第4张图片" class="has" height="252" src="http://img.e-com-net.com/image/info8/0750cb0500904e558af0e7436942b80d.jpg" width="650" style="border:1px solid black;"></a></p> <p style="text-indent:50px;"> HTML5增加了新的表单输入input类型。其目的是赋予input更具体的语义，同时提供更好的输入控制和浏览器原生验证（不需要附加脚本）。各个浏览器对新增的这些input控件支持度不一样，就算不支持，也可以显示为常规普通文本框。</p> <p style="text-indent:50px;">2. 选择型控件：用户根据提供的控件选择数据内容</p> <p style="text-indent:50px;">通用文本选择型控件：</p> <p style="text-indent:50px;">单选按钮<input type="radio">单选按钮具有互斥性，必须成组出现，没有单个的应用场景。name属性：实现按钮的编组，当若干按钮的name属性相同时，就形成了按钮组。checked属性：设定按钮的已选中状态。</p> <p style="text-indent:50px;">复选按钮<input type="checkbox> 复选按钮可以单个使用，也可成组使用。name属性：实现按钮的编组，当若干按钮的name属性相同时，就形成了按钮组。checked属性：设定按钮的已选中状态。</p> <p style="text-indent:50px;">下拉列表：</p> <p style="text-indent:50px;"><a href="http://img.e-com-net.com/image/info8/5dc49a74071744718d5ce0dee23c4e15.jpg" target="_blank"><img alt="web前端学习笔记（四）——表单_第5张图片" class="has" height="108" src="http://img.e-com-net.com/image/info8/5dc49a74071744718d5ce0dee23c4e15.jpg" width="650" style="border:1px solid black;"></a></p> <p style="text-indent:50px;"> 下拉列表的应用技巧：</p> <p style="text-indent:50px;"> 1. 给<option>添加selected属性，可以设定在首次显示下拉列表时为默认的选中状态</p> <p style="text-indent:50px;"> 2. 给<select>添加multiple属性，可选择多个选项</p> <p style="text-indent:50px;"> 3. <select>的size属性可以规定下拉列表中可见选项的数目。</p> <p style="text-indent:50px;"> 4. 使用<optgroup>给列表中的选项进行分组，形成类似树形的分级选择控件。<optgroup>标签的label属性用于选项组的文本描述。</p> <p style="text-indent:50px;">HTML5新增选择型控件：</p> <p style="text-indent:50px;"> 1. 输入提示控件：datalist。</p> <p style="text-indent:50px;"> 用来预先定义一个输入框的潜在选项，为输入框提供一个可选择的提示列表。用户输入数据时，可以直接选择提示列表，免去输入的麻烦。</p> <p style="text-indent:50px;"><a href="http://img.e-com-net.com/image/info8/da4309e6d9ff41bea1c405ffc25ee3a4.jpg" target="_blank"><img alt="web前端学习笔记（四）——表单_第6张图片" class="has" height="110" src="http://img.e-com-net.com/image/info8/da4309e6d9ff41bea1c405ffc25ee3a4.jpg" width="650" style="border:1px solid black;"></a> </p> <p style="text-indent:50px;">datalist和input的关系：datalist作为输入提示，实际应用中需要和input输入框搭配使用。使用input（输入框）的list属性来引用datalist的id值。</p> <pre class="has"><code><input type="text" list="browser"> <datalist id="browser"> <option value="IE">IE</option> <option value="FireFox">FireFox</option> <option value="Chrome">Chrome</option> <option value="Safari">Safari</option> </datalist> </code></pre> <p style="text-indent:50px;">datalist目前的缺陷和不足：</p> <p style="text-indent:50px;"> 1. 无法使用css对其进行UI设计和样式定义</p> <p style="text-indent:50px;"> 2. 部分浏览器不支持或支持度不好，且不同浏览器对datalist中的属性或值判断不同。</p> <p style="text-indent:50px;"> 3. 即便使用datalist，通常也需要配合脚本来实现和完善其功能。</p> <p style="text-indent:50px;">3. 事件型控件：用户点击控件发生的事件</p> <p style="text-indent:50px;">通用文本事件型控件：</p> <p style="text-indent:50px;"><a href="http://img.e-com-net.com/image/info8/ef8e763c52db4d9b97c9c4a8aa6a152c.jpg" target="_blank"><img alt="web前端学习笔记（四）——表单_第7张图片" class="has" height="218" src="http://img.e-com-net.com/image/info8/ef8e763c52db4d9b97c9c4a8aa6a152c.jpg" width="650" style="border:1px solid black;"></a></p> <p style="text-indent:50px;">按钮的应用：每个表单都应该有一个提交按钮来实现表单数据的发送，按钮上的文本用value属性来定义。</p> <p style="text-indent:50px;">按钮控件：<button>。双标签。元素内部可以放置内容，这是与<input>元素创建的按钮的不同之处，它提供了更强大的功能和更丰富的内容。使用<button>按钮时，需要规定type属性来定义其功能。实际应用不多见。</p> <p style="text-indent:50px;"><a href="http://img.e-com-net.com/image/info8/583d72cace6247e08e03217842da6a28.jpg" target="_blank"><img alt="web前端学习笔记（四）——表单_第8张图片" class="has" height="106" src="http://img.e-com-net.com/image/info8/583d72cace6247e08e03217842da6a28.jpg" width="650" style="border:1px solid black;"></a></p> <p style="text-indent:0;"><strong>表单/表单控件常用的属性总结</strong></p> <p style="text-indent:50px;">1. value属性的用法：<input value="text"></p> <p style="text-indent:50px;">定义各种表单控件的值，不同的控件类型，value的用法也不同。</p> <p style="text-indent:50px;"><a href="http://img.e-com-net.com/image/info8/d7812e1fdf95485caddf5dad6fedc7e1.jpg" target="_blank"><img alt="web前端学习笔记（四）——表单_第9张图片" class="has" height="133" src="http://img.e-com-net.com/image/info8/d7812e1fdf95485caddf5dad6fedc7e1.jpg" width="650" style="border:1px solid black;"></a></p> <p style="text-indent:50px;">2. readonly只读属性：<input readonly></p> <p style="text-indent:50px;">规定输入字段为“只读”，不能修改。应用对象主要针对输入框类型的控件。</p> <p style="text-indent:50px;">3. disabled禁用属性</p> <p style="text-indent:50px;">规定输入字段为“禁用”，无法使用，无法点击。应用对象包括所有的表单控件，除了<input type="hidden">。提交表单数据时，被禁用的控件不会被提交。</p> <p style="text-indent:50px;">4. placeholder占位符属性：<input placeholder="text"></p> <p style="text-indent:50px;">规定可描述输入字段预期值的简短的提示信息，来提示用户输入。输入框显示placeholder的文本内容，在用户输入时自动消失，不会形成干扰。应该用对象针对输入型表单控件，如<input>的text类型或<textarea>。placeholder内容不是value的值，也不会被表单提交。这是html5新增属性，IE9及以前版本浏览器不支持。</p> <p style="text-indent:50px;">5. required必填属性</p> <p style="text-indent:50px;">规定必须在提交表单之前填写输入字段。这是html5新增属性，IE9及以前版本浏览器不支持。</p> <p style="text-indent:50px;">6. autofocus自动获得焦点属性</p> <p style="text-indent:50px;">规定当页面加载时<input>元素应该自动获得焦点。应用对象针对大多数表单控件，都可以应用。这是html5新增属性，IE9及以前版本浏览器不支持。</p> <p style="text-indent:50px;">7. autocomplete自动完成属性：<input autocomplete="on|off"</p> <p style="text-indent:50px;">规定表单是否应该启用自动完成功能，即是否让浏览器自动记录之前输入的值。可应用于整体的<form>对象，也可应用于输入型<input>控件。表单默认为“on”。这是html5新增属性，IE9及以前版本浏览器不支持。</p> <p style="text-indent:0;"><strong>表单应用技巧</strong></p> <p style="text-indent:0;">使用<label>提高用户操作交互体验。使用<fieldset>协助表单控件或数据归类分组。</p> <p style="text-indent:50px;">1. 表单标记标签：<label>。双标签，行间元素，默认无任何特殊样式。为表单控件提供辅助标记，点击<label>中的标记内容，浏览器就会自动将焦点转到和<label>相关的表单控件上。</p> <p style="text-indent:0;"><a href="http://img.e-com-net.com/image/info8/99803b99501a42689a353f74c8a2aa70.jpg" target="_blank"><img alt="web前端学习笔记（四）——表单_第10张图片" class="has" height="208" src="http://img.e-com-net.com/image/info8/99803b99501a42689a353f74c8a2aa70.jpg" width="650" style="border:1px solid black;"></a></p> <pre class="has"><code><label><input type="radio" name="sex" value="male">男</label> <input id="text1" type="text">  <label for="text1">新闻报道称，</label></code></pre> <p style="text-indent:50px;">2. 表单控件分组标签：<fieldset></p> <p style="text-indent:50px;">双标签，块状元素，创建一个分组区域。主要用于将表单内容的相关控件进行分组，便于辨识或区分，默认会呈现区域边框效果</p> <p style="text-indent:50px;">表单控件分组标题标签：<legend></p> <pre class="has"><code><fieldset> <legend>分组2</legend> <input id="text1" type="text">  <label for="text1">新闻报道称，</label> </fieldset> </code></pre> <p>效果图：</p> <p><a href="http://img.e-com-net.com/image/info8/edc84edfda11448594eb6f9eb5ff289b.png" target="_blank"><img alt="" class="has" height="95" src="http://img.e-com-net.com/image/info8/edc84edfda11448594eb6f9eb5ff289b.png" width="932"></a></p> <p><strong>表单CSS样式</strong></p> <p style="text-indent:50px;">表单样式默认存在的问题及缺陷：</p> <p style="text-indent:50px;"> 1. 在不同的操作系统或浏览器中，表单样式的呈现效果会有差异。</p> <p style="text-indent:50px;"> 2. 这些差异主要表现在选择类的白哦单元素上（单选/多选/下拉列表）</p> <p style="text-indent:50px;">表单样式的应用技巧：</p> <p style="text-indent:50px;"> 1. 针对整个表单区域的内容，结合布局类标签进行排版</p> <p style="text-indent:50px;"> 2. 将单个表单元素，都看作盒子模型容器来进行样式美化</p> <p style="text-indent:50px;"> 3. 针对控件的样式没画，重点放在输入框类控件和按钮类控件。</p> <p style="text-indent:0;"><strong>登录界面实例</strong></p> <p style="text-indent:50px;">html文件：</p> <pre class="has"><code><!doctype html> <html> <head> <meta charset="utf-8"> <title>用户登录实例</title> <style> * { margin:0; padding:0;} body { font-family:'微软雅黑'; background:#eee;} #userlogin { width:300px; background:white; margin:30px; padding:25px; margin:0 auto; } #userlogin h3 { font-size:16px; line-height:2em; margin-bottom:25px;} #userlogin .input-text { font-family:'微软雅黑'; border:1px black solid; padding-left:10px; height:40px; width:288px; font-size:16px; margin-bottom:20px;} #userlogin .input-btn { display:block; width:300px; height:40px; border:none; background:#9a0002; color:white; font-size:16px; font-weight:bold; letter-spacing:5px; text-align:center; border-radius:5px; margin-bottom:15px; } #userlogin .input-btn:hover { background:#d10003; cursor:pointer; }/*cursor属性：设置鼠标的显示形状。poi是指的手型nter*/ #userlogin h6 { text-align:right;} #userlogin h6 a { color:#999; text-decoration:none; margin-right:12px; } #userlogin h6 a:hover {color:#c81d1f; } </style> </head> <body> <form action="#" method="post" name="userlogin" id="userlogin"> <h3>密码登录</h3> <p><input class="input-text" type="text" placeholder="手机号/会员名/邮箱" autofocus required ></p> <p><input class="input-text" type="password" required></p> <p><input class="input-btn" type="submit" value="登录"></p> <h6><a href="#">忘记密码</a><a href="#">免费注册</a></h6> </form> </body> </html> </code></pre> <p>效果图：</p> <p><a href="http://img.e-com-net.com/image/info8/6eb1ee39b35e41a19bd844d99a0284f2.png" target="_blank"><img alt="web前端学习笔记（四）——表单_第11张图片" class="has" height="423" src="http://img.e-com-net.com/image/info8/6eb1ee39b35e41a19bd844d99a0284f2.png" width="522" style="border:1px solid black;"></a></p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1282485162608705536"></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">你可能感兴趣的:(web前端)</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/1835005024372092928.htm" title="【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”" target="_blank">【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”</a> <span class="text-muted">coderYYY</span> <a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/bug%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">bug解决方案</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/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a> <div>作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》自从半月前，通义灵码一运行就会报这个错尝试了以下方法，都无法解决：阿里云官方方法：删除c盘的.lingma卸载重新安装通义灵码以管理员身份运行VSCode防火墙设置准入安装之前的版本最后是在扩展设置里面解决的路径不填也可</div> </li> <li><a href="/article/1835004897926410240.htm" title="微信小程序生成小程序转发链接，携带参数跳转到另外一个页面" target="_blank">微信小程序生成小程序转发链接，携带参数跳转到另外一个页面</a> <span class="text-muted">coderYYY</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E6%95%99%E7%A8%8B%E4%BB%A5%E5%8F%8A%E4%BB%A3%E7%A0%81/1.htm">前端项目教程以及代码</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1/1.htm">微信</a> <div>作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》✨一、前言需求：在页面A生成分享链接（携带参数），分享到微信聊天后，好友点击链接可跳转到页面B，页面B可获取到参数二、具体实现pageA（生成链接页面）：通过给button组件设置属性</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/1834624305535741952.htm" title="JavaScript 中 xml 的解析（dom4j 解析器），web前端开发规范手册" target="_blank">JavaScript 中 xml 的解析（dom4j 解析器），web前端开发规范手册</a> <span class="text-muted">2401_84094868</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>创建元素：Elementschool=DocumentHelper.createElement(“school”);创建文本：school.addText(“光明小学”);指定位置添加：list.add(1,school);回写xml：和在末尾添加一样7、获取属性值attributeValue()：获取属性值publicstaticvoidmain(String[]args)throwsDocum</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/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/1833525688494288896.htm" title="web前端基础——第八章" target="_blank">web前端基础——第八章</a> <span class="text-muted">ZiminLi</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%E7%AC%94%E8%AE%B0/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/javascript/1.htm">javascript</a> <div>目录八十五、对象的简介和基本操作八十六、属性名和属性值八十七、基本数据类型和引用数据类型八十八、对象字面量八十九、函数的简介九十、函数的参数九十一、函数的返回值九十二、实参可以是任何值九十三、返回值的类型九十四、立即执行函数九十五、方法九十六、枚举对象中的属性九十七、作用域（Scope）全局作用域变量的声明提前函数作用域九十八、this九十九、使用工厂方法创建对象一百、构造函数一百零一、原型对象一</div> </li> <li><a href="/article/1833472993293070336.htm" title="HTML 文本标签" target="_blank">HTML 文本标签</a> <span class="text-muted">一壶浊酒..</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一个静态页面绝大部分都是由文字、图片、超链接、音频、视频组成。动态页面和静态页面的区别在于：是否与服务器进行数据交互标题标签这是一级标题这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题web前端开发床前明月光，疑是地上霜。举头望明月，低头思故乡这是普通文本这是粗体文本这是粗体文本斜体文本斜体文本斜体文本--->(a+b)2=a2+b2+2abH2SO4是指硫酸分子水果原价：6元现在：5</div> </li> <li><a href="/article/1833257537026224128.htm" title="利用PHP和Selenium自动化采集数据、实现爬虫抓取" target="_blank">利用PHP和Selenium自动化采集数据、实现爬虫抓取</a> <span class="text-muted">IT大数据小助手</span> <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a> <div>随着互联网时代的到来，抓取互联网上的数据成为越来越重要的工作。在web前端开发领域，我们经常需要获取页面中的数据来完成一系列的交互操作，为了提高效率，我们可以将这个工作自动化。本文将介绍如何利用PHP和Selenium进行自动化数据采集和爬虫抓取。一、什么是SeleniumSelenium是一个免费的开源自动化测试工具，主要用于自动化测试Web应用程序，可以模拟真实的用户行为，实现自动交互。使用S</div> </li> <li><a href="/article/1833132711049523200.htm" title="web前端，JavaScript字符串和数组，练习题:邮箱格式是否正确，登录名和密码格式是否正确" target="_blank">web前端，JavaScript字符串和数组，练习题:邮箱格式是否正确，登录名和密码格式是否正确</a> <span class="text-muted">奔向我</span> <div>length属性，返回的是字符串的长度indexOf（）方法用于获取字符串中返回指定字符串第一次出现的位置（注意:索引从0开始，找不到返回-1）indexOf（）方法是从数组中检查指定数据的位置（从后往前找第一个），不存在返回-1includes（）方法，从数组中检查指定的数据是否存在，存在返回true,不存在返回falsepush（）方法，向数组的末尾添加一个或更多的元素，并返回新的长度spli</div> </li> <li><a href="/article/1833077712646926336.htm" title="Web前端最全初识Sentry前端监控，浅谈前端消息机制原理" target="_blank">Web前端最全初识Sentry前端监控，浅谈前端消息机制原理</a> <span class="text-muted">2401_84433924</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/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/sentry/1.htm">sentry</a> <div>Vue编码基础2.1.1.组件规范2.1.2.模板中使用简单的表达式2.1.3指令都使用缩写形式2.1.4标签顺序保持一致2.1.5必须为v-for设置键值key2.1.6v-show与v-if选择2.1.7script标签内部结构顺序2.1.8VueRouter规范Vue项目目录规范2.2.1基础2.2.2使用Vue-cli脚手架2.2.3目录说明2.2.4注释说明2.2.5其他开源分享：【大厂</div> </li> <li><a href="/article/1833006486490542080.htm" title="web前端 ios性能问题" target="_blank">web前端 ios性能问题</a> <span class="text-muted">zhenryx</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.禁止用户拖拽标签-webkit-user-drag:none;2.禁止用户选择标签user-select:none;//-webkit-touch-callout:none;///*系统默认菜单被禁用*/-webkit-user-select:none;/*webkit浏览器*/-khtml-user-select:none;/*早期浏览器*/-moz-user-select:none;/*火</div> </li> <li><a href="/article/1832121609838751744.htm" title="html如何嵌套页面？<iframe>标签告诉你答案" target="_blank">html如何嵌套页面？<iframe>标签告诉你答案</a> <span class="text-muted">PHP9年架构师</span> <div>本篇文章主要为大家介绍了htmliframe标签的介绍，让大家知道怎么通过iframe标签来为网页嵌套页面，内容很简单，大家照着这上面的来，多实践几次就懂了。希望大家都能好好学习，现在让我们来看这篇文章吧。web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线）在这里小编首先介绍的是HTML中iframe标签的用法：怎么在一个网页中嵌入另一个网页呢，我们可以用html中的iframe标签搞定</div> </li> <li><a href="/article/1831717079955369984.htm" title="Web前端最新2024 用好这 8 个工具，提升前端工程师软技能(3)，三面头条+四面阿里+五面腾讯拿offer分享面经总结" target="_blank">Web前端最新2024 用好这 8 个工具，提升前端工程师软技能(3)，三面头条+四面阿里+五面腾讯拿offer分享面经总结</a> <span class="text-muted">2401_84433769</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/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/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。WINTERISCOMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自</div> </li> <li><a href="/article/1831717080584515584.htm" title="Web前端最新2024 跳槽涨薪必不可少面试通关宝典 —— css 篇(1)，Web前端面试题初级" target="_blank">Web前端最新2024 跳槽涨薪必不可少面试通关宝典 —— css 篇(1)，Web前端面试题初级</a> <span class="text-muted">2401_84433769</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/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/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>结尾正式学习前端大概3年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】取消盒子的</div> </li> <li><a href="/article/1831551939771461632.htm" title="linux的webkit桌面应用,使用node-webkit构建桌面应用程序" target="_blank">linux的webkit桌面应用,使用node-webkit构建桌面应用程序</a> <span class="text-muted">萌萌爱恋</span> <div>Web前端的现状目前的Web前端的现状较之5-6年前，简直不能同日而语：从所使用的技术、工具、框架到开发一个产品所需要付出的工作量，从前端开发从业人员的数量到Web应用的数量，从企业对于Web前端的重要程度的认识到Web实际上为企业带来的回报，一切都有了翻天覆地的变化。借助HTML5+CSS3的普及，加上一些开箱即用的CSS框架(如bootstrap，foundation等)支持，人们已经可以非常</div> </li> <li><a href="/article/1830276699439329280.htm" title="【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~" target="_blank">【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~</a> <span class="text-muted">南北极之间</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E7%89%B9%E6%95%88%E6%BA%90%E7%A0%81/1.htm">web前端特效源码</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%85%A5%E9%97%A8/1.htm">编程入门</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E7%BC%96%E7%A8%8B%E5%85%A5%E9%97%A8%E4%BB%A3%E7%A0%81/1.htm">网页设计编程入门代码</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>bilibili在线视频演示地址：【web前端特效源码】使用HTMLCSS和JavaScript制作一个五星评价的功能！可动态好评+差评+留言功能！效果图：</div> </li> <li><a href="/article/1829526035885027328.htm" title="Web前端" target="_blank">Web前端</a> <span class="text-muted">2301_78085386</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>网页开发学习内容:htmlcssJavaScript两个框架:VUE.jsElementUIUI->userinterface用户界面html(HyperTextMarkupLanguage):超文本标记语言文本:文字字符超文本:网页内容标记:标签标识例如商品上的标签,介绍了商品的信息html语言就是一种标记语言,提供许多的标签,不同的标签功能不同,网页就是通过这些标签描述出来的,最终通过浏览器解</div> </li> <li><a href="/article/1829250106055028736.htm" title="【面试题】JavaScript 中 try" target="_blank">【面试题】JavaScript 中 try</a> <span class="text-muted">2401_84438488</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>地址：前端面试题库web前端面试题库VSjava后端面试题库大全作为一位Web前端工程师，JavaScript中的try...catch是我们常用的特性之一。try...catch可以捕获代码中的异常并防止应用程序崩溃。但是try...catch不仅仅是简单地捕获异常。本文我将分享10个有用的try...catch使用技巧，让你在处理异常时更加得心应手。1.捕获所有异常如果你想捕获代码中所有可能的</div> </li> <li><a href="/article/1828906454971674624.htm" title="新书速览|HTML5+CSS3 Web前端开发与实例教程：微课视频版" target="_blank">新书速览|HTML5+CSS3 Web前端开发与实例教程：微课视频版</a> <span class="text-muted">全栈开发圈</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>《HTML5+CSS3Web前端开发与实例教程：微课视频版》本书内容《HTML5+CSS3Web前端开发与实例教程：微课视频版》秉承“思政引领，立德树人”的教育理念，自然融入多维度、深层次的思政元素，全面对标企业和行业需求；引入现代Web前端开发的核心技术，如Flex布局、Grid布局，以及人工智能编程插件，同时融入企业开发实践，确保学习内容与实际工作紧密相关。全书以一个完整案例为主线，结合综合项</div> </li> <li><a href="/article/1828737254584053760.htm" title="王者荣耀官网首页（xd原文件）" target="_blank">王者荣耀官网首页（xd原文件）</a> <span class="text-muted">无名指的等待712</span> <a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/xd/1.htm">xd</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1web前端开发者链接：https://pan.baidu.com/s/1nl9XmiyWnMs9gPCP1sN-3w提取码：hhss本文件是王者荣耀官网首页的XD源文件，玩游戏不如自己创造一个游戏。本文件可以锻炼一下大家的HTML5和css3的基础功底。</div> </li> <li><a href="/article/1828515021135638528.htm" title="60 个前端 Web 开发流行语你都知道哪些？" target="_blank">60 个前端 Web 开发流行语你都知道哪些？</a> <span class="text-muted">web18224617243</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</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%90%8E%E7%AB%AF/1.htm">后端</a> <div>??个人网站:【海拥】【摸鱼小游戏】??风趣幽默的前端学习课程：??28个案例趣学前端??想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】??免费且实用的计算机相关知识题库：??进来逛逛给大家安利一个免费且实用的前端刷题（面经大全）网站，??点击跳转到网站。不想在你朋友讨论Web前端开发时感到一头雾水？今天海海给大家带来了60个Web前端开发的术语，看看你知道的有多少。以下列表是按照字母顺序排</div> </li> <li><a href="/article/1827536338954579968.htm" title="html语言三要素是,Web前端开发的三要素是什么？" target="_blank">html语言三要素是,Web前端开发的三要素是什么？</a> <span class="text-muted">KNSTY</span> <a class="tag" taget="_blank" href="/search/html%E8%AF%AD%E8%A8%80%E4%B8%89%E8%A6%81%E7%B4%A0%E6%98%AF/1.htm">html语言三要素是</a> <div>Web前端开发是由网页制作演变而来的，现在很多网站开发会用到web前端开发。Web前端开发主要包括三个要素分别是：HTML、CSS、JavaScript等，但是随着互联网时代的飞速发展，前端开发技术的三要素也演变成现今的HTML5、CSS3、jQuery，首先，第一要素为HTML5.HTML5是超文本标记语言的第五次重大修改，HTML5在HTML的基础上引进了新的功能，可以真正改变用户与文档的交互</div> </li> <li><a href="/article/1826966848713879552.htm" title="WEB网页设计期末作业个人主页——基于HTML+CSS制作个人简介网站" target="_blank">WEB网页设计期末作业个人主页——基于HTML+CSS制作个人简介网站</a> <span class="text-muted">html5网页设计</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/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%BD%9C%E4%B8%9A/1.htm">期末网页设计作业</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%88%B6%E4%BD%9C/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/html%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html期末大作业</a> <div>精彩专栏推荐✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【echarts大屏展示大数据平台可视化(150套)】免费且实用的WEB前端学习指南：【web前端零基础到高级学习视频教程120G干</div> </li> <li><a href="/article/1826892358063583232.htm" title="大学生HTML期末大作业——HTML+CSS+JavaScript购物商城（美食）" target="_blank">大学生HTML期末大作业——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/html/1.htm">html</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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%AD%A6%E7%94%9F/1.htm">大学生</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">大作业</a><a class="tag" taget="_blank" href="/search/web%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">web网页设计</a> <div>HTML+CSS+JS【购物商城】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目购物商城美食7页含jQuery登录注册二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证</div> </li> <li><a href="/article/1826846473006968832.htm" title="应届生web前端面试题_史上最全前端面试题(含答案)" target="_blank">应届生web前端面试题_史上最全前端面试题(含答案)</a> <span class="text-muted">秦天生</span> <a class="tag" taget="_blank" href="/search/%E5%BA%94%E5%B1%8A%E7%94%9Fweb%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">应届生web前端面试题</a> <div>2015-10-3006:30:03阅读(385)HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；2.xhtml</div> </li> <li><a href="/article/1826842440653434880.htm" title="搜集来的web前端面试题" target="_blank">搜集来的web前端面试题</a> <span class="text-muted">Mirana_77</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/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a> <div>周五要面试web前端orz搜集下面试题1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。2、行内元素有哪些？块级元素</div> </li> <li><a href="/article/49.htm" title="辗转相处求最大公约数" target="_blank">辗转相处求最大公约数</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E6%BC%8F%E6%B4%9E/1.htm">漏洞</a> <div>无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！为此，总结一下以方便日后忘了好查找。 1.输入要比较的两个数a,b 忽略：2.比较大小（因为后面要的是大的数对小的数做%操作） 3.辗转相除（用循环不停的取余，如a%b,直至b=0） 4.最后的a为两数的最大公约数 &</div> </li> <li><a href="/article/176.htm" title="F5负载均衡会话保持技术及原理技术白皮书" target="_blank">F5负载均衡会话保持技术及原理技术白皮书</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a><a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/1.htm">负载均衡</a> <div>一.什么是会话保持？在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下</div> </li> <li><a href="/article/303.htm" title="Object.equals方法：重载还是覆盖" target="_blank">Object.equals方法：重载还是覆盖</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/generics/1.htm">generics</a><a class="tag" taget="_blank" href="/search/override/1.htm">override</a><a class="tag" taget="_blank" href="/search/overload/1.htm">overload</a> <div>本文译自StackOverflow上对此问题的讨论。原问题链接在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： “不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” pu</div> </li> <li><a href="/article/430.htm" title="初始线程" target="_blank">初始线程</a> <span class="text-muted">15700786134</span> <div> 暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： public class ShapeFr</div> </li> <li><a href="/article/557.htm" title="Linux的tcpdump" target="_blank">Linux的tcpdump</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/tcpdump/1.htm">tcpdump</a> <div>用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。实用命令实例默认启动 tcpdump 普通情况下，直</div> </li> <li><a href="/article/684.htm" title="安卓程序listview优化后还是卡顿" target="_blank">安卓程序listview优化后还是卡顿</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/ListView/1.htm">ListView</a> <div>最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 &nb</div> </li> <li><a href="/article/811.htm" title="扩展easyUI tab控件，添加加载遮罩效果" target="_blank">扩展easyUI tab控件，添加加载遮罩效果</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>(function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs(&</div> </li> <li><a href="/article/938.htm" title="gradle上传jar到nexus" target="_blank">gradle上传jar到nexus</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/gradle/1.htm">gradle</a> <div>原文地址： https://docs.gradle.org/current/userguide/maven_plugin.html configurations { deployerJars } dependencies { deployerJars "org.apache.maven.wagon</div> </li> <li><a href="/article/1065.htm" title="千万条数据外网导入数据库的解决方案。" target="_blank">千万条数据外网导入数据库的解决方案。</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>从某网上爬了数千万的数据，存在文本中。然后要导入mysql数据库。悲剧的是数据库和我存数据的服务器不在一个内网里面。。 ping了一下， 19ms的延迟。于是下面的代码是没用的。 ps = con.prepareStatement(sql); ps.setString(1, info.getYear())............; ps.exec</div> </li> <li><a href="/article/1192.htm" title="JAVA IO InputStreamReader和OutputStreamReader" target="_blank">JAVA IO InputStreamReader和OutputStreamReader</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JAVA.io%E6%93%8D%E4%BD%9C+%E5%AD%97%E7%AC%A6%E6%B5%81/1.htm">JAVA.io操作字符流</a> <div>这是第三篇关于java.io的文章了，从开始对io的不了解-->熟悉--->模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励我会更加的去学加油！： JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流字节流和字符的难点：a,怎么将读到的数据</div> </li> <li><a href="/article/1319.htm" title="MO、MT解读" target="_blank">MO、MT解读</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/GSM/1.htm">GSM</a> <div>MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息；上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP</div> </li> <li><a href="/article/1446.htm" title="五个JavaScript基础问题" target="_blank">五个JavaScript基础问题</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/call/1.htm">call</a><a class="tag" taget="_blank" href="/search/apply/1.htm">apply</a><a class="tag" taget="_blank" href="/search/this/1.htm">this</a><a class="tag" taget="_blank" href="/search/Hoisting/1.htm">Hoisting</a> <div>下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。问题1：Scope作用范围考虑下面的代码： (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？回答：上面的代码会打印 5。 &nbs</div> </li> <li><a href="/article/1573.htm" title="【Thrift二】Thrift Hello World" target="_blank">【Thrift二】Thrift Hello World</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Hello+world/1.htm">Hello world</a> <div>本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程 1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 <dependency> </div> </li> <li><a href="/article/1700.htm" title="【Avro一】Avro入门" target="_blank">【Avro一】Avro入门</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/%E5%85%A5%E9%97%A8/1.htm">入门</a> <div>本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。 1. 添加Maven依赖 <?xml version="1.0" encoding="UTF-8"?> <proj</div> </li> <li><a href="/article/1827.htm" title="安装nginx+ngx_lua支持WAF防护功能" target="_blank">安装nginx+ngx_lua支持WAF防护功能</a> <span class="text-muted">ronin47</span> <div>需要的软件:LuaJIT-2.0.0.tar.gz nginx-1.4.4.tar.gz &nb</div> </li> <li><a href="/article/1954.htm" title="java-5.查找最小的K个元素-使用最大堆" target="_blank">java-5.查找最小的K个元素-使用最大堆</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Arrays; import java.util.Random; public class MinKElement { /** * 5.最小的K个元素 * I would like to use MaxHeap. * using QuickSort is also OK */ public static void</div> </li> <li><a href="/article/2081.htm" title="TCP的TIME-WAIT" target="_blank">TCP的TIME-WAIT</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a> <div>原文连接： http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 以下为对原文的阅读笔记说明：主动关闭的一方称为local end，被动关闭的一方称为remote end 本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 1、TIME_WA</div> </li> <li><a href="/article/2208.htm" title="jquery ajax 序列化表单" target="_blank">jquery ajax 序列化表单</a> <span class="text-muted">coder_xpf</span> <a class="tag" taget="_blank" href="/search/Jquery+ajax+%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">Jquery ajax 序列化</a> <div> checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值 <input type="checkbox" name="favor" id="favor" checked="checked"/> $("#favor&quo</div> </li> <li><a href="/article/2335.htm" title="Apache集群乱码和最高并发控制" target="_blank">Apache集群乱码和最高并发控制</a> <span class="text-muted">cuisuqiang</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/%E4%B9%B1%E7%A0%81/1.htm">乱码</a> <div>都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： <Connector maxThreads="300" port="8019" prot</div> </li> <li><a href="/article/2462.htm" title="websocket" target="_blank">websocket</a> <span class="text-muted">dalan_123</span> <a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a> <div>一、低延迟的客户端-服务器和服务器-客户端的连接很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长</div> </li> <li><a href="/article/2589.htm" title="菜鸟分析网络执法官" target="_blank">菜鸟分析网络执法官</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div> 最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道"人之患好为人师" 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. OK,闲话少说,切如正题. 要了解网络执法官的原理. 就要先了解局域网的通信的原理. 前面我们看到了.在以太网上传输的都是具有以太网头的数据包. </div> </li> <li><a href="/article/2716.htm" title="Android相对布局属性全集" target="_blank">Android相对布局属性全集</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>RelativeLayout布局android:layout_marginTop="25dip" //顶部距离android:gravity="left" //空间布局位置android:layout_marginLeft="15dip //距离左边距 // 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的</div> </li> <li><a href="/article/2843.htm" title="Tomcat内存设置详解" target="_blank">Tomcat内存设置详解</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/tomcat%E5%86%85%E5%AD%98%E8%AE%BE%E7%BD%AE/1.htm">tomcat内存设置</a> <div>Java内存溢出详解一、常见的Java内存溢出有以下三种： 1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。可以利用JVM提</div> </li> <li><a href="/article/2970.htm" title="Java6 JVM参数选项" target="_blank">Java6 JVM参数选项</a> <span class="text-muted">greatwqs</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jvm%E5%8F%82%E6%95%B0/1.htm">jvm参数</a><a class="tag" taget="_blank" href="/search/JVM+Options/1.htm">JVM Options</a> <div>Java 6 JVM参数选项大全（中文版）作者：Ken Wu Email: ken.wug@gmail.com 转载本文档请注明原文链接 http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt</div> </li> <li><a href="/article/3097.htm" title="weblogic创建JMC" target="_blank">weblogic创建JMC</a> <span class="text-muted">i5land</span> <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a> <div>进入 weblogic控制太 1.创建持久化存储 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 2.创建JMS服务器 --Services--Messaging--JMS Servers--new--name随便起--Pers</div> </li> <li><a href="/article/3224.htm" title="基于 DHT 网络的磁力链接和BT种子的搜索引擎架构" target="_blank">基于 DHT 网络的磁力链接和BT种子的搜索引擎架构</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/DHT/1.htm">DHT</a> <div>上周开发了一个磁力链接和 BT 种子的搜索引擎 {Magnet & Torrent}，本文简单介绍一下主要的系统功能和用到的技术。系统包括几个独立的部分：使用 Python 的 Scrapy 框架开发的网络爬虫，用来爬取磁力链接和种子；使用 PHP CI 框架开发的简易网站；搜索引擎目前直接使用的 MySQL，将来可以考虑使</div> </li> <li><a href="/article/3351.htm" title="sql添加、删除表中的列" target="_blank">sql添加、删除表中的列</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>添加没有默认值：alter table Test add BazaarType char(1) 有默认值的添加列：alter table Test add BazaarType char(1) default(0) 删除没有默认值的列：alter table Test drop COLUMN BazaarType 删除有默认值的列：先删除约束（默认值）alter table Test DRO</div> </li> <li><a href="/article/3478.htm" title="PHP中二维数组的排序方法" target="_blank">PHP中二维数组的排序方法</a> <span class="text-muted">abc123456789cba</span> <a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div><?php/*** @package BugFree* @version $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level </div> </li> <li><a href="/article/3605.htm" title="hive优化之------控制hive任务中的map数和reduce数" target="_blank">hive优化之------控制hive任务中的map数和reduce数</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/hive%E4%BC%98%E5%8C%96/1.htm">hive优化</a> <div>一、控制hive任务中的map数: 1. 通常情况下，作业会通过input的目录产生一个或者多个map任务。主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2. </div> </li> <li><a href="/article/3732.htm" title="Spring Boot 1.2.4 发布" target="_blank">Spring Boot 1.2.4 发布</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring+boot/1.htm">spring boot</a> <div>Spring Boot 1.2.4已于6.4日发布，repo.spring.io and Maven Central可以下载(推荐使用maven或者gradle构建下载)。这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。 Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多</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.  </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>