目录
一： 初识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/1892544893620908032.htm"
title="纯前端导入导出txt文件" target="_blank">纯前端导入导出txt文件</a>
<span class="text-muted">今天吃了嘛o</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BAtxt%E6%96%87%E4%BB%B6/1.htm">前端导入导出txt文件</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>1.html部分导入导出{{alone}}2.js部分导出的时候我尝试了很多次改变编码格式为gb2312的，但是无果，所以我再读取的时候先读取文件判断了文件编码格式，然后再去根据编码格式读取文件并展示页面。exportdefault{data(){return{works:[],};},methods:{handleBeforeUpload(file){this.fileList=[file];c</div>
</li>
<li><a href="/article/1892543379292614656.htm"
title="vue中使用ueditor上传到服务器_vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]..." target="_blank">vue中使用ueditor上传到服务器_vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]...</a>
<span class="text-muted">小西超人</span>
<div>写在最前面的话：鉴于近期很多的博友讨论，说我按照文章的一步一步来，弄好之后，怎么会提示后端配置项http错误，文件上传会提示上传错误。这里提别申明一点，ueditor在前端配置好后，需要与后端部分配合进行，后端部分的项目代码git地址：https://github.com/coderliguoqing/UeditorSpringboot，然后将配置ueditor.config.js里的server</div>
</li>
<li><a href="/article/1892540853390471168.htm"
title="vuecli项目实战--管理系统" target="_blank">vuecli项目实战--管理系统</a>
<span class="text-muted">团团kobebryant</span>
<a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>一、项目搭建HBuider直接：新建--项目--填项目名称、选地址、下拉选vue项目（2.6.10）项目结构这个样子：二、前端配置1.路由配置（地址）在src文件夹下创建router文件夹在router文件夹下面创建js文件index.js---配置组件的地址还有导航守卫、路由嵌套也配在这里1.组件路由2.组件路由嵌套3.路由导航记得跟vue对象关联还有导出路由嗷importVuefrom'vue</div>
</li>
<li><a href="/article/1892538707169308672.htm"
title="若依前后端分离集成CAS详细教程" target="_blank">若依前后端分离集成CAS详细教程</a>
<span class="text-muted">Roc-xb</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95/1.htm">单点登录</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/1.htm">前后端分离</a><a class="tag" taget="_blank" href="/search/CAS/1.htm">CAS</a>
<div>目录一、后端配置1、添加cas依赖2、修改配置文件3、修改LoginUser.java4、修改Constants.java5、添加CasProperties.java6、添加CasUserDetailsService.java7、添加CasAuthenticationSuccessHandler.java8、修改SecurityConfig9、启动后端二、前端配置1、修改settings.js2、</div>
</li>
<li><a href="/article/1892528229797916672.htm"
title="使用vue3框架vue-next-admin导出列表数据" target="_blank">使用vue3框架vue-next-admin导出列表数据</a>
<span class="text-muted">乐多_L</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>在Vue3中实现Excel导出功能可以通过以下步骤完成，这里使用xlsx库来实现前端Excel导出：1.安装依赖npminstallxlsxfile-saver#或yarnaddxlsxfile-saver2.实现代码示例需要在当前页引入import*asXLSXfrom"xlsx";注释：我导出的数据为列表的全部数据（datum）；自定义我需要的表头，大家可以根据自己的需要进行替换。还可以只导出</div>
</li>
<li><a href="/article/1892516757122379776.htm"
title="spring boot基于知识图谱的阿克苏市旅游管理系统python-计算机毕业设计" target="_blank">spring boot基于知识图谱的阿克苏市旅游管理系统python-计算机毕业设计</a>
<span class="text-muted">QQ1963288475</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E7%9F%A5%E8%AF%86%E5%9B%BE%E8%B0%B1/1.htm">知识图谱</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a>
<div>目录功能和技术介绍具体实现截图开发核心技术：开发环境开发步骤编译运行核心代码部分展示系统设计详细视频演示可行性论证软件测试源码获取功能和技术介绍该系统基于浏览器的方式进行访问，采用springboot集成快速开发框架，前端使用vue方式，基于es5的语法，开发工具IntelliJIDEAx64，因为该开发工具，内嵌了Tomcat服务运行机制，可不用单独下载Tomcatserver服务器。由于考虑到</div>
</li>
<li><a href="/article/1892510471286747136.htm"
title="【OpenTiny调研征集】共创技术未来，分享您的声音！" target="_blank">【OpenTiny调研征集】共创技术未来，分享您的声音！</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFvue.js%E5%BC%80%E6%BA%90/1.htm">前端vue.js开源</a>
<div>欢迎参与2025年OpenTiny开源社区用户调研征集调研背景随着OpenTiny开源项目的不断发展，我们一直致力于为开发者提供高质量的Web前端开发解决方案。为了更好地满足用户需求，提升项目的实用性和易用性，我们决定发起一项用户调研活动，诚挚邀请您参与。调研目的了解用户需求：收集您在使用OpenTiny开源项目过程中的需求、问题和建议，以便我们更好地改进和优化。提升用户体验：通过您的反馈，我们将</div>
</li>
<li><a href="/article/1892506293600579584.htm"
title="cesium（vue）一些面试问题（包含Three.js）" target="_blank">cesium（vue）一些面试问题（包含Three.js）</a>
<span class="text-muted">GIS瞧葩菜</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/cesium/1.htm">cesium</a>
<div>1.在不同的应用场景和技术栈中，模型加载方法和格式有所不同，下面主要从Web前端三维场景（使用Three.js和cesium）使用Three.js加载模型常见模型格式及加载方法GLTF/GLB格式格式特点：GLTF（GraphicsLibraryTransmissionFormat）是一种开放的、基于JSON的三维模型传输格式，GLB是其二进制版本。它们具有文件小、加载快、支持动画、材质和骨骼等优</div>
</li>
<li><a href="/article/1892474879861649408.htm"
title="探索 TypeScript Redux：构建大规模JavaScript应用的终极指南" target="_blank">探索 TypeScript Redux：构建大规模JavaScript应用的终极指南</a>
<span class="text-muted">柳旖岭</span>
<div>探索TypeScriptRedux：构建大规模JavaScript应用的终极指南去发现同类优质开源项目:https://gitcode.com/在当今快速发展的前端开发领域中，组合正确工具集来应对复杂性和扩展性挑战至关重要。今天，我们将深入了解一个令人兴奋的开源项目——TypeScriptRedux，它结合了TypeScript、JSPM、typings、React和Redux的强大功能，为开发者</div>
</li>
<li><a href="/article/1892471976795107328.htm"
title="前端导出word文件—包含canvas(echarts图表)" target="_blank">前端导出word文件—包含canvas(echarts图表)</a>
<span class="text-muted">Liuer_Qin</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/canvas/1.htm">canvas</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</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>一、使用的插件html-docx-js二、整体思路因为canvas是运行在内存中的，所以不能简单的通过dom获取canvas图片，需要手动的先将canvas转为image。三、实现先克隆要下载的DOM的副本。因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的）。我们这里将原DOM中的canvas转成图片，然后插入到副本的对应位置，这样操作不会影响原DOM</div>
</li>
<li><a href="/article/1892433617058066432.htm"
title="使用Odoo Shell卸载模块" target="_blank">使用Odoo Shell卸载模块</a>
<span class="text-muted">odoo中国</span>
<a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E8%BD%AF%E4%BB%B6/1.htm">开源软件</a><a class="tag" taget="_blank" href="/search/erp/1.htm">erp</a>
<div>使用OdooShell卸载模块我们在Odoo使用过程中，因为模块安装错误或者前端错误等导致odoo无法通过界面登录，这时候你可以使用OdooShell来卸载模块。OdooShell是一个交互式Pythonshell，允许你直接与Odoo数据库和模型进行交互。以下是使用OdooShell卸载模块的详细步骤：步骤1：启动OdooShell要启动OdooShell，你需要在终端中运行以下命令。确保你已经</div>
</li>
<li><a href="/article/1892426166254497792.htm"
title="基于 Spring Boot 的社区居民健康管理系统部署说明书" target="_blank">基于 Spring Boot 的社区居民健康管理系统部署说明书</a>
<span class="text-muted">小星袁</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1%E5%8E%9F%E6%96%87/1.htm">毕业设计原文</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>目录1系统概述2准备资料3系统安装与部署3.1数据库部署3.1.1MySQL的部署3.1.2Navicat的部署3.2服务器部署3.3客户端部署4系统配置与优化5其他基于SpringBoot的社区居民健康管理系统部署说明书1系统概述本系统主要运用了SpringBoot框架，前端页面的设计主要依托Vue框架来构建，实现丰富且交互性强的用户界面，后台管理功能则采用SpringBoot框架与MySQL数</div>
</li>
<li><a href="/article/1892412800781840384.htm"
title="html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作" target="_blank">html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作</a>
<span class="text-muted">律保阁-Michael</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/5%E4%B8%ADcss%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">5中css的含义</a>
<div>HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48</div>
</li>
<li><a href="/article/1892407882675187712.htm"
title="前端性能优化——如何提高页面加载速度？" target="_blank">前端性能优化——如何提高页面加载速度？</a>
<span class="text-muted">忘川...</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>1.将样式表放在头部首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的</div>
</li>
<li><a href="/article/1892407376435277824.htm"
title="前端开发入门指南：HTML、CSS和JavaScript基础知识" target="_blank">前端开发入门指南：HTML、CSS和JavaScript基础知识</a>
<span class="text-muted">方向感超强的</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与</div>
</li>
<li><a href="/article/1892404729082867712.htm"
title="前端504错误分析" target="_blank">前端504错误分析</a>
<span class="text-muted">ox0080</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%8C%97%E6%BC%82%2B%E6%BB%B4%E6%BB%B4%E5%87%BA%E8%A1%8C/1.htm">北漂+滴滴出行</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/VIP/1.htm">VIP</a><a class="tag" taget="_blank" href="/search/%E6%BF%80%E5%8A%B1/1.htm">激励</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端出现504错误（网关超时）通常是由于代理服务器未能及时从上游服务获取响应。以下是详细分析步骤和解决方案：1.确认错误来源504含义：代理服务器（如Nginx、Apache）在等待后端服务响应时超时。常见架构：前端→代理服务器→后端服务，问题通常出在代理与后端之间。2.排查步骤（1）检查后端服务状态确认服务是否运行：通过日志或监控工具（如systemctlstatus,KubernetesPod</div>
</li>
<li><a href="/article/1892398803407925248.htm"
title="部署前端项目2" target="_blank">部署前端项目2</a>
<span class="text-muted">augenstern416</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V</div>
</li>
<li><a href="/article/1892398677004185600.htm"
title="对象的操作" target="_blank">对象的操作</a>
<span class="text-muted">augenstern416</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>在前端开发中，JavaScript提供了许多内置对象和方法，用于处理数据、操作DOM、处理事件等。以下是一些常用对象及其方法和扩展技巧：1.Object对象Object是JavaScript中最基础的对象，几乎所有对象都继承自Object。常用方法Object.keys(obj)：返回对象的所有可枚举属性的键名数组。constobj={a:1,b:2};console.log(Object.key</div>
</li>
<li><a href="/article/1892390738520502272.htm"
title="前端基础入门：HTML、CSS 和 JavaScript" target="_blank">前端基础入门：HTML、CSS 和 JavaScript</a>
<span class="text-muted">阿绵</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a>
<div>在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元</div>
</li>
<li><a href="/article/1892360084474884096.htm"
title="前端超长列表，虚拟滚动实现" target="_blank">前端超长列表，虚拟滚动实现</a>
<span class="text-muted">大橙子-</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>虚拟滚动.container{width:300px;height:500px;overflow:hidden;border:1pxsolid#ccc;margin-top:50px;}.scroll-box{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;}.scroll-height-main</div>
</li>
<li><a href="/article/1892346975152566272.htm"
title="前端框架虚拟DOM的产生" target="_blank">前端框架虚拟DOM的产生</a>
<span class="text-muted">大橙子-</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>直接说结论：为了找出与命令式(原生实现步骤)所执行代码的最小差异化，从而优化代码性能。命令式：可以理解为面向过程编程，需要写好每个实现步骤constdiv=document.querySelector('#app')//获取divdiv.innerText='helloworld'//设置文本内容如果需要修改文字内容为“你好”div.innerText='你好'//设置文本内容声明式：可以理解为面</div>
</li>
<li><a href="/article/1892336006464598016.htm"
title="27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？" target="_blank">27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？</a>
<span class="text-muted">程序员yt</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>今天给大家分享的是一位粉丝的提问，27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？接下来把粉丝的具体提问和我的回复分享给大家，希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问：211建筑本科，22年毕业后gap一年转码去了英国读的QS100的it的水硕（24年12月份毕业），转码后对就业形势认知不足，时间全花在课业上，八股文和算法准备的不充足，秋招算是惨败。读研</div>
</li>
<li><a href="/article/1892301695560511488.htm"
title="芯麦GC1808立体声ADC芯片解析：高性价比与全集成音频采集方案" target="_blank">芯麦GC1808立体声ADC芯片解析：高性价比与全集成音频采集方案</a>
<span class="text-muted">青牛科技-Allen</span>
<a class="tag" taget="_blank" href="/search/GLOBALCHIP/1.htm">GLOBALCHIP</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/%E6%94%B6%E5%BD%95%E6%9C%BA/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/%E5%AE%B6%E7%94%A8%E7%94%B5%E5%99%A8/1.htm">家用电器</a>
<div>引言在直播设备、智能语音终端等新兴应用的推动下，高性能音频采集系统的需求持续增长。芯麦半导体推出的GC1808立体声音频模数转换器，凭借其全集成信号链设计和灵活的接口配置，为开发者提供了高性价比的音频前端解决方案。本文将从核心架构、关键技术特性及典型应用场景三个方面，深入解析这款芯片的设计亮点。一、GC1808核心特性概览全集成信号链内置64倍过采样率Δ-Σ调制器集成数字梳状滤波器（CombFil</div>
</li>
<li><a href="/article/1892296529092341760.htm"
title="前端面试题（HTML篇）" target="_blank">前端面试题（HTML篇）</a>
<span class="text-muted">每天一点点~</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>1.网络中使用最多的图片格式有哪些？JPEG，GIF，PNG最流行的是JPEG格式，可以把文件压缩到最小在PS以JPEG格式存储时，提供11级压缩等级2.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?声明文档类型声明位于位于HTML文档中的第一行，处于标签之前DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式(严格模式)浏览器按照W3C的标准解析执行代码标准模式(严</div>
</li>
<li><a href="/article/1892296149751099392.htm"
title="python websocket 心跳_websocket心跳及重连机制" target="_blank">python websocket 心跳_websocket心跳及重连机制</a>
<span class="text-muted">蜗牛老湿</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E5%BF%83%E8%B7%B3/1.htm">心跳</a>
<div>websocket心跳及重连机制websocket是前后端交互的长连接，前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒。因此为了保证连接的可持续性和稳定性，websocket心跳重连就应运而生。在使用原生websocket的时候，如果设备网络断开，不会立刻触发websocket的任何事件，前端也就无法得知当前连接是否已经断开。这个时候如果调用websocket.send方法，浏览器</div>
</li>
<li><a href="/article/1892267275638075392.htm"
title="electron学习笔记" target="_blank">electron学习笔记</a>
<span class="text-muted">weixin_46452138</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基</div>
</li>
<li><a href="/article/1892256681367236608.htm"
title="虚拟DOM和真实DOM的区别" target="_blank">虚拟DOM和真实DOM的区别</a>
<span class="text-muted">水煮庄周鱼鱼</span>
<a class="tag" taget="_blank" href="/search/%E6%A6%82%E5%BF%B5/1.htm">概念</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>虚拟DOM（VirtualDOM）、DOM（RealDOM）是前端开发中常用的两种概念。什么是真实DOM？真实DOM是浏览器中实际存在的DOM结构，它由浏览器解析HTML生成，并且直接与浏览器交互。当页面中的数据发生变化时，真实DOM会重新计算布局和渲染，这个过程比较耗费性能。什么是虚拟DOM?虚拟DOM是一种在内存中以JavaScript对象的形式表示的轻量级的DOM结构。它是对真实DOM的一种</div>
</li>
<li><a href="/article/1892243161523220480.htm"
title="Java开发实习面试笔试题（含答案）" target="_blank">Java开发实习面试笔试题（含答案）</a>
<span class="text-muted">小钊（求职中）</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/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><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a>
<div>在广州一家中大公司面试（BOSS标注是1000-9999人，薪资2-3k），招聘上写着Java开发，基本没有标注前端要求，但是到场知道是前后端分离人不分离。开始先让你做笔试（12道问答+4道SQL题），接着面试也是八股文之类的，没有问项目，没有做算法，现分享笔试和面试题目给大家做参考。（基础的没复习忘了不会，只会几道感觉已经寄了，最重要的是前端基本不会）一、笔试内容1.Java有哪些数据类型，什么</div>
</li>
<li><a href="/article/1892225886195871744.htm"
title="鸿蒙5.0实战案例：关于图像撕裂、掉帧等异常现象的原理以及优化方案" target="_blank">鸿蒙5.0实战案例：关于图像撕裂、掉帧等异常现象的原理以及优化方案</a>
<span class="text-muted">敢嗣先锋</span>
<a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91/1.htm">鸿蒙开发</a><a class="tag" taget="_blank" href="/search/HarmonyOS/1.htm">HarmonyOS</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91/1.htm">鸿蒙开发</a><a class="tag" taget="_blank" href="/search/openharmony/1.htm">openharmony</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/ArkUI/1.htm">ArkUI</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a>
<div>往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面</div>
</li>
<li><a href="/article/1892219834280767488.htm"
title="【如何实现 JavaScript 的防抖和节流？】" target="_blank">【如何实现 JavaScript 的防抖和节流？】</a>
<span class="text-muted">程序员远仔</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%AB%98%E9%A2%91%E9%97%AE%E9%A2%98%E5%AE%9D%E5%85%B8/1.htm">前端面试高频问题宝典</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>如何实现JavaScript的防抖和节流？前言防抖（Debounce）和节流（Throttle）是JavaScript中优化高频事件处理的两种常用技术。它们可以有效减少事件处理函数的调用次数，提升性能并改善用户体验。本文将详细介绍防抖和节流的实现原理及其应用场景。关键词JavaScript、防抖、节流、高频事件、性能优化、事件处理、前端开发、前端面试、前端基础、前端进阶、前端工程化、前端开发最佳实</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> 