tomeasure

网页制作知识点归纳

一、HTML

1、HTML简介

HTML全称 Hyper Text Markup Language，它不是一款编程语言，而是属于标记语言的一种，用于描述超文本中内容的显示方式，但必须通过浏览器的解释和翻译才能正确显示所标记的内容。
HTML元素包括：标题、段落、列表、表格及各种嵌入对象。其基本结构如下：


 
     
        ······文件头内容
     
     
        ······文件主体内容

2、基本标记

一个完整的HTML文档必须包含 3 部分：

：文档版本信息；
：文档头部；
：文档主体。

文档头部标记中通常包含的标记有：

标题标记：、</p> </li> <li> <p><strong>样式：</strong><style>、</p> </li> <li> <p><strong>脚本：</strong><script>、</p> </li> <li> <p><strong>元信息标记：</strong><meta>。</p> </li> </ul> <p>元信息标记可以对页面信息的说明、关键字、刷新等进行设置，这些信息不会显示在页面中。一个网页中可以有多个meta元素。meta的属性有name和http-equiv，其中name用于描述网页，以便于搜索引擎查找、分类。name的部分使用方式如下：</p> <ul> <li> <p><strong>设置页面关键字</strong>：<meta name="keywords" content="具体的关键字" /></p> </li> <li> <p><strong>设置页面说明</strong>：<meta name="description" content="页面说明" /></p> </li> <li> <p><strong>定义编辑工具</strong>：<meta name="generator" content="采用的编辑器" /></p> </li> <li> <p><strong>添加作者信息</strong>：<meta name="author" content="作者姓名" /></p> </li> </ul> <p>http-equiv的部分使用方式如下:</p> <ul> <li> <p>设置网页文字及语言：</p> <pre class="has"><code class="language-html"> <meta http-equiv="content-type" content="text/html; charset=gb2312" /></code></pre> <p> </p> </li> <li> <p>设置网页的定时跳转：</p> <pre class="has"><code class="language-html"> <meta http-equiv="refresh" content="跳转的时间; URL=跳转的地址" /></code></pre> <p> </p> </li> </ul> <p>HTML中采用对文档进行注释。<br><strong>标题字标记</strong>：<hn></hn>，n∈{1, 2, 3, 4, 5, 6}，n越大，标题的级别越低。<br><strong>标题字对齐属性</strong>：align，<strong>用法</strong>：<hn align="值"></hn>；<strong>取值</strong>：左对齐left、右对齐right、居中center。<br><strong>段落标记</strong><p>：可以没有</p>，每个新的<p>代表开始一个新的段落。<br><strong>换行标记</strong><br />：将文本强制换行；<strong>不换行标记</strong><nobr />：不允许浏览器对文本自动换行。<br><strong>水平线</strong><hr />：在对应的位置上放置水平线。<br> 段落中的其他常用标记：</p> <table border="1" style="width:500px;"> <tbody> <tr> <td>空格</td> <td>"</td> <td>&</td> <td><</td> <td>></td> <td>×</td> <td>§</td> <td>©</td> <td>®</td> <td>™</td> </tr> <tr> <td> </td> <td>"</td> <td>&</td> <td><</td> <td>></td> <td>×</td> <td>§</td> <td>©</td> <td>®</td> <td>™</td> </tr> </tbody> </table> <h2>3、超链接</h2> <p> </p> <p><strong>URL</strong>：Uniform Resource Locator，统一资源标识符。<br><strong>绝对路径</strong>：包括服务器在内的完全路径。优点：与链接的源端点无关；缺点：测试时必须在Internet服务器端进行，不利于站点的移植。<br><strong>相对路径</strong>：与原端点的位置相关，即源端点与目标端点之间的相对位置。目标文件在同一目录下：文件名称；在当前目录的子级目录下：子级路径+文件名称；在当前位置的父级目录下：用“..”符号表示当前的父级目录，该符号可以使用多次来表示更高的父级目录。<br> 链接分为<strong>内部链接</strong>、<strong>外部链接</strong>、<strong>锚点链接</strong>。<br><strong>目标窗口</strong>：设置链接的打开方式。target一共有四个值，分别为在当前页面打开链接（-self）、在全新的空白窗口打开连接（-blank）、在顶层框架中打开链接（-top）、在当前框架的上一层打开链接（-parent）<br><strong>内部链接</strong>：指向同一个网站中的资源。用法：<a href="innerFile.html">触发对象</a>。<br><strong>锚点链接</strong>：指向网页中的锚点。用法：创建锚点<a name="a_name"></a>；链接锚点<a href="#a_name"></a>。也可以链接到其他文件中的锚点，用法：<a href="链接的文件地址#锚点名称"></a>。<br> 锚点常用于内容庞大繁杂的网页，便于查找定位某些资源的位置。<br><strong>外部链接</strong>：指向外部网站或者其他网络。通常分为：</p> <table border="1" style="width:500px;"> <tbody> <tr> <td>HTTP协议链接</td> <td>E-mail链接</td> <td>FTP链接</td> <td>Telnet链接</td> <td>文件下载链接</td> </tr> <tr> <td>href="http://······"</td> <td>href="mailto:邮件地址"</td> <td>href="ftp://ftp地址"</td> <td>href="telnet://telnet地址"</td> <td>href="下载文件地址"</td> </tr> </tbody> </table> <p> </p> <h2>4、使用图像</h2> <p> </p> <p><strong>插入图像标记</strong>img，相关属性：源文件src、提示文字alt、宽度和高度width和height、边框border、垂直间距vspace、水平间距hspace、对齐align、设定avi文件的播放dynsrc、设定avi文件的循环播放次数loop、设定avi文件循环播放延迟loopdelay、设定avi文件播放方式start、设定低分辨率图片lowsrc、映像地图usemap。<br> src用于指定图像源文件的路径；alt有两个作用，一是正常显示图像时，鼠标指针置于其上会出现提示文字，二是未成功加载图像时，图像的位置会显示提示文字；width、height用于指定图像在网页中的宽度和高度。<br> 例：</p> <p> </p> <pre class="has"><code class="language-html"><img src="地址" alt="提示文字" width="宽度" height="高度" align="center" /></code></pre> <p><strong>图像热区连接</strong>：将图像分成多个热点区域，每个区域链接不同的网页。使用的标记为usemap。Dreamweaver能更加方便地设置热区连接。usemap的使用方式为：</p> <pre class="has"><code class="language-html"><img src="图像地址" usemap="映射图像名称" /> <map name="映射图像名称"> <area shape="热区形状" coords="热区坐标" href="链接地址"> </map></code></pre> <h2>5、使用列表</h2> <p> </p> <p><strong>列表</strong>是一种数据排列工具，它可以清晰直观的形式显示数据。HTML中一共有3种列表：<strong>有序列表</strong>、<strong>无序列表</strong>、<strong>定义列表</strong>。<br><strong>有序列表</strong>，在列表中将每个元素用数字或字母标号。可以设置序号类型type和起始数值start。type共有五种类型值，分别为：数字1，小写英文字母a，大学英文字母A，小写罗马数字i，大写罗马数字I；有序列表默认从1开始，start可以用来设置有序列表的起始数值，对英文字母与罗马数字同样起作用，但start的设定值只能是数字。语法如下：</p> <p> </p> <pre class="has"><code class="language-html"><ol type="a" start="a"> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol></code></pre> <p><strong>无序列表</strong>，项目排列没有顺序，并以符号作为分项标识。使用<ul></ul>作为无序列表的开头和结束。type的值有三种：默认的黑色实心圆disc，空心圆环circle，正方形square。<br> 定义列表，由定义条件和定义描述组成。语法格式为：</p> <pre class="has"><code class="language-html"><dl> <dt>待释名词</dt> <dd>名词解释</dd> </dl></code></pre> <p><strong>菜单列表</strong>，显示效果与无序列表相同，标记为<menu></menu>。</p> <h2>6、使用表格</h2> <p> </p> <p>表格常用于排列数据或者布局定位。<br> 表格由<strong>行</strong>、<strong>列</strong>和<strong>单元格</strong>三部分构成，一般通过3个标记来创建，分别是表格标记<table></table>、行标记<tr></tr>以及单元格标记<td></td>。<br> 在<table></table>之间可以利用caption标记设置表格的标题。格式为：<caption>表格的标题</caption>。<br> 表头是单元格的变体，常常指的是表格的第一行或第一列，用来表明这一行或列的内容属性。一般情况下浏览器会自动以粗体加居中的方式显示表头内容。表头的使用格式为：<th>表头内容</th>。<br><strong>宽度、高度和对齐方式是表格的三个主要基本属性</strong>。语法格式为：<table width="宽度" height="高度" align="对齐方式"></table>。<br> 表格的边框设置有：边框宽度border、边框颜色bordercolor、内框宽度cellspacing、表格内文字与边框间距cellpadding。这四个属性放在<table>中设置。其中cellspacing用于设置每个单元格之间的间距，cellpadding设置单元格内的文字与其边框之间的距离。<br> 表格的背景可以通过背景颜色bgcolor（如：#ffcc99）、背景图像background（图像地址）进行设置。<br> 表格的行属性包括：高度控制height、边框颜色bordercolor、行背景bgcolor与background、水平对齐方式align、垂直对齐方式valign。其中valign的取值范围为：顶部对齐top、中央对齐middle、底部对齐bottom。<br> 表格的单元格属性包括：单元格大小width与height、水平跨度colspan、垂直跨度rowspan、对齐方式align与valign、背景色bgcolor、边框颜色bordercolor、亮边框bordercolorlight、暗边框bordercolordark、背景图像background。默认情况下，单元格的大小会根据内容自动调整；colspan与rowspan用于合并相邻的单元格；<br> tr的属性会覆盖table的属性设置，td的属性会覆盖tr的属性设置。<br><strong>表格的结构，具体分为首、主体、尾</strong>。表格结构的划分，有利于对表格属性进行统一设置。<br><strong>表首</strong>采用的标记是<thead></thead>，它可以设置的属性有背景颜色、文字对齐方式、文字的垂直对齐方式等。往往将表格的第一行或者前几行作为表首。<br><strong>表主体</strong>采用的标记是<tbody></tbody>。<br><strong>表尾</strong>采用的标记是<tfoot></tfoot>。表格结构的设置示例：</p> <p> </p> <pre class="has"><code class="language-html"><table 表格属性值设置> <thead 表首属性设置> <tr> <td>姓名</td> <td>性别</td> <td>学历</td> </tr> </thead> <tbody 表主体属性设置> <tr> <td>张三</td> <td>男</td> <td>本科</td> </tr> <tr> <td>李四</td> <td>男</td> <td>专科</td> </tr> </tbody> <tfoot 表尾属性设置> <tr> <td colspan="3">这是表尾</td> </tr> </tfoot> </table></code></pre> <h2>7、使用表单</h2> <p> </p> <p>表单主要用来收集客户端提供的相关信息，使网页具有交互功能。使用<form></form>创建表单，在<form>中设置表单的基本属性。表单的处理程序action以及传送方法method是必不可少的参数。<br><strong>action用于指定表单数据提交到的目标地址。</strong><br><strong>name用于为表单命名，不是表单的必要属性。</strong><br><strong>method用于指定在把数据提交到服务器时使用的HTTP提交方法，取值为get或post</strong>。其中get作用是把数据提交到action属性指定的URL后，再将这个新的URL送到处理程序上；post将数据包含到表单主体中，然后送到处理程序上。<br><strong>enctype用于设置表单信息提交的编码方式</strong>，取值有默认的application/x-www-form-urlencoded与用于上传文件的multipart/form-data等。<br> 上面四个属性的使用示例如下：</p> <p> </p> <pre class="has"><code class="language-html"><form action="mailto:957419821@qq.com" name="a_form" method="post" enctype="application/x-www-form-urlencoded"> </form></code></pre> <p>表单对象通常包括：文字字段text、密码域password、按钮、文件域file。按钮又细分为单选按钮radio、复选框checkbox、普通按钮button、提交按钮submit、重置按钮reset、图像按钮image。隐藏域中的数据是不显示在浏览器中的，这种需要提交的数据用hidden设置。<br> text的语法：</p> <pre class="has"><code class="language-html"><input name="控件名称" type="text" value="文字字段的默认取值" size="控件长度" maxlength="最长字符数" /></code></pre> <p>密码域只能让周围的人看不到输入的文本，并不能使数据安全，想要让数据安全需要在浏览器与服务器之间建立一个安全链接。password的语法：</p> <pre class="has"><code class="language-html"><input name="控件名称" type="password" value="文字字段的默认取值" size="控件长度" maxlength="最长字符数" /></code></pre> <p>在单选按钮中必须设置value的值，同一个选择列表中的所有单选按钮的name值及value值必须相同，并且只能有一个按钮被设为checked。radio的语法：</p> <pre class="has"><code class="language-html"><input name="单选按钮名称" type="radio" value="单选按钮的取值" checked="checked" /></code></pre> <p>复选框可以选择多个选项，并且通过对某一个框设置checked对选择列表进行默认选项设置。checkbox的语法如下：</p> <pre class="has"><code class="language-html"><input name="复选框名称" type="radio" value="复选框取值" checked /></code></pre> <p>普通按钮一般需要脚本的配合，value的值是按钮上要显示的文字。普通按钮的使用方法：</p> <pre class="has"><code class="language-html"><input name="按钮名称" type="submit" value="按钮取值" onclick="处理程序" /></code></pre> <p>提交按钮用于实现表单的提交，重置按钮用来清除用户在页面中输入的信息。两者的使用方式如下：</p> <pre class="has"><code class="language-html"><input name="按钮名称" type="submit" value="按钮取值" /> <input name="按钮名称" type="reset" value="按钮取值" /></code></pre> <p>图像按钮用于将指定的图像设定为按钮，它需要src设置目标图像。用法如下：</p> <pre class="has"><code class="language-html"><input name="图像域名称" type="image" src="图像路径"/></code></pre> <p>设置隐藏域只需将提交按钮中的type属性改为hidden即可。<br> 文件域用于浏览器查找硬盘中的文件路径，然后通过表单将选中的文件上传到服务器中。file的语法如下：</p> <pre class="has"><code class="language-html"><input name="文件域名称" type="file" size="控件长度" maxlength="最长字符数" /></code></pre> <p>菜单与列表项主要用来选择给定答案中的一种，都是通过<select>与<option>标记来完成。<br> 下拉菜单的宽度由<option>中最长文本的宽度来决定。语法如下：</p> <pre class="has"><code class="language-html"><select name="下拉菜单名称"> <option value="选项值" selected>选项显示内容</option> ··· </select></code></pre> <p>列表项可以显示出几条信息，当条目超出一定数量后，列表项会显示滚动条。size用于设置在页面中显示的最多列表级数，语法如下：</p> <pre class="has"><code class="language-html"><select name="l列表项名称" size="显示的列表项数" multiple> <option value="选项值" selected>选项显示内容</option> ··· </select></code></pre> <p>文本域用于提交多行文本，使用<textarea>标记实现。不能使用value设置默认显示的初始值。语法如下：</p> <pre class="has"><code class="language-html"><textarea name="文本域名城" cols="列数" rows="行数">文本域内显示的文本</textarea></code></pre> <p>id用来表示页面中的唯一元素。</p> <h2>8、添加多媒体</h2> <p> </p> <p>多媒体包括动画、声音、视频等媒体元素。<br> 滚动标记marquee可以用来移动文字、网页、表格等元素。marquee可以设置的属性有：滚动方向direction、滚动方式behavior、滚动速度scrollamount、滚动延迟scrolldelay、滚动循环loop、滚动范围width和height、滚动背景颜色bgcolor、空白空间hspace和vspace。<br> 滚动方向direction默认情况下是从右向左，取值可以为：向上up、向下down、向左left、向右right。<br> 滚动方式behavior默认效果是循环滚动，取值可以为：循环滚动scroll、仅循环一次slide、来回交替滚动alternate。<br> 滚动速度scrollamount单位是像素，用来设置每次滚动时移动的长度。<br> 滚动延迟scrolldelay单位是毫秒，用来设置相邻两次移动之间的停留时间。<br> 滚动循环loop用来设置滚动的次数，默认情况下为无限循环。<br> 滚动范围width、height默认效果是文字背景与文字同高与浏览器同宽，单位为像素<br> 滚动背景颜色bgcolor设置滚动范围的背景颜色。<br> 空白空间hspace和vspace设置滚动对象到滚动范围上下边框的距离，默认是0。</p> <p> </p> <p>滚动效果的一个示例：</p> <p> </p> <pre class="has"><code class="language-html"><marquee direction="up" behavior="alternate" scrollamount="3" scrolldelay="400" loop="10" width="300" height="400" bgcolor="#ff9966" hspace="50" vspace="40"> 我在滚动 </marquee> 采用embed标记插入Flash动画、声音文件和视频文件。语法如下： <embed src="文件地址" width="宽度" height="高度"></embed></code></pre> <p> </p> <p> </p> <p> </p> <h2>9、HTML 5 入门基础</h2> <p> </p> <p>HTML 5 是一种网络标准，比HTML 4.01 和XHTML 1.0 具有更强的页面表现功能，可以充分调用本地资源。<br> HTML 5 采用一些新属性替代了部分JavaScript代码，并把部分Div布局代码变得更加语义化，这使得网站前端的代码变得更加精炼、简洁和清晰。它提供了搞笑的数据管理、绘制、视频和音频工具，拥有强大的灵活性，支持开发交互式网站，引入了新标签以及表单控制、API、多媒体、数据库支持等增强性功能。<br> 3个要点：<br> i、省略标签<br> a、必须写明结束标签的元素：<br> area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、whr<br> b、可以省略结束标签的元素：<br> li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th<br> c、可以省略整个标签的元素：<br> html、head、body、colgroup、tbody<br> ii、取得布尔值的属性<br> 设定属性值为“true”时，可以将属性值设为属性名称本身，也可以设为空字符串，甚至只需写出该属性而不用设置，如：</p> <pre class="has"><code class="language-html"> <input type="checkbox" checked > <input type="checkbox" checked="checked" > <input type="checkbox" checked="" ></code></pre> <p>iii、省略属性的引用符<br> 只要属性值不包含“空格”、“<”、“>”、“ ' ”、“ " ”、“=”、“ ` ”等符号，都可以省略属性的引用符。如：</p> <pre class="has"><code class="language-html"> <input type="text" > <input type='text' > <input type=text ></code></pre> <p>HTML 5 与HTML 4 相比，优点是：<br> i、使搜索引擎更加容易抓取和索引<br> ii、提供更多的功能<br> iii、可用性提高，提升用户体验<br> HTML 5 新增的元素和废除的元素：<br> 新增结构元素：章节section、文章头部header、文章底部footer、链接集合nav、文章article<br> 新增块级元素：侧边aside、媒介内容的分组figure、媒介内容的标题说明ficaption、日常对话dialog<br> 新增行内语义元素：标记文本内容mark、日期/时间time、度量meter、运行进度progress<br> 新增嵌入多媒体元素与交互性元素：视频video、音频audio、多媒体embed<br> 新增input元素的type类型：url、email、date、time、datetime<br> 废除能使用CSS的元素<br> 废除frame框架<br> 废除只能部分浏览器支持的元素<br> 废除acronym、dir、isindex、listing、xmp、nextid、plaintext，并分别用abbr、ul、form+input、pre、code、guids、"text/plain"替代。<br> 此外HTML 5 还新增并废除了一些属性。</p> <p> </p> <h2>10、HTML 5 的结构</h2> <p> </p> <p>主体结构元素：article、section、nav、aside<br> 非主体结构元素：header、hgroup、footer、address<br> article具有独立的结构，可以作为独立的内容项，例如论坛帖子、杂志文章、博客文章、用户评论、插件等。该元素可以将信息各部分进行任意分组。可以包含<header><footer>等标签。<br> 一个网页中可能有多个独立的article元素，每一个article元素都允许有自己的标题与脚注等从属元素，并允许对自己的从属元素单独使用样式。例如对article中的header采用样式设置：article header{color:red;text-align:left;}<br> section元素对于网站或APP中页面上的内容进行分块。通常由内容及标题构成。<br> nav元素在HTML 5 中用于包裹一个导航链接组，在同一个页面中可以存在多个nav。使用位置：顶部传统导航条、侧边导航、页内导航。<br> aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。当aside放在article中时，可以作为主要内容的附属信息部分；当aside放在article元素之外时，可以作为页面或站点全局的附属信息部分。<br> header元素用于放置整个页面或页面内的一个内容区块的标题，包括文字、表格、表单、logo图片等。它常置于页面的开头。每个页面可以有多个header，每个header至少有一个heading元素（h1~h6）。<br> hgroup用于将标题及其子标题进行分组，一个内容区块的标题及其子标题算一组。当文章只有一个主标题时，不需要hgroup。<br> footer用于放置脚注信息，如作者、相关阅读、版权信息。可以多次使用。footer可以单独用于整个页面的页脚，也可以作为一个内容区块的页脚，如<section>、<article>。<br> address用于放置联系信息，如作者、站点链接、电子邮件、电话号码等，通常放置在文档末尾，这部分内容在浏览器中会以斜体显示。</p> <h2>11、HTML 5 补充</h2> <p> </p> <ul> <li>视频video</li> </ul> <p>支持OGG、MP4、WEBM3种视频格式，拥有的属性有：src、poster、preload、autoplay、loop、controls、width、height等。<br> poster：指定视频加载时或用户点击播放按钮前显示的图像。<br> preload：定义视频是否预加载，一共3个取值：none、metadata、auto，默认为auto。none不载入视频，metadata载入元数据，auto载入整个视频。若使用autoplay属性，则preload被忽略。<br> autoplay：是否自动播放，接收布尔值。<br> loop：是否循环播放，接收布尔值。<br> controls：是否显示控件，接收布尔值。<br> 应用于video元素中的source元素用来插入视频源，并且可以插入多个同一个但不同编码方式的视频，网页会使用第一个浏览器可以识别的格式。source元素只能在video中未设置src时使用。它的属性有3个：源地址src、媒体类型type、媒介选项media。type属性值形式为："video/mp4"或"video/ogg"或"video/webm"，media默认为"all"。<br> 一个例子：</p> <p> </p> <pre class="has"><code class="language-html"><video width="500" height="240" controls autoplay loop poster="某个图片地址"> <source src="xxx.mp3" type="video/mp3"> <source src="xxx.ogg" type="video/ogg"> <source src="xxx.webm" type="video/webm"> </video></code></pre> <ul> <li>音频audio</li> </ul> <p>audio同样可以利用source插入多个音频源。当audio标记中不包含controls属性时，页面将不会显示播放器，这时应将音频播放的方法放在页面的onload事件中。<br> 可以被audio触发的事件有：onClick、onMouseMove、onFocus、onPlay、onPause、onEnded等，故可用JavaScript实现交互。<br> 一个例子:</p> <pre class="has"><code class="language-html"><script> function showpicture(){ document.getElementById("musicstaff").style.visibility="visible"; } function hidepicture(){ document.getElementById("musicstaff").style.visibility="hidden"; } function thanks(){ document.getElemenById("thanks").innerHTML="<h2>Thanks for listening</h2>"; } </script> <div id="thanks"></div> <audio id="audio1" controls onplay="showpicture()" onpause="hidepicture()" onended="thanks()"> <source src="某个音频地址" type="audio/格式"> </audio> <img src="某个图片地址" width="376" height="262" id="musicstaff" style="visibility:hidden;"></code></pre> <ul> <li>画布canvas</li> </ul> <p>canvas可以直接在HTML上进行图形操作。它可以控制指定矩形区域当中的每一个像素。canvas必须包含width与height属性。需要使用JavaScript。<br> 两个应用方式：<br><strong>线性渐变</strong>：通过document获得canvas元素，得到canvas中的context，利用得到的context创建线性渐变linearGradient，在渐变中设置颜色点及该点的颜色，用最后的渐变设置context的style，设置context的rect。<br> 方法createLinearGradient(x1, y1, x2, y2)设置渐变的区域和方向。<br> 一个例子：</p> <pre class="has"><code class="language-html"><script> var myCanvas = document.getElementById("this_is_a_canvas"); var myContext = myCanvas.getContext("2d"); var myGradient = myContext.createLinearGradient(30, 30, 300, 300); myGradient.addColorStop("0", "#CC3"); myGradient.addColorStop(".40", "#FF0"); myGradient.addColorStop(".57", "#390"); myGradient.addColorStop(".82", "#90C"); myGradient.addColorStop("1.0", "#9FF"); myContext.fillStyle = myGradient; myContext.fillRect(0, 0, 400, 400); </script></code></pre> <p><strong>径向渐变</strong>：从一个点向外围扩散，可以使用createRadialGradient()方法创建，该方法拥有6个参数，每3个为一组，每组定义一个圆的原点和半径。与创建线性渐变的过程相似，不同的是要用createRadialGradient()方法替代createLinearGradient()方法。例如：</p> <pre class="has"><code class="language-html">var myGradient = myContext.createRadialGradient(200, 200, 10, 300, 300, 300);</code></pre> <ul> <li>可缩放矢量图形SVG</li> </ul> <p>SVG是基于XML的一种图形格式，遵从XML语法，并用文本格式的描述性语言来描述图像内容，是一种与图像分辨率无关的矢量图形格式。支持3种类型的图形对象：形状、图像、文本。SVG可以将图形对象分组、样本化、转换和组合到之前呈现的对象中，且具有嵌套转换、剪切路径、alpha蒙板和模板对象。<br> SVG是动态和交互式的，并支持DOM。<br> SVG的基本图形有：圆circle、椭圆ellipse、矩形rect、线条line、折线polyline、多边形polygon。<br> circle的属性：半径r、圆心坐标cx和cy；<br> rect的属性：左上角坐标x和y、宽度和高度width与height、4个圆角的半径rx和ty；<br> ellipse的属性：中心坐标cx和cy、半长轴和半短轴rx和ry；<br> line的属性：起点和终点坐标x1、y1、x2、y2；<br> polyline是相互连接的线段的集合，需要使用points属性，语法为：<polyline points="坐标1,坐标2, ···" fill="none" stroke="#000" />。<br> polygon使用方式与polyline相同，但在最后会自动闭合线条。<br> 在同一个svg标记下的图像元素会依次重叠，文本不能自动换行，各个图像可以使用fill及stroke属性设置图像的内部填充颜色及笔画的颜色及宽度。stroke-width及stroke-linecap用来设置线条宽度和线段端点的形状，stroke-linecap的取值有：butt、square、round。<br> svg支持animate标记来实现动画，一个例子：</p> <p> </p> <p> </p> <pre class="has"><code class="language-html"><svg width="8cm" height="3cm" viewBox="0 0 800 300"> <desc>基本动画元素</desc> <rect x="1" y="1" width="798" height="298" fill="none" stroke="blue" stroke-width="2" /> <rect id="RectElement" x="300" y="100" width="300" height="100" fill="rgb(255, 255, 0)"> <animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="0"/> <animate attributeName="y" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="0" /> <animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="800" /> <animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" /> </rect> <g transform="translate(100, 100)"> <text id="TextElement" x="0" y="0" font-family="Verdana" font-size="35.27" visibility="hidden"> 动画播放! <set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze" /> <animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze" /> <animate attributeName="fill" attributeType="CSS" from="rgb(0, 0, 255)" to="rgb(128, 0, 0)" begin="3s"dur="6s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="3s" dur="6s" fill="freeze" /> </text> </g> </svg></code></pre> <p> </p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1279510607363588096"></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/1943992776169418752.htm" title="Flask框架入门：快速搭建轻量级Python网页应用" target="_blank">Flask框架入门：快速搭建轻量级Python网页应用</a> <span class="text-muted">「已注销」</span> <a class="tag" taget="_blank" href="/search/python-AI/1.htm">python-AI</a><a class="tag" taget="_blank" href="/search/python%E5%9F%BA%E7%A1%80/1.htm">python基础</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E7%BD%91%E7%BB%9C/1.htm">网站网络</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>转载：Flask框架入门：快速搭建轻量级Python网页应用1.Flask基础Flask是一个使用Python编写的轻量级Web应用框架。它的设计目标是让Web开发变得快速简单，同时保持应用的灵活性。Flask依赖于两个外部库：Werkzeug和Jinja2，Werkzeug作为WSGI工具包处理Web服务的底层细节，Jinja2作为模板引擎渲染模板。安装Flask非常简单，可以使用pip安装命令</div> </li> <li><a href="/article/1943990125864218624.htm" title="JavaScript 树形菜单总结" target="_blank">JavaScript 树形菜单总结</a> <span class="text-muted">Auscy</span> <a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，</div> </li> <li><a href="/article/1943987856808669184.htm" title="前端项目架构设计要领" target="_blank">前端项目架构设计要领</a> <span class="text-muted"></span> <div>1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目</div> </li> <li><a href="/article/1943979785097113600.htm" title="【前端】jQuery数组合并去重方法总结" target="_blank">【前端】jQuery数组合并去重方法总结</a> <span class="text-muted"></span> <div>在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...</div> </li> <li><a href="/article/1943974618851241984.htm" title="Vue3+Vite+TS+Axios整合详细教程" target="_blank">Vue3+Vite+TS+Axios整合详细教程</a> <span class="text-muted">老马聊技术</span> <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/Vite/1.htm">Vite</a><a class="tag" taget="_blank" href="/search/TS/1.htm">TS</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个</div> </li> <li><a href="/article/1943971211121848320.htm" title="前端 NPM 包的依赖可视化分析工具推荐" target="_blank">前端 NPM 包的依赖可视化分析工具推荐</a> <span class="text-muted">前端视界</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/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/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端NPM包的依赖可视化分析工具推荐关键词：NPM、依赖管理、可视化分析、前端工程、包管理、依赖冲突、性能优化摘要：本文将深入探讨前端开发中NPM包依赖可视化分析的重要性，介绍5款主流工具的使用方法和特点，并通过实际案例展示如何利用这些工具优化项目依赖结构、解决版本冲突问题以及提升构建性能。文章将帮助开发者更好地理解和掌控项目依赖关系，提高开发效率和项目可维护性。背景介绍目的和范围本文旨在为前端开</div> </li> <li><a href="/article/1943969321717919744.htm" title="日历插件-FullCalendar的详细使用" target="_blank">日历插件-FullCalendar的详细使用</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> <div>一、介绍FullCalendar是一个功能强大、高度可定制的JavaScript日历组件，用于在网页中显示和管理日历事件。它支持多种视图（月、周、日等），可以轻松集成各种框架，并提供丰富的事件处理功能。二、实操案例具体代码如下：FullCalendar日期选择body{font-family:Arial,sans-serif;margin:20px;}#calendar{max-width:900</div> </li> <li><a href="/article/1943961125532004352.htm" title="数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验" target="_blank">数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验</a> <span class="text-muted">ui设计前端开发老司机</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言：从“平面交互”到“沉浸体验”的UI革命当用户在电商APP中翻看3D家具模型却无法感知其与自家客厅的匹配度，当设计师在2D屏幕上绘制汽车内饰却难以预判实际乘坐体验——传统UI设计的“平面化、静态化、割裂感”</div> </li> <li><a href="/article/1943960369345130496.htm" title="Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求" target="_blank">Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求</a> <span class="text-muted">可曾去过倒悬山</span> <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/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求三年经验是Java程序员的分水岭，技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求，为你绘制可落地的进阶路线。一、Java核心：从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解，大厂面试常考以下能力：JVM与性能调优内存模型（堆外内存、元空间）、GC算法（G1/ZGC适用场</div> </li> <li><a href="/article/1943950163496202240.htm" title="JavaScript 基础09：Web APIs——日期对象、DOM节点" target="_blank">JavaScript 基础09：Web APIs——日期对象、DOM节点</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/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基础09：WebAPIs——日期对象、DOM节点进一步学习DOM相关知识，实现可交互的网页特效能够插入、删除和替换元素节点。能够依据元素节点关系查找节点。一、日期对象掌握Date日期对象的使用，动态获取当前计算机的时间。ECMAScript中内置了获取系统时间的对象Date，使用Date时与之前学习的内置对象console和Math不同，它需要借助new关键字才能使用。1.实例</div> </li> <li><a href="/article/1943946255763828736.htm" title="《Java前端开发全栈指南：从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南：从Servlet到现代框架实战》</a> <span class="text-muted"></span> <div>前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处</div> </li> <li><a href="/article/1943932016164663296.htm" title="Vue3组件库实战: 打造高复用UI系统" target="_blank">Vue3组件库实战: 打造高复用UI系统</a> <span class="text-muted">武昌库里写JAVA</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a> <div>Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证</div> </li> <li><a href="/article/1943930502771699712.htm" title="Flutter基础（前端教程⑥-按钮切换）" target="_blank">Flutter基础（前端教程⑥-按钮切换）</a> <span class="text-muted">aaiier</span> <a class="tag" taget="_blank" href="/search/Flutter/1.htm">Flutter</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>1.假设你已有的两个表单组件（示例）//手机号注册表单（示例）classPhoneRegisterFormextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnColumn(children:[TextField(decoration:InputDecoration(labelText:'手机号')),Text</div> </li> <li><a href="/article/1943929870320988160.htm" title="为Layui Table组件添加前端搜索功能" target="_blank">为Layui Table组件添加前端搜索功能</a> <span class="text-muted">caifox菜狐狸</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85%EF%BC%9A%E4%BB%8E%E6%96%B0%E6%89%8B%E5%88%B0%E4%B8%93%E5%AE%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/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/table/1.htm">table</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%90%9C%E7%B4%A2/1.htm">前端搜索</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E6%90%9C%E7%B4%A2/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>在现代Web开发中，数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架，以其简洁的代码、丰富的组件和强大的功能，为开发者提供了极大的便利。其中，Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项，成为了许多项目中不可或缺的部分。然而，在实际应用中，仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息，这就需要为表格添</div> </li> <li><a href="/article/1943919909612351488.htm" title="Vue.js 过渡 & 动画" target="_blank">Vue.js 过渡 & 动画</a> <span class="text-muted">lsx202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡</div> </li> <li><a href="/article/1943881970459144192.htm" title="浏览器的消息队列和事件循环机制（宏任务和微任务）" target="_blank">浏览器的消息队列和事件循环机制（宏任务和微任务）</a> <span class="text-muted">jieyucx</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/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/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/%E6%B6%88%E6%81%AF%E9%98%9F%E5%88%97/1.htm">消息队列</a><a class="tag" taget="_blank" href="/search/event/1.htm">event</a><a class="tag" taget="_blank" href="/search/loop/1.htm">loop</a><a class="tag" taget="_blank" href="/search/%E5%AE%8F%E4%BB%BB%E5%8A%A1/1.htm">宏任务</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BB%BB%E5%8A%A1/1.htm">微任务</a> <div>引言在当今互联网时代，我们常常使用浏览器来访问各种网页和应用程序。然而，你是否有想过浏览器是如何处理和执行我们在网页中触发的各种事件和任务的呢？这就涉及到浏览器的消息队列和事件循环机制。浏览器作为一个复杂的软件系统，需要高效地管理和执行各种任务，以保证用户能够流畅地使用网页和应用程序。而消息队列和事件循环机制就是浏览器用来处理这些任务的核心机制。在本文中，我们将深入探讨浏览器的消息队列和事件循环机</div> </li> <li><a href="/article/1943853592725221376.htm" title="GPT实操——利用GPT创建一个应用" target="_blank">GPT实操——利用GPT创建一个应用</a> <span class="text-muted">狗木马</span> <a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/gpt-3/1.htm">gpt-3</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a> <div>功能描述信息查询：用户可以询问各种问题，如天气、新闻、股票等，机器人会返回相关信息。任务执行：用户可以要求机器人执行一些简单的任务，如设置提醒、发送邮件等。情感支持：机器人可以与用户进行情感交流，提供安慰和支持。个性化设置：用户可以自定义机器人的回复风格和偏好。技术栈前端：React.js后端：Node.js+Express数据库：MongoDB自然语言处理：OpenAIGPT-3API其他工具：</div> </li> <li><a href="/article/1943847416503529472.htm" title="前端面试题总结——JS篇" target="_blank">前端面试题总结——JS篇</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/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>一、说说JavaScript中的数据类型？存储上有什么差别？1、数据类型基本类型number：数值类型十进制：letintNum=55八进制（零开头）：letnum1=070十六进制（0x开头）：lethexNum1=0xANaN：特殊数值，意为“不是数值”string：字符串类型boolean：布尔值，true或falseundefined：表示未定义null：空值symbol：是原始值，且符号</div> </li> <li><a href="/article/1943844765225250816.htm" title="前端面试题——5.AjAX的缺点？" target="_blank">前端面试题——5.AjAX的缺点？</a> <span class="text-muted">浅端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a> <div>①传统的web交互是：用户一个网页动作，就会发送一个http请求到服务器，服务器处理完该请求再返回一个完整的HTML页面，客户端再重新加载，这样极大地浪费了带宽。②AJAX的出现解决了这个问题，它只会向服务器请求用户所需要的数据，并在客户端采用JavaScript处理返回的数据，操作DOM更新页面。③AJXA优点：无刷新更新页面异步服务器通信前端后端负载均衡④AJAX缺点：干掉了Back和Hist</div> </li> <li><a href="/article/1943842998383079424.htm" title="2023高薪前端面试题（二、前端核心——Ajax）" target="_blank">2023高薪前端面试题（二、前端核心——Ajax）</a> <span class="text-muted"></span> <div>原生AjaxAjax简介Ajax全程为AsynchronousJavaScript+XML，就是异步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势是：无刷新获取数据，实现局部刷新Ajax是一种用于创建快速动态网页的技术AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式Ajax的应用场景页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示</div> </li> <li><a href="/article/1943841736426057728.htm" title="前端面试题——手写实现 ajax" target="_blank">前端面试题——手写实现 ajax</a> <span class="text-muted">阿水爱踢中锋</span> <a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>凡是和后台有过数据交互的小伙伴肯定都接触过ajax.我们可以通过ajax来实现页面的无刷新请求数据，这样就能在保证良好用户体验的同时，将更多的内容展示给用户ajax在我们的开发工作中已经司空见惯，几乎所有我们频繁使用的库和框架都提供了经过完善封装后的ajax方法，如jQuery、zepto、angular等等，这使得我们的数据请求变得异常简洁明了但是这也带来了很明显的缺陷，就是我们知道如何去使用封</div> </li> <li><a href="/article/1943832282418704384.htm" title="深入解析TCP：可靠传输的核心机制与实现逻辑" target="_blank">深入解析TCP：可靠传输的核心机制与实现逻辑</a> <span class="text-muted">Gappsong874</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</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/web%E5%AE%89%E5%85%A8/1.htm">web安全</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/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>TCP协议概述TCP（TransmissionControlProtocol）是一种面向连接的、可靠的传输层协议。它通过一系列机制确保数据准确、有序地从发送方传递到接收方，适用于对可靠性要求高的场景（如网页浏览、文件传输）。可靠传输的核心机制三次握手建立连接TCP通过三次握手（Three-WayHandshake）初始化连接，确保双方具备收发能力：SYN：客户端发送SYN=1和随机序列号seq=x</div> </li> <li><a href="/article/1943826858080530432.htm" title="uniapp 如何封装实现任意页面都能使用的全局弹窗" target="_blank">uniapp 如何封装实现任意页面都能使用的全局弹窗</a> <span class="text-muted">代码简单说</span> <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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/uniapp%E5%85%A8%E5%B1%80%E5%BC%B9%E7%AA%97/1.htm">uniapp全局弹窗</a><a class="tag" taget="_blank" href="/search/uniapp%E5%BC%B9%E7%AA%97%E7%BB%84%E4%BB%B6/1.htm">uniapp弹窗组件</a> <div>【实战干货】uniapp如何封装实现任意页面都能使用的全局弹窗标签：uniapp弹窗组件全局弹窗Vue动态渲染跨页面弹窗✨前端老司机亲授，uniapp无法在所有页面中直接用自定义弹窗？别急，一招动态挂载vue实例，优雅解决！背景故事：一个被“弹窗”搞崩溃的早晨作为一名前端开发工程师，有一天我在给uniapp项目加IM消息功能，需求是：不论当前用户在哪个页面，只要有消息来，就要立即弹出提示窗口。听起</div> </li> <li><a href="/article/1943824842390302720.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> <div>1.问题描述场景：前端提交数据后，接口回调再次添加参数，但页面跳转/刷新导致之前的console.log数据丢失。影响：无法追踪完整的请求流程，调试困难。2.环境信息项目说明浏览器GoogleChrome120+开发者工具ChromeDevTools技术栈前端：Vue/React/其他接口类型RESTfulAPI/GraphQL3.解决方案3.1保留控制台日志（推荐）步骤：打开Chrome开发者工</div> </li> <li><a href="/article/1943824841912152064.htm" title="【前端】异步任务风控验证与轮询机制技术方案（通用笔记版）" target="_blank">【前端】异步任务风控验证与轮询机制技术方案（通用笔记版）</a> <span class="text-muted"></span> <div>一、背景场景在某类生成任务中，例如用户点击“执行任务”按钮后触发一个较耗时的后端操作（如生成报告、渲染图像、转码视频等），由于其调用了模型、渲染服务或需要较长处理时间，为了防止接口被频繁恶意调用，系统需要加入风控验证机制。此外，因任务处理为异步，前端无法立即获得最终结果，因此需通过轮询方式定期查询任务状态，等待任务完成后展示结果。二、整体流程说明1.用户点击“执行任务”按钮：前端调用风控接口/ap</div> </li> <li><a href="/article/1943823200676802560.htm" title="uniapp对接unipush 1.0 ios/android" target="_blank">uniapp对接unipush 1.0 ios/android</a> <span class="text-muted">车轮滚滚__</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>配置注意需要打包自定义基座之后在手机上运行自定义基座才可以！官方有文档可以根据文档来我这里用的是1.0为什么没有2.0因为2.0要用uinicloud注意每次打包之后cid都会变cid用户的标识iduniapp通过这个id可以把消息推送给指定人前端代码前端要做的很简单直接放到app.vue中onLaunch钩子中即可麻烦的在后端和个推的对接onPushMessage(that){//#ifdefA</div> </li> <li><a href="/article/1943798231427248128.htm" title="在html中加入网址,网页超链接怎么做，添加超链接网址的的详细步骤" target="_blank">在html中加入网址,网页超链接怎么做，添加超链接网址的的详细步骤</a> <span class="text-muted">一只爪子</span> <a class="tag" taget="_blank" href="/search/%E5%9C%A8html%E4%B8%AD%E5%8A%A0%E5%85%A5%E7%BD%91%E5%9D%80/1.htm">在html中加入网址</a> <div>此系列教程主要讲解HTML从基础到精通。自己能够设计一个完整的前端网页项目。程序员写代码在HTML中添加图片其实很简单，就是添加一个img的标签。图片标签的语法一般有src、alt、width、height四种属性就够用了。效果：图片的显示效果图片路径的写法src表示的是图片的路径，这里面的值应该怎么写呢？(1)html文件和图片在相同一个文件夹下。HTML文件和图片文件在相同的目录下，可以直接书</div> </li> <li><a href="/article/1943791672676642816.htm" title="uniapp项目如何优雅处理Token失效自动重试 token无感刷新" target="_blank">uniapp项目如何优雅处理Token失效自动重试 token无感刷新</a> <span class="text-muted">代码简单说</span> <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/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/token%E9%87%8D%E8%AF%95/1.htm">token重试</a><a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/token%E8%8E%B7%E5%8F%96/1.htm">token获取</a><a class="tag" taget="_blank" href="/search/token%E6%97%A0%E6%84%9F%E5%88%B7%E6%96%B0/1.htm">token无感刷新</a><a class="tag" taget="_blank" href="/search/uniapp%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0token/1.htm">uniapp自动刷新token</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%99%BB%E5%BD%95%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/1.htm">前端登录状态管理</a><a class="tag" taget="_blank" href="/search/token%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0/1.htm">token自动刷新</a> <div>uniapp项目如何优雅处理Token失效自动重试token无感刷新标签：uniapp｜前端登录状态管理｜Token自动刷新｜前端重试队列作为一名前端开发，我在重构公司旧项目时，踩到了一个大家经常遇到的坑：Token失效后请求失败，用户体验极差。而更糟糕的是，在一个页面里多个请求同时发出，全部失败并跳转登录，场面就像是“弹窗地狱”。我决定把这个问题解决到底，封装出一个可复用、稳定、自动重试的请求模</div> </li> <li><a href="/article/1943790915952898048.htm" title="前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比" target="_blank">前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比</a> <span class="text-muted"></span> <div>前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指南为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指</div> </li> <li><a href="/article/1943786882114580480.htm" title="【译】2018 前端性能优化清单 —— 第一部分" target="_blank">【译】2018 前端性能优化清单 —— 第一部分</a> <span class="text-muted">qq_36320160</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> <div>原文地址：Front-EndPerformanceChecklist2018-Part1原文作者：VitalyFriedman译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO/front-end-performance-checklist-2018-1.md译者：tvChan校对者：mysterytonyry</div> </li> <li><a href="/article/124.htm" title="mysql主从数据同步" target="_blank">mysql主从数据同步</a> <span class="text-muted">林鹤霄</span> <a class="tag" taget="_blank" href="/search/mysql%E4%B8%BB%E4%BB%8E%E6%95%B0%E6%8D%AE%E5%90%8C%E6%AD%A5/1.htm">mysql主从数据同步</a> <div>配置mysql5.5主从服务器(转) 教程开始：一、安装MySQL 说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22 二、配置MySQL主服务器（192.168.21.169）mysql -uroot -p &nb</div> </li> <li><a href="/article/251.htm" title="oracle学习笔记" target="_blank">oracle学习笔记</a> <span class="text-muted">caoyong</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>1、ORACLE的安装 a>、ORACLE的版本 8i,9i : i是internet 10g,11g : grid (网格) 12c : cloud (云计算) b>、10g不支持win7 &</div> </li> <li><a href="/article/378.htm" title="数据库，SQL零基础入门" target="_blank">数据库，SQL零基础入门</a> <span class="text-muted">天子之骄</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E5%85%A5%E9%97%A8/1.htm">数据库入门</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E6%9C%AC%E6%9C%AF%E8%AF%AD/1.htm">基本术语</a> <div>数据库，SQL零基础入门做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关</div> </li> <li><a href="/article/505.htm" title="pom.xml" target="_blank">pom.xml</a> <span class="text-muted">一炮送你回车库</span> <a class="tag" taget="_blank" href="/search/pom.xml/1.htm">pom.xml</a> <div>1、一级元素dependencies是可以被子项目继承的 2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素 3、父项目里的一级元素<modules> <module>lcas-admin-war</module> <</div> </li> <li><a href="/article/632.htm" title="sql查地区省市县" target="_blank">sql查地区省市县</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> -- db_yhm_city SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35 SELECT * FROM db_yhm_city WHERE class_parent_id =169 SELECT d1.cla</div> </li> <li><a href="/article/759.htm" title="关于监听器那些让人头疼的事" target="_blank">关于监听器那些让人头疼的事</a> <span class="text-muted">宝剑锋梅花香</span> <a class="tag" taget="_blank" href="/search/%E7%94%BB%E5%9B%BE%E6%9D%BF/1.htm">画图板</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC%E5%99%A8/1.htm">监听器</a><a class="tag" taget="_blank" href="/search/%E9%BC%A0%E6%A0%87%E7%9B%91%E5%90%AC%E5%99%A8/1.htm">鼠标监听器</a> <div> 本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。 </div> </li> <li><a href="/article/886.htm" title="JAVA的遍历MAP" target="_blank">JAVA的遍历MAP</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/map/1.htm">map</a> <div>Java Map遍历方式的选择 1. 阐述　　对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？　　为了解遍历性能的真实差距，包括在遍历ke</div> </li> <li><a href="/article/1013.htm" title="POJ 2312 Battle City 优先多列+bfs" target="_blank">POJ 2312 Battle City 优先多列+bfs</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2/1.htm">搜索</a> <div>来源：http://poj.org/problem?id=2312 题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1</div> </li> <li><a href="/article/1140.htm" title="Hibernate与Jpa的关系，终于弄懂" target="_blank">Hibernate与Jpa的关系，终于弄懂</a> <span class="text-muted">avords</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><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/jpa/1.htm">jpa</a> <div>我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany</div> </li> <li><a href="/article/1267.htm" title="酸爽的console.log" target="_blank">酸爽的console.log</a> <span class="text-muted">bee1314</span> <a class="tag" taget="_blank" href="/search/console/1.htm">console</a> <div>在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。 /** * log.js hufeng * The safe wrapper for `console.xxx` functions * </div> </li> <li><a href="/article/1394.htm" title="哈佛教授：穷人和过于忙碌的人有一个共同思维特质" target="_blank">哈佛教授：穷人和过于忙碌的人有一个共同思维特质</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E7%AE%A1%E7%90%86/1.htm">时间管理</a><a class="tag" taget="_blank" href="/search/%E5%8A%B1%E5%BF%97%E4%BA%BA%E7%94%9F/1.htm">励志人生</a><a class="tag" taget="_blank" href="/search/%E7%A9%B7%E4%BA%BA/1.htm">穷人</a><a class="tag" taget="_blank" href="/search/%E8%BF%87%E4%BA%8E%E5%BF%99%E7%A2%8C/1.htm">过于忙碌</a> <div> 一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。　　这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业</div> </li> <li><a href="/article/1521.htm" title="other operate" target="_blank">other operate</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a><a class="tag" taget="_blank" href="/search/osx/1.htm">osx</a> <div>一、Mac Finder 设置排序方式，预览栏在显示－》查看显示选项中二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证] -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出，我好及时改正，同时也让我们一</div> </li> <li><a href="/article/1648.htm" title="【Scala五】分析Spark源代码总结的Scala语法三" target="_blank">【Scala五】分析Spark源代码总结的Scala语法三</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>1. If语句作为表达式 val properties = if (jobIdToActiveJob.contains(jobId)) { jobIdToActiveJob(stage.jobId).properties } else { // this stage will be assigned to "default" po</div> </li> <li><a href="/article/1775.htm" title="ZooKeeper 入门" target="_blank">ZooKeeper 入门</a> <span class="text-muted">BlueSkator</span> <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/zk/1.htm">zk</a> <div>ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利</div> </li> <li><a href="/article/1902.htm" title="MySQL取得当前时间的函数是什么格式化日期的函数是什么" target="_blank">MySQL取得当前时间的函数是什么格式化日期的函数是什么</a> <span class="text-muted">BreakingBad</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/Date/1.htm">Date</a> <div>取得当前时间用 now() 就行。在数据库中格式化时间用DATE_FORMA T(date, format) . 根据格式串format 格式化日期或日期和时间值date，返回结果串。可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值: %S, %s 两位数字形式的秒（ 00,01,</div> </li> <li><a href="/article/2029.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; abstract class Component { public abstract void printStruct(Str</div> </li> <li><a href="/article/2156.htm" title="4_JAVA+Oracle面试题(有答案)" target="_blank">4_JAVA+Oracle面试题(有答案)</a> <span class="text-muted">chenke</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>基础测试题卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。选择题 1、 What will happen when you attempt to compile and run the following code? （3） public class Static { static { int x = 5; // 在static内有效 } st</div> </li> <li><a href="/article/2283.htm" title="新一代工作流系统设计目标" target="_blank">新一代工作流系统设计目标</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div> 用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。在这个设计中，最难的地方是系统根据什么来生成流</div> </li> <li><a href="/article/2410.htm" title="oracle 行链接与行迁移" target="_blank">oracle 行链接与行迁移</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E8%BF%81%E7%A7%BB/1.htm">行迁移</a> <div>表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下) 第一种情况: INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据</div> </li> <li><a href="/article/2537.htm" title="[JShop]开源电子商务系统jshop的系统缓存实现" target="_blank">[JShop]开源电子商务系统jshop的系统缓存实现</a> <span class="text-muted">dinguangx</span> <a class="tag" taget="_blank" href="/search/jshop/1.htm">jshop</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/1.htm">电子商务</a> <div>前言 jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache</div> </li> <li><a href="/article/2664.htm" title="初三全学年难记忆单词" target="_blank">初三全学年难记忆单词</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>several 儿子；若干 shelf 架子 knowledge 知识；学问 librarian 图书管理员 abroad 到国外，在国外 surf 冲浪 wave 浪；波浪 twice 两次；两倍 describe 描写；叙述 especially 特别；尤其 attract 吸引 prize 奖品；奖赏 competition 比赛；竞争 event 大事；事件 O</div> </li> <li><a href="/article/2791.htm" title="sphinx实践" target="_blank">sphinx实践</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/sphinx/1.htm">sphinx</a> <div> 安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server yum install sphinx 如果失败的话使用下面的方式安装 wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm yum loca</div> </li> <li><a href="/article/2918.htm" title="JPA之JPQL（三）" target="_blank">JPA之JPQL（三）</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/orm/1.htm">orm</a><a class="tag" taget="_blank" href="/search/jpa/1.htm">jpa</a><a class="tag" taget="_blank" href="/search/JPQL/1.htm">JPQL</a> <div>1 什么是JPQL JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。 2 检索单个对象 @Test public void querySingleObject1() { Query query = em.createQuery("sele</div> </li> <li><a href="/article/3045.htm" title="Remove Duplicates from Sorted Array II" target="_blank">Remove Duplicates from Sorted Array II</a> <span class="text-muted">hcx2013</span> <a class="tag" taget="_blank" href="/search/remove/1.htm">remove</a> <div>Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For example,Given sorted array nums = [1,1,1,2,2,3], Your function should return length </div> </li> <li><a href="/article/3172.htm" title="Spring4新特性——Groovy Bean定义DSL" target="_blank">Spring4新特性——Groovy Bean定义DSL</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring+4/1.htm">spring 4</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/3299.htm" title="CentOS安装Mysql5.5" target="_blank">CentOS安装Mysql5.5</a> <span class="text-muted">liuxingguome</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>CentOS下以RPM方式安装MySQL5.5 首先卸载系统自带Mysql： yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf 查看是否还有mysql软件： rpm -qa|grep mysql 去http://dev.mysql.c</div> </li> <li><a href="/article/3426.htm" title="第14章工具函数（下）" target="_blank">第14章工具函数（下）</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</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/3553.htm" title="POJ 1050" target="_blank">POJ 1050</a> <span class="text-muted">SaraWon</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/%E5%AD%90%E7%9F%A9%E9%98%B5/1.htm">子矩阵</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%A4%A7%E5%92%8C/1.htm">最大和</a> <div>POJ ACM第1050题的详细描述，请参照 http://acm.pku.edu.cn/JudgeOnline/problem?id=1050 题目意思：给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。如二维数组 0 -2 -7 0 9 2 -6 2 -4 1 -4 1 -1 8 0 -2 中和最大的子矩阵是 9 2 -4 1 -1 8 且最大和是15</div> </li> <li><a href="/article/3680.htm" title="[5]设计模式——单例模式" target="_blank">[5]设计模式——单例模式</a> <span class="text-muted">tsface</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><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/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a> <div>单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点安全的单例模式： /* * @(#)Singleton.java 2014-8-1 * * Copyright 2014 XXXX, Inc. All rights reserved. */ package com.fiberhome.singleton; </div> </li> <li><a href="/article/3807.htm" title="Java8全新打造，英语学习supertool" target="_blank">Java8全新打造，英语学习supertool</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/superword/1.htm">superword</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85/1.htm">闭包</a><a class="tag" taget="_blank" href="/search/java8/1.htm">java8</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B/1.htm">函数式编程</a> <div>superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>