HTML知识点详细汇总

目录

 

第一章 HTML基础知识

1、HTML简介

2、HTML的标记组成

3、HTML基本结构

第二章 文字与图像

1、设置文字字体、大小与颜色

2、设置正文的标题

3、设置段落

4、强制换行与不换行

5、字体标记

6、文字对齐

7、列表

8、其它方式修饰文本

9、图像

10、移动的字体和图片

第三章 超级链接

1、基本概念

2、文字链接

3、链接的注释title 属性

4、图片链接

5、锚点链接

6、邮箱地址链接mailto

7、图像映射

第四章 表单

1、创建表单

2、文本框和密码框

3、单选框和复选框

4、下拉列表和文本域

5、按钮

6、图像域与文件域

7、隐藏表单

第五章 表格

1、表格的基本语法

2、跨多行、多列表元

3、设置表格大小

4、设置表格背景

5、设置单元格边距

6、表格对齐

第六章 框架

1、框架基本语法

2、框架分栏

3、框架的常用属性

4、框架链接

第七章 网页多媒体

1、插入网页多媒体

2、设置自动播放

3、设置循环播放

5、设置面板大小

6、对齐方式


第一章 HTML基础知识

1、HTML简介

​ HTML(Hypertext Markup Language),超文本标记语言,HTML 利用各种标记来标识文档的结 构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language,标准通用标识 语言)中的一个子集演变而来的。

2、HTML的标记组成

​ HTML 用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来,而且是成 对出现的,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。如 、

1) 单标记:有些标记能完整的表达标记里的意思,只须在尖括号中输入标记名即可,这类标记叫 单标记。XHTML中要求单标记也必须闭合,即在标记“>”前添加斜杠。常见的单标记如


等。

2) 双标记:双标记有头有尾,且前面的标记与后面的标记保持一致,但在后面的标记前有斜线, 语法形如:<标记>内容。例如:

段落

3) XHTML要求所有标记均为小写,且所有标记属性必须添加双引号

4) 标记对不能交叉

3、HTML基本结构

 
    
        网页标题 
     
     
         
     
 
1) 标记对不能放在<body>标记对中,同理,其它表示内容的标记也不能放在<head>标 记对中

2) <html></html>表示 HTML 语言,在<html></html>里面包含头部(<head></head>)和 内容体(<body></body>)。

3) HTML注释表示为<!--注释内容-->

就拿<html></html>举例吧:
        <html> 是一个网页的开头部分
        </html> 是一个网页的结尾部分 其中斜杠(/)表示结束</code></pre> 
  <p> </p> 
  <h2 id="%E7%AC%AC%E4%BA%8C%E7%AB%A0%20%E6%96%87%E5%AD%97%E4%B8%8E%E5%9B%BE%E5%83%8F">第二章 文字与图像</h2> 
  <h3 id="1%E3%80%81%E8%AE%BE%E7%BD%AE%E6%96%87%E5%AD%97%E5%AD%97%E4%BD%93%E3%80%81%E5%A4%A7%E5%B0%8F%E4%B8%8E%E9%A2%9C%E8%89%B2">1、设置文字字体、大小与颜色</h3> 
  <pre class="has"><code class="language-html">语法:<font face=”宋体” size=”1” color=”red”>文字</font></code></pre> 
  <p><strong>1)</strong> 设置文字的字体、大小、颜色需要使用<font>标签<strong>2)</strong> Face属性设置文字字体,多种字体用逗号隔开<strong>3)</strong> Size 属性设置文字大小<strong>4)</strong> Color 属性设置文字颜色,参数值可以是RGB颜色值,如#000000,也可以用颜色的单词表示,如 red</p> 
  <h3 id="2%E3%80%81%E8%AE%BE%E7%BD%AE%E6%AD%A3%E6%96%87%E7%9A%84%E6%A0%87%E9%A2%98">2、设置正文的标题</h3> 
  <pre class="has"><code class="language-html">语法:<h#>主题文字</h#>,其中“#”代表数字 1-6 中的任意一个,从数字 1 到数字 6,标题大小排列由大到小(数字越大,标题字号就越小)。</code></pre> 
  <h3 id="3%E3%80%81%E8%AE%BE%E7%BD%AE%E6%AE%B5%E8%90%BD">3、设置段落</h3> 
  <pre class="has"><code class="language-html">语法:<p>这里表示段落</p></code></pre> 
  <h3 id="4%E3%80%81%E5%BC%BA%E5%88%B6%E6%8D%A2%E8%A1%8C%E4%B8%8E%E4%B8%8D%E6%8D%A2%E8%A1%8C">4、强制换行与不换行</h3> 
  <pre class="has"><code class="language-html">1) 强制换行:<br />

2) 强制不换行:<nobr /></code></pre> 
  <h3 id="5%E3%80%81%E5%AD%97%E4%BD%93%E6%A0%87%E8%AE%B0">5、字体标记</h3> 
  <p><strong>1) 物理字体</strong></p> 
  <pre class="has"><code class="language-html"><b>…</b> 设置成粗体 <i>…</i> 设置成斜体
<u>…</u> 增加下划线 <s>…</s> 增加删除线
<sup>…</sup> 设置成上标字体 <sub>…</sub> 设置成下标字体
<tt>…</tt> 设置成打字机字体
​</code></pre> 
  <p><strong>2) 逻辑字体</strong></p> 
  <pre class="has"><code class="language-html"><em>…</em> 强调文字 <strong>…</strong> 字体加重
<code>…</code> 显示编程代码 <samp>…</samp> 显示救命文字
<kbd>…</kbd> 显示键盘按键文字 <small>…</small> 缩小文字
<big>…</big> 放大文字
​</code></pre> 
  <h3 id="6%E3%80%81%E6%96%87%E5%AD%97%E5%AF%B9%E9%BD%90">6、文字对齐</h3> 
  <pre class="has"><code class="language-html">1) 文字对齐使用标签的align 属性,例如:<palign=”#”>对齐文字</p>,其中“#”代码表示方位,
可选择”left”(向左)、”right”(向右)、”center”(居中)。
Align 属性可用于<p>、<div>、<table>、<td>等标签。
2) 居中对齐可使用<center>标签,例如:<center>居中文字</center></code></pre> 
  <h3 id="7%E3%80%81%E5%88%97%E8%A1%A8">7、列表</h3> 
  <p><strong>1) 无序列表</strong></p> 
  <pre class="has"><code class="language-html"><ul type=”#”>
<li>表项一</li>
<li>表项二</li>
</ul></code></pre> 
  <p>Type=”#”取值可为 disc(默认,实心黑点)、square(实心黑方块)、circle(空心圆)</p> 
  <p><strong>2) 有序列表</strong></p> 
  <pre class="has"><code class="language-html"><ol type=”#”>
<li>表项一</li>
<li>表项二</li>
</ol></code></pre> 
  <p>Type=”#”取值可为 A、a、I、i、1等</p> 
  <p><strong>3) 定义列表</strong></p> 
  <pre class="has"><code class="language-html"><dl>
<dt>项目</dt>
<dd>描述一</dd>
<dd>描述二</dd>
</dl></code></pre> 
  <p><dt>标签定义了定义列表中的项目,<dd>标签在定义列表中定义条目的定义部分,可以理解为对定义条目进行特征描述。</p> 
  <p><strong>4) 无序列表、有序列表、定义列表间可以相互嵌套,但一定要注意嵌套时不能交叉</strong></p> 
  <h3 id="8%E3%80%81%E5%85%B6%E5%AE%83%E6%96%B9%E5%BC%8F%E4%BF%AE%E9%A5%B0%E6%96%87%E6%9C%AC">8、其它方式修饰文本</h3> 
  <p><strong>1)</strong> 欲格式化文本:<pre>…</pre><strong>2)</strong> 代码样式斜体字渲染:<var>…</var><strong>3)</strong> 表示它所包含的文本对某个参考文献的引用:<cite>…</cite></p> 
  <h3 id="9%E3%80%81%E5%9B%BE%E5%83%8F">9、图像</h3> 
  <pre class="has"><code class="language-html">1) 插入图像基本语法:<img src=”#” />,其中#代表图像的 URL路径,示例:<img src=”
c.jpg” />
​
2) 图像无法显示时的提示信息,使用 alt 属性,如:<img src=”c.jpg” alt=”风景” />
​
3) 图像的大小:<img src=”c.jpg” width=”400px” height=”300px” />,width 属性
定义图像的宽度,height 属性定义图像的高度
​
4) 图像和文字对齐:<img src=”c.jpg” align=”top” />,align属性的取值为 top(顶部)、
middle(中间)、bottom(默认,底部)
​
5) 图像的边框:<imgsrc=”c.jpg” border=”0” />,border 设置为 0时表示图像不显示边
框,否则设置成需要的边框大小</code></pre> 
  <h3 id="10%E3%80%81%E7%A7%BB%E5%8A%A8%E7%9A%84%E5%AD%97%E4%BD%93%E5%92%8C%E5%9B%BE%E7%89%87">10、移动的字体和图片</h3> 
  <pre class="has"><code class="language-html">1) 移动基本语法:<marquee>移动文字或图片</marquee>,默认是向左循环移动,移动范围在其父对象的有效区域内。
