Gbosh
Gbosh

03 html基础详解

02html基础详解

文章目录

  • 02html基础详解
    • 1、HTML编辑器
    • 2、标签
      • html常用标签
    • 3、元素
    • 4、属性
      • 常用属性
    • 5、标题
      • 水平线
      • 注释
    • 6、段落
      • 折行
    • 7、格式化标签
      • 属性dir
    • 8、链接
      • 属性target
      • 属性id
    • 9、头部
      • 标签head
      • 标签title
      • 标签base
      • 标签link
      • 标签style
      • 标签meta
      • script元素
    • 10、CSS
      • 背景色属性background-color
      • 字体相关属性
      • 属性text-align
      • 内部样式表
      • 外部样式表
    • 11、图像
      • 标签image
      • 源属性src
      • 属性alt
      • 属性height和width
      • 属性float
      • 属性usemap
      • 属性title(image)
      • 属性border
    • 12、标签map
    • 13、标签area
      • 属性coords
      • 属性shape
      • 属性name（map）
    • 14、表格
    • 15、列表
    • 16、区块
      • 标签div
      • 标签span
    • 17、布局
    • 18、表单
    • 19、框架
      • 标签iframe
        • 属性height
        • 属性width
        • 属性src
        • 属性frameborder
    • 20、颜色
      • 属性rgba
    • 21、脚本
      • 标签script
      • 标签noscript
    • 22、字符实体
    • 23、URL

1、HTML编辑器

html编辑器推荐：

  • VS Code：https://code.visualstudio.com/
  • 在线编辑器：https://c.runoob.com/front-end/61/

  • Notepad3：Download Notepad3 - Notepad replacement with syntax highlighting.

  • SublimeText3汉化版：http://www.php.cn/xiazai/gongju/93

我用的是Notepad3，它是一款轻便快捷的基于 Scintilla 的文本编辑器，具有语法高亮、代码折叠、括号匹配、自动缩进、编码转换、换行格式转换、多次撤销或重做、书签、基于正则表达式的查找和替换等实用功能。它占用的内存很小，但功能强大，足以处理大多数编程工作。

03 html基础详解_第1张图片

2、标签

由于html文档主要由标签组成，数不胜数，这里先列举一些常用标签。

html常用标签

