power._

【狂神说Java】HTML快速入门

1.初识HTML
2.网页基本信息
3.网页基本标签
4.图像标签
5.超链接标签应用
6.行内元素和块元素
7.列表标签
8.表格标签
9.媒体元素
10.页面结构分析
11.iframe内联框架
12.初始表单post和get提交
13.文本框和单选框
14.按钮和多选框
15.列表框文本域和文件域
16.搜索框滑块和简单验证
17.表单的应用
18.表单初级验证

文章根据B站狂神说Java视频教程，视频链接：https://space.bilibili.com/95256449。

初始HTML
网页基本标签
图像，超链接，网页布局
列表，表格，媒体元素
表单及表单应用
表单初级验证

1.初识HTML

什么是HTML

HTML
- Hyper Text Markup Language（超文本标记语言）

HTML发展史

HTML的优势

世界知名浏览器厂商对HTML5的支持
- 微软
- Google
- 苹果
- Opera
- Mozilla
市场的需求
跨平台

W3C标准

W3C
- World Wide Web Consortium
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）

常见IDE

记事本
Dreamweaver
IDEA（咱们用IDEA）
WebStorm
…等等

HTML基本结构

2.网页基本信息

网页基本信息

DOCTYPE声明
标签</li> <li><tmeta>标签</li> </ul> <pre><code class="prism language-html"> <!DOCTYPE html> <html lang="en">  <head>   <meta charset="UTF-8"> <meta name="keywords" content="狂神说Java"> <meta name="description" content="来这个地方学习Java">  <title>Title</title> </head>  <body> Hello，World！ </body> </html> </code></pre> <h3>3.网页基本标签</h3> <blockquote> 网页基本标签 </blockquote> <ul> <li>标题标签</li> <li>段落标签</li> <li>换行标签</li> <li>水平线标签</li> <li>字体样式标签</li> <li>注释和特殊符号</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <body>  <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6>  <p>跑得快跑得快</p> <p>一只没有耳朵</p> <p>一只没有尾巴</p> <p>真奇怪真奇怪</p> <p>两只老虎两只老虎</p>  <hr/>  跑得快跑得快<br> 一只没有耳朵<br> 一只没有尾巴<br> 真奇怪真奇怪<br> 两只老虎两只老虎<br> <hr/>  粗体：<strong>i love you</strong> 斜体：<em>i love you</em> <br/>  空格：空 格  <br/> > <br/> < <br/> ©版权所有  </body> </html> </code></pre> <h3>4.图像标签</h3> <blockquote> 图像标签 </blockquote> <ul> <li>常见的图像格式 <ul> <li>JPG</li> <li>GIF</li> <li>PNG</li> <li>BMP（位图）</li> <li>…</li> </ul> </li> </ul> <pre><code class="prism language-html"><img src="path" alt="text" title="text" width="x" height="y" /> src：图像地址 alt：图像的替代文字 title：鼠标悬停提示文字 width：图像宽度 height：图像高度 </code></pre> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body>  <img src="../resources/img/1.jpg" alt="狂神头像" title="悬停文字" width="300" height="300"> </body> </html> </code></pre> <h3>5.超链接标签应用</h3> <blockquote> 链接标签 </blockquote> <ul> <li>文本超链接</li> <li>图像超链接</li> </ul> <pre><code class="prism language-html"><a href="链接路径" target="目标窗口位置">链接文本或图像</a> </code></pre> <blockquote> 超链接 </blockquote> <ul> <li>页面间链接：从一个页面跳转到另一个页面</li> <li>锚链接</li> <li>功能性链接</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签学习</title> </head> <body>  <a name="top">顶部</a>  <a href="#down">回到底部</a>  <a href="1.我的第一个HTML.html" target="_blank">点击我跳转到页面</a> <a href="https://baidu.com" target="_self">点击我跳转到百度</a> <br> <a href="1.我的第一个HTML.html"> <img src="../resources/img/1.jpg" alt="狂神头像" title="悬停文字" width="300" height="300"> </a>  <a href="#top">回到顶部</a> <a name="down">底部</a>  <a href="mailto:8629303@qq.com">点击联系我</a> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点击联系我" title="点击联系我"/> </a> </body> </html> </code></pre> <h3>6.行内元素和块元素</h3> <blockquote> 行内元素和块元素 </blockquote> <ul> <li>块元素 <ul> <li>无论内容多少，该元素独占一行</li> <li>（p、h1-h6…）</li> </ul> </li> <li>行内元素 <ul> <li>内容撑开宽度，左右都是行内元素的可以排在一行</li> <li>（a、strong、em…）</li> </ul> </li> </ul> <h3>7.列表标签</h3> <blockquote> 列表 </blockquote> <ul> <li>什么是列表 <ul> <li>列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应信息</li> </ul> </li> <li>列表的分类 <ul> <li>无序列表</li> <li>有序列表</li> <li>自定义列表</li> </ul> </li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表学习</title> </head> <body>  <ol> <li>Java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>C/C++</li> </ol> <hr>  <ul> <li>Java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>C/C++</li> </ul> <hr>  <dl> <dt>学科</dt> <dd>Java</dd> <dd>Python</dd> <dd>Linux</dd> <dd>C</dd> <dt>位置</dt> <dd>湖南</dd> <dd>广东</dd> </dl> </body> </html> </code></pre> <h3>8.表格标签</h3> <blockquote> 表格 </blockquote> <ul> <li>为什么使用表格 <ul> <li>简单通用</li> <li>结构稳定</li> </ul> </li> <li>基本结构 <ul> <li>单元格</li> <li>行</li> <li>列</li> <li>跨行</li> <li>跨列</li> </ul> </li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格学习</title> </head> <body>  <table border="1px"> <tr>  <td colspan="4">1-1</td> </tr> <tr>  <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> </body> </html> </code></pre> <h3>9.媒体元素</h3> <blockquote> 视频和音频 </blockquote> <ul> <li>视频元素：video</li> <li>音频元素：audio</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素学习</title> </head> <body>  <video src="../resources/video/xxx.mp4" controls autoplay></video> <audio src="../resources/audio/xxx.mp3" controls autoplay></audio> </body> </html> </code></pre> <h3>10.页面结构分析</h3> <blockquote> 页面结构分析 </blockquote> <table> <thead> <tr> <th>元素名</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>header</td> <td>标题头部区域的内容（用于页面或页面中的一块区域）</td> </tr> <tr> <td>footer</td> <td>标记脚部区域的内容（用于整个页面或页面的一块区域）</td> </tr> <tr> <td>section</td> <td>Web网页中的一块独立区域</td> </tr> <tr> <td>article</td> <td>独立的文章内容</td> </tr> <tr> <td>aside</td> <td>相关内容或应用</td> </tr> <tr> <td>nav</td> <td>导航类辅助内容</td> </tr> </tbody> </table> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构分析</title> </head> <body> <header> <h2>页面头部</h2> </header> <section> <h2>页面主体</h2> </section> <footer> <h2>页面底部</h2> </footer> </body> </html> </code></pre> <h3>11.iframe内联框架</h3> <blockquote> iframe内联框架 </blockquote> <pre><code class="prism language-html"><iframe src="path" name="mainFrame"></iframe> path:引用网页地址 mainFrame:框架标识名 </code></pre> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body>  <iframe src="http://baidu.com" frameborder="0" width="300px" height="300px"> </iframe> <iframe src="" name="hello" frameborder="0"></iframe> <a href="1.我的第一个HTML.html" target="hello">点击跳转</a> <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> </body> </html> </code></pre> <h3>12.初始表单post和get提交</h3> <a href="http://img.e-com-net.com/image/info8/fddbc12a7b3947fbb36e9ea715ada853.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fddbc12a7b3947fbb36e9ea715ada853.jpg" alt="【狂神说Java】HTML快速入门_第4张图片" width="650" height="330" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1>  <form action="1.我的第一个HTML.html" method="get">  <p>名称：<input type="text" name="username"></p>  <p>密码：<input type="password" name="pwd"></p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/c9039d5470f04550abe9aa3e6254196a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c9039d5470f04550abe9aa3e6254196a.jpg" alt="【狂神说Java】HTML快速入门_第5张图片" width="650" height="239" style="border:1px solid black;"></a> <h3>13.文本框和单选框</h3> <blockquote> 表单元素格式 </blockquote> <table> <thead> <tr> <th>属性</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button，默认text</td> </tr> <tr> <td>name</td> <td>指定表单元素的名称</td> </tr> <tr> <td>value</td> <td>元素的初始值。type为radio时必须指定一个值</td> </tr> <tr> <td>size</td> <td>指定表单元素的初始宽度。但type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。</td> </tr> <tr> <td>maxlength</td> <td>type为text或password时，输入的最大字符数</td> </tr> <tr> <td>checked</td> <td>type为radio或checkbox时，指定按钮是否被选中</td> </tr> </tbody> </table> <h3>14.按钮和多选框</h3> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1>  <form action="1.我的第一个HTML.html" method="get">  <p>名称：<input type="text" name="username" ></p>  <p>密码：<input type="password" name="pwd"></p>  <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex" checked/>女  <p>爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby" checked>敲代码 <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="game" name="hobby">游戏 </p>  <p> <input type="button" name="btn1" value="点击变长"> <input type="image" src="../resources/img/1.jpg"> </p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html> </code></pre> <h3>15.列表框文本域和文件域</h3> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1>  <form action="1.我的第一个HTML.html" method="get">  <p>名称：<input type="text" name="username" ></p>  <p>密码：<input type="password" name="pwd"></p>  <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex" checked/>女  <p>爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby" checked>敲代码 <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="game" name="hobby">游戏 </p>  <p> <input type="button" name="btn1" value="点击变长"> <input type="image" src="../resources/img/1.jpg"> </p> <p> <input type="submit"> <input type="reset"> </p>  <p>国家： <select name="列表名称"> <option value="china">中国</option> <option value="us">美国</option> <option value="eth" selected>瑞士</option> <option value="yd">印度</option> </select> </p>  <p>反馈： <textarea name="textarea" id="" cols="30" rows="10"></textarea> </p>  <p> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p> </form> </body> </html> </code></pre> <h3>16.搜索框滑块和简单验证</h3> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1>  <form action="1.我的第一个HTML.html" method="get">  <p>名称：<input type="text" name="username" ></p>  <p>密码：<input type="password" name="pwd"></p>  <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex" checked/>女  <p>爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby" checked>敲代码 <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="game" name="hobby">游戏 </p>  <p> <input type="button" name="btn1" value="点击变长"> <input type="image" src="../resources/img/1.jpg"> </p>  <p>国家： <select name="列表名称"> <option value="china">中国</option> <option value="us">美国</option> <option value="eth" selected>瑞士</option> <option value="yd">印度</option> </select> </p>  <p>反馈： <textarea name="textarea" id="" cols="30" rows="10"></textarea> </p>  <p> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p>  <p>邮件： <input type="email" name="email"> </p>  <p>URL： <input type="url" name="url"> </p>  <p>数字： <input type="number" name="num" max="100" min="0" size="10"> </p>  <p>音量： <input type="range" name="voice" min="0" max="100" step="2"> </p>  <p>搜索： <input type="search" name="search"> </p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html> </code></pre> <h3>17.表单的应用</h3> <blockquote> 表单的应用 </blockquote> <ul> <li>隐藏域：hidden</li> <li>只读：readonly</li> <li>禁用：disabled</li> </ul> <pre><code class="prism language-html">  <p> <label for="mark">你点我试试</label> <input type="text" id="mark"> </p> </code></pre> <h3>18.表单初级验证</h3> <blockquote> 表单初级验证 </blockquote> <ul> <li>常用方式 <ul> <li>placeholder：提示信息</li> <li>required：非空判断</li> <li>pattern：正则表达式</li> </ul> </li> </ul> <pre><code class="prism language-html"><p>名称：<input type="text" name="username" placeholder="请输入用户名"></p> <p>名称：<input type="text" name="username" required></p>  <p>自定义邮箱： <input type="text" name="diy" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/"> </p> </code></pre> <h3></h3> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1275985829117837312"></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/1897799060249702400.htm" title="前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？" target="_blank">前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？</a> m0_74823705 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>目录哪些方法会触发React重新渲染？重新渲染render会做些什么？setState()案例需求总结forceUpdate()案例需求总结props改变案例需求总结context改变案例需求总结哪些方法会触发React重新渲染？重新渲染render会做些什么？在React中，以下方法会触发重新渲染：setState()：当调用组件的setState方法并传入新的状态值时，React会触发重新渲染</div> </li> <li><a href="/article/1897794898040516608.htm" title="React基础教程（06）：条件渲染" target="_blank">React基础教程（06）：条件渲染</a> 叁拾舞 <a class="tag" taget="_blank" href="/search/React%E6%95%99%E7%A8%8B/1.htm">React教程</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>1条件渲染使用条件渲染，结合TodoList案例，进行完善，实现以下功能：当列表中的数据为空的时候，现实提示信息暂无待办事项当列表中存在数据的时候，提示信息消失这里介绍三种实现方式。注意这里的Empty是前端框架Antd的组件，如果安装了antd直接使用即可，如果没有安装可以用div代替也是可以的。这里为了更直观，所以使用了前端框架antd的Empty组件。1、三元操作符{/*方式一*/}{thi</div> </li> <li><a href="/article/1897777492081569792.htm" title="电商智能客服实战（三）-需求感知模块具体实现" target="_blank">电商智能客服实战（三）-需求感知模块具体实现</a> power-辰南 <a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E7%BA%A7AI%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/1.htm">企业级AI项目实战</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/NER/1.htm">NER</a><a class="tag" taget="_blank" href="/search/NLU/1.htm">NLU</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80/1.htm">自然语言</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/AGENT/1.htm">AGENT</a> <div>电商智能客服实战（一）—概要设计电商智能客服实战（二）需求感知模块模型微调实现一、整体架构设计1.1模块定位需求感知模块作为智能客服系统的前端处理单元，负责对用户输入进行多维度解析，输出结构化语义理解结果，为下游决策引擎提供数据支撑。1.2核心流程图用户输入需求感知模块情感分析NLU意图识别NER实体识别参数提取规划模块AutoGPT生成步骤规则引擎匹配反馈集成工具模块订单查询API工单API知识</div> </li> <li><a href="/article/1897775725063237632.htm" title="前端本地储存的方式汇总" target="_blank">前端本地储存的方式汇总</a> 懒羊羊我小弟 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/app/1.htm">app</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>JavaScript本地存储是Web开发中用于在客户端存储数据的重要技术，以下是常见方式及其区别和应用场景：一、WEB浏览器本地存储方式及特点1.1储存方式1.Cookie存储容量：约4KB（每个域名）。生命周期：可设置过期时间；默认随会话结束失效。作用域：同源页面共享。访问方式：通过document.cookie读写，每次HTTP请求自动携带。特点：支持服务器端操作（通过HTTP头），但存储效率</div> </li> <li><a href="/article/1897772190850412544.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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>用于实现任意组件中的通信，我们可以将数据放入到Vue原型中，这样就能实现vc与vm都能访问该数据我们需要一个能使用去使用$on或是$emit这里方法的东西，vc与vm都能调用这个方法，但是vm与vm最终在创建时都需要去寻找Vue的原型对象，所以说我们可以直接把Vue的原型对象当作是这个中间人bus在beforeCreate中我们就能去申明这个中间人将Student.vue中的信息发送给School</div> </li> <li><a href="/article/1897772064006270976.htm" title="自己的网页加一个搜索框，调用deepseek的API" target="_blank">自己的网页加一个搜索框，调用deepseek的API</a> Lkkkkkkkcy <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>一切源于一个学习黑马程序员视频的突发奇想在网页悬浮一个搜索按钮，点击可以实现调用deepseek文本模型回答你的问题前端实现前端使用vue实现的首先是整体页面：AIWidget.vue搜索{{item}}暂无搜索结果import{ref,watch}from"vue";import{Search}from"@element-plus/icons-vue";import{ElMessage}from</div> </li> <li><a href="/article/1897767772352475136.htm" title="利用golang embed特性嵌入前端资源问题解决" target="_blank">利用golang embed特性嵌入前端资源问题解决</a> Iam0x17 <a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>embed嵌入前端资源，配置前端路由的代码如下funcStartHttpService(portstring,assetsFsembed.FS)error{//r:=gin.Default()gin.SetMode(gin.ReleaseMode)r:=gin.New()r.Use(CORSMiddleware())//静态文件服务dist,err:=fs.Sub(assetsFs,"assets</div> </li> <li><a href="/article/1897751362511368192.htm" title="pythonvue自动化_Vue项目的自动化测试" target="_blank">pythonvue自动化_Vue项目的自动化测试</a> weixin_39617669 <a class="tag" taget="_blank" href="/search/pythonvue%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">pythonvue自动化</a> <div>Vue项目的自动化测试说到自动化测试，许多开发团队都是听说过、尝试过，但最后都止步于尝试，不能将TDD(测试驱动开发)、BDD(行为驱动开发)的完整流程贯彻到项目中。思考其中的原因：终究还是成本抵不上收益。很多后端开发人员可能写过很多自动化的单元测试代码，但是对前端测试一头雾水。这是因为相对于后端开发人员的自动化单元测试，前端的自动化测试成本更高。自动化测试就是通过自动化脚本将一个又一个测试用例串</div> </li> <li><a href="/article/1897725102892576768.htm" title="Springboot应用json数据传给前端首字母大写变小写的问题" target="_blank">Springboot应用json数据传给前端首字母大写变小写的问题</a> 珠峰日记 <a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>对接.net数据，属性首字母大写传给前端后自动转成了小写。解决思路网上有三种：1)如果没有使用fastjson(阿里巴巴出品),使用@JsonProperty("XXXX")的注解方式可以解决问题，XXXX就是转换成Json的属性名，但注意，只有放在getter上才是有效的，直接在属性上加没效果.(这说明spring默认的jackson类库处理是基于访问器。2)如果使用了fastjson,就用@J</div> </li> <li><a href="/article/1897692559916986368.htm" title="React生态、Vue生态与跨框架前端解决方案" target="_blank">React生态、Vue生态与跨框架前端解决方案</a> Coder LM Wang <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><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>React生态系统1基础框架React.js是一个用于构建UI的JavaScript库。2应用框架Next.js是基于React.js的完整应用框架。主要负责应用如何工作：应用架构：路由系统、页面结构渲染策略：服务端渲染(SSR)、静态生成(SSG)、客户端渲染性能优化：代码分割、图片优化、字体优化开发体验：热模块替换、TypeScript支持部署：Vercel平台集成、自托管选项3UI组件库MU</div> </li> <li><a href="/article/1897675268370264064.htm" title="vue3导入excel并解析excel数据渲染到表格中，纯前端实现。" target="_blank">vue3导入excel并解析excel数据渲染到表格中，纯前端实现。</a> m0_74825526 <a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>需求用户将已有的excel上传到系统，并将excel数据同步到页面的表格中进行二次编辑，由于excel数据不是最终数据，只是批量的一个初始模板，后端不需要存储，所以该功能由前端独立完成。吐槽系统中文件上传下载预览三部曲走了一遍，万万没想到还要自己实现同步数据。实际反手各种资料开始查阅，终于找到了可以完美实现该需求的方法，来记录下我的实现方案。希望对有需要的小伙伴有帮助。注意以下为正文（重要内容），</div> </li> <li><a href="/article/1897644125897945088.htm" title="Three.js 入门(补间动画Tween.js)" target="_blank">Three.js 入门(补间动画Tween.js)</a> 庸俗今天不摸鱼 <a class="tag" taget="_blank" href="/search/three.Js%E5%AD%A6%E4%B9%A0/1.htm">three.Js学习</a><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>本篇主要学习内容:Tween.Js补间动画点赞+关注+收藏=学会了1.什么是Tween.Js?TweenJS是一个由JavaScript语言编写的补间动画库，如果需要tweenjs辅助你生成动画，对于任何前端web项目，你都可以选择tweenjs库。如果你使用three.js开发web3d项目，使用tween.js辅助three.js生成动画效果也是比较好的选择。1.1)引入tween.Jsimp</div> </li> <li><a href="/article/1897627978502828032.htm" title="ThreeJS入门（140）：THREE.Mouse 知识详解，示例代码" target="_blank">ThreeJS入门（140）：THREE.Mouse 知识详解，示例代码</a> 还是大剑师兰特 <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/ThreeJS%E4%B8%AD%E6%96%87API%E5%85%A8%E8%A7%A3/1.htm">ThreeJS中文API全解</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%91%E5%B8%88/1.htm">大剑师</a><a class="tag" taget="_blank" href="/search/threejs%E6%95%99%E7%A8%8B/1.htm">threejs教程</a><a class="tag" taget="_blank" href="/search/threejs%E7%A4%BA%E4%BE%8B/1.htm">threejs示例</a><a class="tag" taget="_blank" href="/search/threejs%E5%85%A5%E9%97%A8/1.htm">threejs入门</a><a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a> <div>作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第140篇入门文章文章目录常量使用场景示例常量的使用总结THREE.MOUSE</div> </li> <li><a href="/article/1897577265630343168.htm" title="浏览器发请求不携 cookie （加了跨域失败）" target="_blank">浏览器发请求不携 cookie （加了跨域失败）</a> Wdc_12 <a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>1.发送请求后端产生的唯一的sessionid，服务器会通过HTTP响应头中的Set-Cookie字段将SessionID发送到客户端。客户端（浏览器）收到响应后，会将SessionID存储为cookie。但由于跨域了不自动携带cookie2.加withCredentials所以在前端加上了：myAxios.defaults.withCredentials=true3.出现了跨域的错误，CORS请</div> </li> <li><a href="/article/1897555698603061248.htm" title="网络空间安全（13）上传验证绕过" target="_blank">网络空间安全（13）上传验证绕过</a> IT 青年 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E5%AE%89%E7%9F%A5%E8%AF%86%E5%BA%93/1.htm">网安知识库</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%A9%BA%E9%97%B4%E5%AE%89%E5%85%A8/1.htm">网络空间安全</a> <div>前言上传验证绕过是一种网络安全攻击手段，攻击者利用目标系统或应用程序在文件上传过程中存在的漏洞，绕过文件上传的验证机制，上传恶意文件，从而实现对目标系统的攻击。一、常见类型客户端验证绕过定义：客户端验证通常通过JavaScript在浏览器中执行，用于检查文件类型、大小等。客户端验证绕过是指攻击者通过禁用JavaScript或修改前端代码，绕过这些验证。绕过方法：禁用JavaScript：直接在浏览</div> </li> <li><a href="/article/1897551408253693952.htm" title="0基础学前端---品优购项目Day14" target="_blank">0基础学前端---品优购项目Day14</a> 学代码的小前端 <a class="tag" taget="_blank" href="/search/0%E5%9F%BA%E7%A1%80%E5%AD%A6%E5%89%8D%E7%AB%AF/1.htm">0基础学前端</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><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>0基础学前端—品优购项目Day14视频参考：B站Pink老师本节重点：all项目链接：完整的项目已放到品优购完整项目大家可以自行下载强调内容这里主要强调两个知识点：(1)网站TDK三个标签SEO优化(2)logoSEO优化网站TDK三个标签SEO优化T:title网站名（产品名）网站的介绍D:网站是做什么的K:关键字6~8个最好logoSEO优化（1）logo里面首先放一个h1标签，目的是为了提权</div> </li> <li><a href="/article/1897517846397775872.htm" title="VUE + Jquery 集成的一个简易数学公式编辑器" target="_blank">VUE + Jquery 集成的一个简易数学公式编辑器</a> 今天也想MK代码 <a class="tag" taget="_blank" href="/search/%E5%8A%AA%E5%8A%9B%E6%8A%8A%E6%83%B3%E6%B3%95%E5%AE%9E%E7%8E%B0/1.htm">努力把想法实现</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>前端数学公式自定义编辑界面可自定义未知数、运算符号、函数自己写的一个数学公式简单编辑器，本想找开源，无奈找不到。如果有开源，请发我一份，参考参考。在此感谢。静态1、简单公式：例如x+y将公式中的变量（x,y）以及运算符(+,-)放在一个数组中，遍历这个这个数组组成一个html字符串，然后显示在页面。数组定义为：type定义是值还是运算符valueDatas:[{type:'value',domTy</div> </li> <li><a href="/article/1897508392172318720.htm" title="微信小程序封装request请求" target="_blank">微信小程序封装request请求</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%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>目录1、封装的必要性1.1封装的原则1.2微信小程序封装遇到的问题1.3改进封装，使得能对拿到的结果进行不同的处理1.4最终调用结束语1、封装的必要性在编写前端代码时，最离不开的就是发送网络请求了，但在发送网络请求时，许多内容都是重复使用的。会造成代码的冗余，例如，我们在网络请求失败的时候，可能都是只需要提示一下请求失败就好了。1.1封装的原则我们在封装时，把各个请求相同的部分进行封装就好了，不同</div> </li> <li><a href="/article/1897494396287381504.htm" title="VSCode 配置优化指南：打造极致高效的前端开发环境" target="_blank">VSCode 配置优化指南：打造极致高效的前端开发环境</a> 超级小狗 <a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>VSCode配置优化指南：打造极致高效的前端开发环境一、基础环境配置：让开发更流畅1.性能优化设置//settings.json{"files.autoSave":"afterDelay",//自动保存（延迟1秒）"files.exclude":{//隐藏非必要文件"**/.git":true,"**/.DS_Store":true,"**/node_modules":true//大型项目建议保留</div> </li> <li><a href="/article/1897461426549747712.htm" title="园区环境数字化管理系统（源码+文档+讲解+演示）" target="_blank">园区环境数字化管理系统（源码+文档+讲解+演示）</a> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D/1.htm">开源项目介绍</a> <div>引言随着工业化和城市化的快速发展，园区环境管理面临着越来越多的挑战。园区环境数字化管理系统通过数字化手段，为园区管理者提供了一个高效、透明、智能的管理平台。本文将详细介绍园区环境数字化管理系统的功能、技术架构以及其在提升园区环境管理效率中的优势。系统概述园区环境数字化管理系统采用前后端分离的架构设计，服务端基于MySQL5.7+、JDK1.8+和Redis，前端则采用Vue2.6.14和Eleme</div> </li> <li><a href="/article/1897461355783450624.htm" title="python和单片机能一块学吗_现在学单片机还有前途吗" target="_blank">python和单片机能一块学吗_现在学单片机还有前途吗</a> weixin_39927288 <a class="tag" taget="_blank" href="/search/python%E5%92%8C%E5%8D%95%E7%89%87%E6%9C%BA%E8%83%BD%E4%B8%80%E5%9D%97%E5%AD%A6%E5%90%97/1.htm">python和单片机能一块学吗</a> <div>0培训班现状观察如今的软件职业培训行业发展如火如荼，变着花样推出各种前端定向就业班，Python就业班，UI设计班等培训课程，这样的广告更是铺天盖地，席卷整个网络世界。它给很多人的感觉就是做程序员真赚钱。做前端、互联网的程序员更赚钱，我要立刻报名改变自身的处境，哪怕以一头如黑珍珠般亮丽的秀发为代价。而我从事的单片机行业，前几年的培训风还是吹起了浪，似于Linux驱动开发，安卓底层开发等，但是这阵风</div> </li> <li><a href="/article/1897452525955641344.htm" title="深入理解 React.js：构建现代 Web 应用的核心技术" target="_blank">深入理解 React.js：构建现代 Web 应用的核心技术</a> 布兰妮甜 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E4%B8%BA/1.htm">行为</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/React/1.htm">React</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/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>Hi，我是布兰妮甜！React.js是由Facebook开发并开源的一个用于构建用户界面的JavaScript库。自2013年发布以来，React迅速成为前端开发领域的主流工具之一。其组件化、声明式编程模型以及高效的虚拟DOM技术，使得开发者能够轻松构建高性能、可维护的Web应用。本文将深入探讨React.js的核心概念、优势以及如何在实际项目中应用。文章目录一、React.js的核心概念二、Re</div> </li> <li><a href="/article/1897451517569462272.htm" title="使用Webpack搭建React脚手架（下篇）" target="_blank">使用Webpack搭建React脚手架（下篇）</a> Web_linlan <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一套完善的开发环境配置可以极大的提升开发效率，提高代码质量，方便多人合作，以及后期的项目迭代和维护。所以说，前端代码格式规范和语法检测的工具可以提高代码的质量和可读性，减少低级错误和维护成本，提高团队的协作效率和开发效率，是非常有必要的。本篇我们将完善脚手架的搭建。代码格式规范和语法检测工具1，EditorConfig：EditorConfig是一个用于统一编辑器和IDE的配置文件的工具。它可以帮</div> </li> <li><a href="/article/1897444460975943680.htm" title="工程化与框架系列（19）--前端安全防护" target="_blank">工程化与框架系列（19）--前端安全防护</a> 一进制ᅟᅠ ‌‍‎‏ <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E4%B8%8E%E6%A1%86%E6%9E%B6/1.htm">前端工程化与框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>前端安全防护引言随着Web应用的普及，前端安全问题日益突出。本文将深入探讨前端安全的各种威胁及其防护措施，帮助开发者构建更加安全的Web应用。在当今复杂的网络环境中，理解并实施有效的安全策略已经成为前端开发者的必备技能。前端安全概述前端安全是指保护Web应用的客户端部分免受恶意攻击的一系列技术和实践。虽然后端安全同样重要，但前端作为直接面向用户的界面，往往成为攻击者的首要目标。前端安全威胁主要包括</div> </li> <li><a href="/article/1897438283986694144.htm" title="文件上传和下载前后端交互逻辑" target="_blank">文件上传和下载前后端交互逻辑</a> 前端_yu小白 <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/1.htm">文件上传</a><a class="tag" taget="_blank" href="/search/%E4%B8%8B%E8%BD%BD/1.htm">下载</a> <div>上传】1、后端给前端一个上传接口：进行文件上传，上传成功后，该接口返回文件的路径，名称，id2、表单提交接口，提交表单时，将文件的id和表单信息一块提交给后台，实现文件和表单的绑定下载】后端给前端提供一个下载接口，前端调用后，返回二进制文件流。具体请求和接收文件流的方式，参考我之前另一篇博客：后端返回字节流，前端接收下载_后端返回字节数组,前端下载-CSDN博客</div> </li> <li><a href="/article/1897433991829581824.htm" title="Vue 3 实现富文本内容导出 Word 文档：前端直出方案与优化实践" target="_blank">Vue 3 实现富文本内容导出 Word 文档：前端直出方案与优化实践</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/word/1.htm">word</a> <div>本文将深入讲解如何通过纯前端方案将富文本内容直接导出为符合中文排版规范的Word文档，对比传统服务端生成方案，本方案可降低服务器压力80%以上，同时支持即时下载功能。一、功能全景图该方案实现以下核心能力：✅纯前端Word文档生成✅中文仿宋字体完美支持✅智能分页与页边距控制✅内存安全回收机制✅浏览器全兼容方案二、技术方案对比方案响应速度服务器压力兼容性要求实现复杂度服务端生成（传统方案）慢高低高前端</div> </li> <li><a href="/article/1897432979039383552.htm" title="新手教程，小白学web前端开发—HTML5+css3" target="_blank">新手教程，小白学web前端开发—HTML5+css3</a> 皆非本人 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>小白教程，一起来跟我学简单的网页制作吧！本书教材：web前端开发案例教程—HTML5+css3简介：2005年以后，互联网进入了web2.0的时代，各种类似的桌面软件的web应用大量涌现，网站的前端，由此发生了翻天覆地的变化。网站不再只承载单一的文字和图片，各种丰富的媒体让网页的内容更加生动，网页的各种交互形式为用户带来了更好的体验，都基于前端的技术实现，好了废话不多说，让我们简单的体验一下如何制</div> </li> <li><a href="/article/1897431842563354624.htm" title="【Web前端开发】---web简介" target="_blank">【Web前端开发】---web简介</a> 爱学习的小何同学！ <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1、前端开发能干什么能干：网页、小程序（例如：微信小程序、抖音小程序），数据可视化前端工程师不仅可以开发上面所说的东西，而且也可以开发：服务器、客户端。2、计算机基础计算机由硬件与软件构成。所谓的硬件就是能看得见、摸得着的一些零部件。比如：CPU、内存、硬盘、键盘、鼠标、音箱、显示器。所谓的软件就是看得见、摸不着的东西。软件由系统软件和应用软件构成。系统软件：Windows、Linux、Max、H</div> </li> <li><a href="/article/1897414814427312128.htm" title="前端基础之动画效果" target="_blank">前端基础之动画效果</a> 青红光硫化黑 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>简单的入场与出场显示/隐藏helloexportdefault{name:'Test',data(){return{isShow:true}}}h1{background-color:orange;}.hello-enter-active{/*进入的动画*/animation:atguigu0.5s;}.hello-leave-active{/*退出的动画*/animation:atguigu0.</div> </li> <li><a href="/article/1897411410216939520.htm" title="探索微前端新境界：microfe 框架深度解析与应用推荐" target="_blank">探索微前端新境界：microfe 框架深度解析与应用推荐</a> 吴毓佳 <div>探索微前端新境界：microfe框架深度解析与应用推荐microfe-clientamicrofrontendinfrastructure项目地址:https://gitcode.com/gh_mirrors/mi/microfe-client在前端技术的浩瀚星海中，一个新兴的概念逐渐浮出水面——“微前端”（MicroFrontends）。为了响应这一趋势，并简化开发者在实现微前端架构时面临的挑战</div> </li> <li><a href="/article/60.htm" title="Dom" target="_blank">Dom</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> <div><!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/1999/xhtml&q</div> </li> <li><a href="/article/187.htm" title="【Spark九十六】RDD API之combineByKey" target="_blank">【Spark九十六】RDD API之combineByKey</a> bit1129 <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>1. combineByKey函数的运行机制 RDD提供了很多针对元素类型为(K,V)的API，这些API封装在PairRDDFunctions类中，通过Scala隐式转换使用。这些API实现上是借助于combineByKey实现的。combineByKey函数本身也是RDD开放给Spark开发人员使用的API之一首先看一下combineByKey的方法说明：</div> </li> <li><a href="/article/314.htm" title="msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解" target="_blank">msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解</a> daizj <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E7%BD%AE%E5%AF%86%E7%A0%81/1.htm">设置密码</a> <div>MySql给用户设置权限同时指定访问密码时，会提示如下错误： ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number；问题原因：你输入的密码是明文。不允许这么输入。解决办法：用select password('你想输入的密码');查询出你的密码对应的字符串，然后</div> </li> <li><a href="/article/441.htm" title="路漫漫其修远兮吾将上下而求索" target="_blank">路漫漫其修远兮吾将上下而求索</a> 周凡杨 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0+%E6%80%9D%E7%B4%A2/1.htm">学习思索</a> <div>王国维在他的《人间词话》中曾经概括了为学的三种境界古今之成大事业、大学问者，罔不经过三种之境界。“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境界也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境界也。“众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”此第三境界也。学习技术，这也是你必须经历的三种境界。第一层境界是说，学习的路是漫漫的，你必须做好充分的思想准备，如果半途而废还不如不要开始。这里，注</div> </li> <li><a href="/article/568.htm" title="Hadoop(二)对话单的操作" target="_blank">Hadoop(二)对话单的操作</a> 朱辉辉33 <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>Debug： 1、 A = LOAD '/user/hue/task.txt' USING PigStorage(' ') AS (col1,col2,col3); DUMP A; //输出结果前几行示例： (>ggsnPDPRecord(21),,) (-->recordType(0),,) (-->networkInitiation(1),,) </div> </li> <li><a href="/article/695.htm" title="web报表工具FineReport常用函数的用法总结（日期和时间函数）" target="_blank">web报表工具FineReport常用函数的用法总结（日期和时间函数）</a> 老A不折腾 <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E5%B7%A5%E5%85%B7/1.htm">报表工具</a><a class="tag" taget="_blank" href="/search/web%E5%BC%80%E5%8F%91/1.htm">web开发</a> <div>web报表工具FineReport常用函数的用法总结（日期和时间函数）说明：凡函数中以日期作为参数因子的，其中日期的形式都必须是yy/mm/dd。而且必须用英文环境下双引号(" ")引用。 DATE DATE(year,month,day):返回一个表示某一特定日期的系列数。 Year:代表年，可为一到四位数。 Month:代表月份。</div> </li> <li><a href="/article/822.htm" title="c++ 宏定义中的##操作符" target="_blank">c++ 宏定义中的##操作符</a> 墙头上一根草 <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a> <div>#与##在宏定义中的--宏展开 #include <stdio.h> #define f(a,b) a##b #define g(a) #a #define h(a) g(a) int main() { &nbs</div> </li> <li><a href="/article/949.htm" title="分析Spring源代码之，DI的实现" target="_blank">分析Spring源代码之，DI的实现</a> aijuans <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/DI/1.htm">DI</a><a class="tag" taget="_blank" href="/search/%E7%8E%B0/1.htm">现</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E4%BB%A3%E7%A0%81/1.htm">源代码</a> <div>(转) 分析Spring源代码之，DI的实现 2012/1/3 by tony 接着上次的讲，以下这个sample [java] view plain copy print </div> </li> <li><a href="/article/1076.htm" title="for循环的进化" target="_blank">for循环的进化</a> alxw4616 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>// for循环的进化 // 菜鸟 for (var i = 0; i < Things.length ; i++) { // Things[i] } // 老鸟 for (var i = 0, len = Things.length; i < len; i++) { // Things[i] } // 大师 for (var i = Things.le</div> </li> <li><a href="/article/1203.htm" title="网络编程Socket和ServerSocket简单的使用" target="_blank">网络编程Socket和ServerSocket简单的使用</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80/1.htm">网络编程基础</a><a class="tag" taget="_blank" href="/search/IP%E5%9C%B0%E5%9D%80%E7%AB%AF%E5%8F%A3/1.htm">IP地址端口</a> <div> 网络编程;TCP/IP协议网络:实现计算机之间的信息共享,数据资源的交换协议:数据交换需要遵守的一种协议,按照约定的数据格式等写出去端口:用于计算机之间的通信每运行一个程序，系统会分配一个编号给该程序，作为和外界交换数据的唯一标识 0~65535 查看被使用的</div> </li> <li><a href="/article/1330.htm" title="JDK1.5 生产消费者" target="_blank">JDK1.5 生产消费者</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E4%BA%A7%E6%B6%88%E8%B4%B9%E8%80%85/1.htm">生产消费者</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>ArrayBlockingQueue：一个由数组支持的有界阻塞队列。此队列按 FIFO（先进先出）原则对元素进行排序。队列的头部是在队列中存在时间最长的元素。队列的尾部是在队列中存在时间最短的元素。新元素插入到队列的尾部，队列检索操作则是从队列头部开始获得元素。 ArrayBlockingQueue的常用方法： </div> </li> <li><a href="/article/1457.htm" title="JAVA版身份证获取性别、出生日期及年龄" target="_blank">JAVA版身份证获取性别、出生日期及年龄</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E5%88%AB/1.htm">性别</a><a class="tag" taget="_blank" href="/search/%E5%87%BA%E7%94%9F%E6%97%A5%E6%9C%9F/1.htm">出生日期</a><a class="tag" taget="_blank" href="/search/%E5%B9%B4%E9%BE%84/1.htm">年龄</a> <div> 工作中需要根据身份证获取性别、出生日期及年龄，且要还要支持15位长度的身份证号码，网上搜索了一下，经过测试好像多少存在点问题，干脆自已写一个。 CertificateNo.java package com.bijian.study; import java.util.Calendar; import </div> </li> <li><a href="/article/1584.htm" title="【Java范型六】范型与枚举" target="_blank">【Java范型六】范型与枚举</a> bit1129 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>首先，枚举类型的定义不能带有类型参数，所以，不能把枚举类型定义为范型枚举类，例如下面的枚举类定义是有编译错的 public enum EnumGenerics<T> { //编译错，提示枚举不能带有范型参数 OK, ERROR; public <T> T get(T type) { return null; </div> </li> <li><a href="/article/1711.htm" title="【Nginx五】Nginx常用日志格式含义" target="_blank">【Nginx五】Nginx常用日志格式含义</a> bit1129 <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>1. log_format 1.1 log_format指令用于指定日志的格式，格式： log_format name(格式名称) type(格式样式) 1.2 如下是一个常用的Nginx日志格式： log_format main '[$time_local]|$request_time|$status|$body_bytes</div> </li> <li><a href="/article/1838.htm" title="Lua 语言 15 分钟快速入门" target="_blank">Lua 语言 15 分钟快速入门</a> ronin47 <a class="tag" taget="_blank" href="/search/lua+%E5%9F%BA%E7%A1%80/1.htm">lua 基础</a> <div>- - 单行注释 - - [[ [多行注释] - - ]] - - - - - - - - - - - 1. 变量 & 控制流 - - - - - - - - - - num = 23 - - 数字都是双精度 str = 'aspythonstring' </div> </li> <li><a href="/article/1965.htm" title="java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 )" target="_blank">java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 )</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>the idea is from: http://blog.csdn.net/zhanxinhang/article/details/6731134 public class MaxSubMatrix { /**see http://blog.csdn.net/zhanxinhang/article/details/6731134 * Q35 求一个矩阵中最大的二维</div> </li> <li><a href="/article/2092.htm" title="mongoDB文档型数据库特点" target="_blank">mongoDB文档型数据库特点</a> 开窍的石头 <a class="tag" taget="_blank" href="/search/mongoDB%E6%96%87%E6%A1%A3%E5%9E%8B%E6%95%B0%E6%8D%AE%E5%BA%93%E7%89%B9%E7%82%B9/1.htm">mongoDB文档型数据库特点</a> <div>MongoDD: 文档型数据库存储的是Bson文档-->json的二进制特点：内部是执行引擎是js解释器，把文档转成Bson结构，在查询时转换成js对象。 mongoDB传统型数据库对比传统类型数据库：结构化数据，定好了表结构后每一个内容符合表结构的。也就是说每一行每一列的数据都是一样的文档型数据库：不用定好数据结构，</div> </li> <li><a href="/article/2219.htm" title="[毕业季节]欢迎广大毕业生加入JAVA程序员的行列" target="_blank">[毕业季节]欢迎广大毕业生加入JAVA程序员的行列</a> comsci <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> 一年一度的毕业季来临了。。。。。。。。正在投简历的学弟学妹们。。。如果觉得学校推荐的单位和公司不适合自己的兴趣和专业，可以考虑来我们软件行业，做一名职业程序员。。。软件行业的开发工具中，对初学者最友好的就是JAVA语言了，网络上不仅仅有大量的</div> </li> <li><a href="/article/2346.htm" title="PHP操作Excel – PHPExcel 基本用法详解" target="_blank">PHP操作Excel – PHPExcel 基本用法详解</a> cuiyadll <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a> <div>导出excel属性设置//Include classrequire_once('Classes/PHPExcel.php');require_once('Classes/PHPExcel/Writer/Excel2007.php');$objPHPExcel = new PHPExcel();//Set properties 设置文件属性$objPHPExcel->getProperties</div> </li> <li><a href="/article/2473.htm" title="IBM Webshpere MQ Client User Issue (MCAUSER)" target="_blank">IBM Webshpere MQ Client User Issue (MCAUSER)</a> darrenzhu <a class="tag" taget="_blank" href="/search/IBM/1.htm">IBM</a><a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a><a class="tag" taget="_blank" href="/search/user/1.htm">user</a><a class="tag" taget="_blank" href="/search/MQ/1.htm">MQ</a><a class="tag" taget="_blank" href="/search/MCAUSER/1.htm">MCAUSER</a> <div>IBM MQ JMS Client去连接远端MQ Server的时候，需要提供User和Password吗？答案是根据情况而定，取决于所定义的Channel里面的属性Message channel agent user identifier (MCAUSER)的设置。 http://stackoverflow.com/questions/20209429/how-mca-user-i</div> </li> <li><a href="/article/2600.htm" title="网线的接法" target="_blank">网线的接法</a> dcj3sjt126com <div>一、PC连HUB (直连线)A端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。二、PC连PC （交叉线）A端：(568A)：白绿，绿，白橙，蓝，白蓝，橙，白棕，棕； B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。三、HUB连HUB&nb</div> </li> <li><a href="/article/2727.htm" title="Vimium插件让键盘党像操作Vim一样操作Chrome" target="_blank">Vimium插件让键盘党像操作Vim一样操作Chrome</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>什么是键盘党？键盘党是指尽可能将所有电脑操作用键盘来完成，而不去动鼠标的人。鼠标应该说是新手们的最爱，很直观，指哪点哪，很听话！不过常常使用电脑的人，如果一直使用鼠标的话，手会发酸，因为操作鼠标的时候，手臂不是在一个自然的状态，臂肌会处于绷紧状态。而使用键盘则双手是放松状态，只有手指在动。而且尽量少的从鼠标移动到键盘来回操作，也省不少事。在chrome里安装 vimium 插件 </div> </li> <li><a href="/article/2854.htm" title="MongoDB查询（2）——数组查询[六]" target="_blank">MongoDB查询（2）——数组查询[六]</a> eksliang <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/MongoDB%E6%9F%A5%E8%AF%A2%E6%95%B0%E7%BB%84/1.htm">MongoDB查询数组</a> <div>MongoDB查询数组转载请出自出处：http://eksliang.iteye.com/blog/2177292 一、概述 MongoDB查询数组与查询标量值是一样的，例如，有一个水果列表，如下所示： > db.food.find() { "_id" : "001", "fruits" : [ "苹</div> </li> <li><a href="/article/2981.htm" title="cordova读写文件（1）" target="_blank">cordova读写文件（1）</a> gundumw100 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Cordova/1.htm">Cordova</a> <div>使用cordova可以很方便的在手机sdcard中读写文件。首先需要安装cordova插件：file 命令为： cordova plugin add org.apache.cordova.file 然后就可以读写文件了，这里我先是写入一个文件，具体的JS代码为： var datas=null;//datas need write var directory=&</div> </li> <li><a href="/article/3108.htm" title="HTML5 FormData 进行文件jquery ajax 上传到又拍云" target="_blank">HTML5 FormData 进行文件jquery ajax 上传到又拍云</a> ileson <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/FormData/1.htm">FormData</a> <div>html5 新东西：FormData 可以提交二进制数据。页面test.html <!DOCTYPE> <html> <head> <title> formdata file jquery ajax upload</title> </head> <body> <</div> </li> <li><a href="/article/3235.htm" title="swift appearanceWhenContainedIn:(version1.2 xcode6.4)" target="_blank">swift appearanceWhenContainedIn:(version1.2 xcode6.4)</a> 啸笑天 <a class="tag" taget="_blank" href="/search/version/1.htm">version</a> <div> swift1.2中没有oc中对应的方法： + (instancetype)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION; 解决方法：在swift项目中新建oc类如下： #import &</div> </li> <li><a href="/article/3362.htm" title="java实现SMTP邮件服务器" target="_blank">java实现SMTP邮件服务器</a> macroli <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>电子邮件传递可以由多种协议来实现。目前，在Internet 网上最流行的三种电子邮件协议是SMTP、POP3 和 IMAP，下面分别简单介绍。　　◆ SMTP 协议　　简单邮件传输协议(Simple Mail Transfer Protocol,SMTP)是一个运行在TCP/IP之上的协议，用它发送和接收电子邮件。SMTP 服务器在默认端口25上监听。SMTP客户使用一组简单的、基于文本的</div> </li> <li><a href="/article/3489.htm" title="mongodb group by having where 查询sql" target="_blank">mongodb group by having where 查询sql</a> qiaolevip <a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/mongo/1.htm">mongo</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a> <div>SELECT cust_id, SUM(price) as total FROM orders WHERE status = 'A' GROUP BY cust_id HAVING total > 250 db.orders.aggregate( [ { $match: { status: 'A' } }, { $group: { </div> </li> <li><a href="/article/3616.htm" title="Struts2 Pojo（六）" target="_blank">Struts2 Pojo（六）</a> Luob. <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/strust2/1.htm">strust2</a> <div>注意：附件中有完整案例 1.采用POJO对象的方法进行赋值和传值 2.web配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee&q</div> </li> <li><a href="/article/3743.htm" title="struts2步骤" target="_blank">struts2步骤</a> wuai <a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>1、添加jar包 2、在web.xml中配置过滤器 <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.st</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>

【狂神说Java】HTML快速入门

目录

1.初识HTML

2.网页基本信息