​
2) 文本移动的方向:<marquee direction=”#”>…</marquee>,其中#可以选择 left、 right、up、down
​
3) 文本的滚动循环:<marquee behavior=”#”>…</marquee>,其中#可以选择 scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。
​
4) 如果设置文本来回移动,还可以设置循环次数:<marquee loop=”#”>…</marquee>,其中#为代表循环的次数。
​
5) 文本的移动速度:<marquee scrollamount=”#”>…</marquee>,其中#设置移动的速度,取正整数。数值越大,速度越快。
​
6) 移动对象的延时:<marquee scrolldelay=”1000”>我走一走,停一停</marquee>,scrolldelay 以时间为单位,用毫秒表示。
​
7) 移动的区域和背景:<marquee width=”100” height=”100” bgcolor=”pink”>…</marquee></code></pre> 
  <h2 id="%E7%AC%AC%E4%B8%89%E7%AB%A0%20%E8%B6%85%E7%BA%A7%E9%93%BE%E6%8E%A5">第三章 超级链接</h2> 
  <h3 id="1%E3%80%81%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5">1、基本概念</h3> 
  <p><strong>1) 统 一 资 源 定 位 器 (URL)</strong> : 每 一 个 网 页 的 唯 一 地 址 , 一 个 URL 构 成 为 protocol://machinename[:port]/directory/filename。其中 protocol 是访问协议,如 http、 https、ftp 等,machinename 是存放资源的主机 IP 地址,通常以域名的形式出现,port 是 服务器使用的端口,directory 和filename 是资源的路径和文件名。 <strong>2) 绝对路径:</strong>HTML绝对路径指带有域名文件的完整路径 3) 文档相对路径:当前文档与在的位置与其他文件或文件夹的关系。用../表示源文件所在目录的 上一级目录。 4) 站点根目录相对路径:提供从站点的根文件夹到文档的路径。站点根目录相对路径以”/”开始, 表示站点根文件夹。</p> 
  <h3 id="2%E3%80%81%E6%96%87%E5%AD%97%E9%93%BE%E6%8E%A5">2、文字链接</h3> 
  <pre class="has"><code class="language-html">语法:<a href=”URL” target=”target”>链接文字</a> </code></pre> 
  <p><strong>1)</strong> href属性表示链接跳转地址 <strong>2)</strong> target 属性定义链接网页的打开方式,其值可以为<em>blank(新窗口)、</em>parent(父框架)、<em>self(当 前窗口)、</em>top(清除所有被包含的框架并将文档载入整个浏览器窗口)</p> 
  <h3 id="3%E3%80%81%E9%93%BE%E6%8E%A5%E7%9A%84%E6%B3%A8%E9%87%8Atitle%20%E5%B1%9E%E6%80%A7">3、链接的注释title 属性</h3> 
  <pre class="has"><code class="language-html"><a href=”URL” title=”注释信息”>链接文字</a> </code></pre> 
  <h3 id="4%E3%80%81%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5">4、图片链接</h3> 
  <pre class="has"><code class="language-html"><a href=”URL”><img src=”c.jpg”></a>将链接文字改成插入图像即可 </code></pre> 
  <h3 id="5%E3%80%81%E9%94%9A%E7%82%B9%E9%93%BE%E6%8E%A5">5、锚点链接</h3> 
  <pre class="has"><code class="language-html">定义锚点:<a name=”锚点”></a> 
链接锚点:<a href=”#锚点”>链接文字</a></code></pre> 
  <h3 id="6%E3%80%81%E9%82%AE%E7%AE%B1%E5%9C%B0%E5%9D%80%E9%93%BE%E6%8E%A5mailto">6、邮箱地址链接mailto</h3> 
  <pre class="has"><code class="language-html"><a href=”mailto:邮箱地址”>链接文字</a> </code></pre> 
  <h3 id="7%E3%80%81%E5%9B%BE%E5%83%8F%E6%98%A0%E5%B0%84">7、图像映射</h3> 
  <pre class="has"><code class="language-html"><img src=”1.jpg” usemap=”#map” />
<map name=”map”>
    <area shape=”rect” href=”1.html” coords=”140,20,280,60”> 
    <area shape=”poly” href=”2.html” coords=”100,100,180,50,200,140”> 
    <area shape=”circle” href=”3.html” coords=”80,100,60”> 
</map> </code></pre> 
  <p><strong>1)</strong>图像映射实现单击同一图像中的不同位置,出现不同的链接,有矩形、圆形和多边形,分别 用rect、circle、poly表示。<strong>2)</strong>图像映射有分为两步:<br>  在图像标签中使用usemap属性,其值为#号加上map标签的名称,即map标签的name 属性(如#map)。<br><strong> 定义<map>标签</strong>,并使用 name 属性命名,方便其它地方调用。然后用<area>标签定 义图片上的热区形状(shape 属性)、位置(coords属性)及链接地址(href 属性)。</p> 
  <h2 id="%E7%AC%AC%E5%9B%9B%E7%AB%A0%20%E8%A1%A8%E5%8D%95">第四章 表单</h2> 
  <h3 id="1%E3%80%81%E5%88%9B%E5%BB%BA%E8%A1%A8%E5%8D%95">1、创建表单</h3> 
  <pre class="has"><code class="language-html">语法:<form name=”form” action=”url” method=”post”></form>
表单对象常用的属性
        action	  <from action=”xxx”>	表单提交的目的地址
        method    <form method=”xxx”>	表单提交方式
        name	  <form name=”xxx”>	表单名称
</code></pre> 
  <p>Form 中的name 属性给 form 表单命名,action 属性表示表单提交后发送的URL地址,发送的方 式用 method 属性表示,可选择的参数有Get 和Post。Get 传输量比较小,Post 传输量比较大。</p> 
  <h3 id="2%E3%80%81%E6%96%87%E6%9C%AC%E6%A1%86%E5%92%8C%E5%AF%86%E7%A0%81%E6%A1%86">2、文本框和密码框</h3> 
  <pre class="has"><code class="language-html">1) 文本框:<input type=”text” name=”text” size=”6” maxlength=”6” value=” 文字” disabled=”disabled” readonly=”readonly” /> 
说明:name 属性给文本框命名,size 属性设置文本框的显示大小,maxlength属性设置文本 框最大可接受的字符数,value 属性设置文本框默认显示值,disabled 属性设置文本框是否可 用,readonly 属性设置文本框是否只读。
​
2) 密码框:<input type=”password” /> 
密码框的属性除了 type 设置成 password,与文本框不一致外,其它属性与文本框一致。</code></pre> 
  <h3 id="3%E3%80%81%E5%8D%95%E9%80%89%E6%A1%86%E5%92%8C%E5%A4%8D%E9%80%89%E6%A1%86">3、单选框和复选框</h3> 
  <pre class="has"><code class="language-html">1) 单选框:<input type=”radio” name=”radio” checked=”checked” value=”v” /> 
说明:设置 checked属性表示单选框被选中 
​
2) 复选框:<input type=”checkbox” name=”ck” checked=”checked” value=”v” /> </code></pre> 
  <h3 id="4%E3%80%81%E4%B8%8B%E6%8B%89%E5%88%97%E8%A1%A8%E5%92%8C%E6%96%87%E6%9C%AC%E5%9F%9F">4、下拉列表和文本域</h3> 
  <p><strong>1) 下拉列表: </strong></p> 
  <pre class="has"><code class="language-html"><select name=”select” size=”2” multiple=” multiple”> 
    <option value=”1” selected=”selected”>列表项一</option> 
    <option value=”2”>列表项二</option> 
</select> </code></pre> 
  <p><strong>说明:</strong>select 标签的size 属性表示下拉列表的可见选项数,默认为1,multiple 属性规定可以 选择多个选项。Option 标签的 selected标签表示当前选被默认选中,即在1个可见选项数时 下拉列表显示此值。</p> 
  <p><strong>2) 文本域 </strong></p> 
  <pre class="has"><code class="language-html"><textarea name=”ta” rows=”10” cols=”5”>文本内容</textarea> </code></pre> 
  <p><strong>说明:</strong>textarea 标签的 rows 属性表示文本区内的可见行数,cols 属性表示文本区内的可见宽 度。</p> 
  <h3 id="5%E3%80%81%E6%8C%89%E9%92%AE">5、按钮</h3> 
  <pre class="has"><code class="language-html">1) 普通按钮:<input type=”button” name=”bt” value=”按钮” /> <button name=”bt”>普通按钮</button>
2) 提交按钮:<input type=”submit” name=”sm” value=”提交” /> 
3) 重置按钮:<input type=”reset” name=”rs” value=”重置” /> </code></pre> 
  <h3 id="6%E3%80%81%E5%9B%BE%E5%83%8F%E5%9F%9F%E4%B8%8E%E6%96%87%E4%BB%B6%E5%9F%9F">6、图像域与文件域</h3> 
  <pre class="has"><code class="language-html">1) 图像域:<input type=”image” name=”image” src=”c.jpg” alt=”描述” /> 
