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/1881426737988956160.htm"
                           title="AI时代:前端工程师和数学家真的要失业了吗?" target="_blank">AI时代:前端工程师和数学家真的要失业了吗?</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>ExaCEO威廉·布里克近日发布的惊人预测在科技界引发轩然大波:他认为前端工程师将在三年内消失,而数学家则只有700天的时间。这一预测并非危言耸听,它反映了AI代码生成器等AI技术高速发展带来的巨大行业冲击。本文将深入探讨AI技术对前端开发和数学领域的影响,以及由此带来的机遇与挑战。前端开发行业的AI革命布里克的预测并非空穴来风。近年来,众多AI写代码工具如雨后春笋般涌现,例如ScriptEcho</div>
                    </li>
                    <li><a href="/article/1881426225692471296.htm"
                           title="2025年,AI时代下的前端职业思考" target="_blank">2025年,AI时代下的前端职业思考</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>近年来,随着AI技术的迅猛发展,尤其是像ChatGPT、Copilot这样的工具,前端开发领域正在经历前所未有的变革。许多新人不禁会问:“在AI普及的时代,2025年还该不该学前端?前端就业还有没有前途?”今天,我们就从多个角度深入探讨这个问题,并为你提供一些实用的建议。一、AI对前端开发的影响1.AI正在改变前端开发的工作方式AI工具已经能够自动生成代码、优化UI设计、甚至调试Bug。例如,Gi</div>
                    </li>
                    <li><a href="/article/1881424333717434368.htm"
                           title="面试官:谈谈你对JavaScript原型链的理解" target="_blank">面试官:谈谈你对JavaScript原型链的理解</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
                        <div>在前端开发领域的每一次深入交流中,JavaScript的原型链总是那个绕不开的技术高地。它不仅是理解JavaScript对象模型的关键,也是评估前端开发者技术深度和广度的重要指标。引言:为何原型链如此重要?在JavaScript中,原型链是实现继承的核心机制。它允许对象通过原型对象间接地共享属性和方法,这种机制不仅减少了代码的冗余,还提高了代码的可复用性和灵活性。因此,掌握原型链的原理和应用,对于</div>
                    </li>
                    <li><a href="/article/1881380921907671040.htm"
                           title="Bootstrap UI 编辑器:简化前端开发的利器" target="_blank">Bootstrap UI 编辑器:简化前端开发的利器</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>BootstrapUI编辑器:简化前端开发的利器引言在当今的网页设计和开发领域,Bootstrap已经成为了一个非常流行的前端框架。它以其响应式设计、简洁的代码和丰富的组件库而受到广大开发者的喜爱。然而,对于一些非技术背景的设计师或者初学者来说,直接使用Bootstrap可能会有一定的难度。这时,BootstrapUI编辑器就成为了他们的救星。本文将详细介绍BootstrapUI编辑器的概念、特点</div>
                    </li>
                    <li><a href="/article/1881375872640937984.htm"
                           title="基于JAVA水果商城设计计算机毕业设计源码+数据库+lw文档+系统+部署" target="_blank">基于JAVA水果商城设计计算机毕业设计源码+数据库+lw文档+系统+部署</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
                        <div>基于JAVA水果商城设计计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA水果商城设计计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈:项目架构:B/S架构开发语言:Java语言开发软件:ideaeclipse前端技术:Layui、HTML、CSS、JS、JQuery等技术后端技术:JAVA运行环境:Win10、JDK1.8数据库:MySQL5.7/8.0源码地址:https</div>
                    </li>
                    <li><a href="/article/1881360265505730560.htm"
                           title="Vue.js 的组合式 API 与状态管理" target="_blank">Vue.js 的组合式 API 与状态管理</a>
                        <span class="text-muted"></span>

                        <div>随着现代前端开发的不断发展,Vue.js作为一个渐进式JavaScript框架,已经成为开发动态和交互式用户界面的流行选择之一。Vue.js的设计旨在通过简洁的语法和强大的功能来提升开发者的生产力。在Vue3中引入的组合式API(CompositionAPI)及其状态管理功能,为开发者提供了一种灵活且可扩展的方式来构建复杂的应用程序。本文将深入探讨Vue.js的组合式API,并结合状态管理的概念,</div>
                    </li>
                    <li><a href="/article/1881359506152157184.htm"
                           title="深入理解检查约束:确保数据质量的重要工具" target="_blank">深入理解检查约束:确保数据质量的重要工具</a>
                        <span class="text-muted"></span>

                        <div>title:深入理解检查约束:确保数据质量的重要工具date:2025/1/20updated:2025/1/20author:cmdragonexcerpt:在数据库管理中,检查约束是一种重要的约束类型,用于确保表中某一列或某些列的数据符合特定条件,从而维护数据的有效性和一致性。检查约束通过对数据的有效性进行验证,防止无效或不合逻辑的数据进入数据库。categories:前端开发tags:检查约</div>
                    </li>
                    <li><a href="/article/1881357733731561472.htm"
                           title="ofa.js:无需打包的MVVM框架,前端开发的轻量之选" target="_blank">ofa.js:无需打包的MVVM框架,前端开发的轻量之选</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>近年来,前端开发领域涌现了许多优秀的框架,如React、Vue和Angular,它们极大地提升了开发效率和代码可维护性。然而,随着项目复杂度的增加,这些框架的学习曲线和构建工具链的复杂性也让许多开发者感到头疼。在这样的背景下,ofa.js应运而生,它号称“无需打包的MVVM框架”,试图为前端开发带来一种全新的体验。那么,ofa.js究竟有何独特之处?它与其他MVVM框架相比又有哪些优势?本文将为你</div>
                    </li>
                    <li><a href="/article/1881357729885384704.htm"
                           title="AI生成前端页面:解放前端开发,拥抱AI时代的高效" target="_blank">AI生成前端页面:解放前端开发,拥抱AI时代的高效</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>在数字时代,效率是企业和个人的核心竞争力。而对于前端开发人员来说,重复性工作和繁琐的代码编写常常成为效率提升的瓶颈。幸运的是,随着人工智能技术的飞速发展,一个新的时代已经到来——AI代码生成器(例如ScriptEcho)的出现,正以前所未有的方式改变着前端开发的格局。本文将探讨人工智能在日常应用中的广泛影响,并着重介绍如何利用AI技术,例如ScriptEcho,来提升前端开发效率,从而更好地应对当</div>
                    </li>
                    <li><a href="/article/1881354440305340416.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>引言在一个大型项目中,随着功能不断扩展、需求不断变化、人员不断更替,代码的质量和可维护性可能会逐渐恶化,最终演变成所谓的“代码屎山”。你一定对代码屎山的形成和后果有深刻的体会。那么,究竟是什么原因导致了代码屎山的形成?如何在开发过程中避免掉进这一陷阱?本文将从多个角度剖析这一问题,并提出一些解决方案,希望能帮助大家减少开发中的痛苦,提升代码质量。第一章:什么是“代码屎山”?在正式探讨代码屎山的形成</div>
                    </li>
                    <li><a href="/article/1881352161401565184.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>未来前端发展方向:深度探索与技术前瞻在数字化浪潮席卷全球的今天,前端开发作为连接用户与数字世界的桥梁,其重要性不言而喻。随着技术的不断进步和市场的不断变化,前端开发领域正经历着前所未有的变革。今天,我们将深入探讨未来前端发展的几个关键方向,为前端开发者们提供有价值的参考。一、性能优化与用户体验性能优化一直是前端开发的核心议题之一。在未来,随着用户对于应用响应速度和流畅性的要求越来越高,性能优化将变</div>
                    </li>
                    <li><a href="/article/1881351651776851968.htm"
                           title="小明,谈谈你对Vue 虚拟dom的理解" target="_blank">小明,谈谈你对Vue 虚拟dom的理解</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
                        <div>Vue.js的虚拟DOM(VirtualDOM)是为了提高前端性能和开发体验而引入的一种技术。Vue.js虚拟DOM的大致实现虚拟DOM的定义虚拟DOM是一种JavaScript对象,它用来描述用户界面(UI)的结构和内容。每个虚拟DOM节点(VNode)代表一个真实的DOM元素或组件实例。//VNode示例constvnode={tag:'div',data:{id:'app'},childre</div>
                    </li>
                    <li><a href="/article/1881346359013994496.htm"
                           title="Vue.js 的组合式 API 与状态管理" target="_blank">Vue.js 的组合式 API 与状态管理</a>
                        <span class="text-muted"></span>

                        <div>随着现代前端开发的不断发展,Vue.js作为一个渐进式JavaScript框架,已经成为开发动态和交互式用户界面的流行选择之一。Vue.js的设计旨在通过简洁的语法和强大的功能来提升开发者的生产力。在Vue3中引入的组合式API(CompositionAPI)及其状态管理功能,为开发者提供了一种灵活且可扩展的方式来构建复杂的应用程序。本文将深入探讨Vue.js的组合式API,并结合状态管理的概念,</div>
                    </li>
                    <li><a href="/article/1881345737116151808.htm"
                           title="JavaScript 运算符详解:各类运算符及优先级。" target="_blank">JavaScript 运算符详解:各类运算符及优先级。</a>
                        <span class="text-muted">前端基地</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%AE%97%E7%AC%A6%E4%BC%98%E5%85%88%E7%BA%A7/1.htm">运算符优先级</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%95%B0%E8%BF%90%E7%AE%97%E7%AC%A6/1.htm">算数运算符</a><a class="tag" taget="_blank" href="/search/%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6/1.htm">逻辑运算符</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E5%85%83%E8%BF%90%E7%AE%97%E7%AC%A6/1.htm">一元运算符</a><a class="tag" taget="_blank" href="/search/%E6%AF%94%E8%BE%83%E8%BF%90%E7%AE%97%E7%AC%A6/1.htm">比较运算符</a><a class="tag" taget="_blank" href="/search/%E8%B5%8B%E5%80%BC%E8%BF%90%E7%AE%97%E7%AC%A6/1.htm">赋值运算符</a>
                        <div>目录非VIP用户可前往公众号“前端基地”进行免费阅读运算符介绍运算符优先级算数运算符赋值运算符比较运算符逻辑运算符介绍a&&b和a||b一元运算符非VIP用户可前往公众号“前端基地”进行免费阅读运算符介绍以下是各类运算符的详细介绍:运算符描述算术运算符加(+)、减(-)、乘(*)、除(/)、求余数并保留整数(%)、累加(++)、递减(--)赋值运算符=、+=(num+=5等同于num=num+5)</div>
                    </li>
                    <li><a href="/article/1881325677664333824.htm"
                           title="Windows 窗口置顶工具推荐 如何始终置顶窗口 窗口前置 窗口固定 窗口钉在桌面 始终保持在其他窗口前端 在其他窗口之上 PowerToys MouseInc" target="_blank">Windows 窗口置顶工具推荐 如何始终置顶窗口 窗口前置 窗口固定 窗口钉在桌面 始终保持在其他窗口前端 在其他窗口之上 PowerToys MouseInc</a>
                        <span class="text-muted">七星关雎</span>
