html
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>
<h1><a id="html_0"></a>html</h1>
<h2><a id="html_2"></a>html元素</h2>
<p>HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。</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>br</span><span class="token punctuation">/></span></span>
</code></pre>
<p>**注释：**开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。</p>
<h2><a id="_HTML__13"></a>嵌套的 HTML 元素</h2>
<p>大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。</p>
<p>HTML 文档由嵌套的 HTML 元素构成。</p>
<h2><a id="_HTML__19"></a>空的 HTML 元素</h2>
<p>没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。</p>
<pre><code class="prism language-html"><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>br</span><span class="token punctuation">></span></span>标签定义换行）
</code></pre>
<p>在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。</p>
<pre><code class="prism language-html">在开始标签中添加斜杠，比如 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <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>br</span> <span class="token punctuation">/></span></span> 其实是更长远的保障。
</code></pre>
<h2><a id="html_35"></a>html属性</h2>
<p>HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。</p>
<p>属性总是以键/值对的形式出现，比如：<em>name=“value”</em>。</p>
<p>属性总是在 HTML 元素的开始标签中规定。</p>
<p>常用标签属性:</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 attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<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>h1</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 attr-name">bgcolor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>yellow<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>body</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">target</span><span class="token attr-value"><span class="token punctuation">=</span>_self</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>通用html属性:</p>
<pre><code class="prism language-html">class 规定元素的类名
id 规定元素的唯一id
style 规定元素的样式
title 规定元素的额外信息
</code></pre>
<pre><code>不使用新的p标签下进行换行（新行），可以用 <br /> 标签
<p>this <br /> is ch</p>
this
is ch
</code></pre>
<p>当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）都会被显示为一个空格。</p>
<p>style 属性的作用：<strong>提供了一种改变所有 HTML 元素的样式的通用方法。</strong></p>
<p>样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。</p>
<h2><a id="HTML__74"></a>HTML 文本格式化</h2>
<p>HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。</p>
<table>
<thead>
<tr>
<th><strong>标签</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><b></b></td>
<td>定义粗体文本</td>
</tr>
<tr>
<td><em></em></td>
<td>定义着重文字</td>
</tr>
<tr>
<td><i></i></td>
<td>定义斜体字</td>
</tr>
<tr>
<td><small></small></td>
<td>定义小号字</td>
</tr>
<tr>
<td><strong></strong></td>
<td>定义加重语气</td>
</tr>
<tr>
<td><sub></sub></td>
<td>定义下标字</td>
</tr>
<tr>
<td><sup></sup></td>
<td>定义上标字</td>
</tr>
<tr>
<td><ins></ins></td>
<td>定义插入字</td>
</tr>
<tr>
<td><del></del></td>
<td>定义删除字</td>
</tr>
</tbody>
</table>
<h2><a id="html_90"></a>html样式</h2>
<p>三种样式表插入方法:</p>
<p>外部样式表:</p>
<pre><code><link rel="stylesheet" type="text/css" href="mystyle.css">
</code></pre>
<p>内部样式表:</p>
<pre><code><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</code></pre>
<p>内联样式表:</p>
<pre><code><p style="color: red">
</code></pre>
<h2><a id="HTML__115"></a>HTML 引文、引用和定义元素</h2>
<table>
<thead>
<tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><abbr></abbr></td>
<td align="left">定义缩写或首字母缩略语。</td>
</tr>
<tr>
<td align="left"><address></address></td>
<td align="left">定义文档作者或拥有者的联系信息。</td>
</tr>
<tr>
<td align="left"><bdo></bdo></td>
<td align="left">定义文本方向。</td>
</tr>
<tr>
<td align="left">
<blockquote></blockquote></td>
<td align="left">定义从其他来源引用的节。</td>
</tr>
<tr>
<td align="left"><dfn></dfn></td>
<td align="left">定义项目或缩略词的定义。</td>
</tr>
<tr>
<td align="left"><q></q></td>
<td align="left">定义短的行内引用。</td>
</tr>
<tr>
<td align="left"><cite></cite></td>
<td align="left">定义著作的标题。</td>
</tr>
</tbody>
</table>
<h2><a id="html_127"></a>html标签</h2>
<table>
<thead>
<tr>
<th>标签</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<h2><a id="html_136"></a>html链接</h2>
<p>通常使用 标签在 HTML 中创建链接。</p>
<p>有两种使用 标签的方式：</p>
<ol>
<li>使用 href 属性 - 创建指向另一个文档的链接</li>
<li>使用 name 属性 - 创建文档内的书签</li>
</ol>
<p>href 属性:</p>
<pre><code><a href="http://ch1762.top/">ch1762</a>
</code></pre>
<p>name属性:</p>
<p>name 属性规定锚（anchor）的名称。可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，浏览页面时不可见的。</p>
<p>首先，在 HTML 文档中对锚进行命名（创建一个书签）：</p>
<pre><code><a name="tips">基本的注意事项 - 有用的提示</a>
</code></pre>
<p>然后，在同一个文档中创建指向该锚的链接：</p>
<pre><code><a href="#tips">有用的提示</a>
</code></pre>
<p>也可以在其他页面中创建指向该锚的链接：</p>
<pre><code><a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
</code></pre>
<p>将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。(类似id选择器)</p>
<p>命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。</p>
<h2><a id="html_177"></a>html图像</h2>
<p>图像标签 是空标签,要在页面上显示图像，需要使用源属性（src）.源属性的值是图像的 URL 地址。</p>
<pre><code><img src="url" />
</code></pre>
<p>alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。</p>
<pre><code><img src="boat.gif" alt="Big Boat">
</code></pre>
<p>在浏览器无法载入图像时，替换文本属性将显示这个替代性的文本而不是图像。</p>
<table>
<thead>
<tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"></td>
<td align="left">定义图像。</td>
</tr>
<tr>
<td align="left"><map></map></td>
<td align="left">定义图像地图。</td>
</tr>
<tr>
<td align="left"><area></td>
<td align="left">定义图像地图中的可点击区域。</td>
</tr>
</tbody>
</table>
<h2><a id="html_199"></a>html表格</h2>
<p>表格由 </p> 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由
<table>
<tbody>
<tr>
<td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</td>
</tr>
</tbody>
</table>
<p></p>
<pre><code><table border="1">
<tr>
<th>hello</th>
<th>world</th>
</tr>
<tr>
<td>row1 column1</td>
<td>row1 column2</td>
</tr><tr>
<td>&nbsp;</td>
<td>row2 column2</td>
</tr>
</table>
</code></pre>
<p><img src="https://uploadfiles.nowcoder.com/images/20211025/864166609_1635151840952_1E1C4A77E5FC8BBEA0403AB1FFC816E9"></p>
<h3><a id="html_221"></a>html常用占位符:</h3>
<p>&nbsp； 英文半角空格不换行 &#160； 英文半角空格不换行 &#12288； 中文全角空格 &ensp； 半角空格 &#8194； 半角空格 &#8195； 全角空格 &emsp； 全角空格 &#8197； 四分之一全角空格 &#32； 英文半角空格</p>
<p>连续的&nbsp；会在同一行内显示。即使有无数个连续的&nbsp；，浏览器也不会把它们拆成两行。</p>
<h2><a id="_227"></a>表格标签</h2>
<table>
<thead>
<tr>
<th align="left">表格</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">
<table></table></td>
<td align="left">定义表格</td>
</tr>
<tr>
<td align="left"></td>
</tr>
</tbody>
<caption></caption>
<tbody>
<tr>
<td align="left">定义表格标题。</td>
</tr>
<tr>
<td align="left"></td>
<th></th>
<td align="left">定义表格的表头。</td>
</tr>
<tr>
<td align="left"></td>
</tr>
<tr></tr>
<tr>
<td align="left">定义表格的行。</td>
</tr>
<tr>
<td align="left"></td>
<td></td>
<td align="left">定义表格单元。</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">定义表格的页眉。</td>
</tr>
<tr>
<td align="left"></td>
</tr>
</tbody>
<tbody></tbody>
<tbody>
<tr>
<td align="left">定义表格的主体。</td>
</tr>
<tr>
<td align="left"></td>
</tr>
</tbody>
<tfoot></tfoot>
<tbody>
<tr>
<td align="left">定义表格的页脚。</td>
</tr>
<tr>
<td align="left"></td>
</tr>
</tbody>
<colgroup>
<col>
</colgroup>
<tbody>
<tr>
<td align="left">定义用于表格列的属性。</td>
</tr>
<tr>
<td align="left"></td>
</tr>
</tbody>
<colgroup></colgroup>
<tbody>
<tr>
<td align="left">定义表格列的组。</td>
</tr>
</tbody>
</table>
<h2><a id="html_242"></a>html列表</h2>
<p>列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。</p>
<h3><a id="_246"></a>有序列表</h3>
<p>同样，有序列表也是一列项目，列表项目使用数字进行标记。</p>
<p>有序列表始于 </p>
<ol>
<li> 标签。每个列表项始于 </li>
<li> 标签。</li>
</ol>
<p></p>
<pre><code><ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</code></pre>
<h3><a id="_259"></a>无序列表</h3>
<p>无序列表是一列项目，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。</p>
<p>无序列表始于 </p>
<ul>
<li> 标签。每个列表项始于 </li>
<li>。</li>
</ul>
<p></p>
<pre><code><ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</code></pre>
<h3><a id="_272"></a>自定义列表</h3>
<p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。</p>
<p>自定义列表以 </p>
<dl>
标签开始。每个自定义列表项以 开始。每个自定义列表项的描述以
<dd>
开始。
</dd>
</dl>
<p></p>
<pre><code><h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd></dl>
</code></pre>
<p><img src="https://uploadfiles.nowcoder.com/images/20211025/864166609_1635151841138_6B41D91EB22AEBD7633B7B65F8B03D27"></p>
<h2><a id="_290"></a>列表标签</h2>
<table>
<thead>
<tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">
<ol></ol></td>
<td align="left">有序列表</td>
</tr>
<tr>
<td align="left">
<ul></ul></td>
<td align="left">无序列表</td>
</tr>
<tr>
<td align="left">
<ul>
<li></li>
</ul></td>
<td align="left">列表项</td>
</tr>
<tr>
<td align="left">
<dl></dl></td>
<td align="left">自定义列表</td>
</tr>
<tr>
<td align="left"> </td>
<td align="left">列表项</td>
</tr>
<tr>
<td align="left">
<dd></dd></td>
<td align="left">自定义列表项的描述</td>
</tr>
</tbody>
</table>
<h2><a id="html_301"></a>html块元素</h2>
<blockquote>
<p><strong>可以通过 </strong></p>
<div>
和 将 HTML 元素组合起来。
</div>
<p></p>
</blockquote>
<p>大多数 HTML 元素被定义为块级元素或内联元素。</p>
<p>块级元素在浏览器显示时，通常会以新行来开始（和结束）。内联元素在显示时通常不会以新行开始。</p>
<h3><a id="HTML_div__309"></a>HTML
<div>
元素
</div></h3>
<pre><code>HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
</code></pre>
<h3><a id="HTML_span__321"></a>HTML 元素</h3>
<pre><code>HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
</code></pre>
<table>
<thead>
<tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">
<div></div></td>
<td align="left">定义文档中的分区或节（division/section）。</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">定义 span，用来组合文档中的行内元素。</td>
</tr>
</tbody>
</table>
<h2><a id="html_336"></a>html布局</h2>
<h3><a id="div_338"></a>
<div>
元素布局
</div></h3>
<pre><code><div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
这个例子使用了四个 <div> 元素来创建多列布局：
</code></pre>
<h3><a id="table_346"></a>元素布局
<table></table></h3>
<pre><code><table> 元素不是作为布局工具而设计的。
<table> 元素的作用是显示表格化的数据。
使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：
</code></pre>
<h3><a id="HTML5__354"></a>HTML5 语义元素</h3>
<p>HTML5 提供的新语义元素定义了网页的不同部分：</p>
<table>
<thead>
<tr>
<th>header</th>
<th>定义文档或节的页眉</th>
</tr>
</thead>
<tbody>
<tr>
<td>nav</td>
<td>定义导航链接的容器</td>
</tr>
<tr>
<td>section</td>
<td>定义文档中的节</td>
</tr>
<tr>
<td>article</td>
<td>定义独立的自包含文章</td>
</tr>
<tr>
<td>aside</td>
<td>定义内容之外的内容（比如侧栏）</td>
</tr>
<tr>
<td>footer</td>
<td>定义文档或节的页脚</td>
</tr>
<tr>
<td>details</td>
<td>定义额外的细节</td>
</tr>
<tr>
<td>summary</td>
<td>定义 details 元素的标题</td>
</tr>
</tbody>
</table>
<h3><a id="html_368"></a>html实体</h3>
<p>在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。</p>
<p>如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体（character entities）。</p>
<p>使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。</p>
<p>HTML 中的常用字符实体是不间断空格( )。</p>
<p>**注释：**实体名称对大小写敏感！</p>
<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">nbsp;</td>
<td align="left">#160;</td>
</tr>
<tr>
<td align="left"><</td>
<td align="left">小于号</td>
<td align="left">lt;</td>
<td align="left">#60;</td>
</tr>
<tr>
<td align="left">></td>
<td align="left">大于号</td>
<td align="left">gt;</td>
<td align="left">#62;</td>
</tr>
<tr>
<td align="left">&</td>
<td align="left">和号</td>
<td align="left">amp;</td>
<td align="left">#38;</td>
</tr>
<tr>
<td align="left">"</td>
<td align="left">引号</td>
<td align="left">quot;</td>
<td align="left">#34;</td>
</tr>
<tr>
<td align="left">’</td>
<td align="left">撇号</td>
<td align="left">apos; (IE不支持)</td>
<td align="left">#39;</td>
</tr>
<tr>
<td align="left">￠</td>
<td align="left">分（cent）</td>
<td align="left">cent;</td>
<td align="left">#162;</td>
</tr>
<tr>
<td align="left">£</td>
<td align="left">镑（pound）</td>
<td align="left">pound;</td>
<td align="left">#163;</td>
</tr>
<tr>
<td align="left">¥</td>
<td align="left">元（yen）</td>
<td align="left">yen;</td>
<td align="left">#165;</td>
</tr>
<tr>
<td align="left">€</td>
<td align="left">欧元（euro）</td>
<td align="left">euro;</td>
<td align="left">#8364;</td>
</tr>
<tr>
<td align="left">§</td>
<td align="left">小节</td>
<td align="left">sect;</td>
<td align="left">#167;</td>
</tr>
<tr>
<td align="left">©</td>
<td align="left">版权（copyright）</td>
<td align="left">copy;</td>
<td align="left">#169;</td>
</tr>
<tr>
<td align="left">®</td>
<td align="left">注册商标</td>
<td align="left">reg;</td>
<td align="left">#174;</td>
</tr>
<tr>
<td align="left">™</td>
<td align="left">商标</td>
<td align="left">trade;</td>
<td align="left">#8482;</td>
</tr>
<tr>
<td align="left">×</td>
<td align="left">乘号</td>
<td align="left">times;</td>
<td align="left">#215;</td>
</tr>
<tr>
<td align="left">÷</td>
<td align="left">除号</td>
<td align="left">divide;</td>
<td align="left">#247;</td>
</tr>
</tbody>
</table>
<blockquote>
<p>注: 使用实体时在实体名称和实体编号前加& ,里面的分号不能删掉.</p>
</blockquote>
<h2><a id="html_401"></a>html颜色</h2>
<p>颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。</p>
<p>每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。</p>
<p>大多数的浏览器都支持颜色名集合。</p>
<p>**提示：**仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。</p>
<p>如果需要使用其它的颜色，需要使用十六进制的颜色值。</p>
<h2><a id="HTML_413"></a>HTML表单</h2>
<p>表单是一个包含表单元素的区域。</p>
<p>表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。</p>
<p>表单使用表单标签 来设置:</p>
<pre><code><form>
表单元素
</form>
</code></pre>
<h3><a id="_427"></a>文本域</h3>
<p>文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。</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 punctuation">></span></span>
textField: <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">=</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">=</span><span class="token punctuation">"</span>firstnaem<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>form</span><span class="token punctuation">></span></span>
</code></pre>
<p>表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。</p>
<h3><a id="_439"></a>密码字段</h3>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</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">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pwd<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>form</span><span class="token punctuation">></span></span>
</code></pre>
<p>密码字段字符不会明文显示，而是以星号或圆点替代。</p>
<h3><a id="_449"></a>单选按钮</h3>
<p> 标签定义了表单单选框选项</p>
<p>在相同name组里智能选择一项</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 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">=</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">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</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>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">=</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">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</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>form</span><span class="token punctuation">></span></span>
</code></pre>
<h3><a id="_462"></a>复选框</h3>
<p> 定义了复选框.</p>
<p>在若干给定的选择中选取一个或多个选项。</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 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">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vehicle<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Bike<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>bike<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">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vehicle<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Car<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Car
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
</code></pre>
<h3><a id="_475"></a>提交按钮</h3>
<p> 定义了提交按钮.</p>
<p>当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。</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">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>get<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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</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">=</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>form</span><span class="token punctuation">></span></span>
</code></pre>
<p>method分为get和post两种</p>
<p><em>get：提交的数据量要小于1024字节，表单提交时表单域数值（表单请求的信息：账号、密码…）将在地址栏显示</em></p>
<p><em>post:传递的数据量不受限制，表单提交时表单的域值（表单请求的信息：账号、密码…）不会在地址栏显示，安全性能较高，对信息进行了隐藏，一般在开发中采用post。</em></p>
<p>action 属性规定在提交表单时向何处发送表单数据。</p>
<h2><a id="HTML__495"></a>HTML 表单标签</h2>
<p><strong>New</strong> : HTML5新标签</p>
<table>
<thead>
<tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"></td>
<td align="left">定义供用户输入的表单</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">定义输入域</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">定义文本域 (一个多行的输入控件)</td>
</tr>
<tr>
<td align="left"><label></label></td>
<td align="left">定义了 元素的标签，一般为输入标题</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">定义了一组相关的表单元素，并使用外框包含起来</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">定义了 元素的标题</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">定义了下拉选项列表</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">定义选项组</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">定义下拉列表中的选项</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">定义一个点击按钮</td>
</tr>
<tr>
<td align="left">NEW</td>
<td align="left">指定一个预先定义的输入控件选项列表</td>
</tr>
<tr>
<td align="left">NEW</td>
<td align="left">定义了表单的密钥对生成器字段</td>
</tr>
<tr>
<td align="left">NEW</td>
<td align="left">定义一个计算结果</td>
</tr>
</tbody>
</table>
<h2><a id="html_Uniform_Resource_Locators_515"></a>html Uniform Resource Locators(统一资源定位器)</h2>
<p>URL可以由字母组成或互联网协议（IP）地址。</p>
<p>Web浏览器通过URL从Web服务器请求页面。</p>
<p>当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。</p>
<p>一个统一资源定位器(URL) 用于定位万维网上的文档。</p>
<p>一个网页地址实例: http://www.ch1762.top/html/html-tutorial.html 语法规则:</p>
<p><strong>scheme<code>://</code>host.domain<code>:</code>port<code>/</code>path<code>/</code>filename</strong></p>
<p>说明:</p>
<ul>
<li>
<ul>
<li>scheme - 定义因特网服务的类型。最常见的类型是 http</li>
<li>host - 定义域主机（http 的默认主机是 www）</li>
<li>domain - 定义因特网域名，比如 ch1762.top</li>
<li>:port - 定义主机上的端口号（http 的默认端口号是 80）</li>
<li>path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。</li>
<li>filename - 定义文档/资源的名称</li>
</ul> </li>
</ul>
<h2><a id="XHTML_538"></a>XHTML</h2>
<ul>
<li>XHTML 指的是可扩展超文本标记语言</li>
<li>XHTML 与 HTML 4.01 几乎是相同的</li>
<li>XHTML 是更严格更纯净的 HTML 版本</li>
<li>XHTML 是以 XML 应用的方式定义的 HTML</li>
<li>XHTML 是 <a href="https://www.runoob.com/w3c/w3c-xhtml.html">2001 年 1 月</a>发布的 W3C 推荐标准</li>
<li>XHTML 得到所有主流浏览器的支持</li>
</ul>
<h3><a id="_HTML__547"></a>与 HTML 相比最重要的区别：</h3>
<h4><a id="_549"></a>文档结构</h4>
<ul>
<li>XHTML DOCTYPE 是强制性的</li>
<li> 中的 XML namespace 属性是强制性的 </li>
<li> 、、<title> 以及 也是强制性的
</title></li>
</ul>
<h4><a id="_555"></a>元素语法</h4>
<ul>
<li>XHTML 元素必须<em>正确嵌套</em></li>
<li>XHTML 元素必须始终关闭</li>
<li>XHTML 元素必须小写</li>
<li>XHTML 文档必须有一个根元素</li>
</ul>
<h4><a id="_562"></a>属性语法</h4>
<ul>
<li>XHTML 属性必须使用小写</li>
<li>XHTML 属性值必须用引号包围</li>
<li>XHTML 属性最小化也是禁止的</li>
</ul>
