HTML常见标签和作用

HTML基础

    • HTML的基本结构
    • HTML元素
    • HTML表单
      • 创建HTML表单元素
      • 处理HTML表单数据

HTML的基本结构

HTML(HyperText Markup Language)的基本结构包括以下几个主要部分:

  1. :文档类型声明,它告诉浏览器文档采用哪个HTML版本。通常位于HTML文档的开头,以确保浏览器正确解释文档。

  2. :HTML文档的根元素。它包含了整个HTML文档的内容,并定义了文档的开始和结束。

  3. :文档头部部分,用于包含与文档相关的元信息(meta-information),通常不会在网页中直接显示给用户。常见的内容包括:

    • :定义文档的元信息,如字符集、作者、关键词等。
    • </code>:定义网页的标题,显示在浏览器标签页上。</li> <li><code><link></code>:引入外部样式表文件(CSS)。</li> <li><code><script></code>:引入外部JavaScript文件或内部脚本。</li> </ul> </li> <li> <p><code><body></code>:HTML文档的主体部分,包含了页面的可见内容,如文本、图像、链接等。用户访问网页时,这部分内容会在浏览器中呈现。</p> </li> </ol> <p>基本的HTML文档结构如下所示:</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>网页标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styles.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>script.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>这是一个标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是一个段落。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.example.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这是一个链接<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>这是一个简单的HTML文档示例。HTML文档的结构和内容会根据具体的需求和设计而有所不同,但上述基本结构是HTML文档的核心部分,它为网页提供了基本的框架。</p> <h2>HTML元素</h2> <p>HTML(Hypertext Markup Language)中有许多不同类型的元素,它们用于构建网页的结构和内容。以下是一些常见的HTML元素:</p> <ol> <li> <p><strong>标题元素</strong>:</p> <ul> <li> <p><code><h1></code>, <code><h2></code>, <code><h3></code>, <code><h4></code>, <code><h5></code>, <code><h6></code>:定义标题,按重要性递减。</p> </li> <li> <p><strong>标题元素 <code><h1></code> 到 <code><h6></code></strong>:用于定义标题,从 <code><h1></code>(最高级别)到 <code><h6></code>(最低级别)。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>这是一个主标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>这是一个次级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> <li> <p><strong>段落元素</strong>:</p> <ul> <li> <p><code><p></code>:定义文本段落。</p> </li> <li> <p><strong>段落元素 <code><p></code></strong>:用于定义文本段落。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是一个段落。段落是用来组织文本的基本单位。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> <li> <p><strong>链接元素</strong>:</p> <ul> <li> <p><code><a></code>:创建超链接到其他页面或资源。</p> </li> <li> <p><strong>链接元素 <code><a></code></strong>:用于创建超链接到其他页面或资源。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.example.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>访问示例网站<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> <li> <p><strong>图像元素</strong>:</p> <ul> <li> <p><code><img></code>:嵌入图像。</p> </li> <li> <p><strong>图像元素 <code><img></code></strong>:用于嵌入图像。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片描述<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> <li> <p><strong>列表元素</strong>:</p> <ul> <li> <p><code><ul></code>:创建无序列表。</p> </li> <li> <p><code><ol></code>:创建有序列表。</p> </li> <li> <p><code><li></code>:定义列表项。</p> </li> <li> <p><strong>列表元素 <code><ul></code> 和 <code><ol></code></strong>:用于创建无序列表和有序列表。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>无序列表项 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>无序列表项 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>有序列表项 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>有序列表项 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> <li> <p><strong>定义列表元素</strong>:</p> <ul> <li><code><dl></code>:创建定义列表。</li> <li><code><dt></code>:定义术语。</li> <li><code><dd></code>:定义术语的描述。</li> <li><strong>定义列表元素 <code><dl></code>、<code><dt></code> 和 <code><dd></code></strong>:用于创建术语和其描述的定义列表。<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>术语1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>术语1的定义。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>术语2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>术语2的定义。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> <li> <p><strong>表格元素</strong>:</p> <ul> <li> <p><code><table></code>:创建表格。</p> </li> <li> <p><code><tr></code>:定义表格行。</p> </li> <li> <p><code><td></code>:定义表格数据单元格。</p> </li> <li> <p><code><th></code>:定义表格标题单元格。</p> </li> <li> <p><code><caption></code>:为表格添加标题。</p> </li> <li> <p><strong>表格元素 <code><table></code>、<code><tr></code>、<code><td></code> 和 <code><th></code></strong>:用于创建表格。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>表头1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>表头2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>数据1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>数据2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> <li> <p><strong>表单元素</strong>:</p> <ul> <li> <p><code><form></code>:创建用户输入表单。</p> </li> <li> <p><code><input></code>:定义输入字段。</p> </li> <li> <p><code><textarea></code>:创建多行文本输入框。</p> </li> <li> <p><code><select></code>:创建下拉菜单。</p> </li> <li> <p><code><button></code>:创建按钮。</p> </li> <li> <p><code><label></code>:为表单元素添加标签。</p> </li> <li> <p><code><fieldset></code>:将相关表单元素分组。</p> </li> <li> <p><code><legend></code>:为<code><fieldset></code>元素添加标题。</p> </li> <li> <p><strong>表单元素 <code><form></code> 和 <code><input></code></strong>:用于创建用户输入表单和输入字段。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>用户名:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> <li> <p><strong>媒体元素</strong>:</p> <ul> <li> <p><code><audio></code>:嵌入音频。</p> </li> <li> <p><code><video></code>:嵌入视频。</p> </li> <li> <p><code><iframe></code>:嵌入其他网页或文档。</p> </li> <li> <p>HTML媒体元素用于嵌入音频和视频等多媒体内容到网页中。以下是HTML中两个主要的媒体元素的使用示例:</p> <ol> <li><strong><code><audio></code> 元素</strong>:用于嵌入音频文件。</li> </ol> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audio.mp3<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audio/mpeg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Your browser does not support the audio element. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> </code></pre> <ul> <li><code><audio></code> 元素包含一个或多个 <code><source></code> 元素,每个 <code><source></code> 元素指定不同格式的音频文件。浏览器会自动选择支持的格式。</li> <li><code>controls</code> 属性添加音频播放器的控件,如播放按钮、音量控制等。</li> <li>如果浏览器不支持 <code><audio></code> 元素或指定的音频格式,将显示后备内容。</li> </ul> <ol start="2"> <li><strong><code><video></code> 元素</strong>:用于嵌入视频文件。</li> </ol> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Your browser does not support the video element. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> </code></pre> <ul> <li><code><video></code> 元素也包含一个或多个 <code><source></code> 元素,每个 <code><source></code> 元素指定不同格式的视频文件。</li> <li><code>controls</code> 属性添加视频播放器的控件,允许用户播放、暂停、调整音量等。</li> <li><code>width</code> 属性定义视频的宽度,可以根据需要设置。</li> <li>与 <code><audio></code> 元素类似,如果浏览器不支持 <code><video></code> 元素或指定的视频格式,将显示后备内容。</li> </ul> <p>请注意,以上示例中的文件路径应该根据实际的文件位置进行调整。另外,为确保广泛的浏览器兼容性,通常需要提供多个不同格式的媒体文件,以便浏览器选择支持的格式。</p> <p>媒体元素还支持其他属性,例如 <code>autoplay</code>(自动播放)、<code>loop</code>(循环播放)、<code>poster</code>(封面图像)、<code>preload</code>(预加载等),可以根据需求进行配置。如果需要更多的交互和自定义控制,可以使用JavaScript与这些元素进行交互。</p> </li> </ul> </li> <li> <p><strong>样式和分隔元素</strong>:</p> <ul> <li> <p><code><div></code>:用于组织和布局页面内容,通常用于CSS样式控制。</p> </li> <li> <p><code><span></code>:用于内联元素,通常用于CSS样式控制。</p> </li> <li> <p><code><hr></code>:创建水平线。</p> </li> <li> <p><code><br></code>:插入换行符。</p> </li> <li> <p><strong>样式和分隔元素 <code><div></code> 和 <code><span></code></strong>:用于组织和布局页面内容,通常用于CSS样式控制。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是一个<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>元素。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>这是一个<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>元素。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> <li> <p><strong>文本格式元素</strong>:</p> <ul> <li> <p><code><strong></code>:表示强调文本,通常以粗体显示。</p> </li> <li> <p><code><em></code>:表示强调文本,通常以斜体显示。</p> </li> <li> <p><code><code></code>:表示计算机代码。</p> </li> <li> <p><code><mark></code>:高亮显示文本。</p> </li> <li> <p><code><sub></code>:表示下标文本。</p> </li> <li> <p><code><sup></code>:表示上标文本。</p> </li> <li> <p><strong>文本格式元素 <code><strong></code> 和 <code><em></code></strong>:用于表示文本的强调。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>重要信息:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>这是一个重要的内容部分。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>注意:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span>请仔细阅读说明。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> <li> <p><strong>其他元素</strong>:</p> <ul> <li><code><nav></code>:定义导航链接。</li> <li><code><header></code>:定义文档头部。</li> <li><code><footer></code>:定义文档底部。</li> <li><code><aside></code>:定义侧边栏内容。</li> <li><code><main></code>:定义文档的主要内容。</li> <li><code><article></code>:定义独立的文章内容。</li> <li><code><section></code>:定义文档的一个部分。</li> <li><strong>其他元素 <code><nav></code>、<code><header></code>、<code><footer></code>、<code><aside></code>、<code><main></code> 和 <code><article></code></strong>:用于定义页面的各个部分和结构。<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>网站标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>关于我们<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>主要内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是主要内容部分。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>版权所有 <span class="token entity named-entity">©</span> 2023<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> </code></pre> </li> </ul> </li> </ol> <p>这些元素的组合和嵌套形成了网页的结构和内容。通过正确使用这些元素,可以创建有意义且易于理解的网页。</p> <h2>HTML表单</h2> <p>HTML表单元素用于创建用户输入表单,以便用户可以提交数据到服务器或进行交互。以下是创建和处理HTML表单的基本步骤:</p> <h3>创建HTML表单元素</h3> <ol> <li><strong><code><form></code> 元素</strong>:使用 <code><form></code> 元素来定义整个表单,包括用户输入字段和提交按钮。</li> </ol> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit.php<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- 表单内容将被放置在这里 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>用户名<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>密码<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <ul> <li><code>action</code> 属性定义表单提交的目标URL。</li> <li><code>method</code> 属性定义提交方法,通常为 “post” 或 “get”。</li> </ul> <ol start="2"> <li><strong>输入字段</strong>:使用 <code><input></code> 元素和其他元素来定义表单中的输入字段。</li> </ol> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>用户名<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>密码<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <ul> <li><code>type</code> 属性定义输入字段的类型,如文本、密码、单选按钮等。</li> <li><code>name</code> 属性定义字段的名称,用于标识字段的值。</li> <li><code>placeholder</code> 属性可提供字段的占位符文本。</li> </ul> <ol start="3"> <li><strong>标签元素</strong>:使用 <code><label></code> 元素来为输入字段添加标签,提高可用性。</li> </ol> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>用户名:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <ul> <li><code>for</code> 属性的值应与相关输入字段的 <code>id</code> 属性相匹配,以建立关联。</li> </ul> <ol start="4"> <li><strong>其他输入字段</strong>:除了文本和密码字段,还有许多其他类型的输入字段,如单选按钮、复选框、下拉列表等。</li> </ol> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>male<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 男性 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>female<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 女性 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subscribe<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 订阅 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>us<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>美国<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ca<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>加拿大<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 其他选项 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <h3>处理HTML表单数据</h3> <p>当用户提交表单时,表单数据将被发送到服务器。服务器端可以使用不同的编程语言(如PHP、Node.js、Python等)来处理和验证表单数据。</p> <p>在服务器端,可以通过以下方式来访问和处理表单数据:</p> <ul> <li><strong>POST 方法</strong>:通过 POST 方法提交的表单数据通常在请求的正文中,可以使用服务器端脚本来解析和处理这些数据。</li> </ul> <pre><code class="prism language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string double-quoted-string">"REQUEST_METHOD"</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token string double-quoted-string">"POST"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$username</span> <span class="token operator">=</span> <span class="token variable">$_POST</span><span class="token punctuation">[</span><span class="token string double-quoted-string">"username"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token variable">$password</span> <span class="token operator">=</span> <span class="token variable">$_POST</span><span class="token punctuation">[</span><span class="token string double-quoted-string">"password"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 进行数据验证和处理</span> <span class="token punctuation">}</span> <span class="token operator">?</span><span class="token operator">></span> </code></pre> <ul> <li><strong>GET 方法</strong>:通过 GET 方法提交的表单数据通常附加在URL中,可以使用服务器端脚本来解析和处理这些数据。</li> </ul> <pre><code class="prism language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string double-quoted-string">"REQUEST_METHOD"</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token string double-quoted-string">"GET"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$username</span> <span class="token operator">=</span> <span class="token variable">$_GET</span><span class="token punctuation">[</span><span class="token string double-quoted-string">"username"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token variable">$password</span> <span class="token operator">=</span> <span class="token variable">$_GET</span><span class="token punctuation">[</span><span class="token string double-quoted-string">"password"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 进行数据验证和处理</span> <span class="token punctuation">}</span> <span class="token operator">?</span><span class="token operator">></span> </code></pre> <p>请注意,从安全性角度考虑,对用户提交的数据进行验证和过滤是非常重要的。应该对输入数据进行适当的验证和处理,以防止安全漏洞和恶意输入。</p> <p>以上是HTML表单元素的基本创建和处理过程。实际中,表单可以包含更多的输入字段和复杂的验证逻辑,具体取决于项目需求。</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1698804258926833664"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1900798373930266624.htm" title="2024前端Webpack面试题" target="_blank">2024前端Webpack面试题</a> <span class="text-muted">司宁</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a> <div>1、谈谈你对Webpack的理解Webpack是一个模块打包工具,可以使用它管理项目中的模块依赖,并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件(图片,字体)等,让开发更高效。对于不同类型的依赖,Webpack有对应的模块加载器,而且会分析模块间的依赖关系,最后合并生成优化的静态资源。2、Webpack的基本功能代码转换:Type</div> </li> <li><a href="/article/1900772397628321792.htm" title="【pptx-preview】react+pptx预览" target="_blank">【pptx-preview】react+pptx预览</a> <span class="text-muted">起来改bug</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/pptx/1.htm">pptx</a> <div>pptx前端预览插件pptx-preview-npm1.插件使用letpptxPreviewer:any=null;constdom:any=document.getElementById(`pptx-wrapper`);if(!dom)return;pptxPreviewer=init(dom,{width:800});fetch(url).then((response:any)=>respon</div> </li> <li><a href="/article/1900767983433740288.htm" title="HarmonyOS 实战开发 —— 基于HMRouter的路由跳转方案" target="_blank">HarmonyOS 实战开发 —— 基于HMRouter的路由跳转方案</a> <span class="text-muted">CTrup</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/%E7%BB%84%E4%BB%B6%E5%8C%96/1.htm">组件化</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/%E9%B8%BF%E8%92%99%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/HMRouter/1.htm">HMRouter</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E4%BB%B6%E5%8C%96%E8%B7%AF%E7%94%B1/1.htm">组件化路由</a> <div>往期笔录记录:鸿蒙(HarmonyOS)北向开发知识点记录~鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景?嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~对于大前端开发来说,转鸿蒙开发究竟是福还是祸?鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?记录一场鸿蒙开发岗位面试经历~持续更新中……HMRouter简介HMRouter作为Har</div> </li> <li><a href="/article/1900767224105332736.htm" title="web前端开发工程师工作的岗位职责(合集)" target="_blank">web前端开发工程师工作的岗位职责(合集)</a> <span class="text-muted">极客11</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E4%B8%8E%E6%B1%82%E8%81%8C/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/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>web前端开发工程师工作的岗位职责1职责:1、根据设计图进行前端页面开发并设计编写业务交互脚本2、优化前端页面,保证良好的用户体验以及不同浏览器的兼容性3、web前沿技术研究和新技术调研,将主流的特效应用到业务场景中4、配合后台开发人员实现网站界面和功能,为产品后期运营提供升级、维护等技术支持。5、工作积极主动,善于沟通,协调项目与项目之间的工作安排与配合,确保开发工作顺利进行。6、具备较强的学习</div> </li> <li><a href="/article/1900751205655703552.htm" title="使用flask快速搭建web应用" target="_blank">使用flask快速搭建web应用</a> <span class="text-muted">alex190824</span> <a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a> <div>文章目录前言一、Flask是什么?二、使用步骤1.引入包2.简单的服务端应用程序3.添加用于显示折线图代码4.在templates目录下,创建用于渲染的line-simple.html页面5.完整的代码结构前端代码后端代码总结前言在数据处理分析过程中,有快速搭建数据展示的应用场景需求,此时可以使用Flask快速进行web应用环境构建。本示例演示创建web应用及显示渲染echart折线图。一、Fla</div> </li> <li><a href="/article/1900732679352020992.htm" title="odoo-040 odoo17前端的js方法调用后端py方法action报错" target="_blank">odoo-040 odoo17前端的js方法调用后端py方法action报错</a> <span class="text-muted">Sapphire~</span> <a class="tag" taget="_blank" href="/search/Odoo/1.htm">Odoo</a><a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a> <div>文章目录问题描述梳理写法xml写法前端方法后端action的写法错误解释问题描述在前端的kanban视图上添加了几个自定义按钮,按钮点击可以跳转到对应的tree视图,在写按钮调用方法的时候报错如下:前端调用后端action报错:action.views=[...action.views.map((v)=>[v[0],v[1]==="tree"?"list":v[1]])];//manipulate</div> </li> <li><a href="/article/1900731923349696512.htm" title="我的创作纪念日" target="_blank">我的创作纪念日</a> <span class="text-muted">我爱学习_zwj</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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a> <div>机缘在前端开发的广袤天地中,我的创作之旅始于一次充满挑战与机遇的契机。初涉前端领域时,面对复杂多变的项目需求和飞速更新的技术栈,我深刻感受到知识的浩瀚无边,也意识到自身能力的不足。在参与一个大型项目时,我遭遇了许多棘手难题,像页面加载速度的优化、不同浏览器兼容性的处理等。那时,我便产生了一个想法:把在实战中积累的经验以及过去学习的知识记录下来,既能作为自己成长的见证,也能与同行交流分享,携手攻克技</div> </li> <li><a href="/article/1900719683020058624.htm" title="Vue.js的内联样式绑定:style的多种用法" target="_blank">Vue.js的内联样式绑定:style的多种用法</a> <span class="text-muted">阿珊和她的猫</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>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录引言`style`属性的基本概念`style`属性的用法1.绑定对象2.</div> </li> <li><a href="/article/1900717416204267520.htm" title="从前端视角理解消息队列:核心问题与实战指南" target="_blank">从前端视角理解消息队列:核心问题与实战指南</a> <span class="text-muted">秋水为渡</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>消息队列(MessageQueue)是现代分布式系统的核心组件之一,它在前后端协作、系统解耦、流量削峰等场景中发挥着重要作用。本文从前端开发者视角出发,解析消息队列的关键问题,并结合实际场景给出解决方案。一、为什么要使用消息队列?1.前端常见场景异步任务处理:用户行为日志上报、实时通知推送流量削峰:应对秒杀活动、大文件上传等瞬时高并发场景系统解耦:前端与后端服务、第三方服务之间的松耦合通信2.前端</div> </li> <li><a href="/article/1900714498755457024.htm" title="前端请求全面解析:AJAX、Axios 与 Fetch 的使用详解与代码示例" target="_blank">前端请求全面解析:AJAX、Axios 与 Fetch 的使用详解与代码示例</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/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前端请求全面解析:AJAX、Axios与Fetch的使用详解与代码示例前端请求全面解析:AJAX、Axios与Fetch的使用详解与代码示例1.AJAX——传统的异步请求1.1基本用法示例1.2AJAX特点2.FetchAPI——现代化请求方案2.1基本用法示例2.2Fetch特点3.Axios——第三方HTTP请求库3.1安装Axios3.2基本用法示例3.3Axios特点4.总结前端请求全面解</div> </li> <li><a href="/article/1900700369239994368.htm" title="【MyBatis-Plus 分页插件】深入分析和实战解析" target="_blank">【MyBatis-Plus 分页插件】深入分析和实战解析</a> <span class="text-muted">Yan.love</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>分页是Web应用开发中的高频需求,而在MyBatis的生态中,MyBatis-Plus分页插件PaginationInnerInterceptor和MyBatis的PageHelper是两种常见的实现方案。本文将通过工作机制、使用方法和细节剖析,带你循序渐进地掌握这两种方式,并为你的项目选择提供指导。一、什么是分页?分页的核心目标是减少数据传输量和前端渲染压力。通过限制每次查询的结果数量,分页能够</div> </li> <li><a href="/article/1900679818689703936.htm" title="jwt的token自动续约_关于JWT Token 自动续期的解决方案" target="_blank">jwt的token自动续约_关于JWT Token 自动续期的解决方案</a> <span class="text-muted">weixin_39608301</span> <a class="tag" taget="_blank" href="/search/jwt%E7%9A%84token%E8%87%AA%E5%8A%A8%E7%BB%AD%E7%BA%A6/1.htm">jwt的token自动续约</a> <div>前言在前后端分离的开发模式下,前端用户登录成功后后端服务会给用户颁发一个jwttoken。前端(如vue)在接收到jwttoken后会将token存储到LocalStorage中。后续每次请求都会将此token放在请求头中传递到后端服务,后端服务会有一个过滤器对token进行拦截校验,校验token是否过期,如果token过期则会让前端跳转到登录页面重新登录。因为jwttoken中一般会包含用户的</div> </li> <li><a href="/article/1900676026313273344.htm" title="用 Pinia 点燃 Vue 3 应用:状态管理革新之旅" target="_blank">用 Pinia 点燃 Vue 3 应用:状态管理革新之旅</a> <span class="text-muted">心中的灯塔</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>用Pinia点燃Vue3应用:状态管理革新之旅用Pinia点燃Vue3应用:状态管理革新之旅什么是Pinia?安装与基础配置创建和使用Store定义Store在组件中使用Store高级用法组合多个Store持久化状态总结用Pinia点燃Vue3应用:状态管理革新之旅在构建现代前端应用时,如何高效管理状态一直是开发者关注的焦点。随着Vue3的普及,官方推荐的状态管理方案Pinia因其轻量、灵活和易于</div> </li> <li><a href="/article/1900676005786349568.htm" title="使用Lodash工具后代码行数瞬间缩短..." target="_blank">使用Lodash工具后代码行数瞬间缩短...</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/lodasharraylist/1.htm">lodasharraylist</a> <div>背景:最近在做报表.涉及到echarts图表.多层柱状图叠加展示.然后后端给出来的结构是二维数组.需要前端自行处理成图表可用的数据格式.echarts数据是是动态的.需求效果图的样子:echarts相似的官网案例代码:option={tooltip:{trigger:'axis',},legend:{data:['Direct','MailAd','AffiliateAd','VideoAd','</div> </li> <li><a href="/article/1900672239892754432.htm" title="计算机毕业设计Java河南省农村多元化养老服务管理系统设计与实现(源码+系统+mysql数据库+lw文档)" target="_blank">计算机毕业设计Java河南省农村多元化养老服务管理系统设计与实现(源码+系统+mysql数据库+lw文档)</a> <span class="text-muted">山逸网络</span> <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/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>计算机毕业设计Java河南省农村多元化养老服务管理系统设计与实现(源码+系统+mysql数据库+lw文档)计算机毕业设计Java河南省农村多元化养老服务管理系统设计与实现(源码+系统+mysql数据库+lw文档)本源码技术栈:项目架构:B/S架构开发语言:Java语言开发软件:ideaeclipse前端技术:Layui、HTML、CSS、JS、JQuery等技术后端技术:JAVA运行环境:Win1</div> </li> <li><a href="/article/1900664166356676608.htm" title="模拟类似 DeepSeek 的对话" target="_blank">模拟类似 DeepSeek 的对话</a> <span class="text-muted">二川bro</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%99%BA%E8%83%BDAI/1.htm">智能AI</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> <div>以下是一个完整的JavaScript数据流式获取实现方案,模拟类似DeepSeek的对话式逐段返回效果。包含前端实现、后端模拟和详细注释:流式对话演示#output{border:1pxsolid#ccc;padding:20px;margin:20px;min-height:200px;font-family:monospace;white-space:pre-wrap;}.loading{di</div> </li> <li><a href="/article/1900662653718687744.htm" title="前端工具链:Gulp和Grunt有什么区别?如何使用它们进行自动化构建?" target="_blank">前端工具链:Gulp和Grunt有什么区别?如何使用它们进行自动化构建?</a> <span class="text-muted">破碎的天堂鸟</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%95%99%E7%A8%8B/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/gulp/1.htm">gulp</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a> <div>Gulp和Grunt是前端开发中常用的自动化构建工具,它们都基于Node.js,但它们在设计理念、使用方式和性能表现上存在显著差异。以下将详细说明它们的区别以及如何使用它们进行自动化构建。Gulp与Grunt的区别1.设计理念Grunt:基于配置(Configuration-based)。Grunt通过定义任务配置文件(如Gruntfile.js)来完成任务,强调的是“配置优于代码”,即通过配置文</div> </li> <li><a href="/article/1900646246197030912.htm" title="前端流式输出实现详解:从原理到实践" target="_blank">前端流式输出实现详解:从原理到实践</a> <span class="text-muted">代码剑客588</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端流式输出实现详解:从原理到实践前言一、流式输出核心原理1.1什么是流式输出?1.2技术优势对比1.3关键技术支撑二、原生JavaScript实现方案2.1使用FetchAPI流式处理关键点解析:2.2处理SSE(Server-SentEvents)三、主流框架实现示例3.1React实现方案3.2Vue实现方案四、高级优化策略4.1性能优化4.2用户体验增强4.3安全注意事项五、实际应用案例5</div> </li> <li><a href="/article/1900645489993379840.htm" title="全网最全luckysheet协同编辑导出功能,包含单元格样式、超链接、数据验证、条件格式、图片导出、批注、数据透视图等等复杂功能的导出" target="_blank">全网最全luckysheet协同编辑导出功能,包含单元格样式、超链接、数据验证、条件格式、图片导出、批注、数据透视图等等复杂功能的导出</a> <span class="text-muted">熙熙鬼</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前言:最近公司准备研究使用luckySheet,为了开源节流,在开掉了前端大佬的情况下,这苦差事儿落在了我这个前端菜鸟身上。无奈,只能打开luckysheet官网,仔细研读文档,并照着敲了个在线协同的demo。本以为这事儿算是结束,谁知,公司来了新需求,要做导入导出功能,又是一番查找资料后,决定先做导出,哈哈哈,别问为什么,问就是因为导出相关的文档丰富,可操作性强。废话结束,进入正题:1.在官网找</div> </li> <li><a href="/article/1900642088417030144.htm" title="前端请求全面解析:AJAX、Axios 与 Fetch 的使用详解与代码示例" target="_blank">前端请求全面解析:AJAX、Axios 与 Fetch 的使用详解与代码示例</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/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前端请求全面解析:AJAX、Axios与Fetch的使用详解与代码示例前端请求全面解析:AJAX、Axios与Fetch的使用详解与代码示例1.AJAX——传统的异步请求1.1基本用法示例1.2AJAX特点2.FetchAPI——现代化请求方案2.1基本用法示例2.2Fetch特点3.Axios——第三方HTTP请求库3.1安装Axios3.2基本用法示例3.3Axios特点4.总结前端请求全面解</div> </li> <li><a href="/article/1900628203911835648.htm" title="Vue Markdown 编辑器全攻略:轻松集成 MD 编辑器到前端项目" target="_blank">Vue Markdown 编辑器全攻略:轻松集成 MD 编辑器到前端项目</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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>VueMarkdown编辑器全攻略:轻松集成MD编辑器到前端项目1.为什么选择Markdown编辑器?2.安装v-md-editor3.全局配置与集成4.在组件中使用Markdown编辑器5.高级配置与自定义功能6.总结在现代前端开发中,Markdown编辑器被广泛应用于博客、内容管理系统、在线文档等场景。本文将以Vue3为例,详细介绍如何使用v-md-editor库在项目中集成Markdown编</div> </li> <li><a href="/article/1900626061155168256.htm" title="知识库全链路交互逻辑" target="_blank">知识库全链路交互逻辑</a> <span class="text-muted">賢843</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80/1.htm">软件测试理论基础</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>阶段顺序URL输入→网络连接→前端请求→后端处理→数据库交互→数据返回→前端渲染→连接关闭阶段1:用户输入URL用户行为:在浏览器地址栏输入`https://knowledge.com/search?keyword=金融趋势`浏览器动作:“浏览器解析URL:​协议补全:若用户省略协议,浏览器自动添加https://(若网站支持HTTPS)​字符转义:对中文、空格等特殊字符编码(如金融趋势→%E9%</div> </li> <li><a href="/article/1900618621839798272.htm" title="Sass (Scss) 与 Less 的区别与选择" target="_blank">Sass (Scss) 与 Less 的区别与选择</a> <span class="text-muted">智能编织者</span> <a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/scss/1.htm">scss</a><a class="tag" taget="_blank" href="/search/less/1.htm">less</a> <div>Sass与Less的区别与选择1.语法差异2.特性与支持3.兼容性4.选择建议在前端开发中,CSS预处理器如Sass(SyntacticallyAwesomeStylesheets)和Less被广泛使用,它们通过引入变量、嵌套规则、混合、函数等特性,使CSS的开发过程更加高效和灵活。Sass和Less作为两大主流CSS预处理器,各自具有独特的优点和特性。本文将详细探讨Sass(特别是其语法扩展Sc</div> </li> <li><a href="/article/1900586092499890176.htm" title="React 和 Vue _使用区别" target="_blank">React 和 Vue _使用区别</a> <span class="text-muted">开心小老虎</span> <a class="tag" taget="_blank" href="/search/react%E7%9F%A5%E8%AF%86%E7%82%B9%2B%E7%BB%84%E4%BB%B6/1.htm">react知识点+组件</a><a class="tag" taget="_blank" href="/search/vue3%E7%9F%A5%E8%AF%86%E7%82%B9%2B%E7%BB%84%E4%BB%B6/1.htm">vue3知识点+组件</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9/1.htm">前端知识点</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录一、框架介绍1.Vue2.React二、框架结构1.创建应用2.框架结构三、使用区别1.单页面组成2.样式3.显示响应式数据4.响应式html标签属性5.控制元素显隐6.条件渲染7.渲染列表react和vue是目前前端比较流行的两大框架,前端程序员应该将两种框架都掌握,本文总结一些基本知识点的使用区别。一、框架介绍1.VueVue是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。</div> </li> <li><a href="/article/1900582433477160960.htm" title="Vue3 + TypeScript 实战经验:2025年高效开发指南" target="_blank">Vue3 + TypeScript 实战经验:2025年高效开发指南</a> <span class="text-muted">ctrl_cv工程师¥</span> <a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</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> <div>在2024年的前端工程化浪潮中,Vue3与TypeScript已成为企业级应用的黄金组合。本文将基于多个真实项目经验,从工程规范、类型安全、性能优化三个维度,分享实战技巧与避坑指南。一、工程配置:构建坚如磐石的基础1.脚手架选择与优化1.1推荐方案:使用Vite+create-vue初始化项目(2024年默认模板已集成TypeScript)关键配置://vite.config.tsexportde</div> </li> <li><a href="/article/1900566668925530112.htm" title="工程化与框架系列(32)--前端测试实践指南" target="_blank">工程化与框架系列(32)--前端测试实践指南</a> <span class="text-muted">一进制ᅟᅠ        ‌‍‎‏ </span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E4%B8%8E%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> <div>前端测试实践指南引言前端测试是保证应用质量的重要环节。本文将深入探讨前端测试的各个方面,包括单元测试、集成测试、端到端测试等,并提供实用的测试工具和最佳实践。测试概述前端测试主要包括以下类型:单元测试:测试独立组件和函数集成测试:测试多个组件的交互端到端测试:模拟用户行为的完整测试性能测试:测试应用性能指标快照测试:UI组件的视觉回归测试测试工具实现测试运行器//测试运行器类classTestRu</div> </li> <li><a href="/article/1900561741394276352.htm" title="SEO 优化" target="_blank">SEO 优化</a> <span class="text-muted">前端岳大宝</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A0%B8%E5%BF%83%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%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/html/1.htm">html</a> <div>以下是SEO(搜索引擎优化)的基础知识点梳理,从前端技术、内容策略到搜索引擎原理,覆盖核心优化方向:一、SEO基础概念定义与目标SEO是通过优化网站结构、内容和技术,提升网站在搜索引擎自然搜索结果中的排名,吸引更多免费流量。核心目标:满足用户搜索意图,同时符合搜索引擎爬虫的抓取规则。搜索引擎工作原理爬取(Crawling):搜索引擎蜘蛛(如Googlebot)抓取网页内容。索引(Indexing)</div> </li> <li><a href="/article/1900550896207589376.htm" title="代练系统源码小程序如何助力游戏代练行业数字化转型?" target="_blank">代练系统源码小程序如何助力游戏代练行业数字化转型?</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/mysqlvue.jsphp/1.htm">mysqlvue.jsphp</a> <div>在电子竞技日益成为全球性娱乐和文化现象的今天,游戏代练服务作为连接高水平玩家与普通玩家的桥梁,其市场需求迅速增长。为满足这一需求,多客代练系统应运而生,它不仅简化了代练服务的匹配流程,还通过智能化管理提升了服务质量和用户体验。本文将深入探讨多客代练系统的核心优势、用户价值以及它如何塑造游戏竞技行业的未来。源码获取地址!!!!请点击!!!!前端框架主要负责用户界面的展示和交互。多客代练系统采用:un</div> </li> <li><a href="/article/1900544459133743104.htm" title="前端笔试高频算法题及JavaScript实现" target="_blank">前端笔试高频算法题及JavaScript实现</a> <span class="text-muted">GISer_Jinger</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>以下是前端笔试常见的编程算法题及JavaScript代码现,结合最新面试题整理:一、数组/字符串处理两数之和找出数组中两数之和等于目标值的索引consttwoSum=(nums,target)=>{constmap=newMap();for(leti=0;i{letmap=newMap(),max=0,left=0;for(letright=0;right[...newSet(arr.flat(I</div> </li> <li><a href="/article/1900538909327159296.htm" title="工程化与框架系列(31)--前端依赖管理实践" target="_blank">工程化与框架系列(31)--前端依赖管理实践</a> <span class="text-muted">一进制ᅟᅠ        ‌‍‎‏ </span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E4%B8%8E%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> <div>前端依赖管理实践引言前端依赖管理是现代Web开发中的重要环节。本文将深入探讨前端依赖管理的最佳实践,包括包管理工具、版本控制、依赖分析和优化等方面,帮助开发者更好地管理项目依赖。依赖管理概述前端依赖管理主要包括以下方面:包管理工具:npm、yarn、pnpm等版本控制:语义化版本、锁文件等依赖分析:依赖树、循环依赖等依赖优化:体积优化、重复依赖等安全管理:漏洞检测、更新维护等依赖管理工具实现依赖分</div> </li> <li><a href="/article/63.htm" title="关于旗正规则引擎规则中的上传和下载问题" target="_blank">关于旗正规则引擎规则中的上传和下载问题</a> <span class="text-muted">何必如此</span> <a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD/1.htm">文件下载</a><a class="tag" taget="_blank" href="/search/%E5%8E%8B%E7%BC%A9/1.htm">压缩</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/1.htm">文件上传</a> <div>文件的上传下载都是数据流的输入输出,大致流程都是一样的。 一、文件打包下载 1.文件写入压缩包 string mainPath="D:\upload\";     下载路径 string tmpfileName=jar.zip;        &n</div> </li> <li><a href="/article/190.htm" title="【Spark九十九】Spark Streaming的batch interval时间内的数据流转源码分析" target="_blank">【Spark九十九】Spark Streaming的batch interval时间内的数据流转源码分析</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a> <div>  以如下代码为例(SocketInputDStream): Spark Streaming从Socket读取数据的代码是在SocketReceiver的receive方法中,撇开异常情况不谈(Receiver有重连机制,restart方法,默认情况下在Receiver挂了之后,间隔两秒钟重新建立Socket连接),读取到的数据通过调用store(textRead)方法进行存储。数据</div> </li> <li><a href="/article/317.htm" title="spark master web ui 端口8080被占用解决方法" target="_blank">spark master web ui 端口8080被占用解决方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/8080/1.htm">8080</a><a class="tag" taget="_blank" href="/search/%E7%AB%AF%E5%8F%A3%E5%8D%A0%E7%94%A8/1.htm">端口占用</a><a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/master+web+ui/1.htm">master web ui</a> <div>spark master web ui 默认端口为8080,当系统有其它程序也在使用该接口时,启动master时也不会报错,spark自己会改用其它端口,自动端口号加1,但为了可以控制到指定的端口,我们可以自行设置,修改方法:   1、cd SPARK_HOME/sbin   2、vi start-master.sh     3、定位到下面部分</div> </li> <li><a href="/article/444.htm" title="oracle_执行计划_谓词信息和数据获取" target="_blank">oracle_执行计划_谓词信息和数据获取</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%89%A7%E8%A1%8C%E8%AE%A1%E5%88%92/1.htm">执行计划</a> <div>  oracle_执行计划_谓词信息和数据获取(上) 一:简要说明 在查看执行计划的信息中,经常会看到两个谓词filter和access,它们的区别是什么,理解了这两个词对我们解读Oracle的执行计划信息会有所帮助。 简单说,执行计划如果显示是access,就表示这个谓词条件的值将会影响数据的访问路径(表还是索引),而filter表示谓词条件的值并不会影响数据访问路径,只起到</div> </li> <li><a href="/article/571.htm" title="spring中datasource配置" target="_blank">spring中datasource配置</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/dataSource/1.htm">dataSource</a> <div>datasource配置有很多种,我介绍的一种是采用c3p0的,它的百科地址是: http://baike.baidu.com/view/920062.htm   <!-- spring加载资源文件 --> <bean name="propertiesConfig" class="org.springframework.b</div> </li> <li><a href="/article/698.htm" title="web报表工具FineReport使用中遇到的常见报错及解决办法(三)" target="_blank">web报表工具FineReport使用中遇到的常见报错及解决办法(三)</a> <span class="text-muted">老A不折腾</span> <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/FAQ/1.htm">FAQ</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E8%BD%AF%E4%BB%B6/1.htm">报表软件</a> <div>这里写点抛砖引玉,希望大家能把自己整理的问题及解决方法晾出来,Mark一下,利人利己。   出现问题先搜一下文档上有没有,再看看度娘有没有,再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题,大多文档上都有提到的。 1、repeated column width is largerthan paper width: 这个看这段话应该是很好理解的。比如做的模板页面宽度只能放</div> </li> <li><a href="/article/825.htm" title="mysql 用户管理" target="_blank">mysql 用户管理</a> <span class="text-muted">墙头上一根草</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/user/1.htm">user</a> <div>1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户mysql> insert into mysql.user(Host,User,Password) values(‘localhost’,'jeecn’,password(‘jeecn’));//刷新系统权限表mysql>flush privileges;这样就创建了一个名为:</div> </li> <li><a href="/article/952.htm" title="关于使用Spring导致c3p0数据库死锁问题" target="_blank">关于使用Spring导致c3p0数据库死锁问题</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Spring+%E5%85%A5%E9%97%A8/1.htm">Spring 入门</a><a class="tag" taget="_blank" href="/search/Spring+%E5%AE%9E%E4%BE%8B/1.htm">Spring 实例</a><a class="tag" taget="_blank" href="/search/Spring3/1.htm">Spring3</a><a class="tag" taget="_blank" href="/search/Spring+%E6%95%99%E7%A8%8B/1.htm">Spring 教程</a> <div>这个问题我实在是为整个 springsource 的员工蒙羞 如果大家使用 spring 控制事务,使用 Open Session In View 模式, com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.</div> </li> <li><a href="/article/1079.htm" title="百度词库联想" target="_blank">百度词库联想</a> <span class="text-muted">annan211</span> <a class="tag" taget="_blank" href="/search/%E7%99%BE%E5%BA%A6/1.htm">百度</a> <div> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title&g</div> </li> <li><a href="/article/1206.htm" title="int数据与byte之间的相互转换实现代码" target="_blank">int数据与byte之间的相互转换实现代码</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E4%BD%8D%E7%A7%BB/1.htm">位移</a><a class="tag" taget="_blank" href="/search/int%E8%BD%ACbyte/1.htm">int转byte</a><a class="tag" taget="_blank" href="/search/byte%E8%BD%ACint/1.htm">byte转int</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%AE%9E%E7%8E%B0/1.htm">基本数据类型的实现</a> <div>在BMP文件和文件压缩时需要用到的int与byte转换,现将理解的贴出来;   主要是要理解;位移等概念 http://baihe747.iteye.com/blog/2078029   int转byte;   byte转int;   /** * 字节转成int,int转成字节 * @author Administrator * </div> </li> <li><a href="/article/1333.htm" title="简单模拟实现数据库连接池" target="_blank">简单模拟实现数据库连接池</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/%E7%AE%80%E5%8D%95%E6%A8%A1%E6%8B%9F%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">简单模拟实现数据库连接池</a> <div>简单模拟实现数据库连接池 实例1: package com.bijian.thread; public class DB { //private static final int MAX_COUNT = 10; private static final DB instance = new DB(); private int count = 0; private i</div> </li> <li><a href="/article/1460.htm" title="一种基于Weblogic容器的鉴权设计" target="_blank">一种基于Weblogic容器的鉴权设计</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a> <div>        服务器对请求的鉴权可以在请求头中加Authorization之类的key,将用户名、密码保存到此key对应的value中,当然对于用户名、密码这种高机密的信息,应该对其进行加砂加密等,最简单的方法如下: String vuser_id = "weblogic"; String vuse</div> </li> <li><a href="/article/1587.htm" title="【RPC框架Hessian二】Hessian 对象序列化和反序列化" target="_blank">【RPC框架Hessian二】Hessian 对象序列化和反序列化</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hessian/1.htm">hessian</a> <div> 任何一个对象从一个JVM传输到另一个JVM,都要经过序列化为二进制数据(或者字符串等其他格式,比如JSON),然后在反序列化为Java对象,这最后都是通过二进制的数据在不同的JVM之间传输(一般是通过Socket和二进制的数据传输),本文定义一个比较符合工作中。   1. 定义三个POJO    Person类 package com.tom.hes</div> </li> <li><a href="/article/1714.htm" title="【Hadoop十四】Hadoop提供的脚本的功能" target="_blank">【Hadoop十四】Hadoop提供的脚本的功能</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>1. hadoop-daemon.sh 1.1 启动HDFS ./hadoop-daemon.sh start namenode ./hadoop-daemon.sh start datanode  通过这种逐步启动的方式,比start-all.sh方式少了一个SecondaryNameNode进程,这不影响Hadoop的使用,其实在 Hadoop2.0中,SecondaryNa</div> </li> <li><a href="/article/1841.htm" title="中国互联网走在“灰度”上" target="_blank">中国互联网走在“灰度”上</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/%E7%AE%A1%E7%90%86+%E7%81%B0%E5%BA%A6/1.htm">管理 灰度</a> <div>中国互联网走在“灰度”上(转) 文/孕峰   第一次听说灰度这个词,是任正非说新型管理者所需要的素质。第二次听说是来自马化腾。似乎其他人包括马云也用不同的语言说过类似的意思。   灰度这个词所包含的意义和视野是广远的。要理解这个词,可能同样要用“灰度”的心态。灰度的反面,是规规矩矩,清清楚楚,泾渭分明,严谨条理,是决不妥协,不转弯,认死理。黑白分明不是灰度,像彩虹那样</div> </li> <li><a href="/article/1968.htm" title="java-51-输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字。" target="_blank">java-51-输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字。</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class PrintMatrixClockwisely { /** * Q51.输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字。 例如:如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 </div> </li> <li><a href="/article/2095.htm" title="mongoDB 用户管理" target="_blank">mongoDB 用户管理</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/mongoDB%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86/1.htm">mongoDB用户管理</a> <div>  1:添加用户    第一次设置用户需要进入admin数据库下设置超级用户(use admin)      db.addUsr({user:'useName',pwd:'111111',roles:[readWrite,dbAdmin]});    第一个参数用户的名字    第二个参数</div> </li> <li><a href="/article/2222.htm" title="[游戏与生活]玩暗黑破坏神3的一些问题" target="_blank">[游戏与生活]玩暗黑破坏神3的一些问题</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a> <div>    暗黑破坏神3是有史以来最让人激动的游戏。。。。但是有几个问题需要我们注意      玩这个游戏的时间,每天不要超过一个小时,且每次玩游戏最好在白天      结束游戏之后,最好在太阳下面来晒一下身上的暗黑气息,让自己恢复人的生气   &nb</div> </li> <li><a href="/article/2349.htm" title="java 二维数组如何存入数据库" target="_blank">java 二维数组如何存入数据库</a> <span class="text-muted">cuiyadll</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>using System; using System.Linq; using System.Text; using System.Windows.Forms; using System.Xml; using System.Xml.Serialization; using System.IO; namespace WindowsFormsApplication1 { </div> </li> <li><a href="/article/2476.htm" title="本地事务和全局事务Local Transaction and Global Transaction(JTA)" target="_blank">本地事务和全局事务Local Transaction and Global Transaction(JTA)</a> <span class="text-muted">darrenzhu</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/local/1.htm">local</a><a class="tag" taget="_blank" href="/search/global/1.htm">global</a><a class="tag" taget="_blank" href="/search/transaction/1.htm">transaction</a> <div>Configuring Spring and JTA without full Java EE http://spring.io/blog/2011/08/15/configuring-spring-and-jta-without-full-java-ee/ Spring doc -Transaction Management http://docs.spring.io/spri</div> </li> <li><a href="/article/2603.htm" title="Linux命令之alias - 设置命令的别名,让 Linux 命令更简练" target="_blank">Linux命令之alias - 设置命令的别名,让 Linux 命令更简练</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/alias/1.htm">alias</a> <div>用途说明 设置命令的别名。在linux系统中如果命令太长又不符合用户的习惯,那么我们可以为它指定一个别名。虽然可以为命令建立“链接”解决长文件名的问 题,但对于带命令行参数的命令,链接就无能为力了。而指定别名则可以解决此类所有问题【1】。常用别名来简化ssh登录【见示例三】,使长命令变短,使常 用的长命令行变短,强制执行命令时询问等。   常用参数 格式:alias 格式:ali</div> </li> <li><a href="/article/2730.htm" title="yii2 restful web服务[格式响应]" target="_blank">yii2 restful web服务[格式响应]</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a> <div>响应格式 当处理一个 RESTful API 请求时, 一个应用程序通常需要如下步骤 来处理响应格式: 确定可能影响响应格式的各种因素, 例如媒介类型, 语言, 版本, 等等。 这个过程也被称为 content negotiation。 资源对象转换为数组, 如在 Resources 部分中所描述的。 通过 [[yii\rest\Serializer]]</div> </li> <li><a href="/article/2857.htm" title="MongoDB索引调优(2)——[十]" target="_blank">MongoDB索引调优(2)——[十]</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/MongoDB%E7%B4%A2%E5%BC%95%E4%BC%98%E5%8C%96/1.htm">MongoDB索引优化</a> <div>转载请出自出处:http://eksliang.iteye.com/blog/2178555 一、概述       上一篇文档中也说明了,MongoDB的索引几乎与关系型数据库的索引一模一样,优化关系型数据库的技巧通用适合MongoDB,所有这里只讲MongoDB需要注意的地方 二、索引内嵌文档     可以在嵌套文档的键上建立索引,方式与正常</div> </li> <li><a href="/article/2984.htm" title="当滑动到顶部和底部时,实现Item的分离效果的ListView" target="_blank">当滑动到顶部和底部时,实现Item的分离效果的ListView</a> <span class="text-muted">gundumw100</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>拉动ListView,Item之间的间距会变大,释放后恢复原样; package cn.tangdada.tangbang.widget; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import andr</div> </li> <li><a href="/article/3111.htm" title="程序员用HTML5制作的爱心树表白动画" target="_blank">程序员用HTML5制作的爱心树表白动画</a> <span class="text-muted">ini</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>体验效果:http://keleyi.com/keleyi/phtml/html5/31.htmHTML代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <ti</div> </li> <li><a href="/article/3238.htm" title="预装windows 8 系统GPT模式的ThinkPad T440改装64位 windows 7旗舰版" target="_blank">预装windows 8 系统GPT模式的ThinkPad T440改装64位 windows 7旗舰版</a> <span class="text-muted">kakajw</span> <a class="tag" taget="_blank" href="/search/ThinkPad/1.htm">ThinkPad</a><a class="tag" taget="_blank" href="/search/%E9%A2%84%E8%A3%85/1.htm">预装</a><a class="tag" taget="_blank" href="/search/%E6%94%B9%E8%A3%85/1.htm">改装</a><a class="tag" taget="_blank" href="/search/windows+7/1.htm">windows 7</a><a class="tag" taget="_blank" href="/search/windows+8/1.htm">windows 8</a> <div>  该教程具有普遍参考性,特别适用于联想的机器,其他品牌机器的处理过程也大同小异。 该教程是个人多次尝试和总结的结果,实用性强,推荐给需要的人!   缘由 小弟最近入手笔记本ThinkPad T440,但是特别不能习惯笔记本出厂预装的Windows 8系统,而且厂商自作聪明地预装了一堆没用的应用软件,消耗不少的系统资源(本本的内存为4G,系统启动完成时,物理内存占用比</div> </li> <li><a href="/article/3365.htm" title="Nginx学习笔记" target="_blank">Nginx学习笔记</a> <span class="text-muted">mcj8089</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>一、安装nginx             1、在nginx官方网站下载一个包,下载地址是:  http://nginx.org/download/nginx-1.4.2.tar.gz      2、WinSCP(ftp上传工</div> </li> <li><a href="/article/3492.htm" title="mongodb 聚合查询每天论坛链接点击次数" target="_blank">mongodb 聚合查询每天论坛链接点击次数</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a> <div>/* 18 */ { "_id" : ObjectId("5596414cbe4d73a327e50274"), "msgType" : "text", "sendTime" : ISODate("2015-07-03T08:01:16.000Z"</div> </li> <li><a href="/article/3619.htm" title="java术语(PO/POJO/VO/BO/DAO/DTO)" target="_blank">java术语(PO/POJO/VO/BO/DAO/DTO)</a> <span class="text-muted">Luob.</span> <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/DTO/1.htm">DTO</a><a class="tag" taget="_blank" href="/search/po/1.htm">po</a><a class="tag" taget="_blank" href="/search/VO+BO/1.htm">VO BO</a> <div> PO(persistant object) 持久对象 在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数据库的操作. VO(value object) 值对象 通</div> </li> <li><a href="/article/3746.htm" title="算法复杂度" target="_blank">算法复杂度</a> <span class="text-muted">Wuaner</span> <a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div>Time Complexity & Big-O: http://stackoverflow.com/questions/487258/plain-english-explanation-of-big-o http://bigocheatsheet.com/ http://www.sitepoint.com/time-complexity-algorithms/ </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>