<a class="tag" taget="_blank" href="/search/Windows/1.htm">Windows</a><a class="tag" taget="_blank" href="/search/%E7%96%91%E9%9A%BE%E6%9D%82%E7%97%87/1.htm">疑难杂症</a><a class="tag" taget="_blank" href="/search/Windows/1.htm">Windows</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E8%BD%AF%E4%BB%B6/1.htm">开源软件</a>
                        <div>工具一:微软PowerToysReleases·microsoft/PowerToys·GitHubWindowssystemutilitiestomaximizeproductivity.Contributetomicrosoft/PowerToysdevelopmentbycreatinganaccountonGitHub.https://github.com/microsoft/PowerT</div>
                    </li>
                    <li><a href="/article/1881310159343513600.htm"
                           title="深度解析智能问答系统:如何打造精准、高效的AI对话架构?" target="_blank">深度解析智能问答系统:如何打造精准、高效的AI对话架构?</a>
                        <span class="text-muted">和老莫一起学AI</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a><a class="tag" taget="_blank" href="/search/%E4%BA%A7%E5%93%81%E7%BB%8F%E7%90%86/1.htm">产品经理</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
                        <div>在人工智能的飞速发展中,智能问答系统(QA系统)逐渐成为了企业内部管理、客户服务、搜索引擎等多个领域中的关键技术。今天,我们将深入探讨一个基于大模型、自然语言处理、知识检索的智能问答系统的架构,详细介绍其技术原理、流程以及未来应用前景。一、系统整体概览在这个智能问答系统中,整个流程可以大致划分为两大部分:前端问答生成与后端离线数据处理。前端部分是用户交互的核心,通过用户的输入、关键词提取、检索和问</div>
                    </li>
                    <li><a href="/article/1881300439362760704.htm"
                           title="《中型 Vue 项目:挑战与成长》" target="_blank">《中型 Vue 项目:挑战与成长》</a>
                        <span class="text-muted">计算机毕设定制辅导-无忧学长</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一、引言在当今的前端开发领域,Vue作为一款渐进式JavaScript框架,以其强大的功能和灵活性备受开发者青睐。对于中型Vue项目而言,其重要性不言而喻。中型Vue项目通常在功能复杂度和规模上介于小型项目和大型项目之间,既需要应对一定的业务需求挑战,又要考虑开发效率和可维护性。中型Vue项目面临着诸多挑战与机遇。挑战方面,随着项目规模的扩大,代码的复杂性增加,如何进行有效的状态管理、组件化开发以</div>
                    </li>
                    <li><a href="/article/1881297279973912576.htm"
                           title="httpslocalhostindex 配置的nginx,一刷新就报404了" target="_blank">httpslocalhostindex 配置的nginx,一刷新就报404了</a>
                        <span class="text-muted">m0_74824112</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
                        <div>当你的Nginx配置导致页面刷新时报404错误时,通常是由于以下几个原因造成的:静态文件路径配置错误:Nginx没有正确地指向静态文件的目录。前端路由问题:如果是SPA(单页应用),刷新页面时Nginx没有正确地将请求重定向到入口文件(如index.html)。反向代理配置错误:如果Nginx作为反向代理,后端服务可能没有正确处理请求。检查和解决步骤1.检查静态文件路径配置确保Nginx配置文件中</div>
                    </li>
                    <li><a href="/article/1881288067185176576.htm"
                           title="深度解析 React 合成事件:机制、作用及与 Vue 事件机制的对比" target="_blank">深度解析 React 合成事件:机制、作用及与 Vue 事件机制的对比</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFvue.jsreact/1.htm">前端vue.jsreact</a>
                        <div>在前端开发领域,React与Vue作为两款备受瞩目的框架,凭借独特的设计理念和技术架构,为开发者打造出截然不同的开发体验。React的合成事件是其核心亮点之一,Vue则采用了别具一格的事件处理机制,二者的差异背后蕴藏着多方面的考量。一、React合成事件的底层剖析(一)事件创建与封装细节当DOM事件触发,React会第一时间在内部事件池中检索对应的合成事件实例。若未找到,便依据原生事件类型,像cl</div>
                    </li>
                    <li><a href="/article/1881282752628715520.htm"
                           title="告别代码堆砌!AI生成前端页面,让开发效率飞升" target="_blank">告别代码堆砌!AI生成前端页面,让开发效率飞升</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>在当今快节奏的数字世界中,前端开发效率至关重要。面对日益增长的市场需求和复杂的项目,开发者们常常面临着巨大的压力。而一款优秀的AI生成前端页面工具,无疑能成为提升效率的利器。本文将深入探讨谷歌Gemini的强大功能,并结合ScriptEcho——一款基于大模型AI技术的前端代码生成工具,展现如何将AI技术应用于前端开发,从而实现效率的显著提升。谷歌Gemini:AI赋能的未来谷歌Gemini的出现</div>
                    </li>
                    <li><a href="/article/1881282624140406784.htm"
                           title="零售业的AI赋能与前端开发效率革命:ScriptEcho 的助力" target="_blank">零售业的AI赋能与前端开发效率革命:ScriptEcho 的助力</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>零售业正经历着前所未有的数字化转型,但同时也面临着巨大的挑战。库存管理混乱、个性化客户体验不足等问题,严重制约着零售企业的盈利能力。而人工智能(AI)的兴起,为解决这些问题提供了新的思路。通过AI驱动的实时库存管理和客户行为分析,零售企业可以显著提升运营效率和客户满意度。然而,构建这些AI赋能的零售应用,需要强大的前端开发能力,这正是AI代码生成器ScriptEcho能够发挥关键作用的地方。AI赋</div>
                    </li>
                    <li><a href="/article/1881282243914166272.htm"
                           title="AI时代的前端开发:技能提升与职业发展之路" target="_blank">AI时代的前端开发:技能提升与职业发展之路</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>在瞬息万变的科技时代,个人职业发展的重要性日益凸显。提升技能,不断学习,已经不再是锦上添花,而是立足之本,是我们在竞争激烈的职场中脱颖而出的关键。而人工智能(AI)技术的快速发展,为我们提供了前所未有的机遇,特别是对于前端开发领域,AI正以前所未有的速度改变着我们的工作方式和学习方式。AI赋能前端开发:个性化学习路径前端开发领域的技术栈庞大而复杂,涵盖HTML、CSS、JavaScript、各种框</div>
                    </li>
                    <li><a href="/article/1881270157452570624.htm"
                           title="出海工具集" target="_blank">出海工具集</a>
                        <span class="text-muted">web前端进阶者</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>群聊分享的一个工具集合,看了几个,感觉有点子用,收藏一波,下面有GitHub的地址;吃水不忘挖井人;GitHub地址分类目录导航Web开发框架或模板Chrome插件开发前端开发后端开发数据库管理对象关系映射(ORM)样式与UI框架原型设计认证与授权支付集成邮件服务网站分析在线客服和反馈服务部署与托管网站管理域名注册文档管理协议生成图标资源字体资源图片视频素材图片视频处理工具屏幕录制短链或长链信息渠</div>
                    </li>
                    <li><a href="/article/1881247829620486144.htm"
                           title="Arch - 架构安全性_验证(Verification)" target="_blank">Arch - 架构安全性_验证(Verification)</a>
                        <span class="text-muted">小小工匠</span>