定义文档类型。
定义一个 html文档
</code></td> <td>为文档定义一个标题</td> </tr> <tr> <td><code><body></code></td> <td>定义文档的主体</td> </tr> <tr> <td><code><h1>-<h6></code></td> <td>定义 html标题</td> </tr> <tr> <td><code><p></code></td> <td>定义一个段落</td> </tr> <tr> <td><code><br></code></td> <td>定义简单的折行。</td> </tr> <tr> <td><code><hr></code></td> <td>定义水平线。</td> </tr> <tr> <td><code><!--xxx--></code></td> <td>定义一个注释xxx</td> </tr> </tbody> </table> <h3>3、元素</h3> <ul> <li><strong>HTML元素以<em>开始标签</em>起始，以<em>结束标签</em>终止，元素的内容是<em>开始标签</em>与<em>结束标签</em>之间的内容。</strong> <ul> <li><code><p></code>这是一个段落。<code></p></code></li> <li><code><br></code>换行。</li> </ul> </li> <li>某些HTML元素具有空内容(empty content)，称为<strong>空元素</strong>，以开始标签终止。通过在开始标签中添加斜杠（如<code><br />, <input type="text" id="qwq"/></code>），在开始标签中进行关闭。HTML中，空标签可以没有结束标签；在XHTML中，空标签必须被正确关闭。</li> </ul> <ul> <li>大多数HTML元素可拥有<strong>属性</strong>。</li> <li>大多数HTML元素可嵌套。HTML文档由相互嵌套的 HTML元素构成。</li> <li>HTML标签大小写不敏感，但应使用小写。</li> <li>一些元素的属性（布尔属性），取值只有取或不取。如：<code><option></code>的selected属性，会被记为：<code>当selected="selected"时，执行...</code>，事实上只需在定义元素时写出该属性<code>selected</code>该属性存在（不需设定值），或为该属性定义任意值，都会执行对应操作（但注意，在XHTML中不允许使用这样的属性简写）。在JS中将其设为空（如<code>selected=""</code>）会取消该选项。使用<code>ture/false</code>也可表示开启/关闭该选项。</li> <li>许多属性会以像素或百分比作为单位，默认会以像素（只需填写数字，可省略px）为单位。属性值必须有引号。</li> </ul> <h3>4、属性</h3> <p><strong>属性是html元素提供的附加信息</strong>。由于每个标签都有不同的属性，本节内容先列举一些常用属性，其他常用属性会在介绍该属性常出现的标签时做介绍。</p> <ul> <li> <p>属性一般描述于<strong>开始标签</strong>。</p> </li> <li> <p>属性总是以名称/值对的形式出现，<strong>比如：name=“value”</strong>。</p> <p>属性实例：</p> <p>html链接由<code><a></code>标签定义。链接的地址在 <strong>href 属性</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://blog.csdn.net/m0_53297256<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> <li> <p>属性和属性值对大小写不敏感。不过，新版本的 (X)html要求使用小写属性。</p> </li> </ul> <h4>常用属性</h4> <ul> <li><strong><code>value</code></strong></li> <li><strong><code>title</code></strong><br> <code>title</code>属性定义关于元素的额外信息。其定义的文本，会在鼠标移动到元素内容上时显示。许多元素都有<code>title</code>属性。 <ul> <li><code>abbr</code>,<code>acronym</code>元素必须含<code>title</code>属性，两个元素分别用于表示缩略语、首字母缩写，<code>title</code>用于表示完整的表达。</li> </ul> </li> <li><strong><code>align</code></strong><br> 设置对齐。取值为<code>left, right, center</code>。<br> 不推荐使用，应使用CSS的<code>float</code>属性，如：<code>style="float:right;"</code>（但这似乎无法居中）。</li> <li><strong><code>tagName</code></strong><br> <code>tagName</code>定义了元素的标签类型。如：<code><tr></code>元素的<code>tagName</code>为<code>"TR"</code>。</li> <li><strong>自定义属性</strong><br> 标签在声明时，可以绑定任意它不拥有的属性。但该属性不能直接通过<code>elem.attr</code>获取（会返回<code>undefined</code>），需使用<code>elem.getAttribute("attr")</code>获取（DOM），或<code>$(this).attr("attr")</code>（jQuery）。例：<br> <code>div</code>标签没有<code>name, value</code>属性，但可自定义绑定该属性：<code><div class="A" value="123"></div></code>，并通过<code>document.getElementsByClassName("A")[0].getAttribute("value")</code>或<code>$(".A").attr("value")</code>获取。<br> 属性名可任取。<br> 注意<code>getElementsByName()</code>和<code>getElementsByClassName()</code>返回的是一个<code>list</code>，<code>getElementsById()</code>返回的是拥有指定<code>id</code>的<strong>第一个对象</strong>。</li> </ul> <h3>5、标题</h3> <p><strong>HTML段落标题通过<code><h1></code> - <code><h6></code> 标签来定义</strong>。例如：</p> <p><code>源代码：</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>这是1级标题<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>这是2级标题<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>h3</span><span class="token punctuation">></span></span>这是3级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>这是4级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</span><span class="token punctuation">></span></span>这是5级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span><span class="token punctuation">></span></span>这是6级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span> </code></pre> <p><code>显示效果：</code></p> <blockquote> <h2>这是1级标题</h2> <h3>这是2级标题</h3> <h4>这是3级标题</h4> <h5>这是4级标题</h5> <h6>这是5级标题</h6> <h6>这是6级标题</h6> </blockquote> <p><mark>标题相关标签：水平线、注释。</mark></p> <h4>水平线</h4> <p><code><hr></code>标签在 html页面中创建水平线。hr 元素可用于分隔内容。</p> <h4>注释</h4> <p>可以将注释插入 html代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。</p> <p>注释写法如下:</p> <pre><code class="prism language-html"><span class="token comment"><!-- 这是一个注释 --></span> </code></pre> <h3>6、段落</h3> <p><strong>html段落是通过标签 <code><p></code> 来定义的</strong>。例如：</p> <p><code>源代码：</code></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> <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> <p><code>显示效果：</code></p> <blockquote> <p>这是一个段落</p> <p>这是另一个段落</p> </blockquote> <h4>折行</h4> <p><u>为了避免忘掉写结束标签的情况，可以在段落中插入<code><br></code>标签换行。</u></p> <h3>7、格式化标签</h3> <p>html使用标签 <b>(“bold”) </b>与 <i>(“italic”) </i>对输出的文本进行格式, 如：<strong>粗体</strong> or <em>斜体</em>。这些HTML标签被称为<strong>格式化标签</strong>。</p> <table> <thead> <tr> <th><code><b></code></th> <th><b>这个文本是加粗的</b></th> </tr> </thead> <tbody> <tr> <td><code><strong></code></td> <td><strong>这个文本是加粗的</strong></td> </tr> <tr> <td><code><big> </code></td> <td><big>这个文本字体放大</big></td> </tr> <tr> <td><code><em> </code></td> <td><em>这个文本是斜体的</em></td> </tr> <tr> <td><code><i> </code></td> <td><i>这个文本是斜体的</i></td> </tr> <tr> <td><code><small> </code></td> <td><small>这个文本是缩小的</small></td> </tr> <tr> <td><code><sub> </code></td> <td>这个文本包含<sub>下标</sub></td> </tr> <tr> <td><code><sup> </code></td> <td>这个文本包含<sup>上标</sup></td> </tr> <tr> <td><code><pre> </code></td> <td><pre>被包围在pre标签中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。</pre></td> </tr> <tr> <td><code><code> </code></td> <td><code>定义计算机输出。用于表示计算机源代码或者其他机器可以阅读的文本内容。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。</code></td> </tr> <tr> <td><code><kbd> </code></td> <td>定义键盘文本。以浏览器的默认monospace字体显示。该标签已废弃，不推荐使用，但是可以通过CSS实现丰富的效果。</td> </tr> <tr> <td><code><tt> </code></td> <td><tt>定义打字机文本</tt></td> </tr> <tr> <td><code><samp> </code></td> <td>定义样本文本</td> </tr> <tr> <td><code><var> </code></td> <td>定义变量。</td> </tr> <tr> <td><code><address></code></td> <td><address>定义地址文本</address></td> </tr> <tr> <td><code><abbr> </code></td> <td><abbr>表示一个缩写词或者首字母缩略词。</abbr></td> </tr> <tr> <td><code><acronym></code></td> <td>标签允许明确地声明一个字符序列，它们构成一个单词的首字母缩写或简略语。 标签已从 HTML5 中移除，不应再被使用，Web 开发者应使用 <abbr> 标签。</abbr></td> </tr> <tr> <td><code><bdo> </code></td> <td>指定文本方向。</td> </tr> <tr> <td><code><q> </code></td> <td><q>定义短的引用语,对内容文字自动加引号</q></td> </tr> <tr> <td><code><del> </code></td> <td><del>删除效果</del></td> </tr> <tr> <td><code><ins> </code></td> <td><ins>下划线效果</ins></td> </tr> <tr> <td><code><u> </code></td> <td><u>下划线效果</u></td> </tr> <tr> <td><code><cite> </code></td> <td>定义作品的<cite>标题</cite></td> </tr> <tr> <td><code><blockquote></code></td> <td>定义一个 <blockquote> 摘自另一个源的块引用 </blockquote></td> </tr> <tr> <td><code><dfn></code></td> <td>定义项目</td> </tr> </tbody> </table> <p><big><strong><code><pre></code></strong></big></p> <ul> <li><code><pre></code> 标签的一个常见应用就是用来表示计算机的源代码。</li> <li>可以导致段落断开的标签（例如标题、<code><p></code>和<code><address></code>）<em>绝不能</em>包含在 <code><pre></code> 所定义的块里。</li> </ul> <p><big><strong><code><abbr></code></strong></big></p> <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title属性可用于展示表达的完整版本。例如：</p> <p><code>源代码：</code></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>etcetera<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>etc.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> </code></pre> <p><code>显示效果：</code></p> <blockquote> <p><abbr title="etcetera">etc.</abbr></p> </blockquote> <h4>属性dir</h4> <p><big><strong><code>dir</code></strong></big></p> <p><strong>规定 <bdo> 元素内的文本方向</bdo></strong>。dir = "ltr"从左到右；dir = "rtl"从右到左。例如：</p> <p><code>源码：</code></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>bdo</span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rtl<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>bdo</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> <p><code>显示效果：</code></p> <blockquote> <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> </blockquote> <h3>8、链接</h3> <p><strong>HTML 使用超级链接与网络上的另一个文档相连</strong>。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。</p> <ul> <li> <p><strong>超链接</strong>可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。</p> </li> <li> <p>当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。</p> </li> <li> <p>默认情况下，链接将以以下形式出现在浏览器中：</p> <ul> <li>一个未访问过的链接显示为蓝色字体并带有下划线。</li> <li>访问过的链接显示为紫色并带有下划线。</li> <li>点击链接时，链接显示为红色并带有下划线。</li> </ul> <blockquote> <p>注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。</p> </blockquote> </li> <li> <p><strong>html链接是通过标签 <code><a></code> 来定义的</strong>。例如：</p> <p><code>源代码：</code></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://blog.csdn.net/m0_53297256<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> <p><code>显示效果：</code></p> <blockquote> <p>这是我的博客链接</p> </blockquote> </li> </ul> <h4>属性target</h4> <p>使用 target 属性，你可以<strong>定义被链接的文档在何处显示</strong>。</p> <ul> <li>target=“_blank”, 链接将在新窗口打开</li> <li>target=“_top”，在整个窗口中打开。</li> <li>target=“_self”，在同一框架中打开。（默认）</li> <li>target=“_parent”，在副框架中打开。</li> </ul> <h4>属性id</h4> <p>id 属性可用于<strong>创建一个HTML文档书签</strong>。书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。</p> <p>可以通过设置书签的名字快速找到对应的标签。</p> <h3>9、头部</h3> <h4>标签head</h4> <p><big><strong><code><head></code></strong></big><strong>元素包含了所有的头部标签元素</strong>。在<code><head></code>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。</p> <p>可以添加在头部区域的元素标签为: , </p> <h4>标签title</h4> <p><big><strong><code><title></code></strong></big><strong>标签定义了不同文档的标题</strong>。</p> <ul> <li><code><title></code>在 HTML/XHTML文档中是必需的。</li> </ul> <h4>标签base</h4> <p><big><code><base></code></big> <strong>标签描述了基本的链接地址/链接目标</strong>，该标签作为HTML文档中所有的链接标签的默认链接。</p> <pre><code class="prism language-html"><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>base</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://blog.csdn.net/m0_53297256<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<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> </code></pre> <h4>标签link</h4> <p><big><code><link></code></big> <strong>标签定义了文档与外部资源之间的关系</strong>。<code><link></code>标签通常用于链接到样式表。</p> <pre><code class="prism language-html"><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>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>mystyle.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>head</span><span class="token punctuation">></span></span> </code></pre> <h4>标签style</h4> <p><big><code><style></code></big> <strong>标签定义了HTML文档的样式文件引用地址</strong>。在</p> <pre><code class="prism language-html"><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>style</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 punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>yellow<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">p</span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span>blue <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</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> </code></pre> <h4>标签meta</h4> <p><big><code><meta></code></big><strong>标签描述了一些基本的元数据</strong>。<code><meta></code>标签提供了元数据。元数据也不显示在页面上，但会被浏览器解析。</p> <ul> <li> <p>META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</p> </li> <li> <p>元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。</p> </li> </ul> <p>meta示例：</p> <p>为搜索引擎定义关键词:</p> <pre><code><meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> </code></pre> <p>为网页定义描述内容:</p> <pre><code><meta name="description" content="免费 Web `& 编程 教程"> </code></pre> <p>定义网页作者:</p> <pre><code><meta name="author" content="Gbosh"> </code></pre> <p>每30秒钟刷新当前页面:</p> <pre><code><meta http-equiv="refresh" content="30"> </code></pre> <h4>script元素</h4> <p><code><script></code><strong>标签用于加载脚本文件</strong>，如： JavaScript。</p> <h3>10、CSS</h3> <p><strong>CSS(Cascading Style Sheets)用于渲染HTML元素标签的样式</strong>。</p> <p>CSS 可以通过以下方式添加到HTML中:</p> <ul> <li>内联样式-在HTML元素中使用"style" <strong>属性</strong>。</li> <li>内部样式表-在HTML文档头部<code><head></code>区域使用<code><style></code>元素来包含CSS。</li> <li>外部引用-使用外部CSS文件。</li> </ul> <p>最好的方式是通过外部引用CSS文件。</p> <h4>背景色属性background-color</h4> <p><strong>背景色属性（background-color）定义一个元素的背景颜色</strong>：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</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">background-color</span><span class="token punctuation">:</span>yellow<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>h2</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">background-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>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 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">background-color</span><span class="token punctuation">:</span>green<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>p</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> </code></pre> <h4>字体相关属性</h4> <p><strong>font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式</strong>。</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 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">font-family</span><span class="token punctuation">:</span>宋体<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>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 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">font-family</span><span class="token punctuation">:</span>arial<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span><span class="token property">font-size</span><span class="token punctuation">:</span>20rpx<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>p</span><span class="token punctuation">></span></span> </code></pre> <h4>属性text-align</h4> <p><strong><code>text-align（文字对齐）</code>属性指定文本的水平与垂直对齐方式</strong>。</p> <h4>内部样式表</h4> <p>当单个文件需要特别样式时，就可以使用内部样式表。你可以在<code>head</code>部分通过<code>style</code>标签定义内部样式表</p> <h4>外部样式表</h4> <p>当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。</p> <h3>11、图像</h3> <h4>标签image</h4> <p><strong>html图像是通过标签 <code><img></code> 来定义的</strong>。<code><img></code>是空标签，意思是说，它只包含属性，并且没有闭合标签。</p> <h4>源属性src</h4> <p>要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。URL 指存储图像的位置。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。</p> <h4>属性alt</h4> <p><strong><code>alt</code>属性用来为图像定义一串预备的可替换的文本</strong>。</p> <p>在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。</p> <h4>属性height和width</h4> <p><strong><code>height</code>高度）与<code>width</code>（宽度）属性用于设置图像的高度与宽度</strong>。</p> <ul> <li>属性值默认单位为像素。</li> <li>如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。</li> </ul> <h4>属性float</h4> <p><strong><code>float</code>属性使图片浮动至元素的左边或右边</strong>。</p> <ul> <li> <p>float=“left”——浮动在元素左边。</p> </li> <li> <p>float=“right”——浮动在元素右边。</p> </li> </ul> <p>示例：</p> <p><code>源代码：</code></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 punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Gbosh的博客<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>body</span><span class="token punctuation">></span></span> <img src="https://img-blog.csdnimg.cn/e32508ca8edf482b9de585a488bf48fd.png"/ alt="Gbosh的博客" height="100" width="50" style="float:left">左边是我的博客截图。 <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><code>显示效果：</code></p> <blockquote> Gbosh的博客 <a href="http://img.e-com-net.com/image/info8/d81cf4047e0b48b78052ad700c80ed2c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d81cf4047e0b48b78052ad700c80ed2c.jpg" alt="03 html基础详解_第2张图片" height="384" width="650" style="border:1px solid black;"></a>左边是我的博客截图。 </blockquote> <h4>属性usemap</h4> <p><strong>可以理解为通过该标签，获取映射的“函数”</strong>。该标签的值取自<code><map></code>标签的<code>id</code>属性或<code>name</code>属性。而<code><map></code>标签内容包含了映射关系。</p> <p><code><img></code>中的<code>usemap</code>属性可引用<code><map></code>中的<code>id</code>或<code>name</code>属性（取决于浏览器），所以我们应同时向<code><map></code>添加<code>id</code>和<code>name</code>属性。</p> <h4>属性title(image)</h4> <p><strong>鼠标悬停时显示的内容</strong>。</p> <h4>属性border</h4> <p><strong>设置图像边框的宽度</strong>。</p> <h3>12、标签map</h3> <p><strong>定义图像地图</strong>。</p> <h3>13、标签area</h3> <p><strong>定义图像地图中的可点击区域</strong>。</p> <ul> <li><code>area</code>元素永远嵌套在<code>map</code>元素内部。<code>area</code>元素可定义图像映射中的区域。</li> </ul> <h4>属性coords</h4> <p><strong>规定区域的 x 和 y 坐标</strong>。</p> <ul> <li><code>coords</code>属性与<code>shape</code>属性配合使用，来规定区域的尺寸、形状和位置。</li> </ul> <table> <thead> <tr> <th><em>x1,y1,x2,y2</em></th> <th>如果 shape 属性设置为 “rect”，则该值规定矩形左上角和右下角的坐标。</th> </tr> </thead> <tbody> <tr> <td><em>x,y,radius</em></td> <td>如果 shape 属性设置为 “circ”，则该值规定圆心的坐标和半径。</td> </tr> <tr> <td><em>x1,y1,x2,y2,…,xn,yn</em></td> <td>如果 shape 属性设置为 “poly”，则该值规定多边形各顶点的值。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。</td> </tr> </tbody> </table> <h4>属性shape</h4> <p>规定区域的形状。</p> <ul> <li>rect——矩形</li> <li>circle——圆形</li> <li>poly——多边形</li> </ul> <h4>属性name（map）</h4> <p><strong>图像映射的名称</strong>。</p> <p>示例：</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>planets.gif<span class="token punctuation">"</span></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>145<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>126<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>Planets<span class="token punctuation">"</span></span> <span class="token attr-name">usemap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#planetmap<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>map</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>planetmap<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>area</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rect<span class="token punctuation">"</span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0,0,82,126<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>sun.htm<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>Sun<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>area</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>90,58,3<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>mercur.htm<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>Mercury<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>area</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>124,58,8<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>venus.htm<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>Venus<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>map</span><span class="token punctuation">></span></span> </code></pre> <h3>14、表格</h3> <p><a href="http://img.e-com-net.com/image/info8/bedd249f38ea46c78460fcb319ec781d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bedd249f38ea46c78460fcb319ec781d.jpg" alt="03 html基础详解_第3张图片" width="622" height="476" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/11d6593ae3d643c78cc5e63b32210311.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/11d6593ae3d643c78cc5e63b32210311.jpg" alt="03 html基础详解_第4张图片" width="650" height="410" style="border:1px solid black;"></a></p> <table> <thead> <tr> <th align="center">标签</th> <th align="center">描述</th> </tr> </thead> <tbody> <tr> <td align="center">table</td> <td align="center">定义表格</td> </tr> <tr> <td align="center">th</td> <td align="center">定义表格的表头</td> </tr> <tr> <td align="center">tr</td> <td align="center">定义表格的行</td> </tr> <tr> <td align="center">td</td> <td align="center">定义表格单元</td> </tr> <tr> <td align="center">caption</td> <td align="center">定义表格标题</td> </tr> <tr> <td align="center">colgroup</td> <td align="center">定义表格列的组</td> </tr> <tr> <td align="center">col</td> <td align="center">定义用于表格列的属性</td> </tr> <tr> <td align="center">thead</td> <td align="center">定义表格的页眉</td> </tr> <tr> <td align="center">tbody</td> <td align="center">定义表格的主体</td> </tr> <tr> <td align="center">tfoot</td> <td align="center">定义表格的页脚</td> </tr> <tr> <td align="center">border</td> <td align="center">边框宽度</td> </tr> <tr> <td align="center">cellspacing</td> <td align="center">表格间距</td> </tr> <tr> <td align="center">cellpadding</td> <td align="center">表格填充</td> </tr> </tbody> </table> <p>示例：</p> <p><code>源代码:</code></p> <pre><code class="prism language-html"><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>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">thead</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">tbody</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">tfoot</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span><span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</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>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5px<span class="token punctuation">"</span></span> <span class="token attr-name">cellpadding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10px<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>caption</span><span class="token punctuation">></span></span>表格标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>caption</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 attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<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>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>thead</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>th</span><span class="token punctuation">></span></span>表头3<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>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tfoot</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>tfoot</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</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行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>主体1行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>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>该区域显示行合并3行效果，不包括页脚<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>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>主体2行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行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>tbody</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> <p><code>显示效果：</code></p> <blockquote> <table border="1"> <caption> 表格标题 </caption> <thead> <tr> <th colspan="3">该行表头演示列合并</th> </tr> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tfoot> <tr> <td>页脚第1列</td> <td>页脚第2列</td> </tr> </tfoot> <tbody> <tr> <td>主体1行1列</td> <td>主体1行2列</td> <td rowspan="3">该区域显示行合并3行效果，不包括页脚。</td> </tr> <tr> <td>主体2行1列</td> <td>主体2行2列</td> </tr> </tbody> </table> </blockquote> <ul> <li>数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</li> <li>如果不定义边框属性，表格将不显示边框。</li> </ul> <h3>15、列表</h3> <table> <thead> <tr> <th align="left">标签</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td align="left"><code><ol> </code></td> <td align="left">定义有序列表</td> </tr> <tr> <td align="left"><code><ul></code></td> <td align="left">定义无序列表</td> </tr> <tr> <td align="left"><code><li> </code></td> <td align="left">定义列表项</td> </tr> <tr> <td align="left"><code><dl> </code></td> <td align="left">定义列表</td> </tr> <tr> <td align="left"><code><dt> </code></td> <td align="left">自定义列表项目</td> </tr> <tr> <td align="left"><code><dd></code></td> <td align="left">定义自定列表项的描述</td> </tr> </tbody> </table> <ul> <li>自定义列表不仅仅是一列项目，而是项目及其注释的组合。</li> <li>自定义列表以<code> <dl></code> 标签开始。每个自定义列表项以 <code><dt> </code>开始。</li> <li>每个自定义列表项的定义以 <code><dd></code> 开始。</li> </ul> <p>示例：</p> <p><code>源代码：</code></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>编号列表：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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>Apples<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>Bananas<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>Lemons<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>Oranges<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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>大写字母列表：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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 attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A<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>li</span><span class="token punctuation">></span></span>Apples<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>Bananas<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>Lemons<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>Oranges<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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>小写字母列表：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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 attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<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>li</span><span class="token punctuation">></span></span>Apples<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>Bananas<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>Lemons<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>Oranges<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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>圆点列表：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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 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">list-style-type</span><span class="token punctuation">:</span>disc</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>li</span><span class="token punctuation">></span></span>Apples<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>Bananas<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>Lemons<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>Oranges<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>h4</span><span class="token punctuation">></span></span>圆圈列表：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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 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">list-style-type</span><span class="token punctuation">:</span>circle</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>li</span><span class="token punctuation">></span></span>Apples<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>Bananas<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>Lemons<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>Oranges<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>h4</span><span class="token punctuation">></span></span>正方形列表：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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 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">list-style-type</span><span class="token punctuation">:</span>square</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>li</span><span class="token punctuation">></span></span>Apples<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>Bananas<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>Lemons<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>Oranges<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>h4</span><span class="token punctuation">></span></span>嵌套列表：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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>Coffee<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>Tea <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>Black tea<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>Green tea <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>China<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>Africa<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>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>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>Milk<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>h4</span><span class="token punctuation">></span></span>一个自定义列表：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Coffee<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>- black hot drink<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>Milk<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>- white cold drink<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> <p><code>显示效果：</code></p> <blockquote> <h5>编号列表：</h5> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h5>大写字母列表：</h5> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h5>小写字母列表：</h5> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h5>圆点列表：</h5> <ul> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h5>圆圈列表：</h5> <ul> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h5>正方形列表：</h5> <ul> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h5>嵌套列表：</h5> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> <h5>一个自定义列表：</h5> <dl> Coffee <dd> - black hot drink </dd> Milk <dd> - white cold drink </dd> </dl> </blockquote> <h3>16、区块</h3> <h4>标签div</h4> <p><code><div></code><strong>元素没有特定的含义</strong>。</p> <ul> <li>它属于块级元素，浏览器会在其前后显示折行。</li> <li>它可用于组合其他 HTML 元素的容器。</li> <li>如果与 CSS 一同使用，<code><div></code>元素可用于对大的内容块设置样式属性。</li> <li><code><div></code>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<code><table></code>元素进行文档布局不是表格的正确用法。<code><table></code>元素的作用是显示表格化的数据。</li> </ul> <p>举例：</p> <p><code>源代码：</code></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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>#0000FF</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>h3</span><span class="token punctuation">></span></span>这是一个在 div 元素中的标题。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</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>这是一个在 div 元素中的文本。<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> </code></pre> <p><code>显示效果：</code></p> <blockquote> <p>这是一些文本。</p> <div> <h4>这是一个在 div 元素中的标题。</h4> <p>这是一个在 div 元素中的文本。</p> </div> </blockquote> <h4>标签span</h4> <p><code><span></code><strong>元素也没有特定的含义</strong>。</p> <ul> <li> <p><code><span></code>元素是内联元素，可用作文本的容器。</p> </li> <li> <p>当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。</p> </li> </ul> <p>示例：</p> <p><code>源代码：</code></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>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>blue<span class="token punctuation">;</span><span class="token property">font-weight</span><span class="token punctuation">:</span>bold</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 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>darkolivegreen<span class="token punctuation">;</span><span class="token property">font-weight</span><span class="token punctuation">:</span>bold</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>p</span><span class="token punctuation">></span></span> </code></pre> <p><code>显示效果：</code></p> <blockquote> <p>我的母亲有 蓝色 的眼睛，我的父亲有 碧绿色 的眼睛。</p> </blockquote> <h3>17、布局</h3> <p>大多数网站可以使用<code><div></code>或者<code><table></code>元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。</p> <ul> <li>使用div:</li> </ul> <p><code>源代码：</code></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">id</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 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">width</span><span class="token punctuation">:</span>500px</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>div</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>header<span class="token punctuation">"</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">background-color</span><span class="token punctuation">:</span>#FFA500<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>h1</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">margin-bottom</span><span class="token punctuation">:</span>0<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>h1</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>div</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>menu<span class="token punctuation">"</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">background-color</span><span class="token punctuation">:</span>#FFD700<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span><span class="token property">float</span><span class="token punctuation">:</span>left<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>b</span><span class="token punctuation">></span></span>菜单<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> HTML<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> CSS<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> JavaScript<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>div</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>content<span class="token punctuation">"</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">background-color</span><span class="token punctuation">:</span>#EEEEEE<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span><span class="token property">float</span><span class="token punctuation">:</span>left<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>div</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</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">background-color</span><span class="token punctuation">:</span>#FFA500<span class="token punctuation">;</span><span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> 版权 © https://blog.csdn.net/m0_53297256<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>div</span><span class="token punctuation">></span></span> </code></pre> <p><code>显示效果：</code></p> <blockquote> <div id="container"> <div id="header"> <h2>主要的网页标题</h2> </div> <div id="menu"> <b>菜单</b> <br> HTML <br> CSS <br> JavaScript </div> <div id="content"> 内容在这里 </div> <div id="footer"> 版权 © https://blog.csdn.net/m0_53297256 </div> </div> </blockquote> <ul> <li>使用table:</li> </ul> <p><code>源代码：</code></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 attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>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>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 attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</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">background-color</span><span class="token punctuation">:</span>red</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>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>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>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 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">background-color</span><span class="token punctuation">:</span>#FFD700<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span><span class="token property">vertical-align</span><span class="token punctuation">:</span>top<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>b</span><span class="token punctuation">></span></span>菜单<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> HTML<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> CSS<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> JavaScript <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 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">background-color</span><span class="token punctuation">:</span>#eeeeee<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span><span class="token property">vertical-align</span><span class="token punctuation">:</span>center<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>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>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 attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</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">background-color</span><span class="token punctuation">:</span>#FFA500<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> 版权 © https://blog.csdn.net/m0_53297256<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> <p><code>显示效果：</code></p> <blockquote> <table width="500" border="0"> <tbody> <tr> <td colspan="1"> <h2>主要的网页标题</h2> </td> </tr> <tr> <td> <b>菜单</b><br> HTML<br> CSS<br> JavaScript </td> <td> 内容在这里</td> </tr> <tr> <td colspan="2"> 版权 © https://blog.csdn.net/m0_53297256</td> </tr> </tbody> </table> </blockquote> <h3>18、表单</h3> <p><strong>表单用于收集用户的输入信息</strong>。表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。</p> <table> <thead> <tr> <th align="left">标签</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td align="left">form</td> <td align="left">定义供用户输入的表单</td> </tr> <tr> <td align="left">input</td> <td align="left">定义输入域</td> </tr> <tr> <td align="left">textarea</td> <td align="left">定义文本域 (一个多行的输入控件)</td> </tr> <tr> <td align="left">label</td> <td align="left">定义了input元素的标签，一般为输入标题</td> </tr> <tr> <td align="left">fieldset</td> <td align="left">定义了一组相关的表单元素，并使用外框包含起来</td> </tr> <tr> <td align="left">legend</td> <td align="left">定义了fieldset元素的标题</td> </tr> <tr> <td align="left">select</td> <td align="left">定义了下拉选项列表</td> </tr> <tr> <td align="left">optgroup</td> <td align="left">定义选项组</td> </tr> <tr> <td align="left">option</td> <td align="left">定义下拉列表中的选项</td> </tr> <tr> <td align="left">button</td> <td align="left">定义一个点击按钮</td> </tr> <tr> <td align="left">datalist</td> <td align="left">指定一个预先定义的输入控件选项列表</td> </tr> <tr> <td align="left">keygen</td> <td align="left">用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。<br>效果是保存输入框中输入过的信息，再次点击该输入框会显示上一次输入过的信息。</td> </tr> <tr> <td align="left">output</td> <td align="left">定义一个计算结果</td> </tr> </tbody> </table> <p><a href="http://img.e-com-net.com/image/info8/c9947ee640f94c4bbdae4d7f08f36e24.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c9947ee640f94c4bbdae4d7f08f36e24.jpg" alt="03 html基础详解_第5张图片" width="586" height="577" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/d7b256c8f3054ec29acec9b7476865d9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d7b256c8f3054ec29acec9b7476865d9.jpg" alt="03 html基础详解_第6张图片" width="650" height="422" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/e2fbf8f466b74cef930573718da6bdb3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e2fbf8f466b74cef930573718da6bdb3.jpg" alt="03 html基础详解_第7张图片" width="477" height="426" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/e9a5be9d2b7f43f19cb4f78174a01ddb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e9a5be9d2b7f43f19cb4f78174a01ddb.jpg" alt="03 html基础详解_第8张图片" width="442" height="268" style="border:1px solid black;"></a></p> <p>示例：</p> <table> <thead> <tr> <th align="center">属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td align="center">action</td> <td>规定当提交表单时，向何处发送表单数据。值为URL</td> </tr> <tr> <td align="center">method</td> <td>规定用于发送 form-data 的 HTTP 方法。</td> </tr> <tr> <td align="center">for</td> <td>规定 label 与哪个表单元素绑定。</td> </tr> <tr> <td align="center">reset</td> <td>重置</td> </tr> <tr> <td align="center">placeholder</td> <td>输入框灰色字体输入提示</td> </tr> <tr> <td align="center">radio</td> <td>单选类型（name值相同为一组）</td> </tr> <tr> <td align="center">checkbook</td> <td>多选框</td> </tr> </tbody> </table> <p>示例：</p> <p><code>源代码：</code></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 attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://112.74.72.107:3333/try<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 attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<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 attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<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>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>账户:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> Username: <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">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 attr-name">placeholder</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<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>br</span><span class="token punctuation">></span></span> password: <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>password<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 attr-name">placeholder</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<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>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</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>button<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'你好，世界!'</span><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>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<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>textarea</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</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 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>c301<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>三年级1班<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>c302<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>三年级2班<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>c303<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>三年级3班<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>c304<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>三年级4班<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>select</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</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>male<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Male<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>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>sex<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>male<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>br</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>female<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Female<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>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>sex<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>female<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>br</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>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>reset<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>br</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">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>browsers<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>browser<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>datalist</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>browsers<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>第一个输入选项<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>第二个输入选项<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>第三个输入选项<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>第四个输入选项<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>第五个输入选项<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>datalist</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>input标签type值为'submit'，value默认值'提交'<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>br</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>usr_name<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>name<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>keygen</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>security<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>p</span><span class="token punctuation">></span></span>点击"提交"按钮，表单数据将被发送到http://112.74.72.107:3333/try”。<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>form</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 attr-name">oninput</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>x.value=parseInt(a.value)+parseInt(b.value)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>0 <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>range<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>a<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>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>100 +<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>number<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>b<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>50<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>output</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>x<span class="token punctuation">"</span></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>a b<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>output</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> <p><code>显示结果：</code></p> <p>（功能标签把上述源码放在html中测试，这里仅展示效果。）</p> <blockquote> 账户: Username: <br> password: <br> 点我弹出信息提示! <br> <br> 班级 三年级1班 三年级2班 三年级3班 三年级4班 <br> Male <br> Female <br> 提交重置 <br> <br> 用户名: 提交 <p>点击"提交"按钮，表单数据将被发送到http://112.74.72.107:3333/try”。</p> 0 100 + = </blockquote> <h3>19、框架</h3> <p><strong>通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面</strong>。</p> <h4>标签iframe</h4> <h5>属性height</h5> <h5>属性width</h5> <h5>属性src</h5> <h5>属性frameborder</h5> <p>设置属性值为 “0” 移除iframe的边框。</p> <p>示例：</p> <p><code>源代码：</code></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</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>https://blog.csdn.net/m0_53297256<span class="token punctuation">"</span></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>200<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<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>iframe<span class="token punctuation">"</span></span> <span class="token attr-name">frameborder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<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>iframe</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>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://blog.csdn.net/m0_53297256?type=download<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iframe<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>p</span><span class="token punctuation">></span></span> </code></pre> <p><code>显示效果：</code></p> <blockquote> <p>点击这里查看我的资源</p> </blockquote> <h3>20、颜色</h3> <p>HTML颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。</p> <ul> <li> <p>每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。</p> </li> <li> <p>17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。</p> </li> <li> <p>十六进制值的写法为 # 号后跟三个或六个十六进制字符。</p> <p>三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。</p> </li> </ul> <h4>属性rgba</h4> <p>RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 <strong>“alpha”</strong> 通道，运行对颜色值设置透明度。相对于使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能，这里的 0.5 表示透明度，范围 0~1，0 表示全透明。</p> <h3>21、脚本</h3> <p>JavaScript 使 HTML 页面具有更强的动态和交互性。</p> <h4>标签script</h4> <p><strong>用于定义客户端脚本</strong>，比如 JavaScript。script元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。</p> <ul> <li>JavaScript 最常用于图片操作、表单验证以及内容动态更新。</li> </ul> <h4>标签noscript</h4> <p><strong>提供无法使用脚本时的替代内容</strong>，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。noscript元素可包含普通HTML页面的body元素中能够找到的所有元素。</p> <ul> <li>只有在浏览器不支持脚本或者禁用脚本时，才会显示 元素中的内容。</li> </ul> <p>示例：</p> <p><code>源代码：</code></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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> JavaScript 可以触发事件，就像按钮点击。<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>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"demo"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span><span class="token string">"Hello JavaScript!"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></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>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>button<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">myFunction</span><span class="token punctuation">(</span><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>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>noscript</span><span class="token punctuation">></span></span>抱歉，你的浏览器不支持 JavaScript!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>noscript</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>不支持 JavaScript 的浏览器会使用 `<span class="token entity named-entity"><</span>noscript`<span class="token entity named-entity">></span> 元素中定义的内容（文本）来替代。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><code>显示效果：</code></p> <blockquote> <p id="demo"> JavaScript 可以触发事件，就像按钮点击。</p> 抱歉，你的浏览器不支持 JavaScript! <p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。</p> <p>点我</p> </blockquote> <h3>22、字符实体</h3> <p>在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。</p> <p>如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：</p> <p>如需显示小于号，我们必须这样写：<code>≪</code> 或 <code><</code> 或 <code><</code></p> <ul> <li> <p>使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。</p> </li> <li> <p>实体名称对大小写敏感。</p> </li> </ul> <table> <thead> <tr> <th align="left">显示结果</th> <th align="left">描述</th> <th align="left">实体名称</th> <th align="left">实体编号</th> </tr> </thead> <tbody> <tr> <td align="left"></td> <td align="left">空格</td> <td align="left"><code> </code></td> <td align="left"><code> </code></td> </tr> <tr> <td align="left"><</td> <td align="left">小于号</td> <td align="left"><code><</code></td> <td align="left"><code><</code></td> </tr> <tr> <td align="left">></td> <td align="left">大于号</td> <td align="left"><code>></code></td> <td align="left"><code>></code></td> </tr> <tr> <td align="left">`&</td> <td align="left">和号</td> <td align="left"><code>&</code></td> <td align="left"><code>&</code></td> </tr> <tr> <td align="left">"</td> <td align="left">引号</td> <td align="left"><code>quot;</code></td> <td align="left"><code>"</code></td> </tr> <tr> <td align="left">’</td> <td align="left">撇号</td> <td align="left"><code>'</code> (IE不支持)</td> <td align="left"><code>'</code></td> </tr> <tr> <td align="left">￠</td> <td align="left">分</td> <td align="left"><code>¢</code></td> <td align="left"><code>¢</code></td> </tr> <tr> <td align="left">£</td> <td align="left">镑</td> <td align="left"><code>£</code></td> <td align="left"><code>£</code></td> </tr> <tr> <td align="left">¥</td> <td align="left">人民币/日元</td> <td align="left"><code>¥</code></td> <td align="left"><code>¥</code></td> </tr> <tr> <td align="left">€</td> <td align="left">欧元</td> <td align="left"><code>€</code></td> <td align="left"><code>€</code></td> </tr> <tr> <td align="left">§</td> <td align="left">小节</td> <td align="left"><code>§</code></td> <td align="left"><code>§</code></td> </tr> <tr> <td align="left">©</td> <td align="left">版权</td> <td align="left"><code>©</code></td> <td align="left"><code>©</code></td> </tr> <tr> <td align="left">®</td> <td align="left">注册商标</td> <td align="left"><code>®</code></td> <td align="left"><code>®</code></td> </tr> <tr> <td align="left">™</td> <td align="left">商标</td> <td align="left"><code>™</code></td> <td align="left"><code>™</code></td> </tr> <tr> <td align="left">×</td> <td align="left">乘号</td> <td align="left"><code>×</code></td> <td align="left"><code>×</code></td> </tr> <tr> <td align="left">÷</td> <td align="left">除号</td> <td align="left"><code>÷</code></td> <td align="left"><code>÷</code></td> </tr> </tbody> </table> <h3>23、URL</h3> <p>统一资源定位器(Uniform Resource Locators)URL。URL 是一个网页地址。</p> <ul> <li>URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。</li> <li>Web浏览器通过URL从Web服务器请求页面。</li> <li>当您点击 HTML 页面中的某个链接时，对应的 <code><a> </code>标签指向万维网上的一个地址。</li> </ul> <p></p> <div class="toc"> <h4>文章目录</h4> <ul> <li>02html基础详解</li> <li> <ul> <li>1、HTML编辑器</li> <li>2、标签</li> <li> <ul> <li>html常用标签</li> </ul> </li> <li>3、元素</li> <li>4、属性</li> <li> <ul> <li>常用属性</li> </ul> </li> <li>5、标题</li> <li> <ul> <li>水平线</li> <li>注释</li> </ul> </li> <li>6、段落</li> <li> <ul> <li>折行</li> </ul> </li> <li>7、格式化标签</li> <li> <ul> <li>属性dir</li> </ul> </li> <li>8、链接</li> <li> <ul> <li>属性target</li> <li>属性id</li> </ul> </li> <li>9、头部</li> <li> <ul> <li>标签head</li> <li>标签title</li> <li>标签base</li> <li>标签link</li> <li>标签style</li> <li>标签meta</li> <li>script元素</li> </ul> </li> <li>10、CSS</li> <li> <ul> <li>背景色属性background-color</li> <li>字体相关属性</li> <li>属性text-align</li> <li>内部样式表</li> <li>外部样式表</li> </ul> </li> <li>11、图像</li> <li> <ul> <li>标签image</li> <li>源属性src</li> <li>属性alt</li> <li>属性height和width</li> <li>属性float</li> <li>属性usemap</li> <li>属性title(image)</li> <li>属性border</li> </ul> </li> <li>12、标签map</li> <li>13、标签area</li> <li> <ul> <li>属性coords</li> <li>属性shape</li> <li>属性name（map）</li> </ul> </li> <li>14、表格</li> <li>15、列表</li> <li>16、区块</li> <li> <ul> <li>标签div</li> <li>标签span</li> </ul> </li> <li>17、布局</li> <li>18、表单</li> <li>19、框架</li> <li> <ul> <li>标签iframe</li> <li> <ul> <li>属性height</li> <li>属性width</li> <li>属性src</li> <li>属性frameborder</li> </ul> </li> </ul> </li> <li>20、颜色</li> <li> <ul> <li>属性rgba</li> </ul> </li> <li>21、脚本</li> <li> <ul> <li>标签script</li> <li>标签noscript</li> </ul> </li> <li>22、字符实体</li> <li>23、URL</li> </ul> </li> </ul> </div> <p></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1720600844128301056"></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">你可能感兴趣的:(#,html,html,前端,经验分享)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1897841994324045824.htm" title="使用Electron构建桌面应用程序：一个全面指南" target="_blank">使用Electron构建桌面应用程序：一个全面指南</a> <span class="text-muted">AxCybersecurity</span> <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</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>Electron是一个强大的框架，它使开发人员能够使用Web技术（如HTML、CSS和JavaScript）构建跨平台的桌面应用程序。本文将介绍如何使用Electron来构建一个简单的桌面应用程序，并提供相应的源代码示例。什么是Electron？Electron是一个开源的框架，由GitHub开发，用于构建跨平台的桌面应用程序。它基于Chromium和Node.js，允许开发人员使用Web技术构建</div> </li> <li><a href="/article/1897839092373188608.htm" title="华为OD-不限经验，急招，机考资料，面试攻略，不过改推，捞人" target="_blank">华为OD-不限经验，急招，机考资料，面试攻略，不过改推，捞人</a> <span class="text-muted">2301_79125642</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>超星(学习通)-Java后端一面网易互娱40min（感觉是G了）一篇不太像面经的面经2023总结，前端大二上进小红书秋招面经第一波海康红外图像算法实习（微影）面经测试工程师社招-测试面试题大厂在职傻屌。TPlink图像算法工程师一二三面经深圳海康红外图像算法实习（微影）面经TPLink提前批面经（已OC）传统车辆转规控算法岗秋招记录腾讯TEG测试与质量管理全记录瑞幸Java开发校招一面腾讯金融科技</div> </li> <li><a href="/article/1897836818162839552.htm" title="希音(Shein)前端开发面试题集锦和参考答案" target="_blank">希音(Shein)前端开发面试题集锦和参考答案</a> <span class="text-muted">大模型大数据攻城狮</span> <a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%94%BB%E5%87%BB/1.htm">前端攻击</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/csrf/1.htm">csrf</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a> <div>用Node写过什么工具或npm包在实际开发中，使用Node编写过多种实用工具和npm包。自动化构建工具开发了一个简单的自动化构建工具，用于处理前端项目的资源压缩和合并。在前端项目中，为了优化性能，需要对CSS和JavaScript文件进行压缩，减少文件体积，同时将多个小文件合并成一个大文件，减少HTTP请求。这个工具使用Node的fs模块进行文件的读写操作，通过terser库对JavaScript</div> </li> <li><a href="/article/1897799060249702400.htm" title="前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？" target="_blank">前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？</a> <span class="text-muted">m0_74823705</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>目录哪些方法会触发React重新渲染？重新渲染render会做些什么？setState()案例需求总结forceUpdate()案例需求总结props改变案例需求总结context改变案例需求总结哪些方法会触发React重新渲染？重新渲染render会做些什么？在React中，以下方法会触发重新渲染：setState()：当调用组件的setState方法并传入新的状态值时，React会触发重新渲染</div> </li> <li><a href="/article/1897797796854034432.htm" title="归纳webpack" target="_blank">归纳webpack</a> <span class="text-muted">捻tua馔...</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>常用配置项constHtmlWebpackPlugin=require('html-webpack-plugin');//通常用于生成HTMLconstMiniCssExtractPlugin=require('mini-css-extract-plugin');//用于分离CSSconstcssMinimizerWebpackPlugin=require("css-minimizer-webpa</div> </li> <li><a href="/article/1897794898040516608.htm" title="React基础教程（06）：条件渲染" target="_blank">React基础教程（06）：条件渲染</a> <span class="text-muted">叁拾舞</span> <a class="tag" taget="_blank" href="/search/React%E6%95%99%E7%A8%8B/1.htm">React教程</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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>1条件渲染使用条件渲染，结合TodoList案例，进行完善，实现以下功能：当列表中的数据为空的时候，现实提示信息暂无待办事项当列表中存在数据的时候，提示信息消失这里介绍三种实现方式。注意这里的Empty是前端框架Antd的组件，如果安装了antd直接使用即可，如果没有安装可以用div代替也是可以的。这里为了更直观，所以使用了前端框架antd的Empty组件。1、三元操作符{/*方式一*/}{thi</div> </li> <li><a href="/article/1897785312394932224.htm" title="HTML+CSS+javascript 轮播图" target="_blank">HTML+CSS+javascript 轮播图</a> <span class="text-muted">Paula-柒月拾</span> <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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>HTML，CSS和JavaScript可以用来创建轮播图。HTML用于构建网页的结构，所以您可以使用HTML来定义轮播图的各个部分，如图像和文本。CSS用于设计网页的外观，所以您可以使用CSS来设置轮播图的布局和样式。JavaScript用于控制网页的行为，所以您可以使用JavaScript来控制轮播图的功能，如自动播放和用户交互。下面是一个简单的HTMLCSSJavaScript轮播图的例子：H</div> </li> <li><a href="/article/1897777492081569792.htm" title="电商智能客服实战（三）-需求感知模块具体实现" target="_blank">电商智能客服实战（三）-需求感知模块具体实现</a> <span class="text-muted">power-辰南</span> <a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E7%BA%A7AI%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/1.htm">企业级AI项目实战</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/NER/1.htm">NER</a><a class="tag" taget="_blank" href="/search/NLU/1.htm">NLU</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80/1.htm">自然语言</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/AGENT/1.htm">AGENT</a> <div>电商智能客服实战（一）—概要设计电商智能客服实战（二）需求感知模块模型微调实现一、整体架构设计1.1模块定位需求感知模块作为智能客服系统的前端处理单元，负责对用户输入进行多维度解析，输出结构化语义理解结果，为下游决策引擎提供数据支撑。1.2核心流程图用户输入需求感知模块情感分析NLU意图识别NER实体识别参数提取规划模块AutoGPT生成步骤规则引擎匹配反馈集成工具模块订单查询API工单API知识</div> </li> <li><a href="/article/1897775725063237632.htm" title="前端本地储存的方式汇总" target="_blank">前端本地储存的方式汇总</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/app/1.htm">app</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>JavaScript本地存储是Web开发中用于在客户端存储数据的重要技术，以下是常见方式及其区别和应用场景：一、WEB浏览器本地存储方式及特点1.1储存方式1.Cookie存储容量：约4KB（每个域名）。生命周期：可设置过期时间；默认随会话结束失效。作用域：同源页面共享。访问方式：通过document.cookie读写，每次HTTP请求自动携带。特点：支持服务器端操作（通过HTTP头），但存储效率</div> </li> <li><a href="/article/1897772190850412544.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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>用于实现任意组件中的通信，我们可以将数据放入到Vue原型中，这样就能实现vc与vm都能访问该数据我们需要一个能使用去使用$on或是$emit这里方法的东西，vc与vm都能调用这个方法，但是vm与vm最终在创建时都需要去寻找Vue的原型对象，所以说我们可以直接把Vue的原型对象当作是这个中间人bus在beforeCreate中我们就能去申明这个中间人将Student.vue中的信息发送给School</div> </li> <li><a href="/article/1897772064006270976.htm" title="自己的网页加一个搜索框，调用deepseek的API" target="_blank">自己的网页加一个搜索框，调用deepseek的API</a> <span class="text-muted">Lkkkkkkkcy</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>一切源于一个学习黑马程序员视频的突发奇想在网页悬浮一个搜索按钮，点击可以实现调用deepseek文本模型回答你的问题前端实现前端使用vue实现的首先是整体页面：AIWidget.vue搜索{{item}}暂无搜索结果import{ref,watch}from"vue";import{Search}from"@element-plus/icons-vue";import{ElMessage}from</div> </li> <li><a href="/article/1897767772352475136.htm" title="利用golang embed特性嵌入前端资源问题解决" target="_blank">利用golang embed特性嵌入前端资源问题解决</a> <span class="text-muted">Iam0x17</span> <a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>embed嵌入前端资源，配置前端路由的代码如下funcStartHttpService(portstring,assetsFsembed.FS)error{//r:=gin.Default()gin.SetMode(gin.ReleaseMode)r:=gin.New()r.Use(CORSMiddleware())//静态文件服务dist,err:=fs.Sub(assetsFs,"assets</div> </li> <li><a href="/article/1897751740955029504.htm" title="【工作·学习记录】html页面转为pdf" target="_blank">【工作·学习记录】html页面转为pdf</a> <span class="text-muted">沉默不多话</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%A1%B5%E9%9D%A2%E8%BD%AC%E4%B8%BApdf/1.htm">前端页面转为pdf</a> <div>html页面转为pdf实现步骤将页面转为图片形式并传输在后台将图片写入pdf实现步骤将页面转为图片形式并传输首先引入html2canvas.jshtml2canvas(document.body,{//截图对象//此处可配置详细参数onrendered:function(canvas){//渲染完成回调canvascanvas.id="mycanvas";//生成base64图片数据vardata</div> </li> <li><a href="/article/1897751362511368192.htm" title="pythonvue自动化_Vue项目的自动化测试" target="_blank">pythonvue自动化_Vue项目的自动化测试</a> <span class="text-muted">weixin_39617669</span> <a class="tag" taget="_blank" href="/search/pythonvue%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">pythonvue自动化</a> <div>Vue项目的自动化测试说到自动化测试，许多开发团队都是听说过、尝试过，但最后都止步于尝试，不能将TDD(测试驱动开发)、BDD(行为驱动开发)的完整流程贯彻到项目中。思考其中的原因：终究还是成本抵不上收益。很多后端开发人员可能写过很多自动化的单元测试代码，但是对前端测试一头雾水。这是因为相对于后端开发人员的自动化单元测试，前端的自动化测试成本更高。自动化测试就是通过自动化脚本将一个又一个测试用例串</div> </li> <li><a href="/article/1897728255776059392.htm" title="HTML5新特性深度解析" target="_blank">HTML5新特性深度解析</a> <span class="text-muted">longdong7889</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/1.htm">前端学习</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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>HTML5新特性深度解析HTML5作为现代Web开发的基石，其LivingStandard模式持续为开发者带来创新工具。本文将深入剖析2023年值得关注的最新特性，通过技术解析与实战示例展现其应用场景。一、革新性API赋能Web应用1.1PopoverAPI：原生交互革命显示详情悬浮内容支持自动关闭和层级管理浏览器原生实现弹窗系统支持auto/manual状态控制无需JavaScript实现显隐逻</div> </li> <li><a href="/article/1897725102892576768.htm" title="Springboot应用json数据传给前端首字母大写变小写的问题" target="_blank">Springboot应用json数据传给前端首字母大写变小写的问题</a> <span class="text-muted">珠峰日记</span> <a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>对接.net数据，属性首字母大写传给前端后自动转成了小写。解决思路网上有三种：1)如果没有使用fastjson(阿里巴巴出品),使用@JsonProperty("XXXX")的注解方式可以解决问题，XXXX就是转换成Json的属性名，但注意，只有放在getter上才是有效的，直接在属性上加没效果.(这说明spring默认的jackson类库处理是基于访问器。2)如果使用了fastjson,就用@J</div> </li> <li><a href="/article/1897717668706840576.htm" title="HW面试经验分享 | 北京蓝中研判岗" target="_blank">HW面试经验分享 | 北京蓝中研判岗</a> <span class="text-muted">黑客老李</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>更多面试分享看我专栏找我哦~一起讨论交流！欢迎各位来专栏或简历找我哦目录：所面试的公司：某安全厂商所在城市：北京面试职位：国护蓝中研判岗面试过程：面试官的问题：1、面试官先就是很常态化的让我做了一个自我介绍2、自我介绍不错，听你讲熟悉TOP10漏洞，可以讲下自己熟悉哪些方面吗？3、sql注入原理可以讲下吗？4、sql注入绕WAF有了解吗，平常有挖过相关漏洞吗？5、那sql报错盲注呢，可以讲下嘛，包</div> </li> <li><a href="/article/1897714014201376768.htm" title="Hugging Face Agents Course （Dummy Agent）" target="_blank">Hugging Face Agents Course （Dummy Agent）</a> <span class="text-muted">ZHOU_CAMP</span> <a class="tag" taget="_blank" href="/search/Hugging/1.htm">Hugging</a><a class="tag" taget="_blank" href="/search/Face/1.htm">Face</a><a class="tag" taget="_blank" href="/search/Agents/1.htm">Agents</a><a class="tag" taget="_blank" href="/search/Course/1.htm">Course</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>参考链接：https://qwen.readthedocs.io/en/latest/getting_started/concepts.htmlhttps://huggingface.co/agents-course/notebooks原notebook中用到的是llama模型，但是需要认证，下面改成了Qwen模型DummyAgentLibrary在这个简单的示例中，我们将从零开始编写一个Agen</div> </li> <li><a href="/article/1897692559916986368.htm" title="React生态、Vue生态与跨框架前端解决方案" target="_blank">React生态、Vue生态与跨框架前端解决方案</a> <span class="text-muted">Coder LM Wang</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>React生态系统1基础框架React.js是一个用于构建UI的JavaScript库。2应用框架Next.js是基于React.js的完整应用框架。主要负责应用如何工作：应用架构：路由系统、页面结构渲染策略：服务端渲染(SSR)、静态生成(SSG)、客户端渲染性能优化：代码分割、图片优化、字体优化开发体验：热模块替换、TypeScript支持部署：Vercel平台集成、自托管选项3UI组件库MU</div> </li> <li><a href="/article/1897680316718444544.htm" title="实现XX系统设计时所实现的质量属性战术" target="_blank">实现XX系统设计时所实现的质量属性战术</a> <span class="text-muted">weixin_30810583</span> <div>..转载于:https://www.cnblogs.com/3066405538a/p/6665523.html</div> </li> <li><a href="/article/1897675268370264064.htm" title="vue3导入excel并解析excel数据渲染到表格中，纯前端实现。" target="_blank">vue3导入excel并解析excel数据渲染到表格中，纯前端实现。</a> <span class="text-muted">m0_74825526</span> <a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>需求用户将已有的excel上传到系统，并将excel数据同步到页面的表格中进行二次编辑，由于excel数据不是最终数据，只是批量的一个初始模板，后端不需要存储，所以该功能由前端独立完成。吐槽系统中文件上传下载预览三部曲走了一遍，万万没想到还要自己实现同步数据。实际反手各种资料开始查阅，终于找到了可以完美实现该需求的方法，来记录下我的实现方案。希望对有需要的小伙伴有帮助。注意以下为正文（重要内容），</div> </li> <li><a href="/article/1897660264824762368.htm" title="FreeRTOS移植到Cortex-M3-M4" target="_blank">FreeRTOS移植到Cortex-M3-M4</a> <span class="text-muted">weixin_30596343</span> <a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a> <div>翻译自FreeRTOS官网文档,原文网址:http://www.freertos.org/RTOS-Cortex-M3-M4.html转载：原文出处：http://bbs.ednchina.com/BLOG_ARTICLE_3009240.HTM数以千计的FreeRTOS应用运行在ARMCortex-M内核上。令人惊奇的是，RTOS与Cortex-M内核组合使用，使得技术支持请求变得如此的少。大多</div> </li> <li><a href="/article/1897646648524337152.htm" title="python之爬虫入门实例" target="_blank">python之爬虫入门实例</a> <span class="text-muted">我不是少爷.</span> <a class="tag" taget="_blank" href="/search/Python%E7%88%AC%E8%99%AB/1.htm">Python爬虫</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/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>链家二手房数据抓取与Excel存储目录开发环境准备爬虫流程分析核心代码实现关键命令详解进阶优化方案注意事项与扩展一、开发环境准备1.1必要组件安装#安装核心库pipinstallrequestsbeautifulsoup4openpyxlpandas#各库作用说明：-requests：网络请求库（版本≥2.25.1）-beautifulsoup4：HTML解析库（版本≥4.11.2）-openpy</div> </li> <li><a href="/article/1897644125897945088.htm" title="Three.js 入门(补间动画Tween.js)" target="_blank">Three.js 入门(补间动画Tween.js)</a> <span class="text-muted">庸俗今天不摸鱼</span> <a class="tag" taget="_blank" href="/search/three.Js%E5%AD%A6%E4%B9%A0/1.htm">three.Js学习</a><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>本篇主要学习内容:Tween.Js补间动画点赞+关注+收藏=学会了1.什么是Tween.Js?TweenJS是一个由JavaScript语言编写的补间动画库，如果需要tweenjs辅助你生成动画，对于任何前端web项目，你都可以选择tweenjs库。如果你使用three.js开发web3d项目，使用tween.js辅助three.js生成动画效果也是比较好的选择。1.1)引入tween.Jsimp</div> </li> <li><a href="/article/1897627978502828032.htm" title="ThreeJS入门（140）：THREE.Mouse 知识详解，示例代码" target="_blank">ThreeJS入门（140）：THREE.Mouse 知识详解，示例代码</a> <span class="text-muted">还是大剑师兰特</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/ThreeJS%E4%B8%AD%E6%96%87API%E5%85%A8%E8%A7%A3/1.htm">ThreeJS中文API全解</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%91%E5%B8%88/1.htm">大剑师</a><a class="tag" taget="_blank" href="/search/threejs%E6%95%99%E7%A8%8B/1.htm">threejs教程</a><a class="tag" taget="_blank" href="/search/threejs%E7%A4%BA%E4%BE%8B/1.htm">threejs示例</a><a class="tag" taget="_blank" href="/search/threejs%E5%85%A5%E9%97%A8/1.htm">threejs入门</a><a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a> <div>作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第140篇入门文章文章目录常量使用场景示例常量的使用总结THREE.MOUSE</div> </li> <li><a href="/article/1897577265630343168.htm" title="浏览器发请求不携 cookie （加了跨域失败）" target="_blank">浏览器发请求不携 cookie （加了跨域失败）</a> <span class="text-muted">Wdc_12</span> <a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</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> <div>1.发送请求后端产生的唯一的sessionid，服务器会通过HTTP响应头中的Set-Cookie字段将SessionID发送到客户端。客户端（浏览器）收到响应后，会将SessionID存储为cookie。但由于跨域了不自动携带cookie2.加withCredentials所以在前端加上了：myAxios.defaults.withCredentials=true3.出现了跨域的错误，CORS请</div> </li> <li><a href="/article/1897571464765304832.htm" title="在 Apache Tomcat 中，部署和删除项目" target="_blank">在 Apache Tomcat 中，部署和删除项目</a> <span class="text-muted">梦醒贰零壹柒</span> <a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>在ApacheTomcat中，部署和删除WAR文件是常见的操作。以下是详细步骤：1.删除WAR文件(1)停止应用进入Tomcat的管理界面（默认地址：http://localhost:8080/manager/html）。找到需要删除的应用，点击“停止”按钮停止其运行。(2)删除WAR文件进入Tomcat的webapps目录：cd/path/to/tomcat/webapps删除对应的WAR文件和</div> </li> <li><a href="/article/1897565913742372864.htm" title="非GUI模式执行jemter压测" target="_blank">非GUI模式执行jemter压测</a> <span class="text-muted">十叶知秋</span> <a class="tag" taget="_blank" href="/search/jmeter%E6%80%A7%E8%83%BD%E6%B5%8B%E8%AF%95%E4%BB%8E0%E5%88%B01/1.htm">jmeter性能测试从0到1</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E6%B5%8B%E8%AF%95/1.htm">性能测试</a><a class="tag" taget="_blank" href="/search/jmeter/1.htm">jmeter</a> <div>https://www.cnblogs.com/shaohuang/p/17508011.html准备JMeter脚本-首先，在GUI模式下创建并调试好你的JMeter测试计划。测试计划应包含线程组、取样器（如HTTP请求）、监听器等组件。例如，如果你要对一个Web应用进行压力测试，在HTTP请求取样器中设置好请求的URL、方法（GET/POST等）、请求参数等内容。-将测试计划保存为`.jmx`</div> </li> <li><a href="/article/1897557211962470400.htm" title="[点点搬家]初试mod_perl+apache 之二" target="_blank">[点点搬家]初试mod_perl+apache 之二</a> <span class="text-muted">promenade</span> <a class="tag" taget="_blank" href="/search/perl/1.htm">perl</a><a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>[四年前的博客了，学习apache的纯真年代]学习practicalmod_perl中关于apache的配置，章节连接如下http://www.modperlbook.org/html/4-1-1-Configuration-Files.html1,".htaccess"文件，可以看到httpd.conf中有这样的模块AllowOverrideNoneOptionsNoneOrderallow,d</div> </li> <li><a href="/article/1897555698603061248.htm" title="网络空间安全（13）上传验证绕过" target="_blank">网络空间安全（13）上传验证绕过</a> <span class="text-muted">IT 青年</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E5%AE%89%E7%9F%A5%E8%AF%86%E5%BA%93/1.htm">网安知识库</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%A9%BA%E9%97%B4%E5%AE%89%E5%85%A8/1.htm">网络空间安全</a> <div>前言上传验证绕过是一种网络安全攻击手段，攻击者利用目标系统或应用程序在文件上传过程中存在的漏洞，绕过文件上传的验证机制，上传恶意文件，从而实现对目标系统的攻击。一、常见类型客户端验证绕过定义：客户端验证通常通过JavaScript在浏览器中执行，用于检查文件类型、大小等。客户端验证绕过是指攻击者通过禁用JavaScript或修改前端代码，绕过这些验证。绕过方法：禁用JavaScript：直接在浏览</div> </li> <li><a href="/article/127.htm" title="用MiddleGenIDE工具生成hibernate的POJO（根据数据表生成POJO类）" target="_blank">用MiddleGenIDE工具生成hibernate的POJO（根据数据表生成POJO类）</a> <span class="text-muted">AdyZhang</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/MiddleGenIDE/1.htm">MiddleGenIDE</a> <div>推荐:MiddlegenIDE插件,   是一个Eclipse   插件.     用它可以直接连接到数据库,   根据表按照一定的HIBERNATE规则作出BEAN和对应的XML ，用完后你可以手动删除它加载的JAR包和XML文件!     今天开始试着使用</div> </li> <li><a href="/article/254.htm" title=".9.png" target="_blank">.9.png</a> <span class="text-muted">Cb123456</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>  “点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png 　　智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。 　　我们都知道android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边</div> </li> <li><a href="/article/381.htm" title="算法的效率" target="_blank">算法的效率</a> <span class="text-muted">天子之骄</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E6%95%88%E7%8E%87/1.htm">算法效率</a><a class="tag" taget="_blank" href="/search/%E5%A4%8D%E6%9D%82%E5%BA%A6/1.htm">复杂度</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%9D%8F%E6%83%85%E5%86%B5%E8%BF%90%E8%A1%8C%E6%97%B6%E9%97%B4/1.htm">最坏情况运行时间</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7O%E9%98%B6/1.htm">大O阶</a><a class="tag" taget="_blank" href="/search/%E5%B9%B3%E5%9D%87%E6%83%85%E5%86%B5%E8%BF%90%E8%A1%8C%E6%97%B6%E9%97%B4/1.htm">平均情况运行时间</a> <div>算法的效率 效率是速度和空间消耗的度量。集中考虑程序的速度，也称运行时间或执行时间，用复杂度的阶(O)这一标准来衡量。空间的消耗或需求也可以用大O表示，而且它总是小于或等于时间需求。   以下是我的学习笔记：   1.求值与霍纳法则，即为秦九韶公式。   2.测定运行时间的最可靠方法是计数对运行时间有贡献的基本操作的执行次数。运行时间与这个计数成正比。 </div> </li> <li><a href="/article/508.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/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>Java 数据结构 Java工具包提供了强大的数据结构。在Java中的数据结构主要包括以下几种接口和类： 枚举（Enumeration） 位集合（BitSet） 向量（Vector） 栈（Stack） 字典（Dictionary） 哈希表（Hashtable） 属性（Properties） 以上这些类是传统遗留的，在Java2中引入了一种新的框架-集合框架(Collect</div> </li> <li><a href="/article/635.htm" title="MybatisHelloWorld" target="_blank">MybatisHelloWorld</a> <span class="text-muted">3213213333332132</span> <div> //测试入口TestMyBatis package com.base.helloworld.test; import java.io.IOException; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibat</div> </li> <li><a href="/article/762.htm" title="Java|urlrewrite|URL重写|多个参数" target="_blank">Java|urlrewrite|URL重写|多个参数</a> <span class="text-muted">7454103</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div> 个人工作经验！ 如有不当之处，敬请指点 1.0  web -info 目录下建立     urlrewrite.xml  文件 类似如下： <?xml version="1.0" encoding="UTF-8" ?>   <!DOCTYPE u</div> </li> <li><a href="/article/889.htm" title="达梦数据库+ibatis" target="_blank">达梦数据库+ibatis</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div>--插入数据方面 如果您需要数据库自增... 那么在插入的时候不需要指定自增列. 如果想自己指定ID列的值, 那么要设置 set identity_insert  数据库名.模式名.表名; ----然后插入数据; example: create table zhabei.test( id bigint identity(1,1) primary key, nam</div> </li> <li><a href="/article/1016.htm" title="XML 解析 四种方式" target="_blank">XML 解析 四种方式</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>XML现在已经成为一种通用的数据交换格式,平台的无关性使得很多场合都需要用到XML。本文将详细介绍用Java解析XML的四种方法。 XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便。对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM(Document Object </div> </li> <li><a href="/article/1143.htm" title="spring中配置文件占位符的使用" target="_blank">spring中配置文件占位符的使用</a> <span class="text-muted">avords</span> <div>1.类 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.o</div> </li> <li><a href="/article/1270.htm" title="前端工程化-公共模块的依赖和常用的工作流" target="_blank">前端工程化-公共模块的依赖和常用的工作流</a> <span class="text-muted">bee1314</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a> <div>题记： 一个人的项目，还有工程化的问题嘛？   我们在推进模块化和组件化的过程中，肯定会不断的沉淀出我们项目的模块和组件。对于这些沉淀出的模块和组件怎么管理？另外怎么依赖也是个问题？ 你真的想这样嘛？   var BreadCrumb = require(‘../../../../uikit/breadcrumb’); //真心ugly。   </div> </li> <li><a href="/article/1397.htm" title="上司说「看你每天准时下班就知道你工作量不饱和」，该如何回应？" target="_blank">上司说「看你每天准时下班就知道你工作量不饱和」，该如何回应？</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86/1.htm">项目管理</a><a class="tag" taget="_blank" href="/search/%E6%B2%9F%E9%80%9A/1.htm">沟通</a><a class="tag" taget="_blank" href="/search/IT%E8%81%8C%E4%B8%9A%E8%A7%84%E5%88%92/1.htm">IT职业规划</a> <div>问题：上司说「看你每天准时下班就知道你工作量不饱和」，如何回应         正常下班时间6点，只要是6点半前下班的，上司都认为没有加班。   Eno-Bea回答，注重感受，不一定是别人的         虽然我不知道你具体从事什么工作与职业，但是我大概猜测，你是从事一项不太容易出现阶段性成果的工作</div> </li> <li><a href="/article/1524.htm" title="TortoiseSVN，过滤文件" target="_blank">TortoiseSVN，过滤文件</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a> <div>环境： TortoiseSVN 1.8 配置： 在文件夹空白处右键 选择  TortoiseSVN -> Settings 在 Global ignote pattern 中添加要过滤的文件： 多类型用英文空格分开 *name ： 过滤所有名称为 name 的文件或文件夹 *.name ： 过滤所有后缀为 name 的文件或文件夹 --------</div> </li> <li><a href="/article/1651.htm" title="【Flume二】HDFS sink细说" target="_blank">【Flume二】HDFS sink细说</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Flume/1.htm">Flume</a> <div>1. Flume配置   a1.sources=r1 a1.channels=c1 a1.sinks=k1 ###Flume负责启动44444端口 a1.sources.r1.type=avro a1.sources.r1.bind=0.0.0.0 a1.sources.r1.port=44444 a1.sources.r1.chan</div> </li> <li><a href="/article/1778.htm" title="The Eight Myths of Erlang Performance" target="_blank">The Eight Myths of Erlang Performance</a> <span class="text-muted">bookjovi</span> <a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a> <div>erlang有一篇guide很有意思： http://www.erlang.org/doc/efficiency_guide 里面有个The Eight Myths of Erlang Performance： http://www.erlang.org/doc/efficiency_guide/myths.html   Myth: Funs are sl</div> </li> <li><a href="/article/1905.htm" title="java多线程网络传输文件(非同步)-2008-08-17" target="_blank">java多线程网络传输文件(非同步)-2008-08-17</a> <span class="text-muted">ljy325</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a> <div>利用 Socket 套接字进行面向连接通信的编程。客户端读取本地文件并发送；服务器接收文件并保存到本地文件系统中。 使用说明:请将TransferClient, TransferServer, TempFile三个类编译，他们的类包是FileServer. 客户端: 修改TransferClient: serPort, serIP, filePath, blockNum,的值来符合您机器的系</div> </li> <li><a href="/article/2032.htm" title="读《研磨设计模式》-代码笔记-模板方法模式" target="_blank">读《研磨设计模式》-代码笔记-模板方法模式</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.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet;</div> </li> <li><a href="/article/2159.htm" title="配置心得" target="_blank">配置心得</a> <span class="text-muted">chenyu19891124</span> <a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE/1.htm">配置</a> <div>时间就这样不知不觉的走过了一个春夏秋冬，转眼间来公司已经一年了，感觉时间过的很快，时间老人总是这样不停走，从来没停歇过。 作为一名新手的配置管理员，刚开始真的是对配置管理是一点不懂，就只听说咱们公司配置主要是负责升级，而具体该怎么做却一点都不了解。经过老员工的一点点讲解，慢慢的对配置有了初步了解，对自己所在的岗位也慢慢的了解。 做了一年的配置管理给自总结下： 1.改变 从一个以前对配置毫无</div> </li> <li><a href="/article/2286.htm" title="对“带条件选择的并行汇聚路由问题”的再思考" target="_blank">对“带条件选择的并行汇聚路由问题”的再思考</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/%E9%A2%86%E5%9F%9F%E6%A8%A1%E5%9E%8B/1.htm">领域模型</a> <div>2008年上半年，我在设计并开发基于”JWFD流程系统“的商业化改进型引擎的时候，由于采用了新的嵌入式公式模块而导致出现“带条件选择的并行汇聚路由问题”(请参考2009-02-27博文)，当时对这个问题的解决办法是采用基于拓扑结构的处理思想，对汇聚点的实际前驱分支节点通过算法预测出来，然后进行处理，简单的说就是找到造成这个汇聚模型的分支起点，对这个起始分支节点实际走的路径数进行计算，然后把这个实际</div> </li> <li><a href="/article/2413.htm" title="Oracle 10g 的clusterware 32位 下载地址" target="_blank">Oracle 10g 的clusterware 32位 下载地址</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>Oracle 10g 的clusterware 32位 下载地址 http://pan.baidu.com/share/link?shareid=531580&uk=421021908 http://pan.baidu.com/share/link?shareid=137223&uk=321552738 http://pan.baidu.com/share/l</div> </li> <li><a href="/article/2540.htm" title="非常好的介绍：Linux定时执行工具cron" target="_blank">非常好的介绍：Linux定时执行工具cron</a> <span class="text-muted">dongwei_6688</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux经过十多年的发展，很多用户都很了解Linux了，这里介绍一下Linux下cron的理解，和大家讨论讨论。cron是一个Linux 定时执行工具，可以在无需人工干预的情况下运行作业，本文档不讲cron实现原理，主要讲一下Linux定时执行工具cron的具体使用及简单介绍。 新增调度任务推荐使用crontab -e命令添加自定义的任务（编辑的是/var/spool/cron下对应用户的cr</div> </li> <li><a href="/article/2667.htm" title="Yii assets目录生成及修改" target="_blank">Yii assets目录生成及修改</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>assets的作用是方便模块化，插件化的，一般来说出于安全原因不允许通过url访问protected下面的文件，但是我们又希望将module单独出来，所以需要使用发布，即将一个目录下的文件复制一份到assets下面方便通过url访问。 assets设置对应的方法位置 \framework\web\CAssetManager.php   assets配置方法 在m</div> </li> <li><a href="/article/2794.htm" title="mac工作软件推荐" target="_blank">mac工作软件推荐</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a> <div>mac上的Terminal + bash ＋ screen组合现在已经非常好用了，但是还是经不起iterm＋zsh＋tmux的冲击。在同事的强烈推荐下，趁着升级mac系统的机会，顺便也切换到iterm＋zsh＋tmux的环境下了。 我为什么要要iterm2 切换过来也是脑袋一热的冲动，我也调查过一些资料，看了下iterm的一些优点： * 兼容性好，远程服务器 vi 什么的低版本能很好兼</div> </li> <li><a href="/article/2921.htm" title="Memcached(三)、封装Memcached和Ehcache" target="_blank">Memcached(三)、封装Memcached和Ehcache</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/spring+ioc/1.htm">spring ioc</a> <div>本文对Ehcache和Memcached进行了简单的封装，这样对于客户端程序无需了解ehcache和memcached的差异，仅需要配置缓存的Provider类就可以在二者之间进行切换，Provider实现类通过Spring IoC注入。 cache.xml <?xml version="1.0" encoding="UTF-8"?> </div> </li> <li><a href="/article/3048.htm" title="Remove Duplicates from Sorted List II" target="_blank">Remove Duplicates from Sorted List II</a> <span class="text-muted">hcx2013</span> <a class="tag" taget="_blank" href="/search/remove/1.htm">remove</a> <div>Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numbers from the original list. For example,Given 1->2->3->3->4->4->5,</div> </li> <li><a href="/article/3175.htm" title="Spring4新特性——注解、脚本、任务、MVC等其他特性改进" target="_blank">Spring4新特性——注解、脚本、任务、MVC等其他特性改进</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a> <div>Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新</div> </li> <li><a href="/article/3302.htm" title="MySQL安装文档" target="_blank">MySQL安装文档</a> <span class="text-muted">liyong0802</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>  工作中用到的MySQL可能安装在两种操作系统中，即Windows系统和Linux系统。以Linux系统中情况居多。   安装在Windows系统时与其它Windows应用程序相同按照安装向导一直下一步就即，这里就不具体介绍，本文档只介绍Linux系统下MySQL的安装步骤。   Linux系统下安装MySQL分为三种：RPM包安装、二进制包安装和源码包安装。二</div> </li> <li><a href="/article/3429.htm" title="使用VS2010构建HotSpot工程" target="_blank">使用VS2010构建HotSpot工程</a> <span class="text-muted">p2p2500</span> <a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/OpenJDK/1.htm">OpenJDK</a><a class="tag" taget="_blank" href="/search/VS2010/1.htm">VS2010</a> <div>1. 下载OpenJDK7的源码：      http://download.java.net/openjdk/jdk7      http://download.java.net/openjdk/      2. 环境配置     ▶</div> </li> <li><a href="/article/3556.htm" title="Oracle实用功能之分组后列合并" target="_blank">Oracle实用功能之分组后列合并</a> <span class="text-muted">seandeng888</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%BB%84/1.htm">分组</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E7%94%A8%E5%8A%9F%E8%83%BD/1.htm">实用功能</a><a class="tag" taget="_blank" href="/search/%E5%90%88%E5%B9%B6/1.htm">合并</a> <div>1       实例解析 由于业务需求需要对表中的数据进行分组后进行合并的处理，鉴于Oracle10g没有现成的函数实现该功能，且该功能如若用JAVA代码实现会比较复杂，因此，特将SQL语言的实现方式分享出来，希望对大家有所帮助。如下： 表test 数据如下： ID,SUBJECTCODE,DIMCODE,VALUE 1&nbs</div> </li> <li><a href="/article/3683.htm" title="Java定时任务注解方式实现" target="_blank">Java定时任务注解方式实现</a> <span class="text-muted">tuoni</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/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/jni/1.htm">jni</a> <div>Spring 注解的定时任务，有如下两种方式： 第一种： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"  xmlns:xsi="http</div> </li> <li><a href="/article/3810.htm" title="11大Java开源中文分词器的使用方法和分词效果对比" target="_blank">11大Java开源中文分词器的使用方法和分词效果对比</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/word%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">word分词器</a><a class="tag" taget="_blank" href="/search/ansj%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">ansj分词器</a><a class="tag" taget="_blank" href="/search/Stanford%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">Stanford分词器</a><a class="tag" taget="_blank" href="/search/FudanNLP%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">FudanNLP分词器</a><a class="tag" taget="_blank" href="/search/HanLP%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">HanLP分词器</a> <div>本文的目标有两个： 1、学会使用11大Java开源中文分词器 2、对比分析11大Java开源中文分词器的分词效果 本文给出了11大Java开源中文分词的使用方法以及分词结果对比代码，至于效果哪个好，那要用的人结合自己的应用场景自己来判断。 11大Java开源中文分词器，不同的分词器有不同的用法，定义的接口也不一样，我们先定义一个统一的接口： /** * 获取文本的所有分词结果, 对比</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>