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/1892453179853959168.htm" title="微信支付-扫码支付全流程" target="_blank">微信支付-扫码支付全流程</a> <span class="text-muted">自娱自乐22</span> <a class="tag" taget="_blank" href="/search/thinkphp/1.htm">thinkphp</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E6%89%AB%E7%A0%81%E6%94%AF%E4%BB%98/1.htm">微信扫码支付</a> <div>微信支付官方文档：`https://pay.weixin.qq.com/wiki/doc/api/index.html`微信支付分为2种模式：【模式一】：商户后台系统根据微信支付规则链接生成二维码，链接中带固定参数productid（可定义为产品标识或订单号）。用户扫码后，微信支付系统将productid和用户唯一标识(openid)回调商户后台系统(需要设置支付回调URL)，商户后台系统根据pr</div> </li> <li><a href="/article/1892453053508939776.htm" title="mac+php5.3的docker-compose.yml分享" target="_blank">mac+php5.3的docker-compose.yml分享</a> <span class="text-muted">自娱自乐22</span> <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a> <div>version:'3'services:nginx:image:nginx:latestcontainer_name:nginx-composevolumes:-./wwwroot:/usr/share/nginx/html:rw-./nginx/nginx/:/etc/nginx/:rw-./log/nginx:/var/log/nginx:rwrestart:alwayslinks:-phpp</div> </li> <li><a href="/article/1892449143461310464.htm" title="Python+Playwright常用元素定位方法" target="_blank">Python+Playwright常用元素定位方法</a> <span class="text-muted">HAMYHF</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%8A%9F%E8%83%BD%E6%B5%8B%E8%AF%95/1.htm">功能测试</a> <div>CSSselector选择器在CSS中，定位元素主要通过选择器完成，以下是几种常见的CSS选择器定位方法：标签选择器(element):直接使用HTML元素名称来定位，例如p会选择所有段落元素。属性选择器(attribute):选择所有具有指定属性的元素，无论该属性的值是什么。例如，[title]会选择所有包含title属性的元素。选择具有指定属性，并且该属性值完全等于给定值的元素。例如，[typ</div> </li> <li><a href="/article/1892446115870076928.htm" title="JavaScript网页设计案例：打造交互式个人简历网站" target="_blank">JavaScript网页设计案例：打造交互式个人简历网站</a> <span class="text-muted">程序媛小果</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在当今数字化时代，个人简历不再局限于纸质文档，而是越来越多地以网页形式呈现。JavaScript作为一种强大的客户端脚本语言，为网页设计提供了无限可能，使得网页不仅仅是静态的信息展示，而是具有丰富交互性的平台。本文将通过一个案例，展示如何使用HTML、CSS和JavaScript来设计一个交互式的个人简历网站。1.项目概述本案例的目标是创建一个个人简历网站，它不仅展示个人信息、工作经历、教育背景和</div> </li> <li><a href="/article/1892433617058066432.htm" title="使用Odoo Shell卸载模块" target="_blank">使用Odoo Shell卸载模块</a> <span class="text-muted">odoo中国</span> <a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E8%BD%AF%E4%BB%B6/1.htm">开源软件</a><a class="tag" taget="_blank" href="/search/erp/1.htm">erp</a> <div>使用OdooShell卸载模块我们在Odoo使用过程中，因为模块安装错误或者前端错误等导致odoo无法通过界面登录，这时候你可以使用OdooShell来卸载模块。OdooShell是一个交互式Pythonshell，允许你直接与Odoo数据库和模型进行交互。以下是使用OdooShell卸载模块的详细步骤：步骤1：启动OdooShell要启动OdooShell，你需要在终端中运行以下命令。确保你已经</div> </li> <li><a href="/article/1892426166254497792.htm" title="基于 Spring Boot 的社区居民健康管理系统部署说明书" target="_blank">基于 Spring Boot 的社区居民健康管理系统部署说明书</a> <span class="text-muted">小星袁</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1%E5%8E%9F%E6%96%87/1.htm">毕业设计原文</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>目录1系统概述2准备资料3系统安装与部署3.1数据库部署3.1.1MySQL的部署3.1.2Navicat的部署3.2服务器部署3.3客户端部署4系统配置与优化5其他基于SpringBoot的社区居民健康管理系统部署说明书1系统概述本系统主要运用了SpringBoot框架，前端页面的设计主要依托Vue框架来构建，实现丰富且交互性强的用户界面，后台管理功能则采用SpringBoot框架与MySQL数</div> </li> <li><a href="/article/1892421248793767936.htm" title="2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a> <span class="text-muted">白帽安全-黑客4148</span> <a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a> <div>目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div> </li> <li><a href="/article/1892421249762652160.htm" title="2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a> <span class="text-muted">白帽安全-黑客4148</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AF%86%E7%A0%81%E5%AD%A6/1.htm">密码学</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a> <div>目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.</div> </li> <li><a href="/article/1892413304811352064.htm" title="dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)" target="_blank">dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)</a> <span class="text-muted">weixin_39979245</span> <a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/html%E8%AF%AD%E8%A8%80/1.htm">html语言</a> <div>Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN：978</div> </li> <li><a href="/article/1892412800781840384.htm" title="html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作" target="_blank">html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作</a> <span class="text-muted">律保阁-Michael</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/5%E4%B8%ADcss%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">5中css的含义</a> <div>HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48</div> </li> <li><a href="/article/1892412295414345728.htm" title="html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准" target="_blank">html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准</a> <span class="text-muted">vvv666s</span> <div>②学会运用HTML语言中的标记设置颜色、文本格式和列表；熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法；③掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法；④熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会利用表单建立交互式页面；⑤掌握JavaScript语言的语法；⑥掌握在HTML语言代码中嵌入</div> </li> <li><a href="/article/1892410530585440256.htm" title="EDA事件驱动架构 领域事件 Event Sourcing" target="_blank">EDA事件驱动架构 领域事件 Event Sourcing</a> <span class="text-muted">talentluke</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">架构设计</a> <div>摘自http://www.jdon.com/eda.htmlEDA(Event-drivenarchitecture)是以事件为核心，与SOA以服务为核心有本质区别，是状态模式的延伸到架构上，事件是触发状态变化的根源，事件是介于业务和技术两者之间的概念，用户界面是事件主要发生来源，事件也可以来源其他系统或模块，通过事件可以实现系统或组件之间松耦合。EDA可以实现SOA服务之间的调用，事件也可以用于</div> </li> <li><a href="/article/1892407882675187712.htm" title="前端性能优化——如何提高页面加载速度？" target="_blank">前端性能优化——如何提高页面加载速度？</a> <span class="text-muted">忘川...</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>1.将样式表放在头部首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的</div> </li> <li><a href="/article/1892407376435277824.htm" title="前端开发入门指南：HTML、CSS和JavaScript基础知识" target="_blank">前端开发入门指南：HTML、CSS和JavaScript基础知识</a> <span class="text-muted">方向感超强的</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与</div> </li> <li><a href="/article/1892404729082867712.htm" title="前端504错误分析" target="_blank">前端504错误分析</a> <span class="text-muted">ox0080</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%8C%97%E6%BC%82%2B%E6%BB%B4%E6%BB%B4%E5%87%BA%E8%A1%8C/1.htm">北漂+滴滴出行</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/VIP/1.htm">VIP</a><a class="tag" taget="_blank" href="/search/%E6%BF%80%E5%8A%B1/1.htm">激励</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端出现504错误（网关超时）通常是由于代理服务器未能及时从上游服务获取响应。以下是详细分析步骤和解决方案：1.确认错误来源504含义：代理服务器（如Nginx、Apache）在等待后端服务响应时超时。常见架构：前端→代理服务器→后端服务，问题通常出在代理与后端之间。2.排查步骤（1）检查后端服务状态确认服务是否运行：通过日志或监控工具（如systemctlstatus,KubernetesPod</div> </li> <li><a href="/article/1892398803407925248.htm" title="部署前端项目2" target="_blank">部署前端项目2</a> <span class="text-muted">augenstern416</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V</div> </li> <li><a href="/article/1892398677004185600.htm" title="对象的操作" target="_blank">对象的操作</a> <span class="text-muted">augenstern416</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在前端开发中，JavaScript提供了许多内置对象和方法，用于处理数据、操作DOM、处理事件等。以下是一些常用对象及其方法和扩展技巧：1.Object对象Object是JavaScript中最基础的对象，几乎所有对象都继承自Object。常用方法Object.keys(obj)：返回对象的所有可枚举属性的键名数组。constobj={a:1,b:2};console.log(Object.key</div> </li> <li><a href="/article/1892395273758502912.htm" title="【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a> <span class="text-muted">网安詹姆斯</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%E5%A4%A7%E8%B5%9B/1.htm">网络安全大赛</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、S</div> </li> <li><a href="/article/1892390738520502272.htm" title="前端基础入门：HTML、CSS 和 JavaScript" target="_blank">前端基础入门：HTML、CSS 和 JavaScript</a> <span class="text-muted">阿绵</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元</div> </li> <li><a href="/article/1892389477767245824.htm" title="网页制作03-html,css,javascript初认识のhtml的图像设置" target="_blank">网页制作03-html,css,javascript初认识のhtml的图像设置</a> <span class="text-muted">Ama_tor</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E4%B8%93%E6%A0%8F/1.htm">网页制作专栏</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、图像格式网页中图像的格式有三种，Gif，Jpeg，PngGif：Graphicinterchangeformat图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像Jpeg：Giantphotographicexpectgroup，它是一种图像压缩格式，可包含数百万种颜色，不支持</div> </li> <li><a href="/article/1892375095628853248.htm" title="MXTU MAX 苹果cmsv10模板 仿毒舌自适应主题/短视X体验版完全开源" target="_blank">MXTU MAX 苹果cmsv10模板 仿毒舌自适应主题/短视X体验版完全开源</a> <span class="text-muted">希希分享</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E5%B8%8C%E7%BD%9158soho_cn/1.htm">软希网58soho_cn</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E8%B5%84%E6%BA%90/1.htm">源码资源</a><a class="tag" taget="_blank" href="/search/%E4%BB%BF%E6%AF%92%E8%88%8C%E8%87%AA%E9%80%82%E5%BA%94%E4%B8%BB%E9%A2%98%2F/1.htm">仿毒舌自适应主题/</a> <div>基于MxonePro二开的主题，全开源未加密。MXTUMAX仿毒舌苹果CMS影视自适应主题主题说明：1、将mxtheme目录放置根目录|将mxpro目录放置template文件夹中2、苹果cms后台-系统-网站参数配置-网站模板-选择mxpro模板目录填写html3、网站模板选择好之后一定要先访问前台，然后再进入后台设置4、主题后台地址：MXTUMAX图图主题,/admin.php/admin/m</div> </li> <li><a href="/article/1892366015967326208.htm" title="使用Python获取在线股票交易网站的实时交易数据" target="_blank">使用Python获取在线股票交易网站的实时交易数据</a> <span class="text-muted">嵌入式开发项目</span> <a class="tag" taget="_blank" href="/search/2025%E5%B9%B4%E7%88%AC%E8%99%AB%E7%B2%BE%E9%80%9A%E4%B8%93%E6%A0%8F/1.htm">2025年爬虫精通专栏</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/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>目录步骤1：选择股票交易网站步骤2：使用requests库发送HTTP请求步骤3：解析HTML内容步骤4：提取实时交易数据步骤5：存储和使用数据在金融市场中，实时交易数据对于投资者来说具有重要的价值。实时的股票价格、交易量和其他市场指标可以帮助投资者做出更准确的决策，同时也是进行金融分析和建模的重要数据源。在本篇博客中，我们将学习如何使用Python获取在线股票交易网站的实时交易数据。在开始之前，</div> </li> <li><a href="/article/1892361849689665536.htm" title="【FastAPI 】FastAPI 模板：提供静态文件" target="_blank">【FastAPI 】FastAPI 模板：提供静态文件</a> <span class="text-muted">iFakeCoder</span> <a class="tag" taget="_blank" href="/search/Flask/1.htm">Flask</a><a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</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>FastAPI是一个现代、快速（高性能）的Web框架，用于基于标准Python类型提示使用Python3.7+构建API。虽然它的主要用例是构建API，但FastAPI还可以轻松提供静态文件和HTML模板，从而让您可以构建全栈Web应用程序。在此博客中，我们将探讨如何使用FastAPI提供静态文件。我们将介绍基础知识并提供演示以帮助您入门。为什么要提供静态文件？静态文件是不经常更改的资产，并按原样</div> </li> <li><a href="/article/1892360084474884096.htm" title="前端超长列表，虚拟滚动实现" target="_blank">前端超长列表，虚拟滚动实现</a> <span class="text-muted">大橙子-</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>虚拟滚动.container{width:300px;height:500px;overflow:hidden;border:1pxsolid#ccc;margin-top:50px;}.scroll-box{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;}.scroll-height-main</div> </li> <li><a href="/article/1892358824027811840.htm" title="vue制作导航栏html,Vue实现导航栏菜单" target="_blank">vue制作导航栏html,Vue实现导航栏菜单</a> <span class="text-muted">DataQueen</span> <a class="tag" taget="_blank" href="/search/vue%E5%88%B6%E4%BD%9C%E5%AF%BC%E8%88%AA%E6%A0%8Fhtml/1.htm">vue制作导航栏html</a> <div>本文实例为大家分享了Vue实现导航栏菜单的具体代码，供大家参考，具体内容如下这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称您好，用户！v-bind:class="{checked:index==nowIndex}"v-on:click="setTab('menu',index,menus)">{{menu.text}}菜单一的内容菜单二的内</div> </li> <li><a href="/article/1892346975152566272.htm" title="前端框架虚拟DOM的产生" target="_blank">前端框架虚拟DOM的产生</a> <span class="text-muted">大橙子-</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>直接说结论：为了找出与命令式(原生实现步骤)所执行代码的最小差异化，从而优化代码性能。命令式：可以理解为面向过程编程，需要写好每个实现步骤constdiv=document.querySelector('#app')//获取divdiv.innerText='helloworld'//设置文本内容如果需要修改文字内容为“你好”div.innerText='你好'//设置文本内容声明式：可以理解为面</div> </li> <li><a href="/article/1892336006464598016.htm" title="27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？" target="_blank">27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？</a> <span class="text-muted">程序员yt</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>今天给大家分享的是一位粉丝的提问，27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？接下来把粉丝的具体提问和我的回复分享给大家，希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问：211建筑本科，22年毕业后gap一年转码去了英国读的QS100的it的水硕（24年12月份毕业），转码后对就业形势认知不足，时间全花在课业上，八股文和算法准备的不充足，秋招算是惨败。读研</div> </li> <li><a href="/article/1892308146966294528.htm" title="css给网页添加 黑白滤镜" target="_blank">css给网页添加 黑白滤镜</a> <span class="text-muted">nqxcwl</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E7%BB%99%E7%BD%91%E9%A1%B5%E6%B7%BB%E5%8A%A0%E9%BB%91%E7%99%BD%E6%BB%A4%E9%95%9C/1.htm">给网页添加黑白滤镜</a> <div>/*给网页添加黑白滤镜*/html{/*兼容FF*/filter:url("data:image/svgxml;utf8,#grayscale");/*兼容IE内核*/filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*兼容其它，谷歌之类的*/-webkit-filter:grayscale(1);}</div> </li> <li><a href="/article/1892303334145060864.htm" title="Java Pjsip (Pjsua2 api ) 2.10 windows sip语音呼叫教程" target="_blank">Java Pjsip (Pjsua2 api ) 2.10 windows sip语音呼叫教程</a> <span class="text-muted">java_lilin</span> <a class="tag" taget="_blank" href="/search/pjsip/1.htm">pjsip</a><a class="tag" taget="_blank" href="/search/pjsip/1.htm">pjsip</a><a class="tag" taget="_blank" href="/search/sip/1.htm">sip</a><a class="tag" taget="_blank" href="/search/pjsua2/1.htm">pjsua2</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sip/1.htm">sip</a> <div>1.安装swigwin-4.0.1下载地址http://www.swig.org/download.html注意是swigwinWindowsusersshoulddownloadswigwin-4.0.1whichincludesaprebuiltexecutable.配置目录到winpath2.下载pjproject-2.10.zip(如果有python错误请安装py2.7及环境path配置)</div> </li> <li><a href="/article/1892301695560511488.htm" title="芯麦GC1808立体声ADC芯片解析：高性价比与全集成音频采集方案" target="_blank">芯麦GC1808立体声ADC芯片解析：高性价比与全集成音频采集方案</a> <span class="text-muted">青牛科技-Allen</span> <a class="tag" taget="_blank" href="/search/GLOBALCHIP/1.htm">GLOBALCHIP</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/%E6%94%B6%E5%BD%95%E6%9C%BA/1.htm">收录机</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AE%B6%E7%94%A8%E7%94%B5%E5%99%A8/1.htm">家用电器</a> <div>引言在直播设备、智能语音终端等新兴应用的推动下，高性能音频采集系统的需求持续增长。芯麦半导体推出的GC1808立体声音频模数转换器，凭借其全集成信号链设计和灵活的接口配置，为开发者提供了高性价比的音频前端解决方案。本文将从核心架构、关键技术特性及典型应用场景三个方面，深入解析这款芯片的设计亮点。一、GC1808核心特性概览全集成信号链内置64倍过采样率Δ-Σ调制器集成数字梳状滤波器（CombFil</div> </li> <li><a href="/article/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>