2) 文件域:<input type=”file” name=”file” />定义输入字段和浏览按钮,用于文件上传</code></pre> 
  <h3 id="7%E3%80%81%E9%9A%90%E8%97%8F%E8%A1%A8%E5%8D%95">7、隐藏表单</h3> 
  <pre class="has"><code class="language-html"><input type=”hidden” name=”hi” value=”v” />隐藏表单用于在浏览器与服务器之间 传递一些必要的参数或选项,而这些参数或选项不需要显示在页面中。 </code></pre> 
  <h2 id="%E7%AC%AC%E4%BA%94%E7%AB%A0%20%E8%A1%A8%E6%A0%BC">第五章 表格</h2> 
  <h3 id="1%E3%80%81%E8%A1%A8%E6%A0%BC%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95">1、表格的基本语法</h3> 
  <pre class="has"><code class="language-html"><table width=”100” border=”1” height=”100”>
<caption>表格标题</caption>
<tr><th>表头一</th><th>表头二</th></tr>
<tr><td>单元格一</td><td>单元格二</td></tr>
<tr><td cols=”2”>表尾</td></tr>
</table></code></pre> 
  <p>​ 在HTML中创建表格使用<table>标签对,可对其设置宽度、高度、边框、背景等。<br>  <caption>标签为整个表格的标题,它不占用表格行,是位于表格外的一个对整个表格进行说明的大标题,可以使用 align 属性设置标题相对于表格的位置,值为 left、right、top、bottom。<br>  使用tr 定义表格行,然后用 th或td定义表格单元格。<br>  可以使用 thead 定义表头,tbody 定义表格主体,tfoot 定义表尾,只需要把相应的行(tr和td都需要)放置在标记对中即可。</p> 
  <h3 id="2%E3%80%81%E8%B7%A8%E5%A4%9A%E8%A1%8C%E3%80%81%E5%A4%9A%E5%88%97%E8%A1%A8%E5%85%83">2、跨多行、多列表元</h3> 
  <p><strong>1) 跨多行表元</strong></p> 
  <pre class="has"><code class="language-html"><td rowspan=”3”>…</td></code></pre> 
  <p> 跨多行表元语法是在th 和td上加 rowspan表示,rowspan后面的值是数字,数字表示跨多少行表元。</p> 
  <p><strong>2) 跨多列表元</strong></p> 
  <p> 跨多列表元与跨多行表元一样,也是放在th和 td上,表示在一行中跨多少列表元,语法是用colspan 表示。</p> 
  <h3 id="3%E3%80%81%E8%AE%BE%E7%BD%AE%E8%A1%A8%E6%A0%BC%E5%A4%A7%E5%B0%8F">3、设置表格大小</h3> 
  <p>1) 设置表格宽度和高度</p> 
  <pre class="has"><code class="language-html"><table width=”100” height=”100”>…</table></code></pre> 
  <p> 表格宽度用 width属性定义,表格高度用 height 属性定义,其取值可以为像素值或百分比。</p> 
  <p><strong>2) 设置表格边框</strong></p> 
  <pre class="has"><code class="language-html"><table border=”1”>…</table></code></pre> 
  <p> 表格边框使用 table 标记的 border 属性定义,其后面的值是宽度值,表示对象的边框宽度,数值越大,宽度越大。</p> 
  <h3 id="4%E3%80%81%E8%AE%BE%E7%BD%AE%E8%A1%A8%E6%A0%BC%E8%83%8C%E6%99%AF">4、设置表格背景</h3> 
  <p><strong>1) 设置整个表格背景</strong></p> 
  <pre class="has"><code class="language-html"><table bgcolor=”#ff0000”>…</table></code></pre> 
  <p> 设置整个表格的背景是定义<table>标签的 bgcolor 属性,其值可为颜色名、十六进制颜色值或者 rgb代码的背景颜色。</p> 
  <p><strong>2) 设置表格中单元格的背景</strong></p> 
  <pre class="has"><code class="language-html"><td bgcolor=”#ff0000”>…</td></code></pre> 
  <p> 设置单元格的背景颜色只需在 td 和 th 标签上定义 bgcolor 属性,如果设置某一行的背景颜色,也可以在 tr 标签中定义bgcolor 属性。</p> 
  <h3 id="5%E3%80%81%E8%AE%BE%E7%BD%AE%E5%8D%95%E5%85%83%E6%A0%BC%E8%BE%B9%E8%B7%9D">5、设置单元格边距</h3> 
  <p><strong>1) 设置单元格与内容之间的距离</strong></p> 
  <pre class="has"><code class="language-html"><td cellpadding=”10”>…</td></code></pre> 
  <p> 设置单元格与内容之间的距离只需在 td和 th标签上定义cellpadding属性,其值为像素值。</p> 
  <p><strong>2) 设置两个单元格之间的距离</strong></p> 
  <pre class="has"><code class="language-html"><td cellspacing=”10”>…</td></code></pre> 
  <p> 定义两个单元格之间的空白在 td和th 标签上使用cellspacing属性,其值同样为像素值。</p> 
  <h3 id="6%E3%80%81%E8%A1%A8%E6%A0%BC%E5%AF%B9%E9%BD%90">6、表格对齐</h3> 
  <p><strong>1)表格内文字对齐</strong></p> 
  <pre class="has"><code class="language-html"><tr align=#>…</tr>
<td align=#>…</td></code></pre> 
  <p> 文字对齐使用align 属性定义,取值可为 left、center、right。 在表格内,文字对齐有在tr、th、td中对齐,在 tr 设置对齐方式后,tr 内的th 和td都按设置的要求对齐,同理在多行中可以设置不同的tr 对齐方式, th 和td都可以设置其里面的文字或图片的对齐。</p> 
  <p><strong>2)表格在网页中对齐</strong></p> 
  <pre class="has"><code class="language-html"><table align=#>…</table></code></pre> 
  <p> 表格在网页中的对齐是在<table></table>标记对中使用 align属性定义。</p> 
  <h2 id="%E7%AC%AC%E5%85%AD%E7%AB%A0%20%E6%A1%86%E6%9E%B6">第六章 框架</h2> 
  <h3 id="1%E3%80%81%E6%A1%86%E6%9E%B6%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95">1、框架基本语法</h3> 
  <pre class="has"><code class="language-html"><frameset cols=”50%,50%”>
<frame scr=”1.html” />
<frame src=”2.html” />
</frameset>
     框架的基本语法是由<frameset></frameset>标记对表示,标记对放在<head></head>标记对后面,使用了框架,就不再需要使用<body></body>标记对,即<frameset>与<body>标记对不能同时出现在一个页面中。
     <frame>标记对表示在框架内载入什么文件,用src属性指定。</code></pre> 
  <h3 id="2%E3%80%81%E6%A1%86%E6%9E%B6%E5%88%86%E6%A0%8F">2、框架分栏</h3> 
  <p><strong>2) 垂直分栏</strong></p> 
  <pre class="has"><code class="language-html"><frameset cols=”50%,*”>…</frameset>
 垂直分栏是在<frameset>中使用 cols 属性表示,后面的数字表示列宽,可用数值、百分比和通配符*(只能用于最后一个数字)表示</code></pre> 
  <p><strong>3) 水平分栏</strong></p> 
  <pre class="has"><code class="language-html"><frameset rows=”50%,*”>…</frameset>
 水平分栏是在<frameset>中使用rows 属性表示,注意一个框架不能同时出现垂直分栏和水平分栏,即 cols 和 rows 不能同时出现,如果想又有垂直分栏又有水平分栏,可以使用框架嵌套实现</code></pre> 
  <h3 id="3%E3%80%81%E6%A1%86%E6%9E%B6%E7%9A%84%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7">3、框架的常用属性</h3> 
  <p><strong>1)设置不可调节框架大小</strong></p> 
  <pre class="has"><code class="language-html"><frameset noresize=”noresize”>…</frameset>
 默认框架大小是可以调节的,如果不需要用户去对框架窗口进行大小调节,必须设置框架的noresize 属性</code></pre> 
  <p><strong>2)浏览器不支持框架</strong></p> 
  <pre class="has"><code class="language-html"><noframes>对不起,您的浏览器不支持框架!</noframes>
 <noframes>标记对用在<frameset>标记对之外,当浏览器不支持<frameset>标记时,将不显示框架内容,而是显示<noframes>标记对中的内容。</code></pre> 
  <p><strong>3)设置框架边框</strong></p> 
  <pre class="has"><code class="language-html"><frameset frameborder=# border=#>
 框架的边框设置可由 frameborder属性来完成,默认有边框,它有两种表示方法,英语表示法:yes(有边框)、no(无边框),数字表示法:1(有边框)、0(无边框)
 当设置了框架的边框时,可用 border属性来设置边框的宽度</code></pre> 
  <p><strong>4)设置滚动条</strong></p> 
  <pre class="has"><code class="language-html"><frame src=”1.html” scrolling=”no” />
 设置滚动条是在<frame>标签里,用 scrolling属性,可取值 auto(默认,自动)、yes(有滚动条)、no(无滚动条)</code></pre> 
  <h3 id="4%E3%80%81%E6%A1%86%E6%9E%B6%E9%93%BE%E6%8E%A5">4、框架链接</h3> 
  <p><strong>1)导航框架</strong></p> 
  <pre class="has"><code class="language-html"><frameset cols=”20%,*”>
    <frame src=”导航框架链接.html” />
    <frame src=”main.html” name=”myFrame” />
