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/1938922034490830848.htm" title="关于uniapp+vue2 升级 Vue3 后无法获取 query的问题" target="_blank">关于uniapp+vue2 升级 Vue3 后无法获取 query的问题</a> 代码简单说 <a class="tag" taget="_blank" href="/search/2025%E5%BC%80%E5%8F%91%E5%BF%85%E5%A4%87%28%E9%99%90%E6%97%B6%E7%89%B9%E6%83%A0%29/1.htm">2025开发必备(限时特惠)</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/vue2%E8%BF%81%E7%A7%BB%E5%88%B0vue3/1.htm">vue2迁移到vue3</a><a class="tag" taget="_blank" href="/search/%E8%8E%B7%E5%8F%96%E4%B8%8D%E5%88%B0query/1.htm">获取不到query</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%8E%B7%E5%8F%96%E4%B8%8D%E5%88%B0query/1.htm">小程序获取不到query</a><a class="tag" taget="_blank" href="/search/mp%E8%8E%B7%E5%8F%96%E4%B8%8D%E5%88%B0%E8%B7%AF%E7%94%B1/1.htm">mp获取不到路由</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E8%8E%B7%E5%8F%96/1.htm">路由参数获取</a><a class="tag" taget="_blank" href="/search/url%E5%8F%82%E6%95%B0%E8%8E%B7%E5%8F%96/1.htm">url参数获取</a> <div>关于uniapp+vue2升级Vue3后无法获取query的问题tag：vue3迁移、uniapp兼容性、$mp变更、vue2升级、前端坑点记录在升级公司项目的时候，从uniapp+Vue2迁移到uniapp+Vue3，想着应该是个平滑过渡，没成想，一个小小的$mp把我绊了一脚。事情是这样的项目中有这么一段代码，用于判断当前页面的路由参数：onLoad(){constscene=this.</div> </li> <li><a href="/article/1938916612388220928.htm" title="【DeepSeek实战】3、Ollama实战指南：LobeChat+多网关架构打造高可用大模型集群" target="_blank">【DeepSeek实战】3、Ollama实战指南：LobeChat+多网关架构打造高可用大模型集群</a> 无心水 <a class="tag" taget="_blank" href="/search/Ollama%E5%AE%9E%E6%88%98%E6%8C%87%E5%8D%97/1.htm">Ollama实战指南</a><a class="tag" taget="_blank" href="/search/LobeChat%E5%AE%9E%E6%88%98/1.htm">LobeChat实战</a><a class="tag" taget="_blank" href="/search/DeepSeek%E5%AE%9E%E6%88%98/1.htm">DeepSeek实战</a><a class="tag" taget="_blank" href="/search/DeepSeek%E5%85%A8%E6%A0%88%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/1.htm">DeepSeek全栈应用开发</a><a class="tag" taget="_blank" href="/search/AI%E5%85%A5%E9%97%A8/1.htm">AI入门</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/CSDN%E6%8A%80%E6%9C%AF%E5%B9%B2%E8%B4%A7/1.htm">CSDN技术干货</a> <div>一、企业级大模型集群架构全景解析在人工智能落地应用的过程中，大模型服务的高可用性、成本控制和灵活扩展能力成为企业关注的核心痛点。本方案通过LobeChat前端、AI网关层和Ollama模型集群的三层架构设计，实现了无需复杂运维即可部署的生产级大模型服务体系。该架构不仅支持负载均衡、故障转移和模型热切换等企业级特性。还通过量化技术将硬件成本降低60%以上，为中小企业提供了与商业云服务相当的性能体验。</div> </li> <li><a href="/article/1938903752467607552.htm" title="移动端iOS调试与问题解决：WebView调试多工具协作" target="_blank">移动端iOS调试与问题解决：WebView调试多工具协作</a> 游戏开发爱好者8 <a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/udp/1.htm">udp</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</a> <div>在开发过程中，调试工作不仅仅是前端开发者的职责。当出现复杂的线上问题，调试往往需要涉及到多个团队的协作：前端、后端、测试和运营等。尤其是在移动端WebView页面和原生页面混合开发中，调试工作通常是多部门之间的互动与配合。这篇文章分享了我们在一个社交平台项目中的调试实践，重点讲解了跨团队合作调试中的问题解决策略，并介绍了我们如何通过工具协同与有效沟通，解决了上线后部分用户出现的问题。背景：移动端W</div> </li> <li><a href="/article/1938882559177977856.htm" title="平台再升级！接入DeepSeek AI，三大能力一键生成" target="_blank">平台再升级！接入DeepSeek AI，三大能力一键生成</a> 橙武科技 <a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/deepseek/1.htm">deepseek</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>在数字化项目落地过程中，很多企业都会面临相同的问题：数据库建模要写SQL表结构；业务流程需要画LogicFlow流程图；前端页面还要写AMISJSON配置。从想法到实现，中间至少要经历产品经理、架构师、后端、前端多轮沟通。每个环节都耗时，改起来还要推翻重来。demo地址：https://admin.cwcode.top✨我们的平台，现在直接整合了DeepSeekAI大模型只要输入一句需求，就能：✅</div> </li> <li><a href="/article/1938846381716336640.htm" title="前端用MQTT协议通信的场景和好处" target="_blank">前端用MQTT协议通信的场景和好处</a> CreatorRay <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%E7%BB%9C/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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/MQTT/1.htm">MQTT</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a> <div>上家公司中前端项目有用MQTT协议和硬件通信的场景，虽然很早就听说过MQTT协议，但是这是第一次在前端项目里基于MQTT协议做网络通信。当时没了解太多，工作中只做好了代码层面的工作，并没有深入了解MQTT协议的好处和适合的应用场景。在前端项目中，应该99%的情况都会基于HTTP和WebSocket来进行网络通信，使用MQTT在前端里确实比较小众。目前可能只会在物联网项目中，需要跟硬件通信的前提下，</div> </li> <li><a href="/article/1938810579296776192.htm" title="HTML页面设计——动态照片环" target="_blank">HTML页面设计——动态照片环</a> <div>#前端开发##html超文本标记语言结构学习他的标签##css美化页面其实一部分的网站首页应用了照片环的原理，使得页面看起来更加美观，这里为大家分享一个简单的照片环编写。一、准备好以下素材：二、新建一个HTML文件，这里就取名“01-照片环”好了。三、现在开始编写具体内容，照片环说白了就是几个照片构成的所以body只要写就可以了，编写的时候注意图片的格式是.jpg、.png还是.gif(动态图)。</div> </li> <li><a href="/article/1938792043065176064.htm" title="vue-cron: Cron表达式UI组件开发指南" target="_blank">vue-cron: Cron表达式UI组件开发指南</a> 刘通双Elsie <div>vue-cron:Cron表达式UI组件开发指南项目地址:https://gitcode.com/gh_mirrors/vu/vue-cron项目介绍vue-cron是一个基于Vue框架设计的cron表达式UI组件库.该项目特别适用于那些需要在前端界面中提供cron表达式编辑功能的应用场景。通过简洁直观的接口，开发者可以轻松地将此组件集成到他们的Vue应用程序中，以实现对定时任务计划的精确控制。该</div> </li> <li><a href="/article/1938784229022298112.htm" title="vue el-date-picker 直接赋值时控件失效" target="_blank">vue el-date-picker 直接赋值时控件失效</a> 梓暮 <a class="tag" taget="_blank" href="/search/IT/1.htm">IT</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a> <div>项目场景：前端vueel-date-picker控件无故失效问题描述本人是主打后端，新进的公司要求前后端全干，然后又因为前端做得少，所以经常碰到一些奇怪的问题，比如以下操作，是给vue前端el-date-picker这个时间控件赋值，但是发现，数据是赋值上去了，但是控件失效了，怎么点都没用if(resData.batchEntity.manage_scene_start_time!=null&&r</div> </li> <li><a href="/article/1938776162532651008.htm" title="java毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lw" target="_blank">java毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lw</a> 兮兮科技 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>java毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lwjava毕业设计房产中介系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址</div> </li> <li><a href="/article/1938773764976209920.htm" title="vue大数据量列表渲染性能优化：虚拟滚动原理" target="_blank">vue大数据量列表渲染性能优化：虚拟滚动原理</a> Java小卷 <a class="tag" taget="_blank" href="/search/Vue3%E5%BC%80%E6%BA%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E6%88%98/1.htm">Vue3开源组件实战</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89Tree/1.htm">自定义Tree</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%BB%9A%E5%8A%A8/1.htm">虚拟滚动</a> <div>前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下，我们讲了两种实现方式来提高渲染性能：前端分页和节点数据懒加载。前端分页小节：Vue3扁平化Tree组件的前端分页实现节点数据懒加载小节：ElementTreePlus版功能演示：数据懒加载关于扁平化结构Tree和嵌套结构Tree组件的渲染嵌套结构的Tree组件是一种递归渲染，性能上比起列表结构的v-for渲染比较一般。对于</div> </li> <li><a href="/article/1938716156433068032.htm" title="前端編譯 : Babel 基礎入門" target="_blank">前端編譯 : Babel 基礎入門</a> 林cc <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/babel/1.htm">babel</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端編譯:Babel基礎入門前言正文什麼是Babel?Babel模塊介紹babel-cli從項目中運行BabelCLIbabel-registerbabel-nodebabel-core配置Babel.babelrcbabel-preset-es2015babel-preset-react執行Babel生成的代碼babel-polyfillbabel-runtimepresetsvsplugins</div> </li> <li><a href="/article/1938699778942627840.htm" title="前端跨域解决方案（10）：document.domain" target="_blank">前端跨域解决方案（10）：document.domain</a> 骆驼Lara <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E6%B1%87%E6%80%BB/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>1document.domain核心同源策略要求两个页面的协议、域名、端口完全一致，否则视为跨域。例如：主域名site.com与子域名a.site.com因域名不同，属于跨域；http://a.site.com:8080与http://a.site.com:80因端口不同，属于跨域。document.domain允许将子域的域名设置为共同的主域名（如site.com），使浏览器认为不同子域“同源”</div> </li> <li><a href="/article/1938699652173983744.htm" title="前端跨域解决方案（8）：window.name" target="_blank">前端跨域解决方案（8）：window.name</a> <div>1window.name核心window.name是浏览器窗口的一个属性，它有两个关键特性：跨域共享：无论窗口的URL如何变化，window.name的值始终保持不变；容量大：可存储最大约2MB的数据（不同浏览器略有差异）。这使得window.name成为跨域通信的一种特殊方式：通过iframe加载跨域页面，利用window.name传递数据。window.name跨域的核心流程如下：主页面创建指</div> </li> <li><a href="/article/1938699652664717312.htm" title="前端跨域解决方案（9）：location.hash" target="_blank">前端跨域解决方案（9）：location.hash</a> 骆驼Lara <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E6%B1%87%E6%80%BB/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>1location.hash核心location.hash是URL中的锚点（如#section），它有两个关键特性：跨域可见：在A域名页面中，可通过iframe加载B域名页面，并修改其location.hash；不影响页面：修改hash不会触发页面刷新，也不会将数据发送到服务器。这使得location.hash成为跨域通信的一种轻量级方式：通过iframe加载跨域页面，利用location.has</div> </li> <li><a href="/article/1938692845670035456.htm" title="前端开发者必看：Node.js实战技巧大揭秘" target="_blank">前端开发者必看：Node.js实战技巧大揭秘</a> 大厂前端小白菜 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">前端开发实战</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</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/ai/1.htm">ai</a> <div>前端开发者必看：Node.js实战技巧大揭秘关键词：前端开发者、Node.js、实战技巧、模块化开发、性能优化、Express框架、Webpack摘要：本文专为前端开发者打造，旨在深入揭秘Node.js的实战技巧。首先介绍了Node.js的背景和对前端开发的重要性，接着详细阐述了Node.js的核心概念与联系、核心算法原理及具体操作步骤，通过数学模型和公式进一步加深理解。然后结合实际案例，从开发环</div> </li> <li><a href="/article/1938691837543903232.htm" title="前端跨域解决方案（7）：Node中间件" target="_blank">前端跨域解决方案（7）：Node中间件</a> 骆驼Lara <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E6%B1%87%E6%80%BB/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/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>1Node中间件核心1.1为什么开发环境需要Node代理？在前端开发中，我们常遇到：前端运行在localhost:3000，后端API在localhost:4000，跨域导致请求失败。而传统解决方案有以下局限性：修改后端CORS配置：需后端开发配合，增加沟通成本；生产环境与开发环境配置不一致。配置Nginx反向代理：修改配置后需重启服务，打断开发流程；配置文件管理复杂。Node中间件代理（如htt</div> </li> <li><a href="/article/1938674198192910336.htm" title="ios15及以上webview、Safari使用Websocket断连，1006无清晰错误码" target="_blank">ios15及以上webview、Safari使用Websocket断连，1006无清晰错误码</a> <div>文章目录问题表现：定位疑似原因：解决方式：定位问题思路过程记录：1、对比前端代码运行环境问题2、写纯请求前端代码连接，确认是否接口部署服务问题；3、IOS连接是否有对TSL安全协议版本有要求（使用的wss协议）4、验证iOS网络是否稳定&查阅信息是否iOS会出现频繁断连又迅速重连情况5、自己搞个nodedemo验证纯连接问题：6、IOS自身多运行环境对比：QQ频道应用、QQ聊天框、safari、c</div> </li> <li><a href="/article/1938671803853500416.htm" title="Gitee 持续集成与交付（CI/CD）篇" target="_blank">Gitee 持续集成与交付（CI/CD）篇</a> <div>Gitee持续集成与交付（CI/CD）篇文章目录Gitee持续集成与交付（CI/CD）篇什么是CI/CD？GiteeGo介绍✨核心特性支持的技术栈提交项目进行CI/CD第一步：创建.gitee-ci.yml文件第二步：配置项目设置第三步：提交代码触发构建制品库配置Maven制品库配置Docker制品库配置npm制品库配置⚙️流水线配置示例与实践JavaSpringBoot项目示例Vue.js前端项</div> </li> <li><a href="/article/1938664870069202944.htm" title="【数字IC前端笔试真题精刷（2022.7.28）】芯动——数字IC验证工程师（1号卷-验证）" target="_blank">【数字IC前端笔试真题精刷（2022.7.28）】芯动——数字IC验证工程师（1号卷-验证）</a> ReRrain <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97IC/1.htm">数字IC</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AF%95/1.htm">笔试</a> <div>声明：本专栏所收集的数字IC笔试题目均来源于互联网，仅供学习交流使用。如有侵犯您的知识产权，请及时与博主联系，博主将会立即删除相关内容。笔试时间：2022-7-28；题目类型：不定项（10x1’=10’）【错选不得分，少选得1/3分】问答（9x10’=90’）文章目录不定项1、(单选)在verilog语言中，a=4'b1011，那么&a=()2、(单选)SystemVerilog中类默认的成员属性</div> </li> <li><a href="/article/1938663104212692992.htm" title="【架构篇】微前端架构设计与qiankun实战" target="_blank">【架构篇】微前端架构设计与qiankun实战</a> 全息架构师 <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E6%B2%BF%E6%8E%A2%E7%B4%A2%EF%BC%9A%E5%BC%95%E9%A2%86%E6%8A%80%E6%9C%AF%E6%96%B0%E9%A3%8E%E5%B0%9A/1.htm">前沿探索：引领技术新风尚</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>【架构篇】微前端架构设计与qiankun实战阅前必看：本文是《前端开发完全指南》系列的第十七篇，包含15个核心代码示例、8张系统架构图解、2个企业级落地案例。通过qiankun+ModuleFederation实现前端应用自由组合，支撑百万级PV应用！目录微前端核心价值技术方案全景对比qiankun架构设计主子应用通信方案样式隔离方案沙箱机制解析资源加载优化权限体系集成性能监控方案中台系统实战一、</div> </li> <li><a href="/article/1938628441180008448.htm" title="实用前端vue页面引入 .md文件" target="_blank">实用前端vue页面引入 .md文件</a> xqqwyy <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>项目场景：提示：这里简述项目相关背景：vue前端页面引入.md文件解决方案：提示：这里填写该问题的具体解决方案：1.安装依赖npminstallvue-markdown-loader--save2.vue.config.js中配置chainWebpack:config=>{config.module.rule("md").test(/\.md/).use("vue-loader").loader(</div> </li> <li><a href="/article/1938616082998816768.htm" title="每天一个前端小知识 Day 14 - 前端状态管理深入实践" target="_blank">每天一个前端小知识 Day 14 - 前端状态管理深入实践</a> 蓝婷儿 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端状态管理深入实践（Redux、Pinia、Zustand等）为什么需要状态管理？当组件之间状态通信越来越复杂时，靠props和事件传递会变得非常难维护。状态管理工具提供：目标实现方式状态集中管理将状态集中存放，避免组件深层传递状态可预测、可追踪有清晰的流转逻辑（Action→Reducer→Store）跨组件通信无需propsdrilling（逐层传递）支持模块拆分与中间件支持插件化、按模块加</div> </li> <li><a href="/article/1938611921498468352.htm" title="vue3.0(十六)路由vue-router" target="_blank">vue3.0(十六)路由vue-router</a> 程楠楠&M <a class="tag" taget="_blank" href="/search/vue3.0/1.htm">vue3.0</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/vue-router/1.htm">vue-router</a> <div>文章目录路由vue-router路由1.vue-router功能2.vue-router组成3.vue-router常用的函数vue-router使用1.安装2.vue3.0配置3.vue2.0配置4.基本用法5.编程式导航6.路由懒加载导航守卫路由的两种工作模式路由路由(routing)路由是指从源页面到目的页面时，决定端到端路径的决策过程。前端路由前端路由即由前端来维护一个路由规则。实现模式有</div> </li> <li><a href="/article/1938599061921787904.htm" title="关于电商秒杀系统中防超卖、以及高性能下单的处理方案简述" target="_blank">关于电商秒杀系统中防超卖、以及高性能下单的处理方案简述</a> Java鼠鼠吖 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>秒杀抢购系统的成功平稳运行，有一些需要注意的知识点。1高并发，以及刷接口等黑客请求对服务端的负载冲击2高并发时带来的超卖，即商品数量的控制3高负载下，下单的速度和成功率的保证4其他以秒杀单品为例，如抢小米手机。解决方案探讨：第一步限制前端发来的请求量免费领取Java学习资料譬如定在了周二10点开启抢购，那么在之前的一周时间内，都会有预约通知，或者普通的用户浏览。通过预约量、浏览量等数据分析，大概能</div> </li> <li><a href="/article/1938577877800906752.htm" title="使用JavaScript构建交互式Web页面：从基础到高级功能（附带实现代码~）" target="_blank">使用JavaScript构建交互式Web页面：从基础到高级功能（附带实现代码~）</a> 一ge科研小菜菜 <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><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/javascript/1.htm">javascript</a> <div>个人主页：一ge科研小菜鸡-CSDN博客期待您的关注1.引言JavaScript作为现代网页设计的核心技术之一，已发展成为前端开发中必不可少的编程语言。随着互联网的不断进化，用户对网页体验的需求日益增长，开发者需要借助JavaScript来实现页面动态交互、用户界面更新和复杂的数据操作。JavaScript的生态系统也日趋完善，从基础的ES6+特性到各种强大的前端框架如React、Vue和Angu</div> </li> <li><a href="/article/1938577245949980672.htm" title="html5路由如何在nginx上部署（vite+vue3）" target="_blank">html5路由如何在nginx上部署（vite+vue3）</a> 大眼小夫 <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>我们知道前端常用的有Hash模式和html5模式的路由，hash模式在nginx上部署不需要额外的操作，而html5模式则需要额外设置，这里介绍下如何在nginx根地址（location/{}）下部署和在非根地址上（location/admin{}）部署。在这之前，我先说一下为什么html5路由需要在nginx上配置，我们知道，vue-router就是用来处理路由的，我我们在浏览器上输入地址时，这</div> </li> <li><a href="/article/1938576362033967104.htm" title="Vue-I18n 组件化本地化方案详解" target="_blank">Vue-I18n 组件化本地化方案详解</a> <div>Vue-I18n组件化本地化方案详解vue-i18n:globe_with_meridians:InternationalizationpluginforVue.js项目地址:https://gitcode.com/gh_mirrors/vu/vue-i18n前言在现代前端开发中，国际化(i18n)已成为构建全球化应用的重要环节。Vue-I18n作为Vue.js生态中最流行的国际化解决方案，提供了</div> </li> <li><a href="/article/1938540185826422784.htm" title="使用 ESLint + Prettier + Husky + lint-staged 构建统一的代码风格及检查工作流" target="_blank">使用 ESLint + Prettier + Husky + lint-staged 构建统一的代码风格及检查工作流</a> 爱宇阳 <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/GIT/1.htm">GIT</a><a class="tag" taget="_blank" href="/search/husky/1.htm">husky</a><a class="tag" taget="_blank" href="/search/lint-staged/1.htm">lint-staged</a> <div>现代前端开发中，维护代码一致性和避免低级错误是团队协作的关键。通过整合以下工具，可以构建一套高效的代码风格检查+自动格式化+提交钩子工作流：✅ESLint：语法规则检查✅Prettier：统一格式化风格✅Husky：Git提交钩子✅lint-staged：仅检查本次提交相关的文件一、项目初始化（以Vue3+Vite项目为例）pnpmcreatevitemy-app--templatevue-tsc</div> </li> <li><a href="/article/1938516482644307968.htm" title="【前端】JS模块化解析-ESModule" target="_blank">【前端】JS模块化解析-ESModule</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录基本介绍基本使用导入导出方式3种结合使用default用法import函数ESModule的解析流程导入的变量无法，导入方无法修改导出的变量，只能由导出方进行修改如果确实想在导入这边对导出的值进行修改，可以自定义set回调函数CommonJS和ESModule相互引用实验一下基本介绍JavaScript没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范:CommonJS、AMD、CM</div> </li> <li><a href="/article/1938493929154473984.htm" title="研一自救指南 - 06.HTML5系统学习" target="_blank">研一自救指南 - 06.HTML5系统学习</a> 东部欧安时 <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>前情提要：研一自救指南-01.java面向对象（黑马）研1自救指南-02.Java+AI智能辅助编程（黑马）研一自救指南-03.面向面经预习（前端）研一自救指南-04.面试狂刷（前端日常实习）研一自救指南-05.JavaScript系统学习基于W3school的HTML5学习1.html元素html链接点击这里//图像换行横线2.html样式背景颜色、对齐方式设置字体、颜色、大小3.文本格式化Th</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.网页基本信息