声明为 HTML5 文档 doctype 声明是不区分大小写的
元素是 HTML 页面的根元素
元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
</span> 元素描述了<span class="kdocs-bold" style="font-weight:bold;">文档的标题</span></p>
<p style=""><span class="kdocs-bold" style="font-weight:bold;"><body> </span>元素包含了<span class="kdocs-bold" style="font-weight:bold;">可见的页面内容</span></p>
<p style=""><span class="kdocs-bold" style="font-weight:bold;"><h1></span> 元素定义一个大<span class="kdocs-bold" style="font-weight:bold;">标题</span></p>
<p style=""><span class="kdocs-bold" style="font-weight:bold;"><p></span> 元素定义一个<span class="kdocs-bold" style="font-weight:bold;">段落</span></p>
<p style="">注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。</p>
<p style=""> 只有 <body> 区域 (白色部分) 才会在浏览器中显示</p>
<h1 style="">什么是HTML</h1>
<p style="">HTML 是用来描述网页的一种语言。</p>
<p style="">HTML 指的是<span class="kdocs-bold" style="font-weight:bold;">超文本标记语言</span>: <span class="kdocs-bold" style="font-weight:bold;">H</span>yper<span class="kdocs-bold" style="font-weight:bold;">T</span>ext <span class="kdocs-bold" style="font-weight:bold;">M</span>arkup <span class="kdocs-bold" style="font-weight:bold;">L</span>anguage</p>
<p style="">HTML 不是一种编程语言，而是一种<span class="kdocs-bold" style="font-weight:bold;">标记语言</span>。标记语言是一套标记标签 (markup tag)</p>
<p style="">HTML 使用标记标签来描述网页</p>
<p style="">HTML 文档包含了HTML 标签及文本内容</p>
<p style="">HTML文档也叫做 web 页面</p>
<h1 style="">HTML 标签</h1>
<p style="">HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p>
<p style="">HTML 标签是由<span class="kdocs-bold" style="font-weight:bold;">尖括号</span>包围的关键词，比如 <html></p>
<p style="">HTML 标签通常是成对出现的，比如 <b> 和 </b></p>
<p style="">标签对中的第一个标签是<span class="kdocs-bold" style="font-weight:bold;">开始标签</span>，第二个标签是<span class="kdocs-bold" style="font-weight:bold;">结束标签</span></p>
<p style="">开始和结束标签也被称为<span class="kdocs-bold" style="font-weight:bold;">开放标签</span>和<span class="kdocs-bold" style="font-weight:bold;">闭合标签</span></p>
<h1 style="">HTML 元素</h1>
<p style="">"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.</p>
<p style="">但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，</p>
<h1 style="">Web 浏览器</h1>
<p style="">Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。</p>
<p style="">浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。</p>
<h1 style="">HTML 标题</h1>
<p style="">HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3></code></pre>
<h1 style="">HTML 段落</h1>
<p style="">HTML 段落是通过标签 <p> 来定义的。</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><p>这是一个段落。</p>
<p>这是另外一个段落。</p></code></pre>
<h1 style="">HTML 链接</h1>
<p style="">HTML 链接是通过标签 <a> 来定义的。</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><a href="https://www.runoob.com">这是一个链接</a></code></pre>
<p style="">提示:在 href 属性中指定链接的地址。</p>
<h1 style="">HTML 图像</h1>
<p style="">HTML 图像是通过标签 <img> 来定义的.</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><img decoding="async" src="/images/logo.png" width="258" height="39" /></code></pre>
<p style="">注意： 图像的名称和尺寸是以属性的形式提供的。</p>
<h1 style="">HTML 元素语法</h1>
<p style="">HTML 元素以开始标签起始</p>
<p style="">HTML 元素以结束标签终止</p>
<p style="">元素的内容是开始标签与结束标签之间的内容</p>
<p style="">某些 HTML 元素具有空内容（empty content）</p>
<p style="">空元素在开始标签中进行关闭（以开始标签的结束而结束）</p>
<p style="">大多数 HTML 元素可拥有属性</p>
<h2 style="">不要忘记结束标签</h2>
<p style="">即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：</p>
<pre class="kdocs-xml"><code class="language-xml"><p>这是一个段落
<p>这是一个段落</code></pre>
<p style="">以上实例在浏览器中也能正常显示，因为关闭标签是可选的。</p>
<p style="">但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。</p>
<h2 style="">HTML 空元素</h2>
<p style="">没有内容的 HTML 元素被称为空元素。<span class="kdocs-bold" style="font-weight:bold;">空元素是在开始标签中关闭的</span>。</p>
<p style=""><br> 就是没有关闭标签的空元素（<br> 标签定义换行）。</p>
<p style="">在 XHTML、XML 以及未来版本的 HTML 中，<span class="kdocs-bold" style="font-weight:bold;">所有元素都必须被关闭</span>。</p>
<p style=""><span class="kdocs-bold" style="font-weight:bold;">在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法</span>，HTML、XHTML 和 XML 都接受这种方式。</p>
<p style="">即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。</p>
<h2 style="">HTML 提示：使用小写标签</h2>
<h1 style="">HTML 属性</h1>
<p style="">属性是 HTML 元素提供的附加信息。</p>
<h2 style="">HTML 属性</h2>
<p style="">HTML 元素可以设置属性</p>
<p style="">属性可以在元素中添加附加信息</p>
<p style="">属性一般描述于开始标签</p>
<p style="">属性总是以名称/值对的形式出现，比如：name="value"。</p>
<p style="">属性实例</p>
<p style="">HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><a href="http://www.runoob.com">这是一个链接</a></code></pre>
<h2 style="">HTML 属性常用引用属性值</h2>
<p style=""><span class="kdocs-bold" style="font-weight:bold;">属性值应该始终被包括在引号内。</span></p>
<p style="">双引号是最常用的，不过使用单引号也没有问题。</p>
<p style="">注: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：</p>
<p style="">name='John "ShotGun" Nelson'</p>
<h2 style="">HTML 属性参考手册</h2>
<p style="">查看完整的HTML属性列表: HTML 标签参考手册。HTML 标签参考手册</p>
<p style="">下面列出了适用于大多数 HTML 元素的属性：</p>
<p style="">属性描述</p>
<p style="">class为html元素定义一个或多个类名（classname）(类名从样式文件引入)</p>
<p style="">id定义元素的唯一id</p>
<p style="">style规定元素的行内样式（inline style）</p>
<p style="">title描述了元素的额外信息 (作为工具条使用)</p>
<p style="">更多标准属性说明： HTML 标准属性参考手册.</p>
<h1 style="">HTML 标题</h1>
<p style="">标题（Heading）是通过 <h1> - <h6> 标签进行定义的。</p>
<p style=""><h1> 定义最大的标题。 <h6> 定义最小的标题。</p>
<p style="">注释: 浏览器会自动地在标题的前后添加空行。</p>
<h1 style="">HTML 水平线</h1>
<p style=""><hr> 标签在 HTML 页面中创建水平线。</p>
<p style="">hr 元素可用于分隔内容。</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p></code></pre>
<h1 style="">HTML 注释</h1>
<p style="">可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。</p>
<p style="">注释写法如下:</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><!-- 这是一个注释 --></code></pre>
<h1 style="">HTML 段落</h1>
<p style="">段落是通过 <p> 标签定义的。<p> 是块级元素</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><p>这是一个段落 </p>
<p>这是另一个段落</p></code></pre>
<p style="">注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）</p>
<h1 style="">HTML 折行/换行</h1>
<p style="">在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><p>这个<br>段落<br>演示了分行的效果</p></code></pre>
<p style=""><br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。</p>
<h1 style="">HTML 文本格式化</h1>
<h2 style="">HTML 格式化标签</h2>
<p style="">HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体</p>
<p style="">这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。</p>
<p style="">通常<span class="kdocs-bold" style="font-weight:bold;">标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。</span></p>
<p style="">然而，这些标签的含义是不同的：</p>
<p style=""><b> 与<i> 定义粗体或斜体文本。</p>
<p style=""><strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。</p>
<h2 style="">HTML 文本格式化标签</h2>
<div style="max-width:100%;overflow-x:auto;">
<table class="kdocs-table" border="1" style="table-layout:fixed;width:28px;">
<tbody>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">标签</span></span></p></td>
<td class="kdocs-tableCell" style="width:664px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">描述</span></span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><b></span></span></p></td>
<td class="kdocs-tableCell" style="width:664px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义粗体文本</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><em></span></span></p></td>
<td class="kdocs-tableCell" style="width:664px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义着重文字</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><i></span></span></p></td>
<td class="kdocs-tableCell" style="width:664px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义斜体字</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><small></span></span></p></td>
<td class="kdocs-tableCell" style="width:664px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义小号字</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><strong></span></span></p></td>
<td class="kdocs-tableCell" style="width:664px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义加重语气</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><sub></span></span></p></td>
<td class="kdocs-tableCell" style="width:664px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义下标字</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><sup></span></span></p></td>
<td class="kdocs-tableCell" style="width:664px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义上标字</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><ins></span></span></p></td>
<td class="kdocs-tableCell" style="width:664px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义插入字</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><del></span></span></p></td>
<td class="kdocs-tableCell" style="width:664px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义删除字</span></p></td>
</tr>
</tbody>
</table>
</div>
<h2 style="">HTML "计算机输出" 标签</h2>
<div style="max-width:100%;overflow-x:auto;">
<table class="kdocs-table" border="1" style="table-layout:fixed;width:28px;">
<tbody>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">标签</span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">描述</span></span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><code></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义计算机代码</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><kbd></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义键盘码</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><samp></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义计算机代码样本</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><var></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义变量</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><pre></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义预格式文本</span></p></td>
</tr>
</tbody>
</table>
</div>
<h2 style="">HTML 引文, 引用, 及标签定义</h2>
<div style="max-width:100%;overflow-x:auto;">
<table class="kdocs-table" border="1" style="table-layout:fixed;width:28px;">
<tbody>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">标签</span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">描述</span></span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><abbr></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义缩写</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><address></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义地址</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><bdo></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义文字方向</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><blockquote></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义长的引用</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><q></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义短的引用语</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><cite></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义引用、引证</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><dfn></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义一个定义项目。</span></p></td>
</tr>
</tbody>
</table>
</div>
<h1 style="">HTML 链接</h1>
<p style="">HTML 超链接（链接）</p>
<p style="">HTML使用标签 <a>来设置超文本链接。</p>
<p style="">超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。</p>
<p style="">当鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。</p>
<p style="">在标签<a> 中使用了href属性来描述链接的地址。</p>
<p style="">默认情况下，链接将以以下形式出现在浏览器中：</p>
<p style="">一个未访问过的链接显示为蓝色字体并带有下划线。</p>
<p style="">访问过的链接显示为紫色并带有下划线。</p>
<p style="">点击链接时，链接显示为红色并带有下划线。</p>
<p style="">注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。</p>
<h2 style="">HTML 链接语法</h2>
<pre class="kdocs-xml"><code class="language-xml"><a href="https://www.runoob.com/">访问菜鸟教程</a></code></pre>
<p style="">提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。</p>
<h2 style="">HTML 链接 - target 属性</h2>
<p style="">使用 target 属性，你可以定义被链接的文档在何处显示。</p>
<p style="">下面的这行会在新窗口打开文档：</p>
<pre class="kdocs-xml"><code class="language-xml"><a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a></code></pre>
<h2 style="">HTML 链接- id 属性</h2>
<p style="">id 属性可用于创建一个 HTML 文档书签。</p>
<p style="">提示: <span class="kdocs-bold" style="font-weight:bold;">书签不会以任何特殊方式显示</span>，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。</p>
<h1 style="">HTML <head></h1>
<p style="">HTML <head> 元素</p>
<p style=""><head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。</p>
<p style="">可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。</p>
<div style="max-width:100%;overflow-x:auto;">
<table class="kdocs-table" border="1" style="table-layout:fixed;width:28px;">
<tbody>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">标签</span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">描述</span></span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><head></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义了文档的信息</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><title></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义了文档的标题</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><base></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义了页面链接标签的默认链接地址</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><link></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义了一个文档和外部资源之间的关系</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><meta></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义了HTML文档中的元数据</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><script></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义了客户端的脚本文件</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:166px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><style></span></span></p></td>
<td class="kdocs-tableCell" style="width:667px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义了HTML文档的样式文件</span></p></td>
</tr>
</tbody>
</table>
</div>
<h2 style="">HTML <title> 元素</h2>
<p style=""><title> 标签定义了不同文档的标题。</p>
<p style=""><title> 在 HTML/XHTML 文档中是必需的。</p>
<p style=""><title> 元素:</p>
<p style="">定义了浏览器工具栏的标题</p>
<p style="">当网页添加到收藏夹时，显示在收藏夹中的标题</p>
<p style="">显示在搜索引擎结果页面的标题</p>
<h2 style="">HTML <base> 元素</h2>
<p style=""><base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><head>
<base href="http://www.runoob.com/images/" target="_blank">
</head></code></pre>
<h2 style="">HTML <link> 元素</h2>
<p style=""><link> 标签定义了文档与外部资源之间的关系。</p>
<p style=""><link> 标签通常用于链接到样式表:</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head></code></pre>
<h2 style="">HTML <style> 元素</h2>
<p style=""><style> 标签定义了HTML文档的样式文件引用地址.</p>
<p style="">在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
</head></code></pre>
<h2 style="">HTML <meta> 元素</h2>
<p style="">meta标签描述了一些基本的元数据。</p>
<p style=""><meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。</p>
<p style="">META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</p>
<p style="">元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。</p>
<p style=""><meta> 一般放置于 <head> 区域</p>
<h2 style=""><meta> 标签- 使用实例</h2>
<p style="">为搜索引擎定义关键词:</p>
<pre class="kdocs-xml"><code class="language-xml"><meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"></code></pre>
<p style="">为网页定义描述内容:</p>
<pre class="kdocs-xml"><code class="language-xml"><meta name="description" content="免费 Web & 编程 教程"></code></pre>
<p style="">定义网页作者:</p>
<pre class="kdocs-xml"><code class="language-xml"><meta name="author" content="Runoob"></code></pre>
<p style="">每30秒钟刷新当前页面:</p>
<pre class="kdocs-xml"><code class="language-xml"><meta http-equiv="refresh" content="30"></code></pre>
<h2 style="">HTML <script> 元素</h2>
<p style=""><script>标签用于加载脚本文件，如： JavaScript。</p>
<p style=""><script> 元素在以后的章节中会详细描述。</p>
<h1 style="">HTML 样式- CSS</h1>
<p style="">CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。</p>
<h2 style="">如何使用CSS</h2>
<p style="">CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.</p>
<p style="">CSS 可以通过以下方式添加到HTML中:</p>
<p style=""></p>
<p style=""><span class="kdocs-bold" style="font-weight:bold;">内联样式- 在HTML元素中使用"style" 属性</span></p>
<p style=""><span class="kdocs-bold" style="font-weight:bold;">内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS</span></p>
<p style=""><span class="kdocs-bold" style="font-weight:bold;">外部引用 - 使用外部 CSS 文件</span></p>
<p style=""></p>
<p style=""><span class="kdocs-bold" style="font-weight:bold;">最好的方式是通过外部引用CSS文件.</span></p>
<h2 style="">内联样式</h2>
<p style="">当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。</p>
<pre class="kdocs-xml"><code class="language-xml"><p style="color:blue;margin-left:20px;">这是一个段落。</p></code></pre>
<h3 style="">HTML样式实例 - 背景颜色</h3>
<p style="">背景色属性（background-color）定义一个元素的背景颜色：</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body></code></pre>
<h3 style="">HTML 样式实例 - 字体, 字体颜色 ，字体大小</h3>
<p style="">我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p></code></pre>
<h3 style="">HTML 样式实例 - 文本对齐方式</h3>
<p style="">使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p></code></pre>
<h3 style="">内部样式表</h3>
<p style="">当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:</p>
<pre class="kdocs-xml"><code class="language-xml"><head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head></code></pre>
<h3 style="">外部样式表</h3>
<p style="">当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。</p>
<pre class="kdocs-xml"><code class="language-xml"><head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head></code></pre>
<h1 style="">HTML 图像</h1>
<h2 style="">HTML 图像- 图像标签（ <img>）和源属性（Src）</h2>
<p style="">在 HTML 中，图像由<img> 标签定义。</p>
<p style=""><img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。</p>
<p style="">要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。</p>
<p style="">定义图像的语法是：</p>
<pre class="kdocs-xml"><code class="language-xml"><img src="url" alt="some_text"></code></pre>
<p style="">URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。</p>
<p style="">浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。</p>
<h2 style="">HTML 图像- Alt属性</h2>
<p style="">alt 属性用来为图像定义一串预备的可替换的文本。</p>
<p style="">替换文本属性的值是用户定义的。</p>
<pre class="kdocs-xml"><code class="language-xml"><img src="boat.gif" alt="Big Boat"></code></pre>
<p style="">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</p>
<h2 style="">HTML 图像- 设置图像的高度与宽度</h2>
<p style="">height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。</p>
<p style="">属性值默认单位为像素:</p>
<pre class="kdocs-xml"><code class="language-xml"><img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"></code></pre>
<p style="">提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。</p>
<h2 style="text-align:left;">HTML 图像标签</h2>
<div style="max-width:100%;overflow-x:auto;">
<table class="kdocs-table" border="1" style="table-layout:fixed;width:28px;">
<tbody>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">标签</span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">描述</span></span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><img></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义图像</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><map></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义图像地图</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><area></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style=""><span class="kdocs-fontSize" style="font-size:9pt;">定义图像地图中的可点击区域</span></p></td>
</tr>
</tbody>
</table>
</div>
<h1 style="">HTML 表格</h1>
<p style="">表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。</p>
<p style="">数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</p>
<p style=""></p>
<h2 style="text-align:left;">HTML 表格标签</h2>
<div style="max-width:100%;overflow-x:auto;">
<table class="kdocs-table" border="1" style="table-layout:fixed;width:28px;">
<tbody>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">标签</span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-bold" style="font-weight:bold;">描述</span></span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><table></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;">定义表格</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><th></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;">定义表格的表头</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><tr></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;">定义表格的行</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><td></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;">定义表格单元</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><caption></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;">定义表格标题</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><colgroup></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;">定义表格列的组</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><col></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;">定义用于表格列的属性</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><thead></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;">定义表格的页眉</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><tbody></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;">定义表格的主体</span></p></td>
</tr>
<tr class="kdocs-tableRow">
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;"><span class="kdocs-underline" style="text-decoration:underline;"><tfoot></span></span></p></td>
<td class="kdocs-tableCell" style="width:369px;vertical-align:top;height:52px;"><p style="text-align:left;"><span class="kdocs-fontSize" style="font-size:9pt;">定义表格的页脚</span></p></td>
</tr>
</tbody>
</table>
</div>
<div class="kdocs-line-container" style="display:flex;">
<div class="kdocs-img" style="background-color:#F5F7F9;flex-direction:column;max-width:100%;display:flex;width:636;justify-content:center;align-items:center;height:auto;">
<div class="kdocs-img" style="padding-top:56.289307%;height:0;"> <a href="http://img.e-com-net.com/image/info8/3159bb6db3e040e5a1e57ed9fb7ec886.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3159bb6db3e040e5a1e57ed9fb7ec886.jpg" style="margin-left:;display:block;width:100.0%;margin-top:-56.289307%;height:auto;;border:1px solid black;" width="638" height="359" alt="HTML-HyperText Markup Language_第2张图片"></a>
</div>
</div>
</div>
<div class="kdocs-line-container" style="display:flex;">
<div class="kdocs-img" style="background-color:#F5F7F9;flex-direction:column;max-width:100%;display:flex;width:740;justify-content:center;align-items:center;height:auto;">
<div class="kdocs-img" style="padding-top:53.10811%;height:0;"> <a href="http://img.e-com-net.com/image/info8/8d5f21f7202e465ebe7749e7e4979171.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8d5f21f7202e465ebe7749e7e4979171.jpg" style="margin-left:;display:block;width:100.0%;margin-top:-53.10811%;height:auto;;border:1px solid black;" width="650" height="346" alt="HTML-HyperText Markup Language_第3张图片"></a>
</div>
</div>
</div>
<p style=""></p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table></code></pre>
<h2 style="">HTML 表格和边框属性</h2>
<p style="">如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。</p>
<p style="">使用边框属性来显示一个带有边框的表格：</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table></code></pre>
<h2 style="">HTML 表格表头</h2>
<p style="">表格的表头使用 <th> 标签进行定义。</p>
<p style="">大多数浏览器会把表头显示为粗体居中的文本：</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table></code></pre>
<p style="text-align:null;">在浏览器显示如下：</p>
<div class="kdocs-line-container" style="display:flex;">
<div class="kdocs-img" style="background-color:#F5F7F9;flex-direction:column;max-width:100%;display:flex;width:214;justify-content:center;align-items:center;height:auto;">
<div class="kdocs-img" style="padding-top:38.317757%;height:0;"> <a href="http://img.e-com-net.com/image/info8/e916d11ebc954b418490ebc4a42f7688.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e916d11ebc954b418490ebc4a42f7688.jpg" style="margin-left:;display:block;width:100.0%;margin-top:-38.317757%;height:auto;" width="211" height="81"></a>
</div>
</div>
</div>
<h1 style="">HTML 列表</h1>
<p style="">HTML 支持有序、无序和定义列表:</p>
<h2 style="text-align:left;">HTML无序列表</h2>
<p style="text-align:null;">无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。</p>
<p style="text-align:null;">无序列表使用 <ul> 标签</p>
<pre class="kdocs-xml"><code class="language-xml"><ul>
<li>Coffee</li>
<li>Milk</li>
</ul></code></pre>
<p style="text-align:null;">浏览器显示如下：</p>
<ul>
<li style="margin-left:1.4em;list-style-type:disc;text-indent:0;"><p>Coffee</p></li>
</ul>
<ul>
<li style="margin-left:1.4em;list-style-type:disc;text-indent:0;"><p>Milk</p></li>
</ul>
<h2 style="">HTML 有序列表</h2>
<p style="">同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。</p>
<p style="">列表项使用数字来标记。</p>
<pre class="kdocs-xml"><code class="language-xml"><ol>
<li>Coffee</li>
<li>Milk</li>
</ol></code></pre>
<p style="">浏览器中显示如下：</p>
<ol start="1">
<li style="margin-left:1.4em;list-style-type:decimal;text-indent:0;"><p>Coffee</p></li>
</ol>
<ol start="2">
<li style="margin-left:1.4em;list-style-type:decimal;text-indent:0;"><p>Milk</p></li>
</ol>
<h2 style="">HTML 自定义列表</h2>
<p style="">自定义列表不仅仅是一列项目，而是项目及其注释的组合。</p>
<p style="">自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 结束。</p>
<pre class="kdocs-xml"><code class="language-xml"><dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl></code></pre>
<p style="">浏览器显示如下：</p>
<p style="">Coffee</p>
<p style="">- black hot drink</p>
<p style="">Milk</p>
<p style="">- white cold drink</p>
<p style="">注意事项 - 有用提示</p>
<p style="">提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。</p>
<h1 style="">HTML <div> 和<span></h1>
<p style="">HTML 可以通过 <div> 和 <span>将元素组合起来。</p>
<h2 style="">HTML 区块元素</h2>
<p style="">大多数 HTML 元素被定义为块级元素或内联元素。</p>
<p style="">块级元素在浏览器显示时，通常会以新行来开始（和结束）。</p>
<p style="">实例: <h1>, <p>, <ul>, <table></p>
<h2 style="">HTML 内联元素</h2>
<p style="">内联元素在显示时通常不会以新行开始。</p>
<p style="">实例: <b>, <td>, <a>, <img></p>
<h2 style="">HTML <div> 元素</h2>
<p style="">HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。</p>
<p style=""><div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。</p>
<p style="">如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。</p>
<p style=""><div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。</p>
<h2 style="">HTML <span> 元素</h2>
<p style="">HTML <span> 元素是内联元素，可用作文本的容器</p>
<p style=""><span> 元素也没有特定的含义。</p>
<p style="">当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。</p>
<h1 style="">HTML 布局</h1>
<h2 style="">网站布局</h2>
<p style="">大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。</p>
<p style="">大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。</p>
<p style=""><span class="kdocs-bold" style="font-weight:bold;">虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。</span></p>
<h2 style="">HTML 布局 - 使用<div> 元素</h2>
<p style="">div 元素是用于分组 HTML 元素的块级元素。</p>
<p style="">下面的例子使用五个 div 元素来创建多列布局：</p>
<p style="">实例</p>
<pre class="kdocs-xml"><code class="language-xml"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)
HTML 布局 - 使用表格
使用 HTML
标签是创建布局的一种简单的方式。
大多数站点可以使用
或者
元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
实例
菜鸟教程(runoob.com)
主要的网页标题
|
菜单
HTML
CSS
JavaScript
|
内容在这里 |
|
版权 © runoob.com |
HTML 布局 - 有用的提示
Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
HTML 表单和输入
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。
我们可以使用
