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/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> <span class="text-muted">good2know</span> <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950232190038110208.htm" title="day15｜前端框架学习和算法" target="_blank">day15｜前端框架学习和算法</a> <span class="text-muted">universe_01</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <span class="text-muted"></span> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> <span class="text-muted">小馋喵知识杂货铺</span> <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> <span class="text-muted">weixin_39607620</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950201094361640960.htm" title="人工智能应用研究快讯 2021-11-30" target="_blank">人工智能应用研究快讯 2021-11-30</a> <span class="text-muted">峰谷皆平</span> <div>[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin</div> </li> <li><a href="/article/1950195876991397888.htm" title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a> <span class="text-muted">TIM老师</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a> <div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a> <span class="text-muted"></span> <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950191208873652224.htm" title="vue element 封装表单" target="_blank">vue element 封装表单</a> <span class="text-muted">影子信息</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> <span class="text-muted">浪子神剑</span> <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div> </li> <li><a href="/article/1950187223672483840.htm" title="GDP经济社会人文民生栅格数据下载网站汇总" target="_blank">GDP经济社会人文民生栅格数据下载网站汇总</a> <span class="text-muted">疯狂学习GIS</span> <div>  本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文</div> </li> <li><a href="/article/1950180497007112192.htm" title="【MySQL】MySQL数据库如何改名" target="_blank">【MySQL】MySQL数据库如何改名</a> <span class="text-muted">武昌库里写JAVA</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://</div> </li> <li><a href="/article/1950178477592342528.htm" title="前端数据库：IndexedDB从基础到高级使用指南" target="_blank">前端数据库：IndexedDB从基础到高级使用指南</a> <span class="text-muted"></span> <div>文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.</div> </li> <li><a href="/article/1950169524384886784.htm" title="【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）" target="_blank">【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认</div> </li> <li><a href="/article/1950169526440095744.htm" title="从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战" target="_blank">从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战</a> <span class="text-muted"></span> <div>作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：3251736703@qq.com各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是</div> </li> <li><a href="/article/1950164483057971200.htm" title="14.tornado操作之应用Websocket协议实现聊天室功能" target="_blank">14.tornado操作之应用Websocket协议实现聊天室功能</a> <span class="text-muted">孤寒者</span> <a class="tag" taget="_blank" href="/search/Tornado%E6%A1%86%E6%9E%B6%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%AE%9E%E6%88%98/1.htm">Tornado框架从入门到实战</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/tornado/1.htm">tornado</a><a class="tag" taget="_blank" href="/search/%E8%81%8A%E5%A4%A9%E5%AE%A4%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0/1.htm">聊天室功能实现</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二</div> </li> <li><a href="/article/1950144218282389504.htm" title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a> <span class="text-muted">web前端学习指南</span> <div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div> </li> <li><a href="/article/1950143305194991616.htm" title="小架构step系列25：错误码" target="_blank">小架构step系列25：错误码</a> <span class="text-muted">秋千码途</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有</div> </li> <li><a href="/article/1950140903616212992.htm" title="Java朴实无华按天计划从入门到实战（强化速战版-66天）" target="_blank">Java朴实无华按天计划从入门到实战（强化速战版-66天）</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E5%AE%89%E6%8E%92/1.htm">时间安排</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%A1%E5%88%92/1.htm">学习计划</a> <div>致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1</div> </li> <li><a href="/article/1950133779502788608.htm" title="在管教孩子的路上" target="_blank">在管教孩子的路上</a> <span class="text-muted">小小女不才</span> <div>在我小的时候，我不知道爸妈对于管教孩子有着怎样的定义？大概是没有系统，没有教科，也没有类似如今这么多的育儿经验分享之类的，更多的大概就是言传身教，耳濡目染着家庭氛围中的一切。在爸妈的同龄人人中，爸妈对于我和弟弟的管教应该算是成功的，令人羡慕的，村舍之间都是口碑相传着我和弟弟的成绩，拿我们做榜样去影响着小我们一届，两届的孩子们。那个时候，我们也是很多家长眼中的“别人家的孩子”。其实，我们自己的体会和</div> </li> <li><a href="/article/1950132204336115712.htm" title="《跨域资源共享CORS的深层逻辑与前端实践精要》" target="_blank">《跨域资源共享CORS的深层逻辑与前端实践精要》</a> <span class="text-muted"></span> <div>不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了</div> </li> <li><a href="/article/1950131321980383232.htm" title="深入了解 Kubernetes（k8s）：从概念到实践" target="_blank">深入了解 Kubernetes（k8s）：从概念到实践</a> <span class="text-muted"></span> <div>目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带</div> </li> <li><a href="/article/1950130722157162496.htm" title="移动端适配rem方案" target="_blank">移动端适配rem方案</a> <span class="text-muted">简单的码农</span> <div>1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s</div> </li> <li><a href="/article/1950130692448907264.htm" title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</a> <span class="text-muted">二倍速播放</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div> </li> <li><a href="/article/1950127794931429376.htm" title="redis反弹shell时kali无法接收回弹的解决方法" target="_blank">redis反弹shell时kali无法接收回弹的解决方法</a> <span class="text-muted">显哥无敌</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>无法接受回谈大概率是bash命令写的不对，那个crontab中间的星号个数是有意义的，不是随便加的，下面贴一下crontab的基本用法https://www.cnblogs.com/zhoading/p/11572630.html{minute}{hour}{day-of-month}{month}{day-of-week}{full-path-to-shell-script}如果是要cronta</div> </li> <li><a href="/article/1950121289456873472.htm" title="native.js设置可缩放的webview并隐藏缩放控件" target="_blank">native.js设置可缩放的webview并隐藏缩放控件</a> <span class="text-muted">Nanayai</span> <div>需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala</div> </li> <li><a href="/article/1950119224630374400.htm" title="大厂都在用的前端缓存策略，你掌握了吗？" target="_blank">大厂都在用的前端缓存策略，你掌握了吗？</a> <span class="text-muted">AI架构全栈开发实战笔记</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文</div> </li> <li><a href="/article/1950117078799282176.htm" title="Redis反弹Shell" target="_blank">Redis反弹Shell</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/%23%E6%9C%AA%E6%8E%88%E6%9D%83%E8%AE%BF%E9%97%AE%E6%BC%8F%E6%B4%9E/1.htm">#未授权访问漏洞</a><a class="tag" taget="_blank" href="/search/%23SSRF/1.htm">#SSRF</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</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/web%E5%AE%89%E5%85%A8/1.htm">web安全</a> <div>这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器，并且知道路径，还需要有文件读写增删改查的权限条件比较苛刻，但是满足条件上传就会简单一点，我们直接将文件写入www目录下，完了使用工具连接即可。语句：redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell</div> </li> <li><a href="/article/1950115062781898752.htm" title="26. 什么是雪碧图，作用和原理了解吗" target="_blank">26. 什么是雪碧图，作用和原理了解吗</a> <span class="text-muted">yqcoder</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不</div> </li> <li><a href="/article/1950112039502409728.htm" title="H5UI微信小程序前端框架实战指南" target="_blank">H5UI微信小程序前端框架实战指南</a> <span class="text-muted">ai</span> <div>本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下</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>