<a class="tag" taget="_blank" href="/search/%E3%80%90%E5%87%A4%E5%87%B0%E6%9E%B6%E6%9E%84%E3%80%91/1.htm">【凤凰架构】</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E9%AA%8C%E8%AF%81/1.htm">验证</a><a class="tag" taget="_blank" href="/search/Verification/1.htm">Verification</a>
                        <div>文章目录OverView导图1.引言:数据验证的重要性概述2.数据验证的基本概念3.数据验证的层次前端验证后端验证4.数据验证的标准做法5.自定义校验注解6.校验结果的处理7.性能考虑与副作用8.小结OverView即使只限定在“软件架构设计”这个语境下,系统安全仍然是一个很大的话题。接下来我们将对系统安全架构的各个方面进行详细分析,包括认证、授权、凭证、保密、传输安全和验证,结合案例实践,展示如</div>
                    </li>
                    <li><a href="/article/1881229916637294592.htm"
                           title="如何利用 Dexie.js 管理前端状态或持久化复杂数据" target="_blank">如何利用 Dexie.js 管理前端状态或持久化复杂数据</a>
                        <span class="text-muted">maply</span>
<a class="tag" taget="_blank" href="/search/Node.js/1.htm">Node.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a><a class="tag" taget="_blank" href="/search/Dexie.js/1.htm">Dexie.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/1.htm">前端状态管理</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%8A%B6%E6%80%81%E6%8C%81%E4%B9%85%E5%8C%96/1.htm">前端状态持久化</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>使用Dexie.js管理前端状态或持久化复杂数据Dexie.js是一个功能强大的IndexedDB封装库,不仅适用于简单的离线存储,还非常适合管理前端状态和持久化复杂数据。以下是如何利用Dexie.js管理前端状态或持久化复杂数据的详细介绍:1.Dexie.js管理前端状态的优势数据持久化:将应用状态存储在浏览器中,即使刷新页面或关闭浏览器,状态仍然存在。异步数据操作:支持异步读取和写入,提高性能</div>
                    </li>
                    <li><a href="/article/1881229409541746688.htm"
                           title="SpringBoot3使用Swagger3" target="_blank">SpringBoot3使用Swagger3</a>
                        <span class="text-muted">m0_74825260</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>SpringBoot3使用Swagger3项目中的后端接口进行简单的前端展示一、依赖引入二、快速启动1.在application.yml中配置2.或者properties文件,则配置3.启动项目访问swagger三、使用注解标注接口Swagger配置文件Swagger注解迁移举例五种常用@Api@ApiOperation@ApiImplicitParam@ApiModel@ApiModelProp</div>
                    </li>
                    <li><a href="/article/1881210719916060672.htm"
                           title="Microi 吾码与 JavaScript:前端低代码平台的强大组合" target="_blank">Microi 吾码与 JavaScript:前端低代码平台的强大组合</a>
                        <span class="text-muted">小周不想卷</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>目录一、引言二、Microi吾码概述三、JavaScript在Microi吾码前端开发中的应用(一)前端V8引擎与JavaScript(二)接口引擎与JavaScript四、JavaScript在Microi吾码后端开发中的协同(一)与C#后端框架的交互(二)利用gRPC实现跨语言通信五、Microi吾码中JavaScript与数据库的交互六、Microi吾码中JavaScript在表单与模板引擎</div>
                    </li>
                    <li><a href="/article/1881203242860343296.htm"
                           title="一款前端开源的,在线电子表格univer介绍" target="_blank">一款前端开源的,在线电子表格univer介绍</a>
                        <span class="text-muted"></span>

                        <div>Univer是一款颠覆性的在线电子表格解决方案,为数据输入和协作带来了全新的方式。作为一款开源、免费的平台,Univer专注于在线电子表格管理,为用户提供了处理数据、创建动态报告和高效协作的无缝体验。具体可以看他们的官网univer.ai.Excel作为广受欢迎的电子表格软件,Univer的兼容性和功能性使其成为Excel爱好者的理想选择。用户可以体验到与Excel相关的功能,并且能够轻松使用带公</div>
                    </li>
                    <li><a href="/article/1881201748866035712.htm"
                           title="Axios封装一款前端项目网络请求实用插件" target="_blank">Axios封装一款前端项目网络请求实用插件</a>
                        <span class="text-muted">smart_ljh</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/vuejs/1.htm">vuejs</a><a class="tag" taget="_blank" href="/search/axios/1.htm">axios</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
                        <div>前端项目开发非常经典的插件axios大家都很熟悉,它是一个Promise网络请求库,可以用于浏览器和node.js支持的项目中。像一直以来比较火的Vue.js开发的几乎所有项目网络请求用的都是axios。那么我们在实际的项目中,有时候为了便于维护、请求头信息统一处理、统一拦截器设置以及响应数据统一处理,需要在项目中针对axios封装一个网络请求插件。接下来就介绍一下针对以上这些输出具体的解决方案和</div>
                    </li>
                    <li><a href="/article/1881185723575496704.htm"
                           title="解锁新技能:Windows Forms与ASP.NET API的梦幻联动" target="_blank">解锁新技能:Windows Forms与ASP.NET API的梦幻联动</a>
                        <span class="text-muted">步、步、为营</span>
<a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
                        <div>一、开篇引入嘿,各位开发小伙伴们!在日常开发的“战场”上,我们常常会遭遇一个棘手的难题:如何让前端应用与后端服务实现高效且稳定的交互呢?特别是在使用WindowsForms构建桌面应用程序时,这个问题尤为突出。想象一下,你精心打造了一个功能强大的WindowsForms应用,满心期待它能与后端的ASP.NETAPI顺畅“对话”,实现数据的实时获取与更新,为用户带来绝佳的体验。但现实却可能给你泼一盆</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>