网页设计与制作第一章(新手级)

目录

前言

一、HTML5基础

二、文字与段落标签

1.标题与段落标签

三.图像与超链接标签

四.表格与列表标签

表格标签

 

 

列表标签

  • 标签
    1. 标签
    2. 标签

前言

在互联网时代,网页设计已经成为了一项必不可少的技能。随着用户对网页设计的要求越来越高,一个好的网页设计可以使网站更加具有吸引力,提高用户体验和信任感。因此,网页设计的重要性越来越受到人们的重视。

一个好的网页设计需要考虑到许多方面,包括网页的视觉设计、交互设计、用户体验、网站流程等等。通过精心设计,可以增加用户的留存率和转化率,从而达到提高网站价值的目的。

本文将介绍网页设计的相关知识和技巧,旨在帮助初学者了解和掌握网页设计的基础知识,提高网页设计的水平,打造出更加优秀的网页设计作品。


一、HTML5基础

  1. 基本语法
    
    
          
               
               你好!HTML5
          
          
          
    

  2. 这是HTML5文档的基本格式,主要包括文档类型声明、根标签、头部标签、主体标签,每个标签的作用如下:

    1. : 声明文档类型为HTML5。注意代码注释采用标签
    2. : 定义HTML文档的根元素。
    3. : 定义文档头部,包含了与文档相关的元信息,如标题、关键词和描述等。
    4. : 定义元数据,比如字符集、页面描述和关键词等。
    5. </code>: 定义文档的标题,会显示在浏览器的标题栏中。</li> <li><code><body></code>: 定义文档的主体部分,包含了所有的页面内容,如文本、图片、链接等。</li> </ol></li> <li> <p>HTML5标签及属性</p> <ol> <li> <p>HTML标签通常分为两大类,分别是“双标签”和“单标签”。</p> <ol> <li> <p><span style="color:#ed7976;">双标签</span>是指由开始和结束两个标签符号组成的标签,<strong>其语法为:<标签名>内容</标签名>,如下</strong></p> <pre><code class="language-html"><p>这是一个段落。</p> </code></pre> </li> <li> <p><span style="color:#faa572;">单标签</span>也称空标签,是指由一个标签符号即可完整的描述某个功能的标签,<strong>其语法为:<标签名/>,如下</strong></p> <pre><code class="language-html"><br/> #用于实现换行</code></pre> <p></p> </li> <li> <p>标签的属性,<strong>其语法为<标签名 属性1="属性值1" 属性2="属性值2".../>内容</标签名>,</strong>主要是让HTML标签提供更多的信息,例如单标签<hr>表示在文档当前位置画一条水平线,代码如下</p> <pre><code class="language-html"><hr color="red" size="1" width="80%"> #color表示水平线的颜色,size表示水平线的粗细,width表示宽度</code></pre> <p></p> </li> </ol></li> </ol></li> <li> <p><span style="color:#fe2c24;"><meta>标签</span>是HTML语言的一个重要的元素,它用于描述HTML文档的元信息,包括网页的标题、关键字、作者、描述等信息。这些元信息并不会直接显示在网页中,而是被浏览器或搜索引擎等客户端程序使用,用于提高网站的可访问性和可发现性。常见的<meta>标签包括:</p> <p>- <meta charset="UTF-8">:定义文档的字符编码方式<br> - <meta name="viewport" content="width=device-width, initial-scale=1.0">:定义网页在移动设备上的显示方式<br> - <meta name="keywords" content="关键词列表">:定义网页的关键词<br> - <meta name="description" content="网页描述">:定义网页的描述信息<br> - <meta name="robots" content="index,follow">:定义搜索引擎蜘蛛爬虫的行为</p> <p>等等。可以根据不同的需求自己定义<meta>标签,以提高网站的可访问性和可发现性。</p> </li> </ol> <p>   </p> <h2 id="%E4%BA%8C%E3%80%81%E6%96%87%E5%AD%97%E4%B8%8E%E6%AE%B5%E8%90%BD%E6%A0%87%E7%AD%BE">二、文字与段落标签</h2> <h3 id="1.%E6%A0%87%E9%A2%98%E4%B8%8E%E6%AE%B5%E8%90%BD%E6%A0%87%E7%AD%BE">1.标题与段落标签</h3> <ol> <li><strong>标题标签<hn>。其语法为<hn align "对齐方式">标题内容</hn></strong>,为了使网页具有语义化,提供了6个等级的标签,即<h1>到<h6>重要性递减</li> <li><strong>段落标签<p>。其语法为<p align "对齐方式">段落文本</p></strong></li> <li><strong>水平分隔线标签<hr>。其语法为<hr 属性="属性值"/></strong></li> <li><strong>换行标签<br/></strong> <p></p> </li> </ol> <p><strong>2.文本的格式化标签</strong></p> <p></p> <pre><code class="language-html">常见的文本格式化标签有: 1. `<b>`:加粗文本 2. `<i>`:斜体文本 3. `<u>`:下划线文本 4. `<s>`:删除线文本 5. `<sup>`:上标文本 6. `<sub>`:下标文本 7. `<strong>`:强调文本,一般会显示为粗体 8. `<em>`:强调文本,一般会显示为斜体 9. `<h1>`~`<h6>`:标题文本,数字代表级别,如`<h1>`为一级标题 10. `<p>`:段落文本 11. `<br>`:换行 12. `<hr>`:水平线 13. `<a>`:超链接文本 14. `<img>`:插入图片 15. `<pre>`:预格式化文本,会保留原始的空格和换行 以上标签可以通过在 HTML 中使用对应的标签名来实现文本格式化效果。</code></pre> <h2 id="%E4%B8%89.%E5%9B%BE%E5%83%8F%E4%B8%8E%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE">三.图像与超链接标签</h2> <ol> <li> <p><strong> 图像标签<img></strong>,<strong>其语法如下</strong></p> <pre><code class="language-html"><img src="图片地址" alt="图片描述"> </code></pre> </li> <li><strong>超链接标签<a>,其语法有以下两种</strong> <pre><code class="language-html"><a href="链接地址">链接文本</a> # href属性指定要链接到的地址(URL)</code></pre> <pre><code class="language-html"><a href="资源地址" target="窗口名称" title="链接提示文字">链接对象</a> # 注意target两个取值,其中_self为默认值,在原窗口打开,_blank在新窗口打开</code></pre> <p></p> </li> <li>绝对路径和相对路径 <pre><code class="language-html"><img src="/images/pic.png" alt="example picture"> </code></pre> <p>在这个示例中,<code>src</code>属性中的路径以斜杠(<code>/</code>)开头,表示该文件的根目录,即图片文件的路径为<code>/images/pic.png</code>。因为相对路径是基于当前文件所在目录而言的,这里的"根目录"指的是当前网站的根目录。</p> <p>需要注意的是,在相对路径中,不要使用绝对路径,否则可能会导致文件无法正常访问。</p> <ol> <li>绝对路径就是主页上的文件或目录在硬盘上的真正路径,例如以下是以<code>img</code>标签的<code>src</code>属性为例的绝对路径的语法: <pre><code class="language-html"><img src="http://example.com/images/pic.png" alt="example picture"> </code></pre> <p>在这个示例中,<code>src</code>属性中的路径包括了完整的URL,即该文件所在的服务器地址。这样,在用户访问网页时,浏览器会根据URL地址加载图片文件。需要注意的是,使用绝对路径来引用外部资源,通常会使网页的加载速度更慢,因为浏览器需要从网络上下载这些文件</p> </li> <li> <p>相对路径是以当前文件所在的路径为起点,相对路径的格式有两种:基于当前文件和基于根路径。以下是这两种语法的示例:</p> <ol> <li>基于当前文件夹的相对路径</li> <li> <pre><code class="language-html"><img src="../images/pic.png" alt="example picture"> </code></pre> 在这个示例中,<code>src</code>属性中的路径使用了双点号(<code>..</code>),表示该文件所在目录的上一级目录,即图片文件的路径为<code>/images/pic.png</code>。如果要引用同一目录内的文件,可以使用单点号(<code>.</code>)表示当前目录,如: <pre><code class="language-html"><a href="./index.html">返回首页</a> </code></pre> <p>在这个示例中,<code>href</code>属性中的路径表示当前目录下的<code>index.html</code>文件。</p> </li> </ol></li> <li>基于根路径的相对路径</li> </ol></li> <li>锚点链接 <ol> <li>锚点链接(Anchor Link)指的是链接到文档中的特定位置,也叫页面内跳转链接。在 HTML 中,可以使用锚点链接来实现页面内的导航功能,用户点击链接后可以快速定位到页面中的指定段落或区域。 <p>要创建一个锚点链接,需要用到 HTML 中的<code><a></code>标签和<code>id</code>属性。具体步骤如下:</p> </li> <li>在目标位置上添加一个<code>id</code>属性,用于标识该位置。例如: <pre><code class="language-html"><h2 id="section-1">Section 1</h2> <p>这是第一段内容。</p> </code></pre> </li> <li>在导航栏或其他位置上创建链接,链接到目标位置的<code>id</code>属性值。例如: <pre><code class="language-html"><a href="#section-1">跳到第一节</a> </code></pre> <p>在这个示例中,<code>href</code>属性值以井号(#)开头,后面紧跟着目标位置的<code>id</code>值。用户点击这个链接后,页面将会滚动到<code>id</code>为<code>section-1</code>的元素位置。</p> <p>需要注意的是,要确保<code>id</code>属性的值在文档中是唯一的,否则可能会导致链接失效。</p> </li> </ol></li> <li>影像地图</li> </ol> <h2 id="%E5%9B%9B.%E8%A1%A8%E6%A0%BC%E4%B8%8E%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE">四.表格与列表标签</h2> <ol> <li> <h3 id="%E8%A1%A8%E6%A0%BC%E6%A0%87%E7%AD%BE">表格标签</h3> <p>表格标签用于展示多行多列的数据,通常包括<code><table></code>、<code><tr></code>、<code><th></code>和<code><td></code>四个标签。</p> <h4 id="%3Ctable%3E%E6%A0%87%E7%AD%BE"><code><table></code>标签</h4> <p><code><table></code>标签表示整个表格的开始和结束,通常包括一个或多个<code><tr></code>标签。</p> <pre><code class="language-html"> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </table> </code></pre> <h4 id="%3Ctr%3E%E6%A0%87%E7%AD%BE"><code><tr></code>标签</h4> <p><code><tr></code>标签表示表格中的一行,通常包括一个或多个<code><th></code>标签和<code><td></code>标签。</p> <h4 id="%3Cth%3E%E6%A0%87%E7%AD%BE"><code><th></code>标签</h4> <p><code><th></code>标签表示表格中的表头单元格,通常用于第一行或第一列。</p> <h4 id="%3Ctd%3E%E6%A0%87%E7%AD%BE"><code><td></code>标签</h4> <p><code><td></code>标签表示表格中的数据单元格。</p> <h3 id="%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE">列表标签</h3> <p>列表标签用于展示一组相关的数据列表,通常包括<code><ul></code>、<code><ol></code>、<code><li></code>三个标签。</p> <h4 id="%3Cul%3E%E6%A0%87%E7%AD%BE"><code><ul></code>标签</h4> <p><code><ul></code>标签表示无序列表,通常用于展示一组不需要按照顺序排列的项目。</p> <pre><code><code><ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul></code></code></pre> <h4 id="%3Col%3E%E6%A0%87%E7%AD%BE"><code><ol></code>标签</h4> <p><code><ol></code>标签表示有序列表,通常用于展示一组需要按照顺序排列的项目。</p> <pre><code><code><ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol> </code></code> </pre> <h4 id="%3Cli%3E%E6%A0%87%E7%AD%BE"><code><li></code>标签</h4> <p><code><li></code>标签表示一个列表项,通常包含在<code><ul></code>或<code><ol></code>标签中。</p> </li> </ol> <hr> <h2></h2> <p>本次文章到此结束</p> <hr> <p></p> <p></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1716473259857358848"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(网页设计基础应用,开发语言,html5,javascript,css,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1892439419542106112.htm" title="CSS 滚动条样式修改(详细)" target="_blank">CSS 滚动条样式修改(详细)</a> <span class="text-muted">mr_cmx</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>1、滚动条整体部分使用::-webkit-scrollbar示例:.container::-webkit-scrollbar{width:20px;//修改滚动条宽度}2、滚动条中的滑块使用::-webkit-scrollbar-thumb示例:.container::-webkit-scrollbar-thumb{border-radius:8px;box-shadow:inset005pxrg</div> </li> <li><a href="/article/1892433617058066432.htm" title="使用Odoo Shell卸载模块" target="_blank">使用Odoo Shell卸载模块</a> <span class="text-muted">odoo中国</span> <a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E8%BD%AF%E4%BB%B6/1.htm">开源软件</a><a class="tag" taget="_blank" href="/search/erp/1.htm">erp</a> <div>使用OdooShell卸载模块我们在Odoo使用过程中,因为模块安装错误或者前端错误等导致odoo无法通过界面登录,这时候你可以使用OdooShell来卸载模块。OdooShell是一个交互式Pythonshell,允许你直接与Odoo数据库和模型进行交互。以下是使用OdooShell卸载模块的详细步骤:步骤1:启动OdooShell要启动OdooShell,你需要在终端中运行以下命令。确保你已经</div> </li> <li><a href="/article/1892426166254497792.htm" title="基于 Spring Boot 的社区居民健康管理系统部署说明书" target="_blank">基于 Spring Boot 的社区居民健康管理系统部署说明书</a> <span class="text-muted">小星袁</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1%E5%8E%9F%E6%96%87/1.htm">毕业设计原文</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><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>目录1系统概述2准备资料3系统安装与部署3.1数据库部署3.1.1MySQL的部署3.1.2Navicat的部署3.2服务器部署3.3客户端部署4系统配置与优化5其他基于SpringBoot的社区居民健康管理系统部署说明书1系统概述本系统主要运用了SpringBoot框架,前端页面的设计主要依托Vue框架来构建,实现丰富且交互性强的用户界面,后台管理功能则采用SpringBoot框架与MySQL数</div> </li> <li><a href="/article/1892421248793767936.htm" title="2025年全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!</a> <span class="text-muted">白帽安全-黑客4148</span> <a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</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/CTF/1.htm">CTF</a> <div>目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js(2-3天)2、apache+php(4-5天)3、mysql(2-3天)4、python(2-3天)5、burpsuite(1-2天)4.2、中期1、SQL注入(7-8天)2、文件上传(7-8天)3、其他漏洞(14-15天)4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div> </li> <li><a href="/article/1892421249762652160.htm" title="2025年全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!</a> <span class="text-muted">白帽安全-黑客4148</span> <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/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AF%86%E7%A0%81%E5%AD%A6/1.htm">密码学</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a> <div>目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js(2-3天)2、apache+php(4-5天)3、mysql(2-3天)4、python(2-3天)5、burpsuite(1-2天)4.2、中期1、SQL注入(7-8天)2、文件上传(7-8天)3、其他漏洞(14-15天)4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div> </li> <li><a href="/article/1892415446636883968.htm" title="null和undefined的区别" target="_blank">null和undefined的区别</a> <span class="text-muted">编程星空</span> <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/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> <div>null和undefined是JavaScript中两个特殊的值,它们都表示“无”或“空”,但在语义和使用场景上有明显区别。以下是它们的详细对比:1.定义undefined表示变量已声明但未赋值,或函数没有返回值时的默认返回值。是JavaScript引擎默认赋予的初始值。类型为undefined。null表示一个空对象指针,通常用于显式表示“无”或“空”。是开发者主动赋值的值。类型为object(</div> </li> <li><a href="/article/1892413304811352064.htm" title="dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)" target="_blank">dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)</a> <span class="text-muted">weixin_39979245</span> <a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/html%E8%AF%AD%E8%A8%80/1.htm">html语言</a> <div>Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧!《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN:978</div> </li> <li><a href="/article/1892412800781840384.htm" title="html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作" target="_blank">html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作</a> <span class="text-muted">律保阁-Michael</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/5%E4%B8%ADcss%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">5中css的含义</a> <div>HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书,作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48</div> </li> <li><a href="/article/1892412295414345728.htm" title="html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准" target="_blank">html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准</a> <span class="text-muted">vvv666s</span> <div>②学会运用HTML语言中的标记设置颜色、文本格式和列表;熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法;③掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法;④熟练掌握表格的使用方法,学会利用表格设布局网页;掌握框架制作网页的方法,会使用框架设计网页;掌握制作表单的方法,会利用表单建立交互式页面;⑤掌握JavaScript语言的语法;⑥掌握在HTML语言代码中嵌入</div> </li> <li><a href="/article/1892410529520087040.htm" title="JavaScript的魔法世界:巧妙之处与实战技巧" target="_blank">JavaScript的魔法世界:巧妙之处与实战技巧</a> <span class="text-muted">skyksksksksks</span> <a class="tag" taget="_blank" href="/search/%E7%BB%BC%E5%90%88%E4%B8%AA%E4%BA%BA%E6%9D%82%E8%AE%B0/1.htm">综合个人杂记</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/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、从浏览器玩具到全栈利器的蜕变之路JavaScript诞生于1995年,原本只是网景公司为浏览器设计的"小脚本"。谁能想到这个曾被戏称为"玩具语言"的家伙,如今已蜕变成支撑现代Web开发的擎天柱?就像一只破茧成蝶的幼虫,JavaScript经历了ECMAScript标准的持续进化,在Node.js的加持下突破了浏览器的桎梏,实现了从客户端到服务端的华丽转身。V8引擎的涡轮增压让它跑得比猎豹还快,</div> </li> <li><a href="/article/1892407882675187712.htm" title="前端性能优化——如何提高页面加载速度?" target="_blank">前端性能优化——如何提高页面加载速度?</a> <span class="text-muted">忘川...</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>1.将样式表放在头部首先说明一下,将样式表放在头部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,防止“白屏”。我们总是希望页面能够尽快显示内容,为用户提供可视化的回馈,这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素,浏览器会阻塞内容逐步呈现,造成“白屏”。这源自浏览器的</div> </li> <li><a href="/article/1892407376435277824.htm" title="前端开发入门指南:HTML、CSS和JavaScript基础知识" target="_blank">前端开发入门指南:HTML、CSS和JavaScript基础知识</a> <span class="text-muted">方向感超强的</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>引言:大家好,我是一名简单的前端开发爱好者,对于网页设计和用户体验的追求让我深深着迷。在本篇文章中,我将带领大家探索前端开发的基础知识,涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣,或者想要了解如何开始学习前端开发,那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前,让我们先了解一下前端开发的定义和作用。简而言之,前端开发涉及构建用户直接与</div> </li> <li><a href="/article/1892404729082867712.htm" title="前端504错误分析" target="_blank">前端504错误分析</a> <span class="text-muted">ox0080</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%8C%97%E6%BC%82%2B%E6%BB%B4%E6%BB%B4%E5%87%BA%E8%A1%8C/1.htm">北漂+滴滴出行</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/VIP/1.htm">VIP</a><a class="tag" taget="_blank" href="/search/%E6%BF%80%E5%8A%B1/1.htm">激励</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端出现504错误(网关超时)通常是由于代理服务器未能及时从上游服务获取响应。以下是详细分析步骤和解决方案:1.确认错误来源504含义:代理服务器(如Nginx、Apache)在等待后端服务响应时超时。常见架构:前端→代理服务器→后端服务,问题通常出在代理与后端之间。2.排查步骤(1)检查后端服务状态确认服务是否运行:通过日志或监控工具(如systemctlstatus,KubernetesPod</div> </li> <li><a href="/article/1892403467411058688.htm" title="网页中加载 SVG 的七大方式" target="_blank">网页中加载 SVG 的七大方式</a> <span class="text-muted">前端熊猫</span> <a class="tag" taget="_blank" href="/search/Svg/1.htm">Svg</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>一、直接使用标签加载外部SVG文件优点:简单易用:与加载其他图片格式(如PNG、JPEG)相同。浏览器支持良好:现代浏览器普遍支持。可缓存:SVG文件可以被浏览器缓存,减少重复请求。缺点:无法直接操作SVG内部元素:如果需要对SVG内部的元素进行交互或样式修改,这种方法不适用。适用场景:静态图像展示:仅需要展示SVG图像,不需要与之交互。二、将SVG作为CSS背景图片.icon{width:100</div> </li> <li><a href="/article/1892401826364452864.htm" title="jQuery UI CSS 框架 API" target="_blank">jQuery UI CSS 框架 API</a> <span class="text-muted">lly202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>jQueryUICSS框架API概述jQueryUI是一个基于jQuery的用户界面和交互库,它提供了一套丰富的交互组件和视觉效果,旨在帮助开发者快速构建具有吸引力和互动性的网页应用。jQueryUICSS框架API是jQueryUI的一部分,它允许开发者通过简单的CSS类来控制UI组件的样式和外观。本文将详细介绍jQueryUICSS框架API的使用方法、常用类和功能,帮助开发者更好地利用这一工</div> </li> <li><a href="/article/1892400189780586496.htm" title="js如何直接下载文件流" target="_blank">js如何直接下载文件流</a> <span class="text-muted">涔溪</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中直接处理文件下载,尤其是在处理文件流的情况下,通常涉及到使用fetchAPI或者XMLHttpRequest来获取文件流,并通过创建一个临时的标签(锚点元素)触发下载。以下是使用fetchAPI的一个示例:fetch('你的文件URL',{method:'GET',headers:{//如果需要的话,可以在这里添加请求头}}).then(response=>response</div> </li> <li><a href="/article/1892398803407925248.htm" title="部署前端项目2" target="_blank">部署前端项目2</a> <span class="text-muted">augenstern416</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端项目的部署是将开发完成的前端代码发布到服务器或云平台,使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具:1.准备工作在部署之前,确保项目已经完成以下步骤:代码优化:压缩JavaScript、CSS和图片文件,减少文件体积。环境配置:区分开发环境和生产环境(如API地址、环境变量等)。测试:确保项目在本地测试通过,没有明显Bug。2.部署流程1.构建项目大多数前端项目(如React、V</div> </li> <li><a href="/article/1892398676270182400.htm" title="CSS属性" target="_blank">CSS属性</a> <span class="text-muted">augenstern416</span> <a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.CSS定位方式initial:设置该属性为浏览器默认值inherit:规定应该从父元素继承position属性的值。static:默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。relative:生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20”会向元素的LEFT位置添加20像素。absolute:生成绝对定位</div> </li> <li><a href="/article/1892398677004185600.htm" title="对象的操作" target="_blank">对象的操作</a> <span class="text-muted">augenstern416</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在前端开发中,JavaScript提供了许多内置对象和方法,用于处理数据、操作DOM、处理事件等。以下是一些常用对象及其方法和扩展技巧:1.Object对象Object是JavaScript中最基础的对象,几乎所有对象都继承自Object。常用方法Object.keys(obj):返回对象的所有可枚举属性的键名数组。constobj={a:1,b:2};console.log(Object.key</div> </li> <li><a href="/article/1892395273758502912.htm" title="【2025年】全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!" target="_blank">【2025年】全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!</a> <span class="text-muted">网安詹姆斯</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%E5%A4%A7%E8%B5%9B/1.htm">网络安全大赛</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>【2025年】全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!基于入门网络安全/黑客打造的:黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js(2-3天)2、apache+php(4-5天)3、mysql(2-3天)4、python(2-3天)5、burpsuite(1-2天)4.2、中期1、S</div> </li> <li><a href="/article/1892390738520502272.htm" title="前端基础入门:HTML、CSS 和 JavaScript" target="_blank">前端基础入门:HTML、CSS 和 JavaScript</a> <span class="text-muted">阿绵</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>在现代网页开发中,前端技术扮演着至关重要的角色。无论是个人网站、企业官网,还是复杂的Web应用程序,前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML(HyperTextMarkupLanguage)是构建网页的基础语言。它是网页的结构和内容的标记语言,决定了网页上的文本、图像、表单等元</div> </li> <li><a href="/article/1892389477767245824.htm" title="网页制作03-html,css,javascript初认识のhtml的图像设置" target="_blank">网页制作03-html,css,javascript初认识のhtml的图像设置</a> <span class="text-muted">Ama_tor</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E4%B8%93%E6%A0%8F/1.htm">网页制作专栏</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、图像格式网页中图像的格式有三种,Gif,Jpeg,PngGif:Graphicinterchangeformat图像交换格式,文件最多可使用256种颜色,最适合显示色调不连续或具有大面积单一颜色的图像,例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像;还可以制作动态图像Jpeg:Giantphotographicexpectgroup,它是一种图像压缩格式,可包含数百万种颜色,不支持</div> </li> <li><a href="/article/1892386200312934400.htm" title="JavaScript——操作浏览器窗口" target="_blank">JavaScript——操作浏览器窗口</a> <span class="text-muted">yiqi_perss</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>学习内容:今天学习了alert提示框,提示框中的内容,就是alert后边小括号中的内容例如:alert('我要学JavaScript!');alert('我要学习!');学习总结:日常小总结例如:后面的分号;可以随便去掉,不影响运行效果。不能去掉小括号,否则会报错,不信你可以试试。必须是英文引号,否则会报错。课外扩展:历史渊源例如:ECMAScript是一种语言标准,而JavaScript是网景公</div> </li> <li><a href="/article/1892360084474884096.htm" title="前端超长列表,虚拟滚动实现" target="_blank">前端超长列表,虚拟滚动实现</a> <span class="text-muted">大橙子-</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>虚拟滚动.container{width:300px;height:500px;overflow:hidden;border:1pxsolid#ccc;margin-top:50px;}.scroll-box{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;}.scroll-height-main</div> </li> <li><a href="/article/1892346975152566272.htm" title="前端框架虚拟DOM的产生" target="_blank">前端框架虚拟DOM的产生</a> <span class="text-muted">大橙子-</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>直接说结论:为了找出与命令式(原生实现步骤)所执行代码的最小差异化,从而优化代码性能。命令式:可以理解为面向过程编程,需要写好每个实现步骤constdiv=document.querySelector('#app')//获取divdiv.innerText='helloworld'//设置文本内容如果需要修改文字内容为“你好”div.innerText='你好'//设置文本内容声明式:可以理解为面</div> </li> <li><a href="/article/1892344959785299968.htm" title="百度极速版APP 自动脚本 javascript代码" target="_blank">百度极速版APP 自动脚本 javascript代码</a> <span class="text-muted">zaxjb123</span> <a class="tag" taget="_blank" href="/search/dubbo/1.htm">dubbo</a> <div>使用JavaScript编写针对百度极速版APP的自动化脚本通常涉及到使用WebView测试框架,比如Puppeteer或Selenium,这些工具允许你控制一个浏览器或WebView环境,从而与网页或APP中的Web内容进行交互。然而,对于原生APP(如百度极速版)的自动化测试,通常需要使用专门的移动应用自动化框架,如Appium。Appium支持多种编程语言,包括JavaScript。要使用J</div> </li> <li><a href="/article/1892336006464598016.htm" title="27岁大龄转码秋招惨败,朋友劝我转Java来得及吗?还是继续走前端或机器学习?" target="_blank">27岁大龄转码秋招惨败,朋友劝我转Java来得及吗?还是继续走前端或机器学习?</a> <span class="text-muted">程序员yt</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/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>今天给大家分享的是一位粉丝的提问,27岁大龄转码秋招惨败,朋友劝我转Java来得及吗?还是继续走前端或机器学习?接下来把粉丝的具体提问和我的回复分享给大家,希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问:211建筑本科,22年毕业后gap一年转码去了英国读的QS100的it的水硕(24年12月份毕业),转码后对就业形势认知不足,时间全花在课业上,八股文和算法准备的不充足,秋招算是惨败。读研</div> </li> <li><a href="/article/1892333107923709952.htm" title="JavaScript案例(简易ATM机)" target="_blank">JavaScript案例(简易ATM机)</a> <span class="text-muted">fusheng_cn</span> <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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Documentvarnum=100;do{varoperate=prompt("请输入您需要的操作:\n1.存钱\n2.取钱\n3.显示余额\n4.退出");switch(parseInt(operate)){case1://存钱varmoney1=prompt("请输入您需要存入的钱数:");varsum1=num+parseInt(money1);alert("您的余额为:"+sum1);n</div> </li> <li><a href="/article/1892318611989655552.htm" title="正则表达式regex" target="_blank">正则表达式regex</a> <span class="text-muted">GotoMeiben</span> <a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div>工具网站:RegExr:Learn,Build,&TestRegEx正则表达式(RegularExpression,Regex)是一种强大的字符串匹配工具,广泛用于文本搜索、数据处理和输入验证等场景。无论是Python、Java、JavaScript还是Shell脚本,Regex都是不可或缺的技能。本文将深入介绍正则表达式的各种用法,包括:基本匹配(字母、数字)特殊符号^$\b量词{}*+?字符类</div> </li> <li><a href="/article/1892312438930468864.htm" title="CSS 修改 SVG图标的颜色" target="_blank">CSS 修改 SVG图标的颜色</a> <span class="text-muted">小达学徒</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E6%A0%87%E9%A2%9C%E8%89%B2%E6%94%B9%E5%8F%98/1.htm">图标颜色改变</a> <div>方法1、利用filter中的drop-shadow给icon加样式(利用原图标的阴影区域,同时将原图标移动超过之前父元素范围)filter:drop-shadow(red80px0);transform:translateX(-80px);给父元素加样式(父元素超范围隐藏,正好把原图标的隐藏掉,显示阴影区域)overflow:hidden;filter的drop-shadow标准用法drop-sh</div> </li> <li><a href="/article/121.htm" title="jquery实现的jsonp掉java后台" target="_blank">jquery实现的jsonp掉java后台</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div> 什么是JSONP? 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。 1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准; 2、</div> </li> <li><a href="/article/248.htm" title="Struts2学习笔记" target="_blank">Struts2学习笔记</a> <span class="text-muted">caoyong</span> <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a> <div>SSH : Spring + Struts2 + Hibernate 三层架构(表示层,业务逻辑层,数据访问层) MVC模式 (Model View Controller) 分层原则:单向依赖,接口耦合 1、Struts2  =  Struts  + Webwork 2、搭建struts2开发环境    a>、到www.apac</div> </li> <li><a href="/article/375.htm" title="SpringMVC学习之后台往前台传值方法" target="_blank">SpringMVC学习之后台往前台传值方法</a> <span class="text-muted">满城风雨近重阳</span> <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div>springMVC控制器往前台传值的方法有以下几种: 1.ModelAndView    通过往ModelAndView中存放viewName:目标地址和attribute参数来实现传参:      ModelAndView mv=new ModelAndView();  mv.setViewName="success</div> </li> <li><a href="/article/502.htm" title="WebService存在的必要性?" target="_blank">WebService存在的必要性?</a> <span class="text-muted">一炮送你回车库</span> <a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div>做Java的经常在选择Webservice框架上徘徊很久,Axis  Xfire Axis2 CXF ,他们只有一个功能,发布HTTP服务然后用XML做数据传输。 是的,他们就做了两个功能,发布一个http服务让客户端或者浏览器连接,接收xml参数并发送xml结果。 当在不同的平台间传输数据时,就需要一个都能解析的数据格式。 但是为什么要使用xml呢?不能使json或者其他通用数据</div> </li> <li><a href="/article/629.htm" title="js年份下拉框" target="_blank">js年份下拉框</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java+web+ee/1.htm">java web ee</a> <div> <div id="divValue">test...</div>测试 //年份 <select id="year"></select> <script type="text/javascript"> window.onload = </div> </li> <li><a href="/article/756.htm" title="简单链式调用的实现技术" target="_blank">简单链式调用的实现技术</a> <span class="text-muted">归来朝歌</span> <a class="tag" taget="_blank" href="/search/%E6%96%B9%E6%B3%95%E8%B0%83%E7%94%A8/1.htm">方法调用</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E5%BC%8F%E5%8F%8D%E5%BA%94/1.htm">链式反应</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3/1.htm">编程思想</a> <div>在编程中,我们可以经常遇到这样一种场景:一个实例不断调用它自身的方法,像一条链条一样进行调用 这样的调用你可能在Ajax中,在页面中添加标签: $("<p>").append($("<span>").text(list[i].name)).appendTo("#result");   也可能在HQ</div> </li> <li><a href="/article/883.htm" title="JAVA调用.net 发布的webservice 接口" target="_blank">JAVA调用.net 发布的webservice 接口</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div> /** * @Title: callInvoke * @Description: TODO(调用接口公共方法) * @param @param url 地址 * @param @param method 方法 * @param @param pama 参数 * @param @return * @param @throws BusinessException </div> </li> <li><a href="/article/1010.htm" title="Javascript模糊查找 | 第一章 循环不能不重视。" target="_blank">Javascript模糊查找 | 第一章 循环不能不重视。</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Way/1.htm">Way</a> <div> 最近受我的朋友委托用js+HTML做一个像手册一样的程序,里面要有可展开的大纲,模糊查找等功能。我这个人说实在的懒,本来是不愿意的,但想起了父亲以前教我要给朋友搞好关系,再加上这也可以巩固自己的js技术,于是就开始开发这个程序,没想到却出了点小问题,我做的查找只能绝对查找。具体的js代码如下: function search(){ var arr=new Array("my</div> </li> <li><a href="/article/1137.htm" title="狼和羊,该怎么抉择" target="_blank">狼和羊,该怎么抉择</a> <span class="text-muted">atongyeye</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>狼和羊,该怎么抉择 在做一个链家的小项目,只有我和另外一个同事两个人负责,各负责一部分接口,我的接口写完,并全部测联调试通过。所以工作就剩下一下细枝末节的,工作就轻松很多。每天会帮另一个同事测试一些功能点,协助他完成一些业务型不强的工作。 今天早上到公司没多久,领导就在QQ上给我发信息,让我多协助同事测试,让我积极主动些,有点责任心等等,我听了这话,心里面立马凉半截,首先一个领导轻易说</div> </li> <li><a href="/article/1264.htm" title="读取android系统的联系人拨号" target="_blank">读取android系统的联系人拨号</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/sqlite%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">sqlite数据库</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AE%B9%E6%8F%90%E4%BE%9B%E8%80%85/1.htm">内容提供者</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9C%8D%E5%8A%A1%E7%9A%84%E4%BD%BF%E7%94%A8/1.htm">系统服务的使用</a> <div>       联系人的姓名和号码是保存在不同的表中,不要一下子把号码查询来,我开始就是把姓名和电话同时查询出来的,导致系统非常的慢   关键代码:     1, 使用javabean操作存储读取到的数据 package com.example.bean; /** * * @author Admini</div> </li> <li><a href="/article/1391.htm" title="ORACLE自定义异常" target="_blank">ORACLE自定义异常</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%82%E5%B8%B8/1.htm">自定义异常</a> <div>实例: CREATE OR REPLACE PROCEDURE test_Exception ( ParameterA IN varchar2, ParameterB IN varchar2, ErrorCode OUT varchar2 --返回值,错误编码 ) AS /*以下是一些变量的定义*/ V1 NUMBER; V2 nvarc</div> </li> <li><a href="/article/1518.htm" title="查看端号使用情况" target="_blank">查看端号使用情况</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>一、查看端口 在windows命令行窗口下执行: >netstat -aon|findstr "8080" 显示结果: TCP     127.0.0.1:80         0.0.0.0:0    &</div> </li> <li><a href="/article/1645.htm" title="【Spark二十】运行Spark Streaming的NetworkWordCount实例" target="_blank">【Spark二十】运行Spark Streaming的NetworkWordCount实例</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/wordcount/1.htm">wordcount</a> <div>Spark Streaming简介   NetworkWordCount代码   /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with </div> </li> <li><a href="/article/1772.htm" title="Struts2 与 SpringMVC的比较" target="_blank">Struts2 与 SpringMVC的比较</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a><a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>1. 机制:spring mvc的入口是servlet,而struts2是filter,这样就导致了二者的机制不同。 2. 性能:spring会稍微比struts快。spring mvc是基于方法的设计,而sturts是基于类,每次发一次请求都会实例一个action,每个action都会被注入属性,而spring基于方法,粒度更细,但要小心把握像在servlet控制数据一样。spring</div> </li> <li><a href="/article/1899.htm" title="Hibernate在更新时,是可以不用session的update方法的(转帖)" target="_blank">Hibernate在更新时,是可以不用session的update方法的(转帖)</a> <span class="text-muted">BreakingBad</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/update/1.htm">update</a> <div>地址:http://blog.csdn.net/plpblue/article/details/9304459 public void synDevNameWithItil() {Session session = null;Transaction tr = null;try{session = HibernateUtil.getSession();tr = session.beginTran</div> </li> <li><a href="/article/2026.htm" title="读《研磨设计模式》-代码笔记-观察者模式" target="_blank">读《研磨设计模式》-代码笔记-观察者模式</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; import java.util.Observable; import java.util.Observer; /** * “观</div> </li> <li><a href="/article/2153.htm" title="重置MySQL密码" target="_blank">重置MySQL密码</a> <span class="text-muted">chenhbc</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E7%BD%AE%E5%AF%86%E7%A0%81/1.htm">重置密码</a><a class="tag" taget="_blank" href="/search/%E5%BF%98%E8%AE%B0%E5%AF%86%E7%A0%81/1.htm">忘记密码</a> <div>如果你也像我这么健忘,把MySQL的密码搞忘记了,经过下面几个步骤就可以重置了(以Windows为例,Linux/Unix类似): 1、关闭MySQL服务 2、打开CMD,进入MySQL安装目录的bin目录下,以跳过权限检查的方式启动MySQL mysqld --skip-grant-tables  3、新开一个CMD窗口,进入MySQL mysql -uroot  </div> </li> <li><a href="/article/2280.htm" title="再谈系统论,控制论和信息论" target="_blank">再谈系统论,控制论和信息论</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9/1.htm">生物</a><a class="tag" taget="_blank" href="/search/%E8%83%BD%E6%BA%90/1.htm">能源</a><a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E5%BA%94%E7%94%A8/1.htm">企业应用</a><a class="tag" taget="_blank" href="/search/%E9%A2%86%E5%9F%9F%E6%A8%A1%E5%9E%8B/1.htm">领域模型</a> <div>                            再谈系统论,控制论和信息论     偶然看</div> </li> <li><a href="/article/2407.htm" title="oracle moving window size与 AWR retention period关系" target="_blank">oracle moving window size与 AWR retention period关系</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>转自: http://tomszrp.itpub.net/post/11835/494147 晚上在做11gR1的一个awrrpt报告时,顺便想调整一下AWR snapshot的保留时间,结果遇到了ORA-13541这样的错误.下面是这个问题的发生和解决过程. SQL> select * from v$version; BANNER -------------------</div> </li> <li><a href="/article/2534.htm" title="Python版B树" target="_blank">Python版B树</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>话说以前的树都用java写的,最近发现python有点生疏了,于是用python写了个B树实现,B树在索引领域用得还是蛮多了,如果没记错mysql的默认索引好像就是B树... 首先是数据实体对象,很简单,只存放key,value class Entity(object): '''数据实体''' def __init__(self,key,value)</div> </li> <li><a href="/article/2661.htm" title="C语言冒泡排序" target="_blank">C语言冒泡排序</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>代码示例: # include <stdio.h> //冒泡排序 void sort(int * a, int len) { int i, j, t; for (i=0; i<len-1; i++) { for (j=0; j<len-1-i; j++) { if (a[j] > a[j+1]) // >表示升序 </div> </li> <li><a href="/article/2788.htm" title="自定义导航栏样式" target="_blank">自定义导航栏样式</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89/1.htm">自定义</a> <div>-(void)setupAppAppearance { [[UILabel appearance] setFont:[UIFont fontWithName:@"FZLTHK—GBK1-0" size:20]]; [UIButton appearance].titleLabel.font =[UIFont fontWithName:@"FZLTH</div> </li> <li><a href="/article/2915.htm" title="11.性能优化-优化-JVM参数总结" target="_blank">11.性能优化-优化-JVM参数总结</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/jvm%E5%8F%82%E6%95%B0/1.htm">jvm参数</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>1.堆 -Xms --初始堆大小 -Xmx --最大堆大小 -Xmn --新生代大小 -Xss --线程栈大小 -XX:PermSize  --永久代初始大小 -XX:MaxPermSize  --永久代最大值 -XX:SurvivorRatio --新生代和suvivor比例,默认为8 -XX:TargetSurvivorRatio --survivor可使用</div> </li> <li><a href="/article/3042.htm" title="nginx日志分割 for linux" target="_blank">nginx日志分割 for linux</a> <span class="text-muted">HarborChung</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>nginx日志分割 for linux 默认情况下,nginx是不分割访问日志的,久而久之,网站的日志文件将会越来越大,占用空间不说,如果有问题要查看网站的日志的话,庞大的文件也将很难打开,于是便有了下面的脚本   使用方法,先将以下脚本保存为 cutlog.sh,放在/root 目录下,然后给予此脚本执行的权限   复制代码代码如下: chmo</div> </li> <li><a href="/article/3169.htm" title="Spring4新特性——泛型限定式依赖注入" target="_blank">Spring4新特性——泛型限定式依赖注入</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B%E5%BC%8F%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5/1.htm">泛型式依赖注入</a> <div>Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新</div> </li> <li><a href="/article/3296.htm" title="centOS安装GCC和G++" target="_blank">centOS安装GCC和G++</a> <span class="text-muted">liuxihope</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/gcc/1.htm">gcc</a> <div>Centos支持yum安装,安装软件一般格式为yum install .......,注意安装时要先成为root用户。 按照这个思路,我想安装过程如下: 安装gcc:yum install gcc 安装g++: yum install g++ 实际操作过程发现,只能有gcc安装成功,而g++安装失败,提示g++ command not found。上网查了一下,正确安装应该</div> </li> <li><a href="/article/3423.htm" title="第13章 Ajax进阶(上)" target="_blank">第13章 Ajax进阶(上)</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3550.htm" title="How to determine BusinessObjects service pack and fix pack" target="_blank">How to determine BusinessObjects service pack and fix pack</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a> <div>http://bukhantsov.org/2011/08/how-to-determine-businessobjects-service-pack-and-fix-pack/   The table below is helpful. Reference   BOE XI 3.x 12.0.0. y BOE XI 3.0 12.0. x. y BO</div> </li> <li><a href="/article/3677.htm" title="Oracle里的自增字段设置" target="_blank">Oracle里的自增字段设置</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div> 大家都知道吧,这很坑,尤其是用惯了mysql里的自增字段设置,结果oracle里面没有的。oh,no   我用的是12c版本的,它有一个新特性,可以这样设置自增序列,在创建表是,把id设置为自增序列 create table t ( id       number generated by default as identity (start with 1 increment b</div> </li> <li><a href="/article/3804.htm" title="Spring Security(01)——初体验" target="_blank">Spring Security(01)——初体验</a> <span class="text-muted">yang_winnie</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Security/1.htm">Security</a> <div>Spring Security(01)——初体验     博客分类: spring Security Spring Security入门安全认证        首先我们为Spring Security专门建立一个Spring的配置文件,该文件就专门用来作为Spring Security的配置</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>