HTML基本概念

html是超文本标记语言，是一种用于创建网页的标准标记语言。
一个html页面会包含几个基本要素

  1. <!-- 声明为html5文档 -->
  2. <!DOCTYPE html>
  3. <html>
  4.     <!-- 头部元素 -->
  5.     <head>
  6.          <!-- 定义网页编码格式为 utf-8 -->
  7.         <meta charset="utf-8">
  8.         <!-- 网页的标题 -->
  9.         <title>HTML</title>
  10.     </head>
  11.     <!-- 网页内容的可见元素 -->
  12.     <body>
  13.        我是一个网页
  14.     </body>
  15. </html>

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号<>包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 和
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签

  • 开始和结束标签也被称为开放标签和闭合标签

    HTML head 元素

    head 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
    可以添加在头部区域的元素标签为: , <style>, <meta>, <link>, <script> <a name="VUb0J"></a></p> <h3 id="7rjch2"><a name="7rjch2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.title</h3><p>title 标签定义了当前文档的标题。<br /><strong>title在 HTML文档中是必须的</strong><br />title元素:</p> </li><li><p>定义了浏览器工具栏的标题</p> </li><li>当网页添加到收藏夹时，显示在收藏夹中的标题</li><li>显示在搜索引擎结果页面的标题 <a name="gkwJp"></a><h3 id="2x6hka"><a name="2x6hka" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.link</h3><link> 标签定义了文档与外部资源之间的关系。<br /><link> 标签通常用于链接到样式表:<pre><code class="lang-html"><head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </code></pre> <a name="B2Uq1"></a><h3 id="8ictaa"><a name="8ictaa" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.style</h3>style标签定义了HTML文档的样式<br />在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:<pre><code class="lang-html"><head> <style type="text/css"> body { background-color:yellow } p { color:blue } </style> </head> </code></pre> <a name="Qnt0C"></a><h3 id="2djk1m"><a name="2djk1m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.meta</h3>meta标签描述了一些基本的元数据。<br />meta 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。<br />META 元素通常用于指定网页的<strong>描述</strong>，<strong>关键词</strong>，文件的最后修改时间，作者，和其他元数据。<br />元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。<br />meta 一般放置于 <head> 区域<br />为搜索引擎定义关键词:<br /><meta name="keywords" content="朝夕教育，在线教育"><br />为网页定义描述内容:<br /><meta name="description" content="编程 教程"><br />定义网页作者:<br /><meta name="author" content="Tina"><br />每30秒钟刷新当前页面:<br /><meta http-equiv="refresh" content="30"> <a name="ZNSpF"></a><h3 id="3yw81y"><a name="3yw81y" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.script</h3>script标签用于加载脚本文件 <a name="Zytfn"></a><h2 id="iek2u"><a name="iek2u" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML head 元素</h2>| <strong>标签</strong> | <strong>描述</strong> | | —- | —- | | <head> | 定义了文档的信息 | | <title> | 定义了文档的标题 | | <link> | 定义了一个文档和外部资源之间的关系 | | <meta> | 定义了HTML文档中的元数据 | | <script> | 定义了客户端的脚本文件 | | <style> | 定义了HTML文档的样式文件 |</li></ul> <p><a name="bJa7g"></a></p> <h2 id="2i6wrk"><a name="2i6wrk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 元素</h2><p>HTML 文档由 HTML 元素定义。<br />元素就是标签 <a name="ILL0D"></a></p> <h2 id="ek80hd"><a name="ek80hd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 元素语法</h2><ul> <li>HTML 元素以<strong>开始标签</strong>起始</li><li>HTML 元素以<strong>结束标签</strong>终止</li><li><strong>元素的内容</strong>是开始标签与结束标签之间的内容</li><li>某些 HTML 元素具有<strong>空内容</strong></li><li>空元素<strong>在开始标签中进行关闭</strong>（以开始标签的结束而结束）</li><li>大多数 HTML 元素可拥有<strong>属性</strong></li><li>元素和元素之间可以是嵌套关系</li><li><p><strong>标签都是小写</strong> <a name="O6h4Z"></a></p> <h2 id="2wxiu9"><a name="2wxiu9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>属性</h2><p> 属性是 HTML 元素提供的附加信息</p> </li><li><p>HTML 元素可以设置<strong>属性</strong></p> </li><li>属性可以在元素中添加<strong>附加信息</strong></li><li>属性一般描述于<strong>开始标签</strong></li><li>属性总是以名称/值对的形式出现，<strong>比如：name=”value”</strong>。</li><li>属性值应该始终被包括在引号内。</li><li>属性和属性值对大小写不敏感（但是推荐使用小写）下面列出了适用于大多数 HTML 元素的属性： | <strong>属性</strong> | <strong>描述</strong> | | —- | —- | | class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) | | id | 定义元素的唯一id | | style | 规定元素的行内样式（inline style） | | title | 描述了元素的额外信息 (作为工具条使用) |</li></ul> <p><a name="BwXpX"></a></p> <h2 id="arxm6j"><a name="arxm6j" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML标签</h2><p><a name="navm0"></a></p> <h3 id="9lnuye"><a name="9lnuye" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.标题</h3><p>标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<br /><h1> 定义最大的标题。 <h6> 定义最小的标题。<br /><h1>这是一个标题。</h1><br /><h2>这是一个标题。</h2><br /><h3>这是一个标题。</h3><br /><h4>这是一个标题。</h4><br /><h5>这是一个标题。</h5><br /><h6>这是一个标题。</h6><br />请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成<strong>粗体</strong>或<strong>大号</strong>的文本而使用标题。<br />搜索引擎使用标题为您的网页的结构和内容编制索引。<br />因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。<br />应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。 <a name="vHtTa"></a></p> <h3 id="fdcpli"><a name="fdcpli" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.水平线</h3><p><strong><hr/></strong>标签 HTML 页面中创建水平线。</p> <pre><code class="lang-html"><h1>这是一个标题。</h1> <hr/> <h2>这是一个标题。</h2> </code></pre> <p><a name="Ps0oY"></a></p> <h3 id="2isdwh"><a name="2isdwh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.注释</h3><p>注释是用作提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。<br /><strong>注释:</strong> 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。</p> <pre><code class="lang-html"><!-- 这是一个标题 --> <h1>这是一个标题。</h1> </code></pre> <p><a name="yRza4"></a></p> <h3 id="12z7ds"><a name="12z7ds" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.段落</h3><p>段落是通过 <p> 标签定义的，<p>标签是一个块级元素。</p> <pre><code class="lang-html"><p>这是一个段落 </p> <p>这是另一个段落</p> </code></pre> <p><a name="t2b9W"></a></p> <h3 id="45qx85"><a name="45qx85" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.换行</h3><p><strong>br</strong>标签会在不产生一个新段落的情况下进行换行<br /><strong>br</strong>标签是一个空元素。由于关闭标签没有任何意义，因此它没有结束标签。<br /><p>这个<br>段落<br>演示了分行的效果</p> <a name="lKjxL"></a></p> <h3 id="eqjux9"><a name="eqjux9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6.文本格式化</h3><table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><b></td> <td>定义粗体文本</td> </tr> <tr> <td><em></td> <td>定义着重文字</td> </tr> <tr> <td><i></td> <td>定义斜体字</td> </tr> <tr> <td><small></td> <td>定义小号字</td> </tr> <tr> <td><strong></td> <td>定义加重语气</td> </tr> <tr> <td><sub></td> <td>定义下标字</td> </tr> <tr> <td><sup></td> <td>定义上标字</td> </tr> <tr> <td><ins></td> <td>定义插入字</td> </tr> <tr> <td><del></td> <td>定义删除字</td> </tr> </tbody> </table> <p><a name="Mwd6r"></a></p> <h3 id="c2xvsy"><a name="c2xvsy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7.链接</h3><p>HTML使用标签 <a>来设置超文本链接。<br />超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。<br />当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。<br />在标签<a> 中使用了href属性来描述链接的地址。<br />默认情况下，链接将以以下形式出现在浏览器中：</p> <ul> <li>一个未访问过的链接显示为蓝色字体并带有下划线。</li><li>访问过的链接显示为紫色并带有下划线。</li><li>点击链接时，链接显示为红色并带有下划线。</li><li><strong>target属性</strong>可以决定链接以什么形式打开<a href="https://www.baidu.com/">百度</a><br /><a target="_blank" href="https://www.baidu.com/">百度</a> <a name="UoAC4"></a><h3 id="dfvhn"><a name="dfvhn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>8.图片</h3>在 HTML 中，图像由<img> 标签定义。<br /><img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。<br />要在页面上显示图像，你需要使用源属性（src）。src 指向图像的 URL 地址。<br />alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<br /><img src="https://www.zhaoxiedu.net/static/imgs/companyInfo/Logo2.png" alt="logo"> <a name="wlHNU"></a><h3 id="8c8rp8"><a name="8c8rp8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>9.表格</h3><a name="J0iPi"></a><h4 id="jwuaa"><a name="jwuaa" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.基础表格</h4>表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。<pre><code class="lang-html"><table border="1"> <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> <a name="i0kPL"></a><h4 id="57s49"><a name="57s49" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.表头</h4>表格的表头使用 <th> 标签进行定义。<br />浏览器会把表头显示为粗体居中的文本：<pre><code class="lang-html"><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> <a name="jz9uo"></a><h4 id="7eclkx"><a name="7eclkx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.合并单元格</h4>合并单元格可以通过给<strong>td</strong>或者<strong>th</strong>设置<strong>colspan</strong>或者<strong>rowspan</strong>进行和<strong>行合并</strong>以及<strong>列合并</strong><br /><strong>colspan</strong>：合并列<br /><strong>rowspan</strong>：合并行 ```html <h4>横跨两列的单元格：</h4><table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> </li></ul> <p><h4>横跨两行的单元格：</h4></p> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> <code><a name="ZOhnF"></a> #### 4.单元格距离 **cellpadding**：设置单元格内边距<br />**cellspacing**：设置单元格外边距</code>html <h4>cellpadding</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr><br><tr> <td>Second</td> <td>Row</td> </tr> </table> <p><h4> cellspacing</h4></p> <p><table border="1" cellspacing="10"></p> <p><tr> <td>First</td> <td>Row</td> </tr> </p> <p><tr> <td>Second</td> <td>Row</td> </tr> </table></p> <pre><code><a name="hTaY1"></a> #### 5.单元格内容排列方式 **align**：left | right ```html <table width="400" border="1"> <tr> <th align="left">消费项目....</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">衣服</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">化妆品</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">食物</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">总计</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table> </code></pre><p><a name="QjqqH"></a></p> <h4 id="3oy75y"><a name="3oy75y" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 表格标签</h4><table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><table></td> <td>定义表格</td> </tr> <tr> <td><th></td> <td>定义表格的表头</td> </tr> <tr> <td><tr></td> <td>定义表格的行</td> </tr> <tr> <td><td></td> <td>定义表格单元</td> </tr> <tr> <td><thead></td> <td>定义表格的页眉</td> </tr> <tr> <td><tbody></td> <td>定义表格的主体</td> </tr> <tr> <td><tfoot></td> <td>定义表格的页脚</td> </tr> </tbody> </table> <p><a name="ucHKe"></a></p> <h3 id="9kbgia"><a name="9kbgia" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10.列表</h3><p>列表区分为有序列表和无需列表 <a name="s6iv5"></a></p> <h4 id="b6ufuf"><a name="b6ufuf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.有序列表</h4><p>有序列表是一列项目，列表项目使用数字进行标记。<br />有序列表始于 <ol> 标签。每个列表项始于 <li> 标签<br />可以通过<strong>type</strong>属性修改有序列表的样式<strong>type</strong>: A| a| I | i</p> <pre><code class="lang-html"><ol> <li>内容1</li> <li>内容2</li> </ol> </code></pre> <p><a name="rOHZb"></a></p> <h4 id="f9quya"><a name="f9quya" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.无序列表</h4><p>无序列表也是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。<br />无序列表始于 <ul> 标签。每个列表项始于 <li><br />可以通过<strong>type</strong>属性修改无序列表的样式<strong>type</strong>: disc | circle | square</p> <pre><code class="lang-html"><ul> <li>内容1</li> <li>内容2</li> </ul> </code></pre> <p><a name="kXrvQ"></a></p> <h4 id="91cmgj"><a name="91cmgj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.自定义列表</h4><p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。<br />自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始</p> <pre><code class="lang-html"><dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </code></pre> <p><a name="UbhWF"></a></p> <h4 id="5o5dro"><a name="5o5dro" class="reference-link"></a><span class="header-link octicon octicon-link"></span>列表标签</h4><table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><ol></td> <td>定义有序列表。</td> </tr> <tr> <td><ul></td> <td>定义无序列表。</td> </tr> <tr> <td><li></td> <td>定义列表项。</td> </tr> <tr> <td><dl></td> <td>自定义定义列表。</td> </tr> <tr> <td><dt></td> <td>自定义定义项目。</td> </tr> <tr> <td><dd></td> <td>自定义定义的描述。</td> </tr> </tbody> </table> <p><a name="xssP4"></a></p> <h3 id="ahl42a"><a name="ahl42a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>11.区块 div 和 span</h3><p>HTML 可以通过 <div> 和 <span>将元素组合起来。<br />大多数 HTML 元素被定义为<strong>块级元素</strong>或<strong>内联元素</strong>。<br />块级元素在浏览器显示时，通常会以新行来开始（和结束）<br />实例: <h1>, <p>, <ul>, <table><br />内联元素在显示时通常不会以新行开始<br />实例: <b>, <td>, <a>, <img> <a name="OaxE4"></a></p> <h4 id="g0knp8"><a name="g0knp8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.div 元素</h4><p>HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。<br />元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。<br />如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<br />div 元素的另一个常见的用途是文档布局<br /><div>只是一个块级元素<div> <a name="FWZsE"></a></p> <h4 id="a1e0hu"><a name="a1e0hu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.span元素</h4><p>TML <span> 元素是内联元素，可用作文本的容器<br /><span> 元素也没有特定的含义。<br />当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。<br /><span>这是一个span标签</span> <a name="LqMZA"></a></p> <h3 id="ff1jo0"><a name="ff1jo0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12.表单</h3><p>表单是一个包含表单元素的区域。<br />表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。<br />表单使用表单标签 <form> 来设置:<br /><form><br />表单<br /></form><br />action：表单提交地址<br />method: 表单提交方式 <a name="LUU91"></a></p> <h4 id="1rsnlb"><a name="1rsnlb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.input 输入元素</h4><p>多数情况下被用到的表单标签是输入标签（<input>）。<br />输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下： <a name="aQrCh"></a></p> <h5 id="bf3bx"><a name="bf3bx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.文本域（text）</h5><p>文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。</p> <pre><code class="lang-html"><form action="提交地址" method="get"> 账号: <input type="text" name="username"><br> </form> </code></pre> <p><a name="QFfKe"></a></p> <h5 id="7ddqr3"><a name="7ddqr3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.密码 （password）</h5><p>密码字段通过标签<input type="password"> 来定义:</p> <pre><code class="lang-html"><form> 密码: <input type="password" name="pwd"> </form> </code></pre> <p><a name="UUuyb"></a></p> <h5 id="fjrxg"><a name="fjrxg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.单选框（radio）</h5><p><input type="radio"> 标签定义了表单单选框选项</p> <pre><code class="lang-html"><form> <input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="2">女 </form> </code></pre> <p><a name="tI8Pr"></a></p> <h5 id="8r4idi"><a name="8r4idi" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.复选框（checkbox）</h5><p><input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。</p> <pre><code class="lang-html"><form> <input type="checkbox" name="type" value="Bike">篮球 <input type="checkbox" name="type" value="Car">足球 </form> </code></pre> <p><a name="loDoX"></a></p> <h5 id="1zz09m"><a name="1zz09m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.提交按钮 （submit）</h5><p><input type="submit"> 定义了提交按钮.<br />当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理</p> <pre><code class="lang-html"><form> 账号: <input type="text" name="user"> <input type="submit" value="提交"> </form> </code></pre> <p><a name="EEDnF"></a></p> <h5 id="ons3l"><a name="ons3l" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6.输入属性</h5><p><a name="ZDgFi"></a></p> <h6 id="69lz9r"><a name="69lz9r" class="reference-link"></a><span class="header-link octicon octicon-link"></span>readonly：只读</h6><p><a name="WFB7m"></a></p> <h6 id="f4qenr"><a name="f4qenr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>disabled ：禁用</h6><p><a name="YcFU8"></a></p> <h6 id="fdblg7"><a name="fdblg7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>maxlength： 规定输入字段允许的最大长度</h6><p><a name="FoXwj"></a></p> <h4 id="fk6abf"><a name="fk6abf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.select下拉列表</h4><p><em><select></em> 元素定义下拉列表<br /><em><option></em> 元素定义待选择的选项。<br />列表通常会把首个选项显示为被选选项。<br />您能够通过添加 selected 属性来定义预定义选项。</p> <pre><code class="lang-html"><select name="cars"> <option selected value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> </select> </code></pre> <p><a name="fiEgz"></a></p> <h4 id="bc4ksa"><a name="bc4ksa" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.textarea 文本域</h4><p><em><textarea></em> 元素定义多行输入字段，并且可以通过<strong>rows</strong>以及<strong>cols</strong>设置宽高</p> <pre><code class="lang-html"><textarea name="message" rows="10" cols="30"> 这是一个文本域 </textarea> </code></pre> <p><a name="xdHzF"></a></p> <h4 id="dapl2k"><a name="dapl2k" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.button</h4><p><em><button></em> 元素定义可点击的按钮<br /><button type="button">提交</button> <a name="IGcET"></a></p> <h3 id="doght8"><a name="doght8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>13.框架</h3><p>使用框架<strong>iframe</strong>，你可以在同一个浏览器窗口中显示不止一个页面<br /><br />height 和 width 属性用来定义iframe标签的高度与宽度。<br />属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”)<br /> <a name="jjqLq"></a></p> <h2 id="bj3wjp"><a name="bj3wjp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML事件</h2><p>可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。 <a name="K1Ndf"></a></p> <h4 id="dvd2se"><a name="dvd2se" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.表单事件(Form Events)</h4><p>表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):</p> <table> <thead> <tr> <th><strong>属性</strong></th> <th><strong>值</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td>onblur</td> <td><em>script</em></td> <td>当元素失去焦点时运行脚本</td> </tr> <tr> <td>onchange</td> <td><em>script</em></td> <td>当元素改变时运行脚本</td> </tr> <tr> <td>onfocus</td> <td><em>script</em></td> <td>当元素获得焦点时运行脚本</td> </tr> <tr> <td>onreset</td> <td><em>script</em></td> <td>当表单重置时运行脚本。HTML 5 不支持。</td> </tr> <tr> <td>onselect</td> <td><em>script</em></td> <td>当选取元素时运行脚本</td> </tr> <tr> <td>onsubmit</td> <td><em>script</em></td> <td>当提交表单时运行脚本</td> </tr> </tbody> </table> <pre><code class="lang-html"><form action="http://www.baidu.com/" method="get"> 账号：<input onblur="alert('我真帅')" type=" text " name="username "> <br> 密码： <input type="password " name="pwd "> <br> 性别： <input type="radio " name="性别 ">男 <input type="radio " name="性别 ">女 <br> 爱好： <input type="checkbox " name="爱好 ">篮球 <input type="checkbox " name="爱好 ">足球 <input type="checkbox " name="爱好 ">排球 <input type="submit " value="提交 "> </form> </code></pre> <p><a name="b7vKA"></a></p> <h4 id="4jdgg9"><a name="4jdgg9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.键盘事件（Keyboard Events）</h4><table> <thead> <tr> <th><strong>属性</strong></th> <th><strong>值</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td>onkeydown</td> <td><em>script</em></td> <td>当按下按键时运行脚本</td> </tr> <tr> <td>onkeypress</td> <td><em>script</em></td> <td>当按下并松开按键时运行脚本</td> </tr> <tr> <td>onkeyup</td> <td><em>script</em></td> <td>当松开按键时运行脚本</td> </tr> </tbody> </table> <p><a name="E31Fq"></a></p> <h4 id="f9n4t6"><a name="f9n4t6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.鼠标事件（Mouse Events）</h4><p>通过鼠标触发事件, 类似用户的行为:</p> <table> <thead> <tr> <th><strong>属性</strong></th> <th><strong>值</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td>onclick</td> <td><em>script</em></td> <td>当单击鼠标时运行脚本</td> </tr> <tr> <td>ondblclick</td> <td><em>script</em></td> <td>当双击鼠标时运行脚本</td> </tr> <tr> <td>onmousedown</td> <td><em>script</em></td> <td>当按下鼠标按钮时运行脚本</td> </tr> <tr> <td>onmousemove</td> <td><em>script</em></td> <td>当鼠标指针移动时运行脚本</td> </tr> <tr> <td>onmouseout</td> <td><em>script</em></td> <td>当鼠标指针移出元素时运行脚本</td> </tr> <tr> <td>onmouseover</td> <td><em>script</em></td> <td>当鼠标指针移至元素之上时运行脚本</td> </tr> <tr> <td>onmouseup</td> <td><em>script</em></td> <td>当松开鼠标按钮时运行脚本</td> </tr> </tbody> </table>