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/1942186369648488448.htm" title="也谈一下 30+ 程序员的出路" target="_blank">也谈一下 30+ 程序员的出路</a> <span class="text-muted">写编程的木木</span> <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/%E4%BA%A7%E5%93%81%E7%BB%8F%E7%90%86/1.htm">产品经理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a> <div>前言前两天和一个前端同学聊天，他说不准备再做前端了，准备去考公。不过难度也很大。从20152016年那会儿开始互联网行业爆发，到现在有7、8年了，当年20多岁的小伙子们，现在也都30+了大量的人面临这个问题：大龄程序员就业竞争力差，未来该如何安身立命？先说我个人的看法：除非你有其他更好的资源，否则没有更好的出路认真搞技术，保持技术能力，你大概率不会失业（至少外包还在招人，外包也不少挣…）考公之我见</div> </li> <li><a href="/article/1942184732196401152.htm" title="发起请求并处理响应：`XHR` 与 `axios` 使用指南来啦[特殊字符]~" target="_blank">发起请求并处理响应：`XHR` 与 `axios` 使用指南来啦[特殊字符]~</a> <span class="text-muted"></span> <div>又又又要长脑子呐~了解到通过发起HTTP请求并在不刷新页面的情况下更新页面内容是一种常见的需求。学习使用XMLHttpRequest或axios来实现，现在进行对比两者，比较项目使用时候的优缺点，文末使用表格进行对比学习1.使用XHR实现下面是一个使用XMLHttpRequest发起GET请求并处理服务器响应的示例：html体验AI代码助手代码解读复制代码//创建一个新的XMLHttpReques</div> </li> <li><a href="/article/1942181580797702144.htm" title="深入解析BEM架构：架构级全局样式管理方案" target="_blank">深入解析BEM架构：架构级全局样式管理方案</a> <span class="text-muted">neon1204</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%96%B9%E6%A1%88%E5%88%86%E6%9E%90%E5%92%8C%E5%AE%9E%E8%B7%B5/1.htm">前端方案分析和实践</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a> <div>深入解析BEM架构：架构级全局样式管理方案在前端开发领域，CSS架构一直是影响项目可维护性和可扩展性的关键因素。随着SPA应用的普及，传统CSS管理方式的缺陷在开发中暴露出明显的问题：样式冲突、选择器权重失控、命名污染等，从代码质量和开发效率角度出发可以借鉴一些优秀的案例。各种组件库（element、antd、vant…）使用多了能发现它们的样式就是采取的BEM（Block,Element,Mod</div> </li> <li><a href="/article/1942180319239139328.htm" title="【优秀文章】7月优秀文章推荐" target="_blank">【优秀文章】7月优秀文章推荐</a> <span class="text-muted"></span> <div>优秀文章智能自主运动体与人工智能技术——环境感知、SLAM定位、路径规划、运动控制、多智能体协同作者：fpga和matlabC++之红黑树认识与实现作者：zzh_zao【手把手带你刷好题】–C语言基础编程题(十)作者：草莓熊Lotso飞算JavaAI：从“码农”到“代码指挥官”的终极进化论作者：可涵不会debug前端网页开发学习（HTML+CSS+JS）有这一篇就够！作者：一颗小谷粒</div> </li> <li><a href="/article/1942180319721484288.htm" title="青年开发者董翔：在代码世界中探索创新边界" target="_blank">青年开发者董翔：在代码世界中探索创新边界</a> <span class="text-muted">程序猿全栈の董（董翔）</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%80%85/1.htm">开发者</a> <div>引言：从兴趣萌芽到技术深耕当大多数00后还在适应大学生活时，2004年出生的董翔已在软件技术领域展现出超越同龄人的探索热情。作为软件技术专业大一学生，他以“技术创新解决实际问题”为核心理念，在前端开发、数据修复等领域构建了独特的研究体系。从高中时期自学编程的懵懂少年，到提出“同源数据互补修复机制”“框架质疑学习法”的青年研究者，董翔的成长轨迹折射出新一代技术人对知识的主动建构与实践突破。一、学术探</div> </li> <li><a href="/article/1942170996089876480.htm" title="深入理解 CSS 选择器：从基础到高级" target="_blank">深入理解 CSS 选择器：从基础到高级</a> <span class="text-muted">蓝精灵001</span> <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/%E9%9D%A2%E8%AF%95/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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a> <div>CSS（层叠样式表）是网页设计中不可或缺的一部分，它通过选择器来定位HTML文档中的元素，并为这些元素定义样式。掌握CSS选择器是前端开发的核心技能之一。本文将从最基础的选择器讲起，逐步深入到高级、复杂的结构和伪类/伪元素选择器，帮助你全面掌握CSS选择器的使用。一、什么是CSS选择器？CSS选择器是一种模式，用于匹配文档树中的一个或多个元素。通过选择器，你可以精确地控制哪些HTML元素应该应用特</div> </li> <li><a href="/article/1942169103989010432.htm" title="Visual Studio 代码折叠快捷键（摘要）" target="_blank">Visual Studio 代码折叠快捷键（摘要）</a> <span class="text-muted">简单的绿竹</span> <a class="tag" taget="_blank" href="/search/Visual/1.htm">Visual</a><a class="tag" taget="_blank" href="/search/Studio/1.htm">Studio</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>https://www.likecs.com/show-205302341.html#sc=365.3333435058594代码编辑器的展开和折叠代码确实很方便和实用。以下是展开代码和折叠代码所用到的快捷键，很常用：Ctrl+M+O:折叠所有方法Ctrl+M+M:折叠或者展开当前方法Ctrl+M+L:展开所有方法工具箱的的不见的问题：按快捷键Ctrl+Alt+X全屏：Shift+Alt+Ente</div> </li> <li><a href="/article/1942168347009413120.htm" title="PyQt5—QTextEdit 学习笔记" target="_blank">PyQt5—QTextEdit 学习笔记</a> <span class="text-muted">寄思～</span> <a class="tag" taget="_blank" href="/search/Python%E2%80%94%E2%80%94PyQt5%E7%AC%94%E8%AE%B0/1.htm">Python——PyQt5笔记</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>第二章控件学习一、QTextEdit基础认知QTextEdit是PyQt/PySide框架中用于处理富文本内容的强大控件，它不仅支持纯文本编辑，还能处理HTML、图片等复杂内容，是开发文本编辑器、日志查看器等应用的核心组件。二、最简单的QTextEdit实现下面是一个创建QTextEdit并显示的基础案例，适合零基础入门：importsysfromPyQt5.QtWidgetsimportQApp</div> </li> <li><a href="/article/1942164565215211520.htm" title="利用systemd启动部署在服务器上的web应用" target="_blank">利用systemd启动部署在服务器上的web应用</a> <span class="text-muted">不是吧这都有重名</span> <a class="tag" taget="_blank" href="/search/%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/1.htm">遇到的问题</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>0.背景系统环境：Ubuntu22.04web应用情况：前后端分类，前端采用react，后端采用fastapi1.具体配置1.1前端配置开发态运行（启动命令是npmrundev）,创建systemd服务文件sudonano/etc/systemd/system/frontend.service内容如下：[Unit]Description=ReactFrontendDevServerAfter=ne</div> </li> <li><a href="/article/1942157129628577792.htm" title="ssm高校奖助学金管理系统设计实现" target="_blank">ssm高校奖助学金管理系统设计实现</a> <span class="text-muted"></span> <div>以下是关于SSM高校奖助学金管理系统的技术栈、功能设计、数据库设计及测试设计的详细说明：技术栈后端框架：Spring+SpringMVC+MyBatis（SSM组合），提供IoC、AOP、事务管理和ORM支持。前端技术：Thymeleaf/JSP+Bootstrap+jQuery，实现动态页面和响应式布局。数据库：MySQL8.0，支持事务和高并发访问。安全框架：SpringSecurity，用于</div> </li> <li><a href="/article/1942141881550958592.htm" title="交叉编译Python-3.6.0到aarch64/aarch32 —— 支持sqlite3" target="_blank">交叉编译Python-3.6.0到aarch64/aarch32 —— 支持sqlite3</a> <span class="text-muted"></span> <div>参考https://datko.net/2013/05/10/cross-compiling-python-3-3-1-for-beaglebone-arm-angstrom/平台主机：ubuntu14.0464bit开发板：qemu+aarch64（参考：http://www.cnblogs.com/pengdonglin137/p/6442583.html）工具链：aarch64-linux-</div> </li> <li><a href="/article/1942136078123200512.htm" title="C#上位机实战开发指南" target="_blank">C#上位机实战开发指南</a> <span class="text-muted">ba_wang_mao</span> <div>时隔半个多月，上位机教程终于写完第三章：Windows窗体程序，现开源给大家学习。有任何错误或者修改意见还请回贴指出，谢谢。【第三章】C#上位机实战开发指南.pdfhttps://www.firebbs.cn/thread-14611-1-1.html</div> </li> <li><a href="/article/1942127508384182272.htm" title="【前端进阶】【实战】【性能优化】前端开发中的事件监听与DOM操作优化实践" target="_blank">【前端进阶】【实战】【性能优化】前端开发中的事件监听与DOM操作优化实践</a> <span class="text-muted">患得患失949</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97%E5%AD%AA%E7%94%9F/1.htm">数字孪生</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">前端性能优化</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端开发中的事件监听与DOM操作优化实践在前端开发中，事件监听器的管理和DOM操作的优化是提升应用性能和稳定性的关键。本文将结合具体案例，探讨如何通过技术手段解决这些问题，并分享一些实用的优化技巧。问题背景在一个基于高德地图的应用中，我们实现了一个信息窗口组件（InfoWindow），其中包含视频播放功能和轮播图展示。随着用户交互的增加，我们遇到了以下问题：信息窗口频繁打开关闭后，页面性能明显下降</div> </li> <li><a href="/article/1942122088148037632.htm" title="【数字孪生】【GIS】【实战】高德地图GIS开发实战：从基础到交互进阶" target="_blank">【数字孪生】【GIS】【实战】高德地图GIS开发实战：从基础到交互进阶</a> <span class="text-muted">患得患失949</span> <a class="tag" taget="_blank" href="/search/GIS/1.htm">GIS</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97%E5%AD%AA%E7%94%9F/1.htm">数字孪生</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>高德地图GIS开发实战：从基础到交互进阶一、你将学到什么？GIS开发核心能力地图初始化与个性化样式配置（道路、陆地、POI自定义）。自定义标注（Marker）的创建、居中定位与图标替换。信息窗体（InfoWindow）的内容定制、事件绑定与手动控制。交互开发技能标注点击事件、坐标复制、地图缩放等交互逻辑实现。动态内容更新（多标注对应不同信息窗体内容）。前端性能优化（批量标注管理、事件监听时机控制）</div> </li> <li><a href="/article/1942108472602587136.htm" title="从源码到思想：OneCode框架模块化设计如何解决前端大型应用痛点" target="_blank">从源码到思想：OneCode框架模块化设计如何解决前端大型应用痛点</a> <span class="text-muted">低代码老李</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E8%A1%8C%E4%B8%9A/1.htm">软件行业</a><a class="tag" taget="_blank" href="/search/%E9%A2%86%E5%9F%9F%E8%AE%BE%E8%AE%A1/1.htm">领域设计</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>在前端大型应用开发中，“模块拆分混乱、依赖关系复杂、资源加载失控”是三大痛点。OneCode框架通过Module.js（模块基类）和ModuleFactory.js（模块工厂）构建了一套完整的模块化管理机制，不仅实现了模块的“生老病死”全生命周期管控，更解决了跨模块通信、依赖加载等核心问题。本文从“为什么这么设计”的角度，拆解其底层逻辑与实战价值。一、先理解：前端模块化的核心矛盾无论用什么框架，模</div> </li> <li><a href="/article/1942108469138092032.htm" title="OneCode采用虚拟DOM结构实现服务端渲染的技术实践" target="_blank">OneCode采用虚拟DOM结构实现服务端渲染的技术实践</a> <span class="text-muted"></span> <div>一、技术背景与挑战随着企业级应用复杂度的提升，传统服务端渲染(SSR)面临页面交互性不足的问题，而纯前端SPA架构则存在首屏加载慢和SEO不友好的缺陷。OneCode框架创新性地将虚拟DOM技术引入服务端渲染流程，构建了一套兼顾性能与开发效率的企业级前端解决方案。二、虚拟DOM结构设计2.1组件树层次结构OneCode的虚拟DOM基于组件化思想构建，每个组件通过Component类实现，包含以下核</div> </li> <li><a href="/article/1942108216515162112.htm" title="前端开发问题：SyntaxError: “undefined“ is not valid JSON" target="_blank">前端开发问题：SyntaxError: “undefined“ is not valid JSON</a> <span class="text-muted">我命由我12345</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98%E6%B8%85%E5%8D%95/1.htm">问题清单</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>在JavaScript开发，遇到如下问题SyntaxError:"undefined"isnotvalidJSON#翻译SyntaxError："undefined"不是有效的JSON问题原因当使用JSON.parse()时，传入了一个undefined或字符串"undefined"，而它不是有效的JSON字符串问题复现传入一个undefinedconstjsonStr=undefined;con</div> </li> <li><a href="/article/1942102424143589376.htm" title="Vue.js前端开发实战-----常用UI组件" target="_blank">Vue.js前端开发实战-----常用UI组件</a> <span class="text-muted"></span> <div>1.进入命令行界面，执行yarncreatevite命令，输入项目名称，选择Vue框架，选择JavaScript，完成vue项目创建。2.在完成创建之后在其目录下通过yarn安装ElementPius，具体命令如下：yarnaddelement-plus@2.2.19--save3.在VSCode中创建一个新的vue文件，文件名称命名分别为MyInfo.vue，RoommateDetail.vue</div> </li> <li><a href="/article/1942098264711032832.htm" title="Markdown 安装使用教程" target="_blank">Markdown 安装使用教程</a> <span class="text-muted">小奇JAVA面试</span> <a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/1.htm">安装使用教程</a><a class="tag" taget="_blank" href="/search/markdown/1.htm">markdown</a> <div>一、Markdown简介Markdown是一种轻量级标记语言，语法简洁、易读易写，广泛用于编写博客、文档、README文件等。它可以导出为HTML、PDF等格式，兼容各种平台如GitHub、Typora、VSCode等。二、Markdown编辑器推荐2.1桌面端编辑器平台特点TyporaWindows/macOS/Linux所见即所得，简洁高效VSCode+插件跨平台强大可扩展，开发者首选Mark</div> </li> <li><a href="/article/1942098012591419392.htm" title="jEasyUI 创建自定义视图" target="_blank">jEasyUI 创建自定义视图</a> <span class="text-muted">沐知全栈开发</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>jEasyUI创建自定义视图引言jEasyUI是一款流行的jQueryUI扩展库，它提供了丰富的UI组件和交互效果，帮助开发者快速构建美观、响应式的网页应用。在jEasyUI中，创建自定义视图是一个常见的需求，本文将详细介绍如何使用jEasyUI创建自定义视图，包括视图的结构、样式和交互。视图结构在jEasyUI中，一个自定义视图通常由以下几个部分组成：容器：用于承载视图内容的HTML元素，通常是</div> </li> <li><a href="/article/1942095869033639936.htm" title="华为十年" target="_blank">华为十年</a> <span class="text-muted">weixin_30871905</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a> <div>http://hi.baidu.com/xujiajundd/blog/item/0192e23ba3bd9bef15cecb7c.html上周，我正式提交了离职报告，准备给自己的职业生涯一个很大的转折，这是我长时间的思考最后所做的决定。但真的提出离职后，回想在公司的十年，还是百感交集。1997年7月16日，我只身提着一个包从深圳宝安机场下飞机，走出机场，天是那么蓝、白云那么低、空气那么潮，仰头望</div> </li> <li><a href="/article/1942090190210265088.htm" title="Subversion简单常用问题解决方案列表" target="_blank">Subversion简单常用问题解决方案列表</a> <span class="text-muted">lddongyu</span> <a class="tag" taget="_blank" href="/search/maven%2Fant%2Fsvn/1.htm">maven/ant/svn</a><a class="tag" taget="_blank" href="/search/subversion/1.htm">subversion</a><a class="tag" taget="_blank" href="/search/tortoisesvn/1.htm">tortoisesvn</a><a class="tag" taget="_blank" href="/search/svn/1.htm">svn</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>----------------------------------------eclipse使用subclipse导致jvm崩溃将环境变量APR_ICONV_PATH改为APR_ICONV1_PATH或者下载Subversion1.4.3的zip包，将环境变量APR_ICONV_PATH指向解压后的iconv文件夹。http://doc.iusesvn.com/show-35-1.html---</div> </li> <li><a href="/article/1942086907160752128.htm" title="【前后端联调】MethodArgumentNotValidException" target="_blank">【前后端联调】MethodArgumentNotValidException</a> <span class="text-muted">宣布无人罪</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E8%81%94%E8%B0%83/1.htm">前后端联调</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>【前后端联调】MethodArgumentNotValidException01问题描述前后端联调，前端传了一个参数是null，但是这个参数设置了校验不能为null，所以报了这个错误handleMethodArgumentNotValidException,132]-Validationfailedforargument[0]inpubliccom.ruoyi.common.core.domain</div> </li> <li><a href="/article/1942086528415100928.htm" title="SVN 安装使用教程" target="_blank">SVN 安装使用教程</a> <span class="text-muted">小奇JAVA面试</span> <a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/1.htm">安装使用教程</a><a class="tag" taget="_blank" href="/search/svn/1.htm">svn</a> <div>一、SVN简介SVN（Subversion）是一个流行的集中式版本控制系统，用于跟踪文件的更改历史，常用于软件开发项目的代码管理。虽然Git更加流行，但SVN仍在很多传统企业和大型项目中被广泛使用。二、SVN安装2.1Windows安装（使用TortoiseSVN）下载地址：https://tortoisesvn.net/downloads.html安装后系统右键菜单会添加SVN功能；推荐安装中文</div> </li> <li><a href="/article/1942086402200104960.htm" title="Nginx、Spring Cloud Gateway 与 Higress 的应用场景及核心区别" target="_blank">Nginx、Spring Cloud Gateway 与 Higress 的应用场景及核心区别</a> <span class="text-muted">拂晓神剑zzz</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>Nginx、SpringCloudGateway与Higress的应用场景及核心区别一、应用场景对比1.Nginx：传统Web服务与高性能反向代理典型场景：静态资源服务器（图片、CSS、JS）高并发Web服务反向代理（如JavaTomcat前端）简单负载均衡（轮询、IP哈希）传统企业网站、电商平台入口层优势：轻量级、低资源消耗，单机可处理万级并发稳定可靠，适合长期运行的静态服务社区成熟，插件生态丰</div> </li> <li><a href="/article/1942068225663627264.htm" title="【前端工程化】前端组件模版构建那些事" target="_blank">【前端工程化】前端组件模版构建那些事</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在企业级后台系统中，组件是构建页面的基础单元。与C端不同，B端更注重功能完整性、交互一致性与复用效率。因此，我们需要围绕业务场景封装出可复用、易维护、结构清晰的组件模板。本文档主要围绕组件设计原则、分类建议和使用方式展开，适用于Vue或React技术栈下的开发场景。一、组件设计原则职责单一每个组件只负责一个功能或UI元素，不依赖外部状态；示例：按钮组件只处理点击行为，不包含API调用逻辑；高内聚低</div> </li> <li><a href="/article/1942058032519245824.htm" title="Python实例题：基于 Flask 的在线聊天系统" target="_blank">Python实例题：基于 Flask 的在线聊天系统</a> <span class="text-muted"></span> <div>目录Python实例题题目要求：解题思路：代码实现：Python实例题题目基于Flask的在线聊天系统要求：使用Flask框架构建一个实时在线聊天系统，支持以下功能：用户注册、登录和个人资料管理一对一实时聊天功能群聊功能消息通知和未读消息提示在线用户状态显示使用Flask-SocketIO实现实时通信。使用SQLite数据库存储用户、聊天记录等信息。添加美观的前端界面，支持响应式设计。解题思路：使</div> </li> <li><a href="/article/1942055508483567616.htm" title="DeepSeek AI全面应用：AI时代的高效办公与创意生产指南" target="_blank">DeepSeek AI全面应用：AI时代的高效办公与创意生产指南</a> <span class="text-muted">Want595</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/deepseek/1.htm">deepseek</a> <div>京东链接：https://item.jd.com/15045868.html当当链接：https://product.dangdang.com/29893005.html文章目录写在前面核心亮点1.直击痛点：从“低效搬砖”到“智能掌控”2.创意觉醒：让AI成为你的“灵感引擎”3.跨平台协作：无缝衔接AI生态4.实战驱动：130+案例，即学即用5.超值资源包：扫码即得适合谁读1.职场人2.创作者/自</div> </li> <li><a href="/article/1942054122312232960.htm" title="python炫酷烟花表白源代码,html代码烟花特效python" target="_blank">python炫酷烟花表白源代码,html代码烟花特效python</a> <span class="text-muted">liuyifan0</span> <a class="tag" taget="_blank" href="/search/pygame/1.htm">pygame</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>大家好，小编来为大家解答以下问题，python绘制烟花特定爆炸效果，python炫酷烟花表白源代码，今天让我们一起来看看吧！代码实现：importpygameimportrandomimportmath#屏幕宽度SCREEN_WIDTH=1350SCREEN_HEIGHT=800#烟花颜色COLORS=[(255,0,0),(0,255,0),(0,0,255),(255,255,0),(255,</div> </li> <li><a href="/article/1942045294820651008.htm" title="基于esbuild封装类似tsup工具" target="_blank">基于esbuild封装类似tsup工具</a> <span class="text-muted">aiguangyuan</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%9E%B6%E6%9E%84/1.htm">前端架构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a> <div>在现代前端开发中，构建工具的选择直接影响着项目的开发效率和最终产物的性能。随着TypeScript的普及，开发者对高效、快速的TypeScript构建工具的需求日益增长。esbuild作为一款新兴的JavaScript打包器，以其惊人的构建速度引起了广泛关注，而tsup则是基于esbuild的一个优秀封装，专门为TypeScript库开发提供了零配置的便捷体验。本文将探讨如何基于esbuild核心</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>