目录
一： 初识HTML
二：常见网页标签
2.1.标题标签 h1-h6
2.2.段落和换行标签
2.3.文本格式化标签
2.4.div和span标签
2.5.图像标签和路径
2.6.超链接标签
2.7.注释和特殊字符
三：表格标签
3.1.表格的基本语法
3.2.表格属性
3.3.表格结构标签
3.4.合并单元格
四：列表标签
4.1.无序列表
4.2.有序列表
4.3.自定义列表
五：表单标签
5.1.表单的组成
5.2.表单域
5.3.表单控件(表单元素)
5.3.1.input 表单元素
5.3.2.label 标签
5.3.3.select 表单元素
5.3.4.textarea 表单元素
六：HTML5 的新特性
6.1.HTML5 新增的语义化标签
6.2.HTML5 新增的 input 类型
6.3.HTML5 新增的表单属性
一： 初识HTML
HTML 全称为 HyperText Markup Language，译为超文本标记语言。
在 VS Code 中，新建 html 文件，输入html:5后，按Tab键或回车后，可以快速生成HTML5的骨架：
Document
1.其中，第一行的声明是HTML5标准
2.lang指定页面的语言类型，一般常见的有两种：
en：定义页面语言为英语 zh-CN：定义页面语言为中文
3.head头标签表示的是页面的配置，其内部的常见标签主要有
、<meta>、<link>等</p>
<ul>
<li><title>：指定整个网页的标题，在浏览器最上方显示。</li>
<li><meta>：提供有关页面的基本信息</li>
<li><link>：定义文档与外部资源的关系。</li>
</ul>
<p></p>
<h1 id="%E4%BA%8C%EF%BC%9A%E5%B8%B8%E8%A7%81%E7%BD%91%E9%A1%B5%E6%A0%87%E7%AD%BE">二：常见网页标签</h1>
<h2 id="2.1.%E6%A0%87%E9%A2%98%E6%A0%87%E7%AD%BE%20%3Ch1%3E%20-%20%3Ch6%3E">2.1.<span style="color:#404040;"><strong>标题标签 h1-h6</strong></span></h2>
<p><span style="color:#333333;">作用：使网页更具有语义化，</span><span style="color:#262626;">并且依据重要性h1-h6递减。 </span></p>
<p><span style="color:#262626;"><strong>特点：</strong></span></p>
<p><span style="color:#262626;">1. 加了标题的文字会变的加粗，字号也会依次变大。</span></p>
<p><span style="color:#262626;">2. 一个标题独占一行。 </span></p>
<div></div>
<h2 id="2.2.%E6%AE%B5%E8%90%BD%E5%92%8C%E6%8D%A2%E8%A1%8C%E6%A0%87%E7%AD%BE">2.2.<span style="color:#404040;"><strong>段落和换行标签</strong></span></h2>
<div> <span style="color:#0d0016;"><strong><p></strong>标签用于定义段落，它可以将整个网页分为若干个段落。</span>
</div>
<div></div>
<div>
<div> <span style="color:#262626;"><strong>特点： </strong></span>
</div>
<div></div>
<div> <span style="color:#262626;">1. 文本在一个段落中会根据浏览器窗口的大小自动换行。 </span>
</div>
<div></div>
<div> <span style="color:#262626;">2. 段落和段落之间保有空隙。 </span>
</div>
<div></div>
</div>
<p><span style="color:#404040;"><strong><br></strong>标签可以使</span><span style="color:#333333;">某段文本强制换行显示</span></p>
<p></p>
<h2 id="2.3.%E6%96%87%E6%9C%AC%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A0%87%E7%AD%BE">2.3.<span style="color:#404040;"><strong>文本格式化标签 </strong></span></h2>
<p><a href="http://img.e-com-net.com/image/info8/d7c5f8fdba7f4995a0e6ea7d4fe920c1.jpg" target="_blank"><img alt="前端HTML5常用基础知识总结_第1张图片" height="173" src="http://img.e-com-net.com/image/info8/d7c5f8fdba7f4995a0e6ea7d4fe920c1.jpg" width="650" style="border:1px solid black;"></a></p>
<h2 id="2.4.%3Cdiv%3E%20%E5%92%8C%3Cspan%3E%E6%A0%87%E7%AD%BE">2.4.<span style="color:#404040;"><strong>div和span标签</strong></span></h2>
<p><span style="color:#262626;"><div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。 </span></p>
<div> <span style="color:#262626;"><strong>特点： </strong></span>
</div>
<div></div>
<div> <span style="color:#262626;">1. <strong><div> </strong>标签用来布局，但一行只能放一个<div>。 </span>
</div>
<div></div>
<div> <span style="color:#262626;">2. <strong><span></strong> 标签用来布局，一行上可以多个 <span>。</span>
</div>
<p></p>
<h2 id="2.5.%E5%9B%BE%E5%83%8F%E6%A0%87%E7%AD%BE%E5%92%8C%E8%B7%AF%E5%BE%84">2.5.<span style="color:#404040;"><strong>图像标签和路径</strong></span></h2>
<p> <span style="color:#262626;"><strong><img></strong> 标签用于定义 HTML 页面中的图像</span></p>
<p><span style="color:#000000;">语法格式为：<strong><img src="</strong></span><strong><span style="color:#000000;">图像url" /></span></strong><span style="color:#0d0016;"> <strong>src</strong> 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。</span></p>
<p><span style="color:#262626;">图像标签的其他属性：</span><a href="http://img.e-com-net.com/image/info8/85a060085242476faf138f0edd7ec80b.jpg" target="_blank"><img alt="前端HTML5常用基础知识总结_第2张图片" height="224" src="http://img.e-com-net.com/image/info8/85a060085242476faf138f0edd7ec80b.jpg" width="650" style="border:1px solid black;"></a></p>
<p>其中路径分为<strong>绝对路径</strong>与<strong>相对路径</strong>两种</p>
<div> <span style="color:#0d0016;"><strong>绝对路径：</strong></span> <span style="color:#262626;">是指目录下的绝对位置，直接到达目标所在位置</span>
</div>
<div> <span style="color:#262626;">例如：D:\web\images\a.jpg 或<strong>完整的网络地址</strong></span> https://i0.hdslb.com/bfs/banner/6841e6cc42cd5dacc4f333f79b95cbdf5cc2d58b.png@976w_550h_1c.webp
</div>
<p><span style="color:#0d0016;"><strong>相对路径：</strong>则以引用文件所在位置为参考基础，而建立出的目</span><span style="color:#262626;">录路径 其中上一级路径 <strong> ../</strong></span></p>
<p><span style="color:#262626;"><strong>注意：</strong>图像的</span>宽度和高度一般只设定一个，另一个等比例缩放 单位默认是像素 </p>
<p></p>
<h2 id="2.6.%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE"><span style="color:#262626;"><strong>2.6.</strong></span><span style="color:#404040;"><strong>超链接标签</strong></span></h2>
<p><span style="color:#262626;"><strong><a> </strong>标签用于定义超链接，作用是从一个页面链接到另一个页面。 </span></p>
<div> <span style="color:#000000;">格式为：<strong><a href="</strong></span> <strong><span style="color:#000000;">跳转目标</span><span style="color:#000000;">" target="</span><span style="color:#000000;">目标窗口的弹出方式</span><span style="color:#000000;">"> </span><span style="color:#000000;">文本或图像 </span><span style="color:#000000;"></a></span></strong>
</div>
<div></div>
<div> <span style="color:#000000;">其中<strong>target</strong>用于指定链接页面的打开方式，其中<strong>_self</strong>为默认值，<strong>_blank</strong>为在新窗口中打开</span>
</div>
<div></div>
<div>
下面是常见的 <strong>链接分类：</strong>
</div>
<div></div>
<div>
<div> <span style="color:#262626;"><strong>1.</strong> <strong>外部链接:</strong> 例如 < a href="http:// www.baidu.com "> 百度</a >。 </span>
</div>
<div></div>
<div> <span style="color:#262626;"><strong>2.</strong> <strong>内部链接:</strong>网站内部页面之间的相互链接，例如 < a href="index.html"> 首页 </a >。 </span>
</div>
<div></div>
<div> <span style="color:#262626;"><strong>3. 空链接: </strong>用于没有确定链接目标时，< a href="#"> 首页 </a > 。 </span>
</div>
<div></div>
<div> <span style="color:#262626;"><strong>4. 下载链接:</strong> 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。 </span>
</div>
<div></div>
<div> <span style="color:#262626;"><strong>5. 网页元素链接: </strong>用在网页中的各种网页元素上，如文本、图像、表格、音频、视频等</span>
</div>
<div></div>
<div> <span style="color:#262626;"><strong>6. 锚点链接:</strong> 当点击链接时,可以快速定位到页面中的某个位置。具体步骤如下：</span>
</div>
<div></div>
<div> <span style="color:#262626;"> 1.在链接文本的 href 属性中，设置属性值为 </span> <span style="color:#0d0016;"><strong>#名字</strong></span> <span style="color:#ff0000;"> </span> <span style="color:#262626;">的形式，如<a href="#</span>anchor <span style="color:#262626;">"> 链接 </a> </span>
</div>
<div></div>
<div> <span style="color:#262626;"> 2.找到目标位置标签，里面添加<strong> id 属性 = 刚才的名字</strong> ，如：<h3 id="</span>anchor <span style="color:#262626;">">介绍</h3> </span>
</div>
<div></div>
<div></div>
<h2 id="2.7.%E6%B3%A8%E9%87%8A%E5%92%8C%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6"><span style="color:#262626;">2.7.</span><span style="color:#595959;"><strong>注释和特殊字符</strong></span></h2>
<p><span style="color:#0d0016;">HTML中的注释格式为 <strong><!-- 注释语句 --></strong> 快捷键: ctrl + / </span></p>
<p><span style="color:#262626;">在 HTML 页面中，一些特殊的符号不方便直接使用，此时我们就可以使用下面的字符来替代。 </span></p>
<p><a href="http://img.e-com-net.com/image/info8/b3c25af591d04ba2b6a0ebb263ac463b.jpg" target="_blank"><img alt="前端HTML5常用基础知识总结_第3张图片" height="284" src="http://img.e-com-net.com/image/info8/b3c25af591d04ba2b6a0ebb263ac463b.jpg" width="650" style="border:1px solid black;"></a></p>
<p></p>
<h1 id="%E4%B8%89%EF%BC%9A%E8%A1%A8%E6%A0%BC%E6%A0%87%E7%AD%BE">三：表格标签</h1>
<div> <span style="color:#262626;">表格（<strong>table</strong>）主要</span> <span style="color:#0d0016;">用于显示、展示数据，可读性比较好</span>
</div>
<div></div>
<h2 id="3.1.%E8%A1%A8%E6%A0%BC%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95"><span style="color:#0d0016;">3.1.</span><span style="color:#595959;"><strong>表格的基本语法</strong></span></h2>
<p></p>
<div>
<pre><code class="language-html"><table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table></code></pre>
<p></p>
</div>
<div>
<div> <span style="color:#262626;">其中<strong><tr> </tr></strong> 标签用于定义表格中的<strong>行. <td> </td></strong>指表格数据（table data），即数据单元格的内容，用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。 </span>
</div>
<div></div>
<div>
<div>
<pre><code class="language-html"><table>
<tr>
<th>姓名</th>
...
</tr>
...
</table></code></pre>
</div>
<div></div>
<div> <span style="color:#000000;"><strong><th></th>表头单元格标签</strong></span> <span style="color:#262626;">位于表格的第一行或第一列,突出重要性,里面的文本内容加粗居中显示.</span>
</div>
<div></div>
<h2 id="3.2.%E8%A1%A8%E6%A0%BC%E5%B1%9E%E6%80%A7"><span style="color:#262626;">3.2.表格属性</span></h2>
<p><span style="color:#000000;">表格标签这部分属性实际开发不常用，后面主要通过 CSS 来设置</span></p>
<p><a href="http://img.e-com-net.com/image/info8/13fd5b80df564d5f81afdb04343208b9.jpg" target="_blank"><img alt="前端HTML5常用基础知识总结_第4张图片" height="193" src="http://img.e-com-net.com/image/info8/13fd5b80df564d5f81afdb04343208b9.jpg" width="650" style="border:1px solid black;"></a></p>
<h2 id="3.3.%E8%A1%A8%E6%A0%BC%E7%BB%93%E6%9E%84%E6%A0%87%E7%AD%BE%C2%A0">3.3.表格结构标签 </h2>
<div> <span style="color:#262626;">为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分。</span>
</div>
<div></div>
<div> <strong><span style="color:#262626;"><thead></thead> </span></strong> <span style="color:#0d0016;">标签 表格的<strong>头部</strong>区域，<thead> 内部必须拥有 <tr> 标签，一般是位于第一行。</span>
</div>
<div> <strong><span style="color:#262626;"><tbody></tbody> </span></strong> <span style="color:#0d0016;">标签 表格的<strong>主体</strong>区域，主要用于放数据本体 。 </span>
</div>
<div></div>
<h2 id="3.4.%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC"><span style="color:#0d0016;">3.4.合并单元格</span></h2>
<p></p>
<div> <strong><span style="color:#262626;">跨行合并：</span><span style="color:#fe2c24;">rowspan</span><span style="color:#262626;">="合并单元格的个数" 向下合并</span></strong>
</div>
<div></div>
<div> <strong><span style="color:#262626;">跨列合并：</span><span style="color:#fe2c24;">colspan</span><span style="color:#262626;">="合并单元格的个数" 向右合并</span></strong>
</div>
<div></div>
<div></div>
<div></div>
<h1 id="%E5%9B%9B%EF%BC%9A%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE"><strong><span style="color:#262626;">四：列表标签</span></strong></h1>
<p><span style="color:#262626;">表格是用来显示数据的，那么</span><span style="color:#0d0016;"><strong>列表就是用来布局的</strong></span></p>
<p><span style="color:#262626;">根据使用情景不同，列表可以分为三大类：</span><span style="color:#0d0016;"><strong>无序列表（ul）、有序列表（ol）</strong>和<strong>自定义列表(dl)</strong></span></p>
<h2 id="4.1.%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8"><span style="color:#0d0016;"><strong>4.1.无序列表</strong></span></h2>
<p></p>
<div> <strong><span style="color:#0d0016;"><ul> </span></strong> <span style="color:#262626;">标签表示 HTML 页面中项目的无序列表，而列表项使用</span> <strong><span style="color:#0d0016;"> <li></span></strong> <span style="color:#ff0000;"> </span> <span style="color:#262626;">标签定义。 </span>
</div>
<div></div>
<div> <span style="color:#262626;">无序列表的基本语法格式如下： </span>
</div>
<div>
<pre><code class="language-html"><ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
</code></pre>
<p></p>
</div>
<div>
其中，
</div>
<div>
<div> <span style="color:#262626;">1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。 </span>
</div>
<div> <span style="color:#262626;">2. <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。 </span>
</div>
<div> <span style="color:#262626;">3. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。 </span>
</div>
<div></div>
<div> <strong><span style="color:#262626;">注意：在css中我们常用 </span><span style="color:#fe2c24;">list-style: none</span> 来去掉li前面的小圆点</strong>
</div>
<div></div>
<h2 id="4.2.%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8"><strong>4.2.有序列表</strong></h2>
<p></p>
<div> <span style="color:#0d0016;"><strong><ol> </strong></span> <span style="color:#262626;">标签用于定义有序列表，列表排序以<strong>数字</strong>来显示，并且使用</span> <strong><span style="color:#0d0016;"> <li></span></strong> <span style="color:#ff0000;"> </span> <span style="color:#262626;">标签来定义列表项</span>
</div>
<div></div>
<div> <span style="color:#262626;">有序列表的基本语法格式如下：</span>
</div>
<div></div>
<div>
<div>
<pre><code class="language-html"><ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol></code></pre>
<p></p>
</div>
<div>
<div> <span style="color:#262626;">1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的是不被允许的。 </span>
</div>
<div> <span style="color:#262626;">2. <li> 与 </li>之间相当于一个容器，可以容纳所有元素。</span>
</div>
<div></div>
<h2 id="4.3.%E8%87%AA%E5%AE%9A%E4%B9%89%E5%88%97%E8%A1%A8"><span style="color:#262626;">4.3.自定义列表</span></h2>
<p><span style="color:#262626;">自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。</span></p>
<div> <span style="color:#0d0016;"><strong><dl> </strong></span> <span style="color:#262626;">标签用于定义描述列表，该标签会与</span> <strong><span style="color:#0d0016;"> <dt></span></strong> <span style="color:#262626;">（定义项目/名字）和 </span> <strong><span style="color:#0d0016;"><dd></span></strong> <span style="color:#262626;">（描述每一个项目/名字）一起使用。 </span>
</div>
<div></div>
<div> <span style="color:#262626;">其基本语法如下：</span>
</div>
<div></div>
<div>
<div>
<pre><code class="language-html"><dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl></code></pre>
<p></p>
</div>
<div>
<div> <span style="color:#262626;">1. <dl></dl> 里面只能包含 <dt> 和 <dd>。 </span>
</div>
<div> <span style="color:#262626;">2. <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。 </span>
</div>
<div></div>
<div></div>
<h1 id="%E4%BA%94%EF%BC%9A%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE"><span style="color:#262626;">五：表单标签</span></h1>
<h2 id="5.1.%E8%A1%A8%E5%8D%95%E7%9A%84%E7%BB%84%E6%88%90"><span style="color:#262626;">5.1.表单的组成</span></h2>
<p><span style="color:#262626;">使用表单目的是为了</span><strong><span style="color:#0d0016;">收集用户信息</span></strong></p>
<p><span style="color:#262626;">一个完整的表单通常由</span><span style="color:#0d0016;"><strong>表单域、表单控件（也称为表单元素）</strong>和<strong> 提示信息</strong></span><span style="color:#262626;">3个部分构成</span></p>
<h2 id="5.2.%E8%A1%A8%E5%8D%95%E5%9F%9F"><span style="color:#262626;">5.2.表单域</span></h2>
<p><span style="color:#0d0016;"><strong>表单域<form></strong>是一个包含表单元素的区域,<form> 会把它范围内的表单元素信息提交给服务器.</span></p>
<div> <strong><span style="color:#000000;"><form action=“url</span><span style="color:#000000;">地址</span><span style="color:#000000;">” method=“</span><span style="color:#000000;">提交方式</span><span style="color:#000000;">” name=“</span><span style="color:#000000;">表单域名称</span><span style="color:#000000;">"> </span></strong>
</div>
<div></div>
<div> <strong><span style="color:#000000;"> 各种表单元素控件 </span></strong>
</div>
<div></div>
<div> <strong><span style="color:#000000;"></form> </span></strong>
</div>
<div></div>
<div> <a href="http://img.e-com-net.com/image/info8/5963f0a85f3b4297a913930bfb6bc4ab.jpg" target="_blank"><img alt="前端HTML5常用基础知识总结_第5张图片" height="133" src="http://img.e-com-net.com/image/info8/5963f0a85f3b4297a913930bfb6bc4ab.jpg" width="650" style="border:1px solid black;"></a>
</div>
<div></div>
<h2 id="5.3.%E8%A1%A8%E5%8D%95%E6%8E%A7%E4%BB%B6(%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0)">5.3.<span style="color:#595959;"><strong>表单控件(表单元素)</strong></span></h2>
<p><span style="color:#262626;">在表单域中可以定义各种表单元素，它们允许用户<strong>在表单中输入或者选择的内容控件</strong></span></p>
<p></p>
<h3 id="5.3.1.%3Cinput%3E%20%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0"><span style="color:#262626;"><strong>5.3.1.</strong></span><span style="color:#595959;"><strong>input 表单元素</strong></span></h3>
<p><span style="color:#262626;"><strong><input> </strong>标签包含一个</span><span style="color:#0d0016;"> type</span><span style="color:#ff0000;"> </span><span style="color:#262626;">属性，根据不同的</span><span style="color:#0d0016;"> type</span><span style="color:#ff0000;"> </span><span style="color:#262626;">属性值，输入字段拥有很多种形式</span></p>
<p><strong><span style="color:#000000;"><input type="</span><span style="color:#000000;">属性值" /> </span><span style="color:#0d0016;"> </span></strong></p>
<p><span style="color:#0d0016;"><input> 标签用于收集用户信息 ，<strong>type</strong></span><span style="color:#ff0000;"> </span><span style="color:#262626;">属性的属性值及其描述如下：</span></p>
<p><a href="http://img.e-com-net.com/image/info8/c7f1ab986d4e47cb9d8020b9226fa6d9.jpg" target="_blank"><img alt="前端HTML5常用基础知识总结_第6张图片" height="341" src="http://img.e-com-net.com/image/info8/c7f1ab986d4e47cb9d8020b9226fa6d9.jpg" width="650" style="border:1px solid black;"></a></p>
<div> <span style="color:#262626;">除 type 属性外，<input>标签还有其他很多属性，其常用属性如下： </span>
</div>
<div> <a href="http://img.e-com-net.com/image/info8/0e3be40c50c34b6383be198c95ec64a7.jpg" target="_blank"><img alt="前端HTML5常用基础知识总结_第7张图片" height="166" src="http://img.e-com-net.com/image/info8/0e3be40c50c34b6383be198c95ec64a7.jpg" width="650" style="border:1px solid black;"></a>
</div>
<p> 其中，<strong><span style="color:#0d0016;">单选按钮</span></strong><span style="color:#0d0016;">和</span><strong><span style="color:#0d0016;">复选框要有相同的name值</span></strong></p>
<p></p>
<h3 id="5.3.2.%3Clabel%3E%20%E6%A0%87%E7%AD%BE"><strong><span style="color:#0d0016;">5.3.2.</span></strong><span style="color:#595959;"><strong>label 标签</strong></span></h3>
<p> <span style="color:#0d0016;"><strong><label></strong></span><span style="color:#ff0000;"> </span><span style="color:#262626;">标签为 input 元素定义标注，</span><span style="color:#0d0016;">主要</span><span style="color:#262626;">用于绑定一个表单元素, 当点击<label> 标签内的<strong>文本</strong>时，浏览器就会自动将焦点(光标)转到或者选择对应的<strong>表单元素</strong>上,用来增加用户体验.</span></p>
<div>
<pre><code class="language-html"><label for="male">男</label>
<input type="radio" name="sex" id="male" /></code></pre>
</div>
<div></div>
<div> <span style="color:#0d0016;"><strong>注意：</strong></span> <strong><span style="color:#262626;"><label> 标签的 </span><span style="color:#ff0000;">for 属性</span><span style="color:#262626;">应当与相关元素的 </span><span style="color:#ff0000;">id 属性相同</span></strong>
</div>
<div></div>
<div></div>
<h3 id="5.3.3.%3Cselect%3E%20%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0"><span style="color:#0d0016;"><strong>5.3.3.select 表单元素</strong></span></h3>
<div> <span style="color:#0d0016;"><strong><select></strong>标签控件定义下拉列表</span>
</div>
<div></div>
<div>
<div>
<pre><code class="language-html"><select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select></code></pre>
</div>
<div></div>
<div>
<div> <span style="color:#262626;">1. <select> 中至少包含一对<option> 。 </span>
</div>
<div> <span style="color:#262626;">2. 在<option> 中定义 <strong>selected =“ selected "</strong> 时，当前项即为默认选中项</span>
</div>
<div></div>
<div></div>
<h3 id="5.3.4.%3Ctextarea%3E%20%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0"><span style="color:#262626;">5.3.4.</span><span style="color:#595959;"><strong>textarea 表单元素</strong></span></h3>
</div>
</div>
<p><span style="color:#0d0016;"><strong><textarea> </strong></span><span style="color:#262626;">标签是用于定义多行文本输入的控件，常见于留言板,评论。</span></p>
<p><span style="color:#262626;">语法结构：</span></p>
<div>
<pre><code class="language-html"><textarea rows="3" cols="20">
文本内容
</textarea></code></pre>
<p></p>
</div>
<div> <span style="color:#0d0016;">rows=“显示的行数”，cols=“每行中的字符数” ，<strong>在实际开发中都是用 CSS 来改变大小</strong></span>
</div>
<p></p>
<p></p>
<h1 id="%E5%85%AD%EF%BC%9AHTML5%20%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7">六：<span style="color:#595959;"><strong>HTML5 的新特性</strong></span></h1>
<h2 id="6.1.HTML5%20%E6%96%B0%E5%A2%9E%E7%9A%84%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE"><span style="color:#595959;"><strong>6.1.HTML5 新增的语义化标签</strong></span></h2>
<p><span style="color:#262626;">以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的</span></p>
<div> <span style="color:#262626;">这种语义化标准主要是针对</span> <span style="color:#0d0016;"><strong>搜索引擎</strong></span> <span style="color:#262626;">的 并且这些新标签页面中可以使用</span> <strong><span style="color:#0d0016;">多次</span></strong>
</div>
<div></div>
<div> <a href="http://img.e-com-net.com/image/info8/edd613a6be2d4184ad48fef27f8614a6.jpg" target="_blank"><img alt="前端HTML5常用基础知识总结_第8张图片" height="421" src="http://img.e-com-net.com/image/info8/edd613a6be2d4184ad48fef27f8614a6.jpg" width="629" style="border:1px solid black;"></a>
</div>
<p></p>
<div></div>
<ul>
<li><span style="color:#262626;"><header>：头部标签 </span></li>
<li><span style="color:#262626;"><nav>：导航标签 </span></li>
<li><span style="color:#262626;"><article>：内容标签 </span></li>
<li><span style="color:#262626;"><section>：定义文档某个区域 </span></li>
<li><span style="color:#262626;"><aside>：侧边栏标签 </span></li>
<li><span style="color:#262626;"><footer>：尾部标签 </span></li>
</ul>
<p></p>
<h2 id="6.2.HTML5%20%E6%96%B0%E5%A2%9E%E7%9A%84%20input%20%E7%B1%BB%E5%9E%8B"><span style="color:#262626;">6.2.</span><span style="color:#595959;"><strong>HTML5 新增的 input 类型 </strong></span></h2>
<p><a href="http://img.e-com-net.com/image/info8/b38d0900a2ca4602bf912740fe7516b4.jpg" target="_blank"><img alt="前端HTML5常用基础知识总结_第9张图片" height="423" src="http://img.e-com-net.com/image/info8/b38d0900a2ca4602bf912740fe7516b4.jpg" width="650" style="border:1px solid black;"></a></p>
<p></p>
<h2 id="6.3.HTML5%20%E6%96%B0%E5%A2%9E%E7%9A%84%E8%A1%A8%E5%8D%95%E5%B1%9E%E6%80%A7">6.3.<span style="color:#595959;"><strong>HTML5 新增的表单属性</strong></span></h2>
<p><a href="http://img.e-com-net.com/image/info8/45eddac2a75943d58383d4387250f4f2.jpg" target="_blank"><img alt="前端HTML5常用基础知识总结_第10张图片" height="249" src="http://img.e-com-net.com/image/info8/45eddac2a75943d58383d4387250f4f2.jpg" width="650" style="border:1px solid black;"></a></p>
<p></p>
<div> <span style="color:#0d0016;">可以通过以下设置方式修改<strong>placeholder</strong>里面的字体颜色： </span>
</div>
<div>
<pre><code class="language-css">input::placeholder
{
color: pink;
}</code></pre>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1595009814918963200"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>
<!-- 文章页-底部 动态广告位 -->
<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">
<!-- 文章页-右侧1 动态广告位 -->
<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>
<!-- 文章页-右侧2 动态广告位 -->
<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>
<!-- 文章页-右侧3 动态广告位 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端开发,前端,html5)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1940356610761224192.htm"
title="前端领域 Vite 与 Webpack 的深度对比" target="_blank">前端领域 Vite 与 Webpack 的深度对比</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/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>前端领域Vite与Webpack的深度对比关键词：Vite、Webpack、前端构建工具、模块打包、开发体验、性能优化、ESModules摘要：本文深入对比前端领域两大构建工具Vite和Webpack的核心原理、架构设计和使用场景。通过分析它们的底层机制、开发体验、构建流程和性能表现，帮助开发者理解如何在不同项目需求下做出合理选择。文章包含详细的技术原理图解、实际项目对比示例和未来发展趋势分析。背</div>
</li>
<li><a href="/article/1940340471142346752.htm"
title="纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查)" target="_blank">纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查)</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/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a>
<div>纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查)简介本项目为一个纯前端实现的本地文件管理器网页（index.html），可在Chrome/Edge浏览器中直接打开，具备类似VSCode的本地文件夹操作体验。无需后端，所有功能均在浏览器端实现。主要功能选择本地文件夹用户点击左上角文件夹按钮，授权后可浏览和操作本地文件夹内容。文件树展示以树形结构展示所选文件夹下的所有文件和子文件夹</div>
</li>
<li><a href="/article/1940329998741204992.htm"
title="WHAT - TTF 和 OTF 字体格式" target="_blank">WHAT - TTF 和 OTF 字体格式</a>
<span class="text-muted">@PHARAOH</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E4%BD%93/1.htm">字体</a>
<div>文章目录基础定义核心区别轮廓技术（绘制字体的“骨架”）功能扩展兼容性文件大小如何选择？一个小贴士更多关于前端开发中字体介绍请阅读：WHAT-前端开发中的字体基础定义格式全称简介TTFTrueTypeFont由苹果和微软在1980年代联合开发的字体格式。OTFOpenTypeFontAdobe和微软开发的更现代的字体格式，基于TTF或PostScript。核心区别轮廓技术（绘制字体的“骨架”）TTF</div>
</li>
<li><a href="/article/1940329364134621184.htm"
title="Vue3 - 详解播放m3u8视频流+HLS拉流推流完整方案，vue3如何播放m3u8格式文件实时视频播放教程（流媒体播放、直播视频流、实时摄像头监控视频流对接、后端服务器切片分片传输视频流边下边播）" target="_blank">Vue3 - 详解播放m3u8视频流+HLS拉流推流完整方案，vue3如何播放m3u8格式文件实时视频播放教程（流媒体播放、直播视频流、实时摄像头监控视频流对接、后端服务器切片分片传输视频流边下边播）</a>
<span class="text-muted">王二红</span>
<a class="tag" taget="_blank" href="/search/%2B/1.htm">+</a><a class="tag" taget="_blank" href="/search/Vue3/1.htm">Vue3</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E9%97%AE%E9%A2%98%E6%B1%87%E6%80%BB/1.htm">开发问题汇总</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/m3u8/1.htm">m3u8</a><a class="tag" taget="_blank" href="/search/hls/1.htm">hls</a><a class="tag" taget="_blank" href="/search/vue3%E6%92%AD%E6%94%BEm3u8%E8%A7%86%E9%A2%91%E6%B5%81%E6%95%99%E7%A8%8B/1.htm">vue3播放m3u8视频流教程</a><a class="tag" taget="_blank" href="/search/vue%E6%92%AD%E6%94%BEm3u8%E6%96%87%E4%BB%B6/1.htm">vue播放m3u8文件</a><a class="tag" taget="_blank" href="/search/vue3%E7%9B%B4%E6%92%AD%E8%A7%86%E9%A2%91%E6%B5%81%E6%92%AD%E6%94%BE/1.htm">vue3直播视频流播放</a><a class="tag" taget="_blank" href="/search/%E6%91%84%E5%83%8F%E5%A4%B4%E5%AE%9E%E6%97%B6%E7%9B%91%E6%8E%A7%E7%94%BB%E9%9D%A2%E8%A7%86%E9%A2%91%E6%B5%81/1.htm">摄像头实时监控画面视频流</a>
<div>前言如果您需要Vue2版本，请访问这篇文章。在vue3（PC端+移动端H5）项目开发中，实现m3u8+hls视频流播放、实时流媒体播放高性能无延迟方案及源码，vue3播放3mu8文件/直播视频流，实时流媒体播放需求、做直播实时传输播放、摄像头监控画面视频流、服务器后端视频切片分段返给前端+边下边播等需求，解决前端网页播放视频流卡顿加载慢、无法载入黑屏、播放不流畅、CORS跨域、安卓苹果浏览器兼容等</div>
</li>
<li><a href="/article/1940302644992077824.htm"
title="JavaScript-异步编程" target="_blank">JavaScript-异步编程</a>
<span class="text-muted">斜杠青年C</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、日常前端开发使用的异步编程方法回调函数事件监听PromiseGeneratorasync/await二、同步编程和异步编程的区别1、什么是同步同步是执行某段代码时，在该代码没有得到返回结果前，其他代码是无法执行的，但是一旦拿到返回值，就可以执行其他的代码2、什么是异步异步就是当某段代码执行异步过程调用发出后，这段代码不会立刻得到返回结果，而是在异步调用发出之后，一般通过回调函数处理这个调用之后</div>
</li>
<li><a href="/article/1940297853901533184.htm"
title="前端计算机视觉：使用 OpenCV.js 在浏览器中实现图像处理" target="_blank">前端计算机视觉：使用 OpenCV.js 在浏览器中实现图像处理</a>
<span class="text-muted">亿只小灿灿</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/OpenCV/1.htm">OpenCV</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89/1.htm">计算机视觉</a><a class="tag" taget="_blank" href="/search/opencv/1.htm">opencv</a>
<div>一、OpenCV.js简介与环境搭建OpenCV（OpenSourceComputerVisionLibrary）是一个强大的计算机视觉库，广泛应用于图像和视频处理领域。传统上，OpenCV主要在后端使用Python或C++等语言。但随着WebAssembly(Wasm)技术的发展，OpenCV也有了JavaScript版本——OpenCV.js，它可以直接在浏览器中高效运行，为前端开发者提供了前</div>
</li>
<li><a href="/article/1940293063326887936.htm"
title="数据库设计体系化知识（后端+前端+AI+三高场景+大厂面试+简历包装）" target="_blank">数据库设计体系化知识（后端+前端+AI+三高场景+大厂面试+简历包装）</a>
<span class="text-muted">@一叶之秋</span>
<a class="tag" taget="_blank" href="/search/Java%E6%9E%B6%E6%9E%84%E5%B8%88%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">Java架构师学习路线</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><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/java/1.htm">java</a>
<div>数据库设计体系化知识（AI融合版：后端+前端+AI+三高场景+大厂面试+简历包装）一、数据库设计基础：范式理论+AI辅助建模1.核心知识（AI赋能表结构设计）（1）三大范式+AI校验规则落地：用AI代码生成工具（如Copilot）自动校验表结构是否符合范式。→示例：输入“设计学生-班级表”，AI生成符合3NF的表结构，并标注冗余字段风险。后端协同：Java后端通过SchemaValidator工具</div>
</li>
<li><a href="/article/1940289279825604608.htm"
title="推荐使用：webpack的高效EJS模板加载器 —— ejs-compiled-loader" target="_blank">推荐使用：webpack的高效EJS模板加载器 —— ejs-compiled-loader</a>
<span class="text-muted">雷柏烁</span>
<div>推荐使用：webpack的高效EJS模板加载器——ejs-compiled-loaderejs-compiled-loaderEJSloaderforwebpack(withoutfrontenddependencies)项目地址:https://gitcode.com/gh_mirrors/ej/ejs-compiled-loader在前端开发的浩瀚星空中，高效的模板引擎和构建工具是构建高性能应</div>
</li>
<li><a href="/article/1940287390807552000.htm"
title="前端面试题整理-场景设计题" target="_blank">前端面试题整理-场景设计题</a>
<span class="text-muted">C_greenbird</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/1.htm">前端学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>1.如何使用css画一个三角形借助border实现，在width和height都为0时，设置border，便会呈现三角形。想要哪个方向的三角形，设置其他三边为透明即可。同时，可以通过调整不同边的宽度，来调整三角形的高度和宽度。三角符号/*记忆口诀：盒子宽高均为零，三面边框皆透明。*/div:after{position:absolute;width:0;height:0;content:"";bo</div>
</li>
<li><a href="/article/1940284111117676544.htm"
title="微信小程序｜流浪动物救助小程序的设计与实现" target="_blank">微信小程序｜流浪动物救助小程序的设计与实现</a>
<span class="text-muted">qq_469603589</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a>
<div>作者主页：编程指南针作者简介：Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容：Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助收藏点赞不迷路关注作者有好处文末获取源码项目编号：L-BS-XZBS-30一，环境介绍语言环境：Java:jdk1</div>
</li>
<li><a href="/article/1940270870127767552.htm"
title="前端 React.js 项目的性能优化的成功案例分析" target="_blank">前端 React.js 项目的性能优化的成功案例分析</a>
<span class="text-muted">前端视界</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/1.htm">前端艺匠馆</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>前端React.js项目的性能优化的成功案例分析关键词：React.js性能优化、代码拆分与懒加载、虚拟列表与长列表优化、Webpack深度调优、Fiber架构实践、SSR与SSG落地、React.memo与useCallback最佳实践摘要：本文通过三个真实企业级React项目的性能优化案例，系统解析从性能瓶颈诊断到优化策略落地的完整流程。结合React核心原理（如Fiber架构、虚拟DOMdi</div>
</li>
<li><a href="/article/1940264316984946688.htm"
title="【手写前端面试题01】防抖和节流" target="_blank">【手写前端面试题01】防抖和节流</a>
<span class="text-muted">全栈前端老曹</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E9%98%B2%E6%8A%96/1.htm">防抖</a><a class="tag" taget="_blank" href="/search/%E8%8A%82%E6%B5%81/1.htm">节流</a>
<div>《手写防抖和节流：从“打工人”到“时间管理大师”》一、本质理解（别被术语吓到）防抖（debounce）是什么？玩游戏看60秒广告只需要完整看一次就行了，退出去一次重新60秒，别一直退✅核心思想：在事件被触发后，等待一段时间，如果这段时间内没有再次触发，才执行。节流（throttle）又是什么？闪现CD：不管多急，都要等冷却好才能再次使用✅核心思想：多次触发→只按固定频率执行，在一定时间内只允许执行</div>
</li>
<li><a href="/article/1940263560538025984.htm"
title="python爬虫爬百度云盘的资源" target="_blank">python爬虫爬百度云盘的资源</a>
<span class="text-muted">oaa608868</span>
<a class="tag" taget="_blank" href="/search/%E7%99%BE%E5%BA%A6%E4%BA%91/1.htm">百度云</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>最近百度云盘不知道为啥不提供资源检索，正好最近看了一下python，正好来练练手，写歌爬虫爬一下百度云盘的资源。分析了一下百度云盘的网友源码和js文件，里面有大量ajax的东西，利用json传输数据，前端显示。话说，这样数据爬去就方便多了，也不要用scrapy啥的，直接解析json数据就好。分析js文件提炼了下面三个链接：URL_SHARE='http://yun.baidu.com/pclo</div>
</li>
<li><a href="/article/1940261037819359232.htm"
title="大学专业科普 | 计算机应用、视觉与算法" target="_blank">大学专业科普 | 计算机应用、视觉与算法</a>
<span class="text-muted">鸭鸭鸭进京赶烤</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%BA%94%E7%94%A8/1.htm">计算机应用</a>
<div>一、专业概述计算机应用专业是一门实践性很强的学科，专注于将计算机技术转化为实际应用，服务于各个行业和领域，为社会的数字化转型提供人才支撑。二、课程设置专业基础课程：包括计算机组成原理、操作系统、数据结构、计算机网络等，为学生构建坚实的理论基础。专业核心课程：聚焦于程序设计语言（如C、C++、Java、Python等）、数据库原理与应用、软件工程、Web前端开发等，使学生具备开发各类软件系统的能力。</div>
</li>
<li><a href="/article/1940260054489952256.htm"
title="为了方便学习icss项目上的css技巧，我用next.js写了一个网站" target="_blank">为了方便学习icss项目上的css技巧，我用next.js写了一个网站</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFnext.js/1.htm">前端next.js</a>
<div>icss-website一、项目简介与定位icss-website是一个基于Next.js14（AppRouter架构）开发的现代化CSS技巧展示平台，致力于为前端开发者、设计师和技术爱好者提供一个高效、优雅、易用的CSS奇技淫巧学习与交流空间。项目以GitHub上的iCSS仓库为内容源，通过API动态获取、分类、展示和高亮CSS相关的文章与代码示例，支持多主题、多语言、响应式布局和丰富的交互体验</div>
</li>
<li><a href="/article/1940259171043700736.htm"
title="探索 Vue.js 组件的最新特性" target="_blank">探索 Vue.js 组件的最新特性</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>引言：Vue.js作为一款流行的前端框架，始终在不断发展和演进，为开发者带来新的特性和功能，以提升开发效率和用户体验。Vue.js组件是构建Vue应用的基础，其最新特性为开发者提供了更强大的工具和更灵活的开发方式。本文将深入探讨Vue.js组件的一些最新特性，包括组合式API、Teleport、Suspense等，帮助开发者更好地掌握和运用这些特性，从而构建出更加高效、复杂的前端应用。组合式API</div>
</li>
<li><a href="/article/1940247674523545600.htm"
title="【CSS-14-基础样式表Base.css】如何编写高质量的Base.css：前端样式重置与基础规范指南" target="_blank">【CSS-14-基础样式表Base.css】如何编写高质量的Base.css：前端样式重置与基础规范指南</a>
<span class="text-muted">AllenBright</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>在前端开发中，Base.css（也称为重置样式表或基础样式表）是整个项目样式的基石。它负责消除浏览器默认样式的差异，建立统一的样式基准，为后续开发提供一致的起点。一个精心设计的Base.css能够显著提高开发效率，减少浏览器兼容性问题，并保持项目样式的一致性。1.Base.css的核心作用样式重置（Reset）：消除不同浏览器之间的默认样式差异基础规范（BaseRules）：定义项目通用的基础样式</div>
</li>
<li><a href="/article/1940246031878909952.htm"
title="页面通信的方式 :postMessage向指定窗口发送信息" target="_blank">页面通信的方式 :postMessage向指定窗口发送信息</a>
<span class="text-muted">呼叫6945</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E9%A1%B5%E9%9D%A2%E9%80%9A%E4%BF%A1/1.htm">页面通信</a>
<div>postMessage是HTML5引入的一个跨文档通信API，允许不同窗口或iframe之间安全地发送消息。通过postMessage，你可以向指定的窗口或iframe发送信息，并且接收方可以通过监听message事件来接收这些信息。使用方法发送消息targetWindow.postMessage(message,targetOrigin,[transfer]);targetWindow:目标窗口</div>
</li>
<li><a href="/article/1940245905533890560.htm"
title="MVVM前端开发模型,怎么快速定位问题" target="_blank">MVVM前端开发模型,怎么快速定位问题</a>
<span class="text-muted"></span>
<div>MVVM（Model-View-ViewModel）是一种常见的前端开发架构，主要用于分离应用的逻辑和UI，提升代码的可维护性和可测试性。在MVVM中，Model代表数据层，View代表用户界面层，而ViewModel是连接两者的中介，负责处理UI和数据之间的交互。在开发中，尤其是调试和快速定位问题时，可能会遇到一些挑战。以下是一些基于MVVM前端架构的调试技巧和方法：1.明确问题的层次首先，要清</div>
</li>
<li><a href="/article/1940245779205648384.htm"
title="前端流式输出3种实现" target="_blank">前端流式输出3种实现</a>
<span class="text-muted">呼叫6945</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>在前端开发中，流式输出（streamingoutput）通常是指逐步输出数据，而不是等待所有数据准备好后一次性显示。这种技术在处理大型数据集、实时数据或需要逐步加载内容的情况下非常有用。下面介绍几种实现流式输出的方法，包括使用FetchAPI和EventSource。1.使用FetchAPI实现流式输出通过FetchAPI和可读流（ReadableStreams），可以在响应到达时逐步读取和处理数</div>
</li>
<li><a href="/article/1940241491737767936.htm"
title="ES6模块化 vs CommonJS：你需要知道的7个关键区别" target="_blank">ES6模块化 vs CommonJS：你需要知道的7个关键区别</a>
<span class="text-muted">前端视界</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%A4%A7%E6%95%B0%E6%8D%AE%E4%B8%8EAI%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">前端大数据与AI人工智能</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/1.htm">前端艺匠馆</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>ES6模块化vsCommonJS：你需要知道的7个关键区别关键词：ES6模块化、CommonJS、模块系统、静态导入、动态绑定、循环依赖、Node.js摘要：本文将用“快递包裹”“超市购物”等生活化比喻，结合代码示例，从7个核心维度对比ES6模块化（ESM）与CommonJS（CJS）的差异。无论是前端新手还是后端开发者，都能轻松理解两种模块系统的设计逻辑、行为差异及实际应用场景。背景介绍目的和范</div>
</li>
<li><a href="/article/1940224710683979776.htm"
title="原子化CSS革命：用TailwindCSS v4构建高效前端工作流" target="_blank">原子化CSS革命：用TailwindCSS v4构建高效前端工作流</a>
<span class="text-muted">Jokerator</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>一、原子化CSS：前端样式的新范式1.1定义与核心思想原子化CSS（AtomicCSS）是一种CSS架构方法论，它将样式拆分为最小单位的“原子”类，每个类只负责一个单一的视觉属性。例如：/*原子类示例*/.mt-4{margin-top:1rem;}.text-center{text-align:center;}.bg-blue-500{background-color:#3b82f6;}与传统C</div>
</li>
<li><a href="/article/1940213997198438400.htm"
title="低代码平台架构设计" target="_blank">低代码平台架构设计</a>
<span class="text-muted">LINGYI_WEN</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/%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>1.整体架构概述1.1技术栈选择前端：React+Redux/Vue+Vuex后端：Node.js+Express/SpringBoot数据库：MySQL/PostgreSQL/MongoDB云服务：AWS/Azure/GoogleCloud容器化：Docker+Kubernetes1.2模块划分前端模块：可视化编辑器：用于拖拽和配置组件预览器：实时预览页面效果发布器：将设计好的页面发布到生产环境</div>
</li>
<li><a href="/article/1940213365674668032.htm"
title="AngularJS知识快速入门（上）" target="_blank">AngularJS知识快速入门（上）</a>
<span class="text-muted">1加1等于</span>
<a class="tag" taget="_blank" href="/search/javascript%E5%AE%9E%E6%88%98/1.htm">javascript实战</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.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>本文通过一些具体的例子介绍了关于AngularJS的基本使用，包括指令、表达式、过滤器、模块化、MVC以及内置服务模块等等。本文目录AngularJS简介一、表达式二、MVC三、$scope作用域四、模块化五、过滤器六、服务七、指令AngularJS简介AngularJS是由Google开发的一个用于构建动态Web应用的前端JavaScript框架，它遵循MVC（Model-View-Contro</div>
</li>
<li><a href="/article/1940210840644939776.htm"
title="数字IC后端流程简述" target="_blank">数字IC后端流程简述</a>
<span class="text-muted">roc-ever</span>
<a class="tag" taget="_blank" href="/search/%E8%8A%AF%E7%89%87/1.htm">芯片</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97ic/1.htm">数字ic</a>
<div>1.设计输入目标：接收前端设计（如RTL代码和约束文件）的输出。工具：前端设计工具（如SynopsysDesignCompiler或CadenceGenus）。步骤：确保前端设计的RTL代码经过综合并生成了门级网表（Netlist）。收集约束文件（Constraints），如时序约束（SDC文件）、功率约束等。2.综合（Synthesis）目标：将高层次的RTL代码转化为门级网表。工具：Synop</div>
</li>
<li><a href="/article/1940209453508915200.htm"
title="【软件工程】Waitress + Nginx 部署 Python Web 服务" target="_blank">【软件工程】Waitress + Nginx 部署 Python Web 服务</a>
<span class="text-muted">meisongqing</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/WEB/1.htm">WEB</a>
<div>下面是完整的Windows系统部署方案，使用Waitress作为WSGI服务器运行Python后端，Nginx作为反向代理同时提供前端服务：项目结构text复制下载myapp/├──backend/#Python后端│├──app.py#Flask应用入口│├──requirements.txt#Python依赖│└──api/#API模块├──frontend/#前端文件│├──index.ht</div>
</li>
<li><a href="/article/1940207561995251712.htm"
title="VUE开发环境下mock模拟数据与后端接口对接示例" target="_blank">VUE开发环境下mock模拟数据与后端接口对接示例</a>
<span class="text-muted">guoyp2126</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%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/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>在以往的前端开发中，前端严重依赖后端，必须等待后端接口开发出来才能继续开发。使用mock，可以使得前后端开发异步进行，互不影响。Mock.js是一个模拟数据生成器，使用它可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式即可。这样前端就不需要依赖后端的接口，使用模拟的数据独立的完成开发，以下使用vue+mock.js的一个例子。安装mock打开命令行窗口，进入工程目录，输入以下命</div>
</li>
<li><a href="/article/1940203520502329344.htm"
title="Vue3 中 Excel 导出的性能优化与实战指南" target="_blank">Vue3 中 Excel 导出的性能优化与实战指南</a>
<span class="text-muted"></span>
<div>文章目录Vue3中Excel导出的性能优化与实战指南引言：为什么你的导出功能会卡死浏览器？一、前端导出方案深度剖析1.1xlsx(SheetJS)-轻量级冠军1.2exceljs-功能强大的重量级选手二、后端导出方案：大数据处理的救星2.1为什么大数据需要后端处理？2.2Node.js流式导出实战三、生产环境性能优化全攻略3.1内存优化技巧对比3.2用户体验优化方案四、决策流程图：帮你选择最佳方案</div>
</li>
<li><a href="/article/1940202889897111552.htm"
title="Web性能测试常用指标（转自百度AI）" target="_blank">Web性能测试常用指标（转自百度AI）</a>
<span class="text-muted">chenbin___</span>
<a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>Web性能测试常用指标Web性能测试涉及多个维度的指标，主要分为前端页面性能指标和后端服务性能指标两大类，以下为关键指标详解：一、前端页面性能指标通过浏览器开发者工具（如ChromeDevTools）或专用工具（如Lighthouse）监测：首次内容绘制（FirstContentfulPaint,FCP）浏览器首次渲染文本/图像的时间，反映初始加载速度。目标值：≤1.8秒1最大内容绘制（Large</div>
</li>
<li><a href="/article/1940202385989234688.htm"
title="Python,Go开发数据流量分配查询APP" target="_blank">Python,Go开发数据流量分配查询APP</a>
<span class="text-muted">Geeker-2025</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a>
<div>#数据流量分配查询应用我将设计一个基于Python和Go开发的数据流量分配查询应用，帮助用户监控和分析网络流量分配情况。##设计思路这个应用将实现以下核心功能：-实时监控网络流量分配情况-多维度流量数据分析（设备、应用、时间段）-流量分配策略设置与管理-异常流量告警系统-直观的数据可视化展示##技术架构```前端(Python+Streamlit)后端(Go)┌──────────────────</div>
</li>
<li><a href="/article/14.htm"
title="Spring4.1新特性——综述" target="_blank">Spring4.1新特性——综述</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/spring+4.1/1.htm">spring 4.1</a>
<div>目录
Spring4.1新特性——综述
Spring4.1新特性——Spring核心部分及其他
Spring4.1新特性——Spring缓存框架增强
Spring4.1新特性——异步调用和事件机制的异常处理
Spring4.1新特性——数据库集成测试脚本初始化
Spring4.1新特性——Spring MVC增强
Spring4.1新特性——页面自动化测试框架Spring MVC T</div>
</li>
<li><a href="/article/141.htm"
title="Schema与数据类型优化" target="_blank">Schema与数据类型优化</a>
<span class="text-muted">annan211</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>
目前商城的数据库设计真是一塌糊涂，表堆叠让人不忍直视，无脑的架构师，说了也不听。
在数据库设计之初，就应该仔细揣摩可能会有哪些查询，有没有更复杂的查询，而不是仅仅突出
很表面的业务需求，这样做会让你的数据库性能成倍提高，当然，丑陋的架构师是不会这样去考虑问题的。
选择优化的数据类型
1 更小的通常更好
更小的数据类型通常更快，因为他们占用更少的磁盘、内存和cpu缓存，</div>
</li>
<li><a href="/article/268.htm"
title="第一节 HTML概要学习" target="_blank">第一节 HTML概要学习</a>
<span class="text-muted">chenke</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>第一节 HTML概要学习
1. 什么是HTML
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。
打开记事本 输入一下内</div>
</li>
<li><a href="/article/395.htm"
title="MyEclipse里部分习惯的更改" target="_blank">MyEclipse里部分习惯的更改</a>
<span class="text-muted">Array_06</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a>
<div>继续补充中----------------------
1.更改自己合适快捷键windows-->prefences-->java-->editor-->Content Assist-->
Activation triggers for java的右侧“.”就可以改变常用的快捷键
选中 Text </div>
</li>
<li><a href="/article/522.htm"
title="近一个月的面试总结" target="_blank">近一个月的面试总结</a>
<span class="text-muted">cugfy</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
<div>本文是在学习中的总结，欢迎转载但请注明出处：http://blog.csdn.net/pistolove/article/details/46753275
前言
打算换个工作，近一个月面试了不少的公司，下面将一些面试经验和思考分享给大家。另外校招也快要开始了，为在校的学生提供一些经验供参考，希望都能找到满意的工作。 </div>
</li>
<li><a href="/article/649.htm"
title="HTML5一个小迷宫游戏" target="_blank">HTML5一个小迷宫游戏</a>
<span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div> 通过《HTML5游戏开发》摘抄了一个小迷宫游戏，感觉还不错，可以画画，写字，把摘抄的代码放上来分享下，喜欢的同学可以拿来玩玩！
<html>
<head>
<title>创建运行迷宫</title>
<script type="text/javascript"</div>
</li>
<li><a href="/article/776.htm"
title="10步教你上传githib数据" target="_blank">10步教你上传githib数据</a>
<span class="text-muted">张亚雄</span>
<a class="tag" taget="_blank" href="/search/git/1.htm">git</a>
<div>官方的教学还有其他博客里教的都是给懂的人说得，对已我们这样对我大菜鸟只能这么来锻炼，下面先不玩什么深奥的，先暂时用着10步干净利索。等玩顺溜了再用其他的方法。
操作过程（查看本目录下有哪些文件NO.1）ls
（跳转到子目录NO.2）cd+空格+目录
（继续NO.3）ls
（匹配到子目录NO.4）cd+ 目录首写字母+tab键+（首写字母“直到你所用文件根就不再按TAB键了”）
（查看文件</div>
</li>
<li><a href="/article/903.htm"
title="MongoDB常用操作命令大全" target="_blank">MongoDB常用操作命令大全</a>
<span class="text-muted">adminjun</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E5%91%BD%E4%BB%A4/1.htm">操作命令</a>
<div>成功启动MongoDB后，再打开一个命令行窗口输入mongo，就可以进行数据库的一些操作。输入help可以看到基本操作命令，只是MongoDB没有创建数据库的命令，但有类似的命令 如：如果你想创建一个“myTest”的数据库，先运行use myTest命令，之后就做一些操作（如：db.createCollection('user')）,这样就可以创建一个名叫“myTest”的数据库。
一</div>
</li>
<li><a href="/article/1030.htm"
title="bat调用jar包并传入多个参数" target="_blank">bat调用jar包并传入多个参数</a>
<span class="text-muted">aijuans</span>
<div>下面的主程序是通过eclipse写的：
1.在Main函数接收bat文件传递的参数（String[] args）
如： String ip =args[0]; String user=args[1]; &nbs</div>
</li>
<li><a href="/article/1157.htm"
title="Java中对类的主动引用和被动引用" target="_blank">Java中对类的主动引用和被动引用</a>
<span class="text-muted">ayaoxinchao</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%BB%E5%8A%A8%E5%BC%95%E7%94%A8/1.htm">主动引用</a><a class="tag" taget="_blank" href="/search/%E5%AF%B9%E7%B1%BB%E7%9A%84%E5%BC%95%E7%94%A8/1.htm">对类的引用</a><a class="tag" taget="_blank" href="/search/%E8%A2%AB%E5%8A%A8%E5%BC%95%E7%94%A8/1.htm">被动引用</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E5%88%9D%E5%A7%8B%E5%8C%96/1.htm">类初始化</a>
<div>
在Java代码中，有些类看上去初始化了，但其实没有。例如定义一定长度某一类型的数组，看上去数组中所有的元素已经被初始化，实际上一个都没有。对于类的初始化，虚拟机规范严格规定了只有对该类进行主动引用时，才会触发。而除此之外的所有引用方式称之为对类的被动引用，不会触发类的初始化。虚拟机规范严格地规定了有且仅有四种情况是对类的主动引用，即必须立即对类进行初始化。四种情况如下：1.遇到ne</div>
</li>
<li><a href="/article/1284.htm"
title="导出数据库 提示 outfile disabled" target="_blank">导出数据库 提示 outfile disabled</a>
<span class="text-muted">BigBird2012</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>在windows控制台下，登陆mysql，备份数据库：
mysql>mysqldump -u root -p test test > D:\test.sql
使用命令 mysqldump 格式如下： mysqldump -u root -p *** DBNAME > E:\\test.sql。
注意：执行该命令的时候不要进入mysql的控制台再使用，这样会报</div>
</li>
<li><a href="/article/1411.htm"
title="Javascript 中的 && 和 ||" target="_blank">Javascript 中的 && 和 ||</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%26%26/1.htm">&&</a><a class="tag" taget="_blank" href="/search/%7C%7C/1.htm">||</a>
<div> 准备两个对象用于下面的讨论
var alice = {
name: "alice",
toString: function () {
return this.name;
}
}
var smith = {
name: "smith",
</div>
</li>
<li><a href="/article/1538.htm"
title="[Zookeeper学习笔记之四]Zookeeper Client Library会话重建" target="_blank">[Zookeeper学习笔记之四]Zookeeper Client Library会话重建</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
<div>为了说明问题，先来看个简单的示例代码：
package com.tom.zookeeper.book;
import com.tom.Host;
import org.apache.zookeeper.WatchedEvent;
import org.apache.zookeeper.ZooKeeper;
import org.apache.zookeeper.Wat</div>
</li>
<li><a href="/article/1665.htm"
title="【Scala十一】Scala核心五：case模式匹配" target="_blank">【Scala十一】Scala核心五：case模式匹配</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
<div>package spark.examples.scala.grammars.caseclasses
object CaseClass_Test00 {
def simpleMatch(arg: Any) = arg match {
case v: Int => "This is an Int"
case v: (Int, String)</div>
</li>
<li><a href="/article/1792.htm"
title="运维的一些面试题" target="_blank">运维的一些面试题</a>
<span class="text-muted">yuxianhua</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>1、Linux挂载Winodws共享文件夹
mount -t cifs //1.1.1.254/ok /var/tmp/share/ -o username=administrator,password=yourpass
或
mount -t cifs -o username=xxx,password=xxxx //1.1.1.1/a /win
</div>
</li>
<li><a href="/article/1919.htm"
title="Java lang包-Boolean" target="_blank">Java lang包-Boolean</a>
<span class="text-muted">BrokenDreams</span>
<a class="tag" taget="_blank" href="/search/boolean/1.htm">boolean</a>
<div> Boolean类是Java中基本类型boolean的包装类。这个类比较简单，直接看源代码吧。
public final class Boolean implements java.io.Serializable,
</div>
</li>
<li><a href="/article/2046.htm"
title="读《研磨设计模式》-代码笔记-命令模式-Command" target="_blank">读《研磨设计模式》-代码笔记-命令模式-Command</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.util.ArrayList;
import java.util.Collection;
import java.util.List;
/**
* GOF 在《设计模式》一书中阐述命令模式的意图：“将一个请求封装</div>
</li>
<li><a href="/article/2173.htm"
title="matlab下GPU编程笔记" target="_blank">matlab下GPU编程笔记</a>
<span class="text-muted">cherishLC</span>
<a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a>
<div>不多说，直接上代码
gpuDevice % 查看系统中的gpu,,其中的DeviceSupported会给出matlab支持的GPU个数。
g=gpuDevice(1); %会清空 GPU 1中的所有数据,,将GPU1 设为当前GPU
reset(g) %也可以清空GPU中数据。
a=1;
a=gpuArray(a); %将a从CPU移到GPU中
onGP</div>
</li>
<li><a href="/article/2300.htm"
title="SVN安装过程" target="_blank">SVN安装过程</a>
<span class="text-muted">crabdave</span>
<a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a>
<div>SVN安装过程
subversion-1.6.12
./configure --prefix=/usr/local/subversion --with-apxs=/usr/local/apache2/bin/apxs --with-apr=/usr/local/apr --with-apr-util=/usr/local/apr --with-openssl=/</div>
</li>
<li><a href="/article/2427.htm"
title="sql 行列转换" target="_blank">sql 行列转换</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E5%88%97%E8%BD%AC%E6%8D%A2/1.htm">行列转换</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E8%BD%AC%E5%88%97/1.htm">行转列</a><a class="tag" taget="_blank" href="/search/%E5%88%97%E8%BD%AC%E8%A1%8C/1.htm">列转行</a>
<div>行转列的思想是通过case when 来实现
列转行的思想是通过union all 来实现
下面具体例子：
假设有张学生成绩表(tb)如下:
Name Subject Result
张三 语文 74
张三 数学 83
张三 物理 93
李四 语文 74
李四 数学 84
李四 物理 94
*/
/*
想变成
姓名 &</div>
</li>
<li><a href="/article/2554.htm"
title="MySQL--主从配置" target="_blank">MySQL--主从配置</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div> linux下的mysql主从配置： 说明：由于MySQL不同版本之间的(二进制日志)binlog格式可能会不一样，因此最好的搭配组合是Master的MySQL版本和Slave的版本相同或者更低， Master的版本肯定不能高于Slave版本。（版本向下兼容）
mysql1 : 192.168.100.1 //master mysq</div>
</li>
<li><a href="/article/2681.htm"
title="关于yii 数据库添加新字段之后model类的修改" target="_blank">关于yii 数据库添加新字段之后model类的修改</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Model/1.htm">Model</a>
<div>rules:
array('新字段','safe','on'=>'search')
1、array('新字段', 'safe')//这个如果是要用户输入的话，要加一下，
2、array('新字段', 'numerical'),//如果是数字的话
3、array('新字段', 'length', 'max'=>100),//如果是文本
1、2、3适当的最少要加一条，新字段才会被</div>
</li>
<li><a href="/article/2808.htm"
title="sublime text3 中文乱码解决" target="_blank">sublime text3 中文乱码解决</a>
<span class="text-muted">dyy_gusi</span>
<a class="tag" taget="_blank" href="/search/Sublime+Text/1.htm">Sublime Text</a>
<div>sublime text3中文乱码解决
原因：缺少转换为UTF-8的插件
目的：安装ConvertToUTF8插件包
第一步：安装能自动安装插件的插件，百度“Codecs33”，然后按照步骤可以得到以下一段代码：
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a30980927</div>
</li>
<li><a href="/article/2935.htm"
title="概念了解：CGI，FastCGI，PHP-CGI与PHP-FPM" target="_blank">概念了解：CGI，FastCGI，PHP-CGI与PHP-FPM</a>
<span class="text-muted">geeksun</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
<div>CGI
CGI全称是“公共网关接口”(Common Gateway Interface)，HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。
CGI可以用任何一种语言编写，只要这种语言具有标准输入、输出和环境变量。如php,perl,tcl等。 FastCGI
FastCGI像是一个常驻(long-live)型的CGI，它可以一直执行着，只要激活后，不</div>
</li>
<li><a href="/article/3062.htm"
title="Git push 报错 "error: failed to push some refs to " 解决" target="_blank">Git push 报错 "error: failed to push some refs to " 解决</a>
<span class="text-muted">hongtoushizi</span>
<a class="tag" taget="_blank" href="/search/git/1.htm">git</a>
<div>Git push 报错 "error: failed to push some refs to " .
此问题出现的原因是：由于远程仓库中代码版本与本地不一致冲突导致的。
由于我在第一次git pull --rebase 代码后，准备push的时候，有别人往线上又提交了代码。所以出现此问题。
解决方案：
1： git pull
2：</div>
</li>
<li><a href="/article/3189.htm"
title="第四章 Lua模块开发" target="_blank">第四章 Lua模块开发</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a>
<div>在实际开发中，不可能把所有代码写到一个大而全的lua文件中，需要进行分模块开发；而且模块化是高性能Lua应用的关键。使用require第一次导入模块后，所有Nginx 进程全局共享模块的数据和代码，每个Worker进程需要时会得到此模块的一个副本（Copy-On-Write），即模块可以认为是每Worker进程共享而不是每Nginx Server共享；另外注意之前我们使用init_by_lua中初</div>
</li>
<li><a href="/article/3316.htm"
title="java.lang.reflect.Proxy" target="_blank">java.lang.reflect.Proxy</a>
<span class="text-muted">liyonghui160com</span>
<div>
1.简介
Proxy 提供用于创建动态代理类和实例的静态方法
（1）动态代理类的属性
代理类是公共的、最终的，而不是抽象的
未指定代理类的非限定名称。但是，以字符串 "$Proxy" 开头的类名空间应该为代理类保留
代理类扩展 java.lang.reflect.Proxy
代理类会按同一顺序准确地实现其创建时指定的接口</div>
</li>
<li><a href="/article/3443.htm"
title="Java中getResourceAsStream的用法" target="_blank">Java中getResourceAsStream的用法</a>
<span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>1.Java中的getResourceAsStream有以下几种： 1. Class.getResourceAsStream(String path) ： path 不以’/'开头时默认是从此类所在的包下取资源，以’/'开头则是从ClassPath根下获取。其只是通过path构造一个绝对路径，最终还是由ClassLoader获取资源。 2. Class.getClassLoader.get</div>
</li>
<li><a href="/article/3570.htm"
title="spring 包官方下载地址（非maven）" target="_blank">spring 包官方下载地址（非maven）</a>
<span class="text-muted">sinnk</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
<div>SPRING官方网站改版后，建议都是通过 Maven和Gradle下载，对不使用Maven和Gradle开发项目的，下载就非常麻烦，下给出Spring Framework jar官方直接下载路径:
http://repo.springsource.org/libs-release-local/org/springframework/spring/
s</div>
</li>
<li><a href="/article/3697.htm"
title="Oracle学习笔记(7) 开发PLSQL子程序和包" target="_blank">Oracle学习笔记(7) 开发PLSQL子程序和包</a>
<span class="text-muted">vipbooks</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a>
<div> 哈哈，清明节放假回去了一下，真是太好了，回家的感觉真好啊！现在又开始出差之旅了，又好久没有来了，今天继续Oracle的学习！
这是第七章的学习笔记，学习完第六章的动态SQL之后，开始要学习子程序和包的使用了……，希望大家能多给俺一些支持啊！
编程时使用的工具是PLSQL</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> 