</frameset>
<a href=”1.html” target=”myFrame”>导航框架链接</a>
 导航框架链接是在网页框架的<frame>中加入 name 属性,表示该<frame>的名称,然后通过用<a>标记的链接,并用target 等于<frame>的名称,那所得到的链接地址网页会显示在该<frame>中</code></pre> 
  <p><strong>2)内联框架(浮动框架)</strong></p> 
  <pre class="has"><code class="language-java"><iframe src=”1.html” width=”400” height=”300”></iframe>
 内联框架存在于<body></body>的单个HTML文件中,可以链接其他网页并显示它,即在一个页面中嵌入一个框架窗口来显示另一个页面的内容。
 浮动框架用<iframe></iframe>标记对或<iframe />表示,可以用 width 和 height 属性设置其大小。</code></pre> 
  <h2 id="%E7%AC%AC%E4%B8%83%E7%AB%A0%20%E7%BD%91%E9%A1%B5%E5%A4%9A%E5%AA%92%E4%BD%93">第七章 网页多媒体</h2> 
  <h3 id="1%E3%80%81%E6%8F%92%E5%85%A5%E7%BD%91%E9%A1%B5%E5%A4%9A%E5%AA%92%E4%BD%93">1、插入网页多媒体</h3> 
  <pre class="has"><code class="language-html">基本语法:<embed src=”1.mp3” />,src指定插入网页的多媒体路径</code></pre> 
  <h3 id="2%E3%80%81%E8%AE%BE%E7%BD%AE%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE">2、设置自动播放</h3> 
  <pre class="has"><code class="language-html"><embed src=”1.mp3” autostart=”true” /></code></pre> 
  <p>Autostart 表示自动播放,可取值true(默认值,自动播放)、false(不自动播放)</p> 
  <h3 id="3%E3%80%81%E8%AE%BE%E7%BD%AE%E5%BE%AA%E7%8E%AF%E6%92%AD%E6%94%BE">3、设置循环播放</h3> 
  <pre class="has"><code class="language-html"><embed src=”1.mp3” loop=”true” /></code></pre> 
  <p>Loop 属性用来设置多媒体文件的循环播放,可取值 true(无限次数)、 false(不循环播放)、 <数值>(规定循环的次数)</p> 
  <h3 id="5%E3%80%81%E8%AE%BE%E7%BD%AE%E9%9D%A2%E6%9D%BF%E5%A4%A7%E5%B0%8F">5、设置面板大小</h3> 
  <pre class="has"><code class="language-html"><embed src=”1.mp3” width=”400” height=”300” /></code></pre> 
  <h3 id="6%E3%80%81%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F">6、对齐方式</h3> 
  <pre class="has"><code class="language-html"><embed src=”1.mp3” align=”left” /></code></pre> 
  <p>Align属性可以设置多媒体控制面板的对齐方式,取值为:</p> 
  <p> Center:控制面板居中<br>  Left:控制面板居左<br>  Right:控制面板居右<br>  Top:控制面板的顶部与当前行中的最高对象的顶部对齐<br>  Bottom:控制面板的底部与当前行中的对象的基线对齐<br>  Baseline:控制面板的底部与文本的基线对齐<br>  Texttop:控制面板的顶部与当前行中的最高的文字顶部对齐<br>  Middle:控制面板的中间与当前行的基线对齐<br>  Absmiddle:控制面板的中间与当前文本或对象的中间对齐<br>  Absbottom:控制面板的底部与文字的底部对齐</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1187251686633218048"></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">你可能感兴趣的:(前端心得)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1903458696281780224.htm"
                           title=".gitlab-ci.yml 配置文件详解" target="_blank">.gitlab-ci.yml 配置文件详解</a>
                        <span class="text-muted">程序媛夏天</span>
<a class="tag" taget="_blank" href="/search/Git/1.htm">Git</a><a class="tag" taget="_blank" href="/search/gitlab/1.htm">gitlab</a><a class="tag" taget="_blank" href="/search/ci%2Fcd/1.htm">ci/cd</a><a class="tag" taget="_blank" href="/search/.gitlab-ci.yml/1.htm">.gitlab-ci.yml</a>
                        <div>个人主页:不爱吃糖的程序媛‍♂️作者简介:前端领域新星创作者、CSDN内容合伙人,专注于前端各领域技术,成长的路上共同学习共同进步,一起加油呀!✨系列专栏:前端面试宝典、JavaScript进阶、vue实战资料领取:前端进阶资料以及文中源码可以在公众号“不爱吃糖的程序媛”领取git工具文档说明:https://docs.gitlab.com/ee/ci/yaml/gitlab_ci_yaml.ht</div>
                    </li>
                    <li><a href="/article/1903422774580408320.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>直接上代码.star-rating{display:flex;padding:10px0;}.star{position:relative;width:40px;height:40px;}.half{position:absolute;top:0;width:20px;height:40px;overflow:hidden;font-size:40px;color:#e0e0e0;cursor:p</div>
                    </li>
                    <li><a href="/article/1903415088333778944.htm"
                           title="前端如何实现鼠标移上这个元素,另外一个元素变色" target="_blank">前端如何实现鼠标移上这个元素,另外一个元素变色</a>
                        <span class="text-muted">=^_^=银爪</span>
<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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>1、使用CSS选择器和伪类来实现这个效果具体步骤如下:获取要修改样式的元素使用CSS选择器选中要操作的元素,并使用伪类“:hover”来指定当鼠标悬停在该元素上时应用的样式指定要应用的样式例如,如果您有一个元素ID为“target”,需要将其颜色更改为红色,当鼠标移到ID为“trigger”的元素上时,可以使用以下代码:#trigger:hover#target{color:red;}这段代码指定</div>
                    </li>
                    <li><a href="/article/1903394269893292032.htm"
                           title="推荐开源项目:FastAPI Best Architecture — 极致的后端架构设计" target="_blank">推荐开源项目:FastAPI Best Architecture — 极致的后端架构设计</a>
                        <span class="text-muted">蓬玮剑</span>

                        <div>推荐开源项目:FastAPIBestArchitecture—极致的后端架构设计项目地址:https://gitcode.com/gh_mirrors/fa/fastapi_best_architecture项目简介在寻找一款基于FastAPI构建的强大且灵活的后端解决方案吗?那么,你已经找到了——FastAPIBestArchitecture。这是一个遵循前端与后端分离原则的中间件层解决方案,采</div>
                    </li>
                    <li><a href="/article/1903389604430540800.htm"
                           title="在 Spring Boot 结合 MyBatis 的项目中,实现字段脱敏(如手机号、身份证号、银行卡号等敏感信息的部分隐藏)可以通过以下方案实现" target="_blank">在 Spring Boot 结合 MyBatis 的项目中,实现字段脱敏(如手机号、身份证号、银行卡号等敏感信息的部分隐藏)可以通过以下方案实现</a>
                        <span class="text-muted">冷冷清清中的风风火火</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/springboot/1.htm">springboot</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/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
                        <div>在SpringBoot结合MyBatis的项目中,实现字段脱敏(如手机号、身份证号、银行卡号等敏感信息的部分隐藏)可以通过以下方案实现。以下是分步说明和完整代码示例:一、实现方案选择1.方案一:自定义注解+Jackson序列化脱敏适用场景:数据返回给前端时动态脱敏,数据库存储原始数据。优点:无侵入性,通过注解灵活控制脱敏字段,与业务逻辑解耦。核心实现:利用Jackson的JsonSerialize</div>
                    </li>
                    <li><a href="/article/1903383047722561536.htm"
                           title="lrz 源码核心篇剖析:如何实现高效、兼容的图片压缩?" target="_blank">lrz 源码核心篇剖析:如何实现高效、兼容的图片压缩?</a>
                        <span class="text-muted">沐土Arvin</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>写在前面前面是讲解了lrz基础用法,从6开始讲解源码,使用过lrz的可以直接从6开始看,中间也掺杂了一下我自己开发过程中的踩坑和经验分享,欢迎讨论!lrz(LocalResizeIMG)是一个前端图片压缩库,主要用于在浏览器中压缩图片并上传。以下是其主要特点和功能:1.主要功能图片压缩:通过调整图片质量和尺寸来减小文件大小。保持宽高比:压缩时可保持图片原始宽高比。多格式支持:支持常见图片格式如JP</div>
                    </li>
                    <li><a href="/article/1903380900188581888.htm"
                           title="github如何为开源项目作出贡献" target="_blank">github如何为开源项目作出贡献</a>
                        <span class="text-muted">PXM的算法星球</span>
<a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a>
                        <div>就在昨天,笔者取得了第一次开源项目贡献,虽然更新的内容很小,但是也算是迈出了第一步1.选择合适的开源项目(1)兴趣优先选择自己感兴趣的项目会更有动力参与,比如你喜欢前端开发,可以关注React、Vue相关的开源项目;如果喜欢后端,可以尝试贡献Django、SpringBoot等项目。(2)关注活跃度一个活跃的开源项目通常意味着更快的反馈和更友好的开发者社区。你可以通过以下方式判断:Issue更新频</div>
                    </li>
                    <li><a href="/article/1903379388280401920.htm"
                           title="HTML5前端第七章节" target="_blank">HTML5前端第七章节</a>
                        <span class="text-muted">NaZiMeKiY</span>
<a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a>
                        <div>本章节为前端网页页面实战,包含我们之前所学的全部内容一.创建项目目录1.网站根目录:网站根目录指的是存放网站的第一层文件夹,内部包含当前网站的所有素材,包含HTML,CSS,需要的素材图片等等2.根目录之下的文件夹(1).images文件夹:存放固定使用的图片素材(2).uploads文件夹:存放非固定使用的图片素材(3).CSS文件夹:存放CSS文件(使用link标签引入)在CSS文件夹中又分为</div>
                    </li>
                    <li><a href="/article/1903369809391841280.htm"
                           title="前端面试:[React] scheduler 调度机制原理?" target="_blank">前端面试:[React] scheduler 调度机制原理?</a>
                        <span class="text-muted">returnShitBoy</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>ReactScheduler是React16.8引入的一种调度机制,旨在对高效渲染和复杂应用程序的性能进行优化。它允许React在空闲时间进行渲染,优先处理对用户体验最为重要的任务。以下是Scheduler调度机制的原理,以及它在实际工作中如何帮助管理渲染。1.调度机制的背景React的渲染过程可能会受到多个因素的影响,例如用户输入、网络请求以及其他状态变化。传统的渲染机制在某些情况下可能导致性能</div>
                    </li>
                    <li><a href="/article/1903354055103672320.htm"
                           title="前端小食堂 | Day17 - 前端安全の金钟罩" target="_blank">前端小食堂 | Day17 - 前端安全の金钟罩</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%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a>
                        <div>️今日盾牌:XSS/CSRF攻防全解析1.XSS防御の三重结界//危险操作:直接渲染未过滤内容document.getElementById('content').innerHTML=userInput;//✅安全姿势一:文本转义constescapeHTML=(str)=>{constmap={'&':'&','':'>','"':'"',"'":'''};ret</div>
                    </li>
                    <li><a href="/article/1903348004727877632.htm"
                           title="前端面试" target="_blank">前端面试</a>
                        <span class="text-muted">请叫我子鱼</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95/1.htm">笔试面试</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/interview/1.htm">interview</a>
                        <div>前端面试之道JS基础知识点及常考面试题原始(Primitive)类型面试题:原始类型有哪几种?null是对象嘛?在JS中,存在着6种原始值,分别是:booleannullundefinednumberstringsymbol首先原始类型存储的都是值,是没有函数可以调用的对象(Object)类型面试题:对象类型和原始类型的不同之处?函数参数是对象会发生什么问题?在JS中,除了原始类型那么其他的都是对</div>
                    </li>
                    <li><a href="/article/1903343338753421312.htm"
                           title="Vue前端实现多个条件表格搜索" target="_blank">Vue前端实现多个条件表格搜索</a>
                        <span class="text-muted">1724580787</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>文章目录操作实现效果测试json数据搜索栏条件过滤完成搜索表格栏完整代码操作实现效果在vue文件中通过js代码完成多条件搜索符合条件的table数据,本文使用了element-ui组件创建表格。效果如下图所示:测试json数据[{"test1":"","test2":"","test3":"","test4":""}...//这里只展示一条数据]搜索栏条件过滤完成搜索computed计算方法监视t</div>
                    </li>
                    <li><a href="/article/1903341322203361280.htm"
                           title="adb 如何导出手机的文件" target="_blank">adb 如何导出手机的文件</a>
                        <span class="text-muted">风继续吹..</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7%E7%B1%BB/1.htm">工具类</a><a class="tag" taget="_blank" href="/search/Uni-App/1.htm">Uni-App</a><a class="tag" taget="_blank" href="/search/adb/1.htm">adb</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA/1.htm">智能手机</a><a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/sqlite/1.htm">sqlite</a>
                        <div>目录1.开启USB调试2.连接设备3.启动ADB4.导出文件使用adbpull命令5.可视化工具预览adb(AndroidDebugBridge)是Android开发中常用的一个工具,它允许开发者通过电脑与Android设备进行通信。如果你想通过adb导出手机上的文件,你可以按照以下步骤业务需求:前端通过使用uni-app的sqlite(关系型数据库系统),存储了大量的机密数据在手机上,直接通过代</div>
                    </li>
                    <li><a href="/article/1903328062422970368.htm"
                           title="Kafka 的消息压缩机制:优化存储与传输的利器" target="_blank">Kafka 的消息压缩机制:优化存储与传输的利器</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/linq/1.htm">linq</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>目录Kafka的消息压缩机制:优化存储与传输的利器一、消息压缩机制的重要意义1.减少存储成本2.提升网络传输效率二、Kafka常用的消息压缩算法1.GZIP压缩2.Snappy压缩3.前端展示压缩状态(Vue3+TS)在消息中间件的大家族中,Kafka以其卓越的性能而备受瞩目。其中,Kafka的消息压缩机制是一项非常重要的特性,它就像是一个高效的“压缩包”,在不损失数据内容的前提下,有效减少数据的</div>
                    </li>
                    <li><a href="/article/1903326545334824960.htm"
                           title="Django系列教程(15)——上传文件" target="_blank">Django系列教程(15)——上传文件</a>
                        <span class="text-muted">l软件定制开发工作室</span>
<a class="tag" taget="_blank" href="/search/Django%E6%95%99%E7%A8%8B/1.htm">Django教程</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/okhttp/1.htm">okhttp</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>目录Django文件上传需要考虑的重要事项Django文件上传的3种常见方式项目创建与设置创建模型URLConf配置使用一般表单上传文件使用ModelForm上传文件Django文件上传需要考虑的重要事项文件或图片一般通过表单进行。用户在前端点击文件上传,然后以POST方式将数据和文件提交到服务器。服务器在接收到POST请求后需要将其存储在服务器上的某个地方。Django默认的存储地址是相对于根目</div>
                    </li>
                    <li><a href="/article/1903312921669201920.htm"
                           title="优秀的前端框架" target="_blank">优秀的前端框架</a>
                        <span class="text-muted">johnrui</span>
<a class="tag" taget="_blank" href="/search/FrontEnd/1.htm">FrontEnd</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a>
                        <div>soybean-admin:https://gitcode.com/gh_mirrors/soy/soybean-adminsoybean-admin(演示):https://elp.soybeanjs.cn/home</div>
                    </li>
                    <li><a href="/article/1903301826799792128.htm"
                           title="网页版 123 分身数字人源码搭建,OEM贴牌" target="_blank">网页版 123 分身数字人源码搭建,OEM贴牌</a>
                        <span class="text-muted">18538162800=余</span>
<a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5/1.htm">矩阵</a>
                        <div>在数字化时代的浪潮下,数字人技术蓬勃发展,网页版123分身数字人源码搭建为众多开发者和企业提供了实现个性化数字人应用的可能。本文将深入探讨其技术开发过程,从底层架构到关键技术实现,全方位解析如何构建一个功能强大的网页版数字人系统。技术架构设计前端展示层HTML5与CSS3:构建数字人的可视化界面,实现流畅的动画效果和交互元素。利用CSS3的过渡、动画属性,为数字人的动作、表情变化提供细腻的视觉呈现</div>
                    </li>
                    <li><a href="/article/1903295394465509376.htm"
                           title="入门 Canvas:Web 绘图的强大工具" target="_blank">入门 Canvas:Web 绘图的强大工具</a>
                        <span class="text-muted">Hopebearer_</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/canva%E5%8F%AF%E7%94%BB/1.htm">canva可画</a>
                        <div>文章目录入门Canvas:Web绘图的强大工具一、Canvas简介二、Canvas的基本用法(一)绘制基本图形(二)绘制文本三、Canvas的应用场景(一)数据可视化(二)游戏开发(三)图像编辑四、Canvas的动画效果五、Canvas的优势与局限性(一)优势(二)局限性六、总结入门Canvas:Web绘图的强大工具在Web开发的广阔天地中,为了满足用户对丰富、交互性强的体验的不断追求,前端技术持</div>
                    </li>
                    <li><a href="/article/1903288584685809664.htm"
                           title="Vue 3 事件总线详解:构建组件间高效通信的桥梁" target="_blank">Vue 3 事件总线详解:构建组件间高效通信的桥梁</a>
                        <span class="text-muted">A-Kamen</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>Vue3事件总线详解:构建组件间高效通信的桥梁为什么需要事件总线?使用mitt实现事件总线1.安装mitt2.创建事件总线3.在组件中使用事件总线发送端组件(例如ComponentA.vue)接收端组件(例如ComponentB.vue)自定义实现事件总线总结在复杂的前端应用中,组件之间的通信往往需要一种灵活且解耦的方式。传统的Vue2中,我们常使用全局事件总线来实现这种通信,但在Vue3中,由于</div>
                    </li>
                    <li><a href="/article/1903288330104139776.htm"
                           title="TinyMCE插件是否支持Word图片的直接复制与web上传?" target="_blank">TinyMCE插件是否支持Word图片的直接复制与web上传?</a>
                        <span class="text-muted">2501_90694782</span>
<a class="tag" taget="_blank" href="/search/umeditor%E7%B2%98%E8%B4%B4word/1.htm">umeditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E7%B2%98%E8%B4%B4word/1.htm">ueditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E5%A4%8D%E5%88%B6word/1.htm">ueditor复制word</a><a class="tag" taget="_blank" href="/search/ueditor%E4%B8%8A%E4%BC%A0word%E5%9B%BE%E7%89%87/1.htm">ueditor上传word图片</a><a class="tag" taget="_blank" href="/search/ueditor%E5%AF%BC%E5%85%A5word/1.htm">ueditor导入word</a><a class="tag" taget="_blank" href="/search/ueditor%E5%AF%BC%E5%85%A5pdf/1.htm">ueditor导入pdf</a><a class="tag" taget="_blank" href="/search/ueditor%E5%AF%BC%E5%85%A5ppt/1.htm">ueditor导入ppt</a>
                        <div>要求:开源,免费,技术支持编辑器:TinyMCE前端:vue,vue2-cli,vue3-cli后端:java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform功能:导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台:Windows,macOS,Linux</div>
                    </li>
                    <li><a href="/article/1903284420899565568.htm"
                           title="【JavaWeb学习Day25】" target="_blank">【JavaWeb学习Day25】</a>
                        <span class="text-muted">quo-te</span>
<a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E9%BB%91%E9%A9%AC/1.htm">黑马</a>
                        <div>Web前端实战ElementPlus什么是ElementPlusElementPlus:是饿了么团队研发的,基于Vue3,面向设计师和开发者的组件库。组件:组成网页的部件,例如超链接、按钮、图片、表格、表单、分页条等等。官网:一个Vue3UI框架|ElementPlus快速入门准备工作:1.创建vue项目2.参照官方文档,安装ElementPlus组件库(在当前工程的目录下):npminstall</div>
                    </li>
                    <li><a href="/article/1903277105446187008.htm"
                           title="Sass:深度解析与实战应用" target="_blank">Sass:深度解析与实战应用</a>
                        <span class="text-muted">QQ828929QQ</span>
<a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><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>
                        <div>在前端开发的浪潮中,CSS预处理器因其强大的功能和灵活性而备受推崇。其中,Sass(SyntacticallyAwesomeStylesheets)无疑是这些预处理器中的佼佼者。本文将深入解析Sass的核心概念、语法特性以及实战应用,并通过代码样例展示其强大的功能。Sass是什么?Sass(SyntacticallyAwesomeStylesheets)是一种CSS预处理器,它允许我们使用变量、嵌</div>
                    </li>
                    <li><a href="/article/1903259630012788736.htm"
                           title="SvelteKit 最新中文文档教程(8)—— 部署 Node 服务端" target="_blank">SvelteKit 最新中文文档教程(8)—— 部署 Node 服务端</a>
                        <span class="text-muted"></span>

                        <div>前言Svelte,一个语法简洁、入门容易,面向未来的前端框架。从Svelte诞生之初,就备受开发者的喜爱,根据统计,从2019年到2024年,连续6年一直是开发者最感兴趣的前端框架No.1:Svelte以其独特的编译时优化机制著称,具有轻量级、高性能、易上手等特性,非常适合构建轻量级Web项目。为了帮助大家学习Svelte,我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习,也可以入手我</div>
                    </li>
                    <li><a href="/article/1903257419132235776.htm"
                           title="112:vue+cesium 设置镜头光晕效果" target="_blank">112:vue+cesium 设置镜头光晕效果</a>
                        <span class="text-muted">还是大剑师兰特</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/cesium%E7%BB%BC%E5%90%88%E6%95%99%E7%A8%8B200%2B/1.htm">cesium综合教程200+</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%91%E5%B8%88/1.htm">大剑师</a><a class="tag" taget="_blank" href="/search/cesium%E6%95%99%E7%A8%8B/1.htm">cesium教程</a><a class="tag" taget="_blank" href="/search/cesium%E7%A4%BA%E4%BE%8B/1.htm">cesium示例</a><a class="tag" taget="_blank" href="/search/cesium%E9%AB%98%E7%BA%A7/1.htm">cesium高级</a><a class="tag" taget="_blank" href="/search/Cesium/1.htm">Cesium</a><a class="tag" taget="_blank" href="/search/API/1.htm">API</a>
                        <div>作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第:112`篇文章文章目录一、示例效果图:二、示例介绍三、配置说明四、示例源代码(共171行)五、核心方法</div>
                    </li>
                    <li><a href="/article/1903252623746723840.htm"
                           title="Tinyflow AI 工作流编排框架 v0.0.7 发布" target="_blank">Tinyflow AI 工作流编排框架 v0.0.7 发布</a>
                        <span class="text-muted">自不量力的A同学</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
                        <div>目前没有关于TinyflowAI工作流编排框架v0.0.7发布的相关具体信息。Tinyflow是一个轻量的AI智能体流程编排解决方案,其设计理念是“简单、灵活、无侵入性”。它基于WebComponent开发,前端支持与React、Vue等任何框架集成,后端支持Java、Node.js、Python等语言,助力传统应用快速AI转型。该框架代码库轻量,学习成本低,能轻松应对简单任务编排和复杂多模态推理</div>
                    </li>
                    <li><a href="/article/1903248588490731520.htm"
                           title="【保姆级】阿里云codeup配置Git的CI/CD步骤" target="_blank">【保姆级】阿里云codeup配置Git的CI/CD步骤</a>
                        <span class="text-muted">CodeCaptain</span>
<a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a><a class="tag" taget="_blank" href="/search/GitLab/1.htm">GitLab</a><a class="tag" taget="_blank" href="/search/DevOps/1.htm">DevOps</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/ci%2Fcd/1.htm">ci/cd</a>
                        <div>以下是通过阿里云CodeUp的Git仓库进行CI/CD配置的详细步骤,涵盖前端(Vue3)和后端(SpringBoot)项目的自动化打包,并将前端打包结果嵌入到Nginx的Docker镜像中,以及将后端打包的JAR文件拷贝至Docker指定目录的完整流程:前提条件阿里云账号:已注册并登录阿里云CodeUp。项目代码:前端(Vue3)和后端(SpringBoot)项目代码已托管到CodeUp仓库。D</div>
                    </li>
                    <li><a href="/article/1903232178007896064.htm"
                           title="记录华为OBS文件上传下载多种方式" target="_blank">记录华为OBS文件上传下载多种方式</a>
                        <span class="text-muted">yychen_java</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                        <div>公司要从阿里的oss切换到华为的obs,为了尽量小代价的改动,所以想找和阿里一样上传的方式,之前阿里做的是后端生成文件上传的url,前端做上传动作,这里记录一下obs的多种上传方式。直接上代码:1、获取OBS配置引入mavencom.huaweicloudesdk-obs-java3.21.11其中的各种配置自己在华为平台找到哦。importcom.obs.services.ObsClient;i</div>
                    </li>
                    <li><a href="/article/1903219684988219392.htm"
                           title="七天免登录 为什么不能用seesion,客户端的http请求自动携带cookei的机制(比较重要)涉及HTTP规范" target="_blank">七天免登录 为什么不能用seesion,客户端的http请求自动携带cookei的机制(比较重要)涉及HTTP规范</a>
                        <span class="text-muted">哥谭居民0001</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a>
                        <div>如果是七天免登录,和session肯定没关系,因为session不能持久化,主要是客户端一旦关闭,seesion就失效了///所以必须是能持久化的,这就清晰了,要莫在的服务器保存,要摸在客户端设置cook机制1.使用Cookie实现七天免登录前端(登录页面)在登录页面中,提供一个“记住我”选项,允许用户选择是否启用免登录功能。jsp复制记住我后端(Servlet)在登录成功后,根据用户是否勾选“记</div>
                    </li>
                    <li><a href="/article/1903177931962773504.htm"
                           title="大神之路" target="_blank">大神之路</a>
                        <span class="text-muted">安卓工匠</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9A%84%E8%87%AA%E6%88%91%E4%BF%AE%E5%85%BB/1.htm">程序员的自我修养</a>
                        <div>首先申明,文章是我在码农网摘过来的,那里没有分享,我感觉程序员也需要鸡汤,或者说这篇文章更应该是一篇一个过来人的经验,以及对我们这些想学计算机或者其他各行各业的人的一个简单的阐述。读完文章后,感觉收获很多,作者说的对,坚持,一鸣惊人需要坚持不断地做一件事。我是前端小学生,每天晚上都会练习代码,并浏览微博,前端路上,有你有我。有的人想成为大牛,却不曾为此努力。有的人辛苦耕耘,却收获寥寥。很多时候,你</div>
                    </li>
                    <li><a href="/article/1903158751540604928.htm"
                           title="HTML 图像与多媒体元素:拓展学习边界的进度记录(一)" target="_blank">HTML 图像与多媒体元素:拓展学习边界的进度记录(一)</a>
                        <span class="text-muted">计算机毕设定制辅导-无忧学长</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a>
                        <div>开篇:学习启程在前端开发的广袤领域中,HTML作为构建网页的基石,其重要性不言而喻。而HTML图像与多媒体元素,就像是为这座基石添上了绚丽的色彩与灵动的音符,赋予网页更加丰富的表现力和交互性。作为一名热衷于探索前端技术的博主,我深知掌握这些元素对于提升网页开发能力的关键作用。于是,我踏上了深入学习HTML图像与多媒体元素的征程,并决定将学习过程中的点滴记录下来,与大家一同分享。希望通过这篇学习进度</div>
                    </li>
                                <li><a href="/article/97.htm"
                                       title="TOMCAT在POST方法提交参数丢失问题" target="_blank">TOMCAT在POST方法提交参数丢失问题</a>
                                    <span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
                                    <div>摘自http://my.oschina.net/luckyi/blog/213209 
昨天在解决一个BUG时发现一个奇怪的问题,一个AJAX提交数据在之前都是木有问题的,突然提交出错影响其他处理流程。 
 
检查时发现页面处理数据较多,起初以为是提交顺序不正确修改后发现不是由此问题引起。于是删除掉一部分数据进行提交,较少数据能够提交成功。 
 
恢复较多数据后跟踪提交FORM DATA ,发现数</div>
                                </li>
                                <li><a href="/article/224.htm"
                                       title="在MyEclipse中增加JSP模板 删除-2008-08-18" target="_blank">在MyEclipse中增加JSP模板 删除-2008-08-18</a>
                                    <span class="text-muted">ljy325</span>
<a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/MyEclipse/1.htm">MyEclipse</a>
                                    <div>在D:\Program Files\MyEclipse 6.0\myeclipse\eclipse\plugins\com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710\templates\jsp  目录下找到Jsp.vtl,复制一份,重命名为jsp2.vtl,然后把里面的内容修改为自己想要的格式,保存。 
然后在 D:\Progr</div>
                                </li>
                                <li><a href="/article/351.htm"
                                       title="JavaScript常用验证脚本总结" target="_blank">JavaScript常用验证脚本总结</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javaScript%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81/1.htm">javaScript表单验证</a>
                                    <div>     转载请出自出处:http://eksliang.iteye.com/blog/2098985   
     下面这些验证脚本,是我在这几年开发中的总结,今天把他放出来,也算是一种分享吧,现在在我的项目中也在用!包括日期验证、比较,非空验证、身份证验证、数值验证、Email验证、电话验证等等...! 
&nb</div>
                                </li>
                                <li><a href="/article/478.htm"
                                       title="微软BI(4)" target="_blank">微软BI(4)</a>
                                    <span class="text-muted">18289753290</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E8%BD%AFBI+SSIS/1.htm">微软BI SSIS</a>
                                    <div>1) 
Q:查看ssis里面某个控件输出的结果:  
A MessageBox.Show(Dts.Variables["v_lastTimestamp"].Value.ToString()); 
这是我们在包里面定义的变量 
2):在关联目的端表的时候如果是一对多的关系,一定要选择唯一的那个键作为关联字段。 
3) 
Q:ssis里面如果将多个数据源的数据插入目的端一</div>
                                </li>
                                <li><a href="/article/605.htm"
                                       title="定时对大数据量的表进行分表对数据备份" target="_blank">定时对大数据量的表进行分表对数据备份</a>
                                    <span class="text-muted">酷的飞上天空</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE%E9%87%8F/1.htm">大数据量</a>
                                    <div>工作中遇到数据库中一个表的数据量比较大,属于日志表。正常情况下是不会有查询操作的,但如果不进行分表数据太多,执行一条简单sql语句要等好几分钟。。 
  
分表工具:linux的shell + mysql自身提供的管理命令 
原理:使用一个和原表数据结构一样的表,替换原表。 
  
linux shell内容如下: 
=======================开始 </div>
                                </li>
                                <li><a href="/article/732.htm"
                                       title="本质的描述与因材施教" target="_blank">本质的描述与因材施教</a>
                                    <span class="text-muted">永夜-极光</span>
<a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%83%B3/1.htm">感想</a><a class="tag" taget="_blank" href="/search/%E9%9A%8F%E7%AC%94/1.htm">随笔</a>
                                    <div>  
       不管碰到什么事,我都下意识的想去探索本质,找寻一个最形象的描述方式。 
       我坚信,世界上对一件事物的描述和解释,肯定有一种最形象,最贴近本质,最容易让人理解 
  
     &</div>
                                </li>
                                <li><a href="/article/859.htm"
                                       title="很迷茫。。。" target="_blank">很迷茫。。。</a>
                                    <span class="text-muted">随便小屋</span>
<a class="tag" taget="_blank" href="/search/%E9%9A%8F%E7%AC%94/1.htm">随笔</a>
                                    <div>小弟我今年研一,也是从事的咱们现在最流行的专业(计算机)。本科三流学校,为了能有个更好的跳板,进入了考研大军,非常有幸能进入研究生的行业(具体学校就不说了,怕把学校的名誉给损了)。 
  
先说一下自身的条件,本科专业软件工程。主要学习就是软件开发,几乎和计算机没有什么区别。因为学校本身三流,也就是让老师带着学生学点东西,然后让学生毕业就行了。对专业性的东西了解的非常浅。就那学的语言来说</div>
                                </li>
                                <li><a href="/article/986.htm"
                                       title="23种设计模式的意图和适用范围" target="_blank">23种设计模式的意图和适用范围</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
                                    <div>Factory Method  意图 定义一个用于创建对象的接口,让子类决定实例化哪一个类。Factory Method 使一个类的实例化延迟到其子类。    适用性 当一个类不知道它所必须创建的对象的类的时候。    当一个类希望由它的子类来指定它所创建的对象的时候。    当类将创建对象的职责委托给多个帮助子类中的某一个,并且你希望将哪一个帮助子类是代理者这一信息局部化的时候。  
Abstr</div>
                                </li>
                                <li><a href="/article/1113.htm"
                                       title="Java中的synchronized和volatile" target="_blank">Java中的synchronized和volatile</a>
                                    <span class="text-muted">aoyouzi</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/volatile/1.htm">volatile</a><a class="tag" taget="_blank" href="/search/synchronized/1.htm">synchronized</a>
                                    <div>说到Java的线程同步问题肯定要说到两个关键字synchronized和volatile。说到这两个关键字,又要说道JVM的内存模型。JVM里内存分为main memory和working memory。 Main memory是所有线程共享的,working memory则是线程的工作内存,它保存有部分main memory变量的拷贝,对这些变量的更新直接发生在working memo</div>
                                </li>
                                <li><a href="/article/1240.htm"
                                       title="js数组的操作和this关键字" target="_blank">js数组的操作和this关键字</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/%E6%95%B0%E7%BB%84%E6%93%8D%E4%BD%9C/1.htm">数组操作</a><a class="tag" taget="_blank" href="/search/this%E5%85%B3%E9%94%AE%E5%AD%97/1.htm">this关键字</a>
                                    <div>js数组的操作; 
  
一:数组的创建: 
1、数组的创建

var array = new Array(); //创建一个数组

var array = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度

var arrayObj = new Array([element0[, element1[, ...[, elementN]]]</div>
                                </li>
                                <li><a href="/article/1367.htm"
                                       title="别人的阿里面试感悟" target="_blank">别人的阿里面试感悟</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E5%88%86%E4%BA%AB/1.htm">面试分享</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%84%9F%E6%82%9F/1.htm">工作感悟</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E9%9D%A2%E8%AF%95/1.htm">阿里面试</a>
                                    <div>原文如下:http://greemranqq.iteye.com/blog/2007170 
        一直做企业系统,虽然也自己一直学习技术,但是感觉还是有所欠缺,准备花几个月的时间,把互联网的东西,以及一些基础更加的深入透析,结果这次比较意外,有点突然,下面分享一下感受吧! 
   &nb</div>
                                </li>
                                <li><a href="/article/1494.htm"
                                       title="淘宝的测试框架Itest" target="_blank">淘宝的测试框架Itest</a>
                                    <span class="text-muted">Bill_chen</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a>
                                    <div>Itest测试框架是TaoBao测试部门开发的一套单元测试框架,以Junit4为核心, 
集合DbUnit、Unitils等主流测试框架,应该算是比较好用的了。 
近期项目中用了下,有关itest的具体使用如下: 
1.在Maven中引入itest框架: 
<dependency> 
  <groupId>com.taobao.test</groupId&g</div>
                                </li>
                                <li><a href="/article/1621.htm"
                                       title="【Java多线程二】多路条件解决生产者消费者问题" target="_blank">【Java多线程二】多路条件解决生产者消费者问题</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a>
                                    <div>package com.tom;

import java.util.LinkedList;
import java.util.Queue;
import java.util.concurrent.ThreadLocalRandom;
import java.util.concurrent.locks.Condition;
import java.util.concurrent.loc</div>
                                </li>
                                <li><a href="/article/1748.htm"
                                       title="汉字转拼音pinyin4j" target="_blank">汉字转拼音pinyin4j</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/pinyin4j/1.htm">pinyin4j</a>
                                    <div> 以前在项目中遇到汉字转拼音的情况,于是在网上找到了pinyin4j这个工具包,非常有用,别的不说了,直接下代码: 
  
  

import java.util.HashSet;
import java.util.Set;

import net.sourceforge.pinyin4j.PinyinHelper;
import net.sourceforge.pinyin</div>
                                </li>
                                <li><a href="/article/1875.htm"
                                       title="org.hibernate.TransactionException: JDBC begin failed解决方案" target="_blank">org.hibernate.TransactionException: JDBC begin failed解决方案</a>
                                    <span class="text-muted">bozch</span>
<a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E5%BC%82%E5%B8%B8/1.htm">数据库异常</a><a class="tag" taget="_blank" href="/search/DBCP/1.htm">DBCP</a>
                                    <div>org.hibernate.TransactionException: JDBC begin failed:     at org.hibernate.transaction.JDBCTransaction.begin(JDBCTransaction.java:68)    at org.hibernate.impl.SessionImp</div>
                                </li>
                                <li><a href="/article/2002.htm"
                                       title="java-并查集(Disjoint-set)-将多个集合合并成没有交集的集合" target="_blank">java-并查集(Disjoint-set)-将多个集合合并成没有交集的集合</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.ut</div>
                                </li>
                                <li><a href="/article/2129.htm"
                                       title="Java PrintWriter打印乱码" target="_blank">Java PrintWriter打印乱码</a>
                                    <span class="text-muted">chenbowen00</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>一个小程序读写文件,发现PrintWriter输出后文件存在乱码,解决办法主要统一输入输出流编码格式。 
读文件: 
BufferedReader 
从字符输入流中读取文本,缓冲各个字符,从而提供字符、数组和行的高效读取。 
 
可以指定缓冲区的大小,或者可使用默认的大小。大多数情况下,默认值就足够大了。 
 
通常,Reader 所作的每个读取请求都会导致对基础字符或字节流进行相应的读取请求。因</div>
                                </li>
                                <li><a href="/article/2256.htm"
                                       title="[天气与气候]极端气候环境" target="_blank">[天气与气候]极端气候环境</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%8E%AF%E5%A2%83/1.htm">环境</a>
                                    <div> 
 
      如果空间环境出现异变...外星文明并未出现,而只是用某种气象武器对地球的气候系统进行攻击,并挑唆地球国家间的战争,经过一段时间的准备...最大限度的削弱地球文明的整体力量,然后再进行入侵...... 
 
 
     那么地球上的国家应该做什么样的防备工作呢? 
 
 
 &n</div>
                                </li>
                                <li><a href="/article/2383.htm"
                                       title="oracle order by与union一起使用的用法" target="_blank">oracle order by与union一起使用的用法</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/UNION/1.htm">UNION</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/order+by/1.htm">order by</a>
                                    <div>当使用union操作时,排序语句必须放在最后面才正确,如下: 
 
 
只能在union的最后一个子查询中使用order by,而这个order by是针对整个unioning后的结果集的。So: 
如果unoin的几个子查询列名不同,如 
Sql代码  
select supplier_id, supplier_name  
from suppliers  
UNI</div>
                                </li>
                                <li><a href="/article/2510.htm"
                                       title="zeus持久层读写分离单元测试" target="_blank">zeus持久层读写分离单元测试</a>
                                    <span class="text-muted">deng520159</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a>
                                    <div>本文是zeus读写分离单元测试,距离分库分表,只有一步了.上代码: 
1.ZeusMasterSlaveTest.java 
package com.dengliang.zeus.webdemo.test;

import java.util.ArrayList;
import java.util.List;

import org.junit.Assert;
import org.j</div>
                                </li>
                                <li><a href="/article/2637.htm"
                                       title="Yii 截取字符串(UTF-8) 使用组件" target="_blank">Yii 截取字符串(UTF-8) 使用组件</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a>
                                    <div>1.将Helper.php放进protected\components文件夹下。 
2.调用方法: 
  Helper::truncate_utf8_string($content,20,false);   //不显示省略号  Helper::truncate_utf8_string($content,20);  //显示省略号  
&n</div>
                                </li>
                                <li><a href="/article/2764.htm"
                                       title="安装memcache及php扩展" target="_blank">安装memcache及php扩展</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
                                    <div>安装memcache    tar zxvf memcache-2.2.5.tgz     cd memcache-2.2.5/     /usr/local/php/bin/phpize (?)    ./configure --with-php-confi</div>
                                </li>
                                <li><a href="/article/2891.htm"
                                       title="JsonObject 处理日期" target="_blank">JsonObject 处理日期</a>
                                    <span class="text-muted">feifeilinlin521</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/JsonOjbect/1.htm">JsonOjbect</a><a class="tag" taget="_blank" href="/search/JsonArray/1.htm">JsonArray</a><a class="tag" taget="_blank" href="/search/JSONException/1.htm">JSONException</a>
                                    <div>    写这边文章的初衷就是遇到了json在转换日期格式出现了异常 net.sf.json.JSONException: java.lang.reflect.InvocationTargetException  原因是当你用Map接收数据库返回了java.sql.Date 日期的数据进行json转换出的问题话不多说  直接上代码 
 &n</div>
                                </li>
                                <li><a href="/article/3018.htm"
                                       title="Ehcache(06)——监听器" target="_blank">Ehcache(06)——监听器</a>
                                    <span class="text-muted">234390216</span>
<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/listener/1.htm">listener</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a>
                                    <div>监听器 
  
       Ehcache中监听器有两种,监听CacheManager的CacheManagerEventListener和监听Cache的CacheEventListener。在Ehcache中,Listener是通过对应的监听器工厂来生产和发生作用的。下面我们将来介绍一下这两种类型的监听器。 
 </div>
                                </li>
                                <li><a href="/article/3145.htm"
                                       title="activiti 自带设计器中chrome 34版本不能打开bug的解决" target="_blank">activiti 自带设计器中chrome 34版本不能打开bug的解决</a>
                                    <span class="text-muted">jackyrong</span>
<a class="tag" taget="_blank" href="/search/Activiti/1.htm">Activiti</a>
                                    <div>  在acitivti modeler中,如果是chrome 34,则不能打开该设计器,其他浏览器可以, 
经证实为bug,参考 
http://forums.activiti.org/content/activiti-modeler-doesnt-work-chrome-v34 
 
修改为,找到 
oryx.debug.js 
 
在最头部增加 
 

if (!Document.</div>
                                </li>
                                <li><a href="/article/3272.htm"
                                       title="微信收货地址共享接口-终极解决" target="_blank">微信收货地址共享接口-终极解决</a>
                                    <span class="text-muted">laotu5i0</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%BC%80%E5%8F%91/1.htm">微信开发</a>
                                    <div>   最近要接入微信的收货地址共享接口,总是不成功,折腾了好几天,实在没办法网上搜到的帖子也是骂声一片。我把我碰到并解决问题的过程分享出来,希望能给微信的接口文档起到一个辅助作用,让后面进来的开发者能快速的接入,而不需要像我们一样苦逼的浪费好几天,甚至一周的青春。各种羞辱、谩骂的话就不说了,本人还算文明。 
   如果你能搜到本贴,说明你已经碰到了各种 ed</div>
                                </li>
                                <li><a href="/article/3399.htm"
                                       title="关于人才" target="_blank">关于人才</a>
                                    <span class="text-muted">netkiller.github.com</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E6%8B%9B%E8%81%98/1.htm">招聘</a><a class="tag" taget="_blank" href="/search/netkiller/1.htm">netkiller</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E6%89%8D/1.htm">人才</a>
                                    <div>关于人才 
每个月我都会接到许多猎头的电话,有些猎头比较专业,但绝大多数在我看来与猎头二字还是有很大差距的。 与猎头接触多了,自然也了解了他们的工作,包括操作手法,总体上国内的猎头行业还处在初级阶段。 
总结就是“盲目推荐,以量取胜”。  
目前现状 
许多从事人力资源工作的人,根本不懂得怎么找人才。处在人才找不到企业,企业找不到人才的尴尬处境。 
企业招聘,通常是需要用人的部门提出招聘条件,由人</div>
                                </li>
                                <li><a href="/article/3526.htm"
                                       title="搭建 CentOS 6 服务器 - 目录" target="_blank">搭建 CentOS 6 服务器 - 目录</a>
                                    <span class="text-muted">rensanning</span>
<a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a>
                                    <div>(1) 安装CentOS 
ISO(desktop/minimal)、Cloud(AWS/阿里云)、Virtualization(VMWare、VirtualBox) 
详细内容 
 
 
(2) Linux常用命令 
cd、ls、rm、chmod...... 
详细内容 
 
 
(3) 初始环境设置 
用户管理、网络设置、安全设置...... 
详细内容 
 
 
(4) 常驻服务Daemon</div>
                                </li>
                                <li><a href="/article/3653.htm"
                                       title="【求助】mongoDB无法更新主键" target="_blank">【求助】mongoDB无法更新主键</a>
                                    <span class="text-muted">toknowme</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
                                    <div>       Query query = new Query();            query.addCriteria(new Criteria("_id").is(o.getId()));                    &n</div>
                                </li>
                                <li><a href="/article/3780.htm"
                                       title="jquery 页面滚动到底部自动加载插件集合" target="_blank">jquery 页面滚动到底部自动加载插件集合</a>
                                    <span class="text-muted">xp9802</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
                                    <div>很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容。下面为你推荐 10 个 jQuery 的无限滚动的插件: 
1. jQuery ScrollPagination 
jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件。 
2. jQuery Screw 
S</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>