从0开始学HTML（二）

HTML <a> 标签

<a href="http://www.google.com/index.html">google</a>
复制代码

定义和用法

• 标签订义超连接，用于从一张页面连接到另外一张页面。
• 元素最重要的属性是 href 属性，它指示连接的目标。

href 属性<a href="绝对URL|相对URL|锚URL">

• 绝对URL - 指向另外一个站点（好比 href="http://www.example.com/index.htm"）
• 相对URL - 指向站点内的某个文件（href="index.htm"）
• 锚URL - 指向页面中的锚（href="#top"）

name 属性<a name="anchor_name">

• anchor_name 锚的名称。

提示： 在 HTML5中，<a> 标签的name属性已废弃，之后将会删除。可使用id属性取代

download 属性(html5)<a href="url" download="filename">

• filename 规定做为文件名来使用的文本。

只有 Firefox 和 Chrome 支持 download 属性。

target 属性<a target="_blank|_self|_parent|_top|framename|value">

• _blank 在新窗口中打开被连接文档。
• _self 默认。在相同的框架中打开被连接文档。
• _parent 在父框架集中打开被连接文档。
• _top 在整个窗口中打开被连接文档。
• framename 在指定的框架中打开被连接文档。
• name 属性用于指定锚（anchor）的名称。

HTML <img> 标签

<img src="smiley.gif" alt="Smiley face" height="42" width="42">
复制代码

定义和用法

• img 元素向网页中嵌入一幅图像。请注意，从技术上讲， 标签并不会在网页中插入图像，而是从网页上连接图像。
• <img> 标签建立的是被引用图像的占位空间。
• <img> 标签有两个必需的属性：src 属性 和 alt 属性。

title、alt 属性<img title|alt="替代文本">

• 规定图像的替代文本
• 若是图像在 a 元素中描述目标连接
• 若是图像仅供装饰，使用 title|alt="替代文本"
• title、alt (注意：alt只在IE5.五、六、7中有效)

src 属性<img src="绝对URL|相对URL">

• 绝对URL - 指向其余站点（好比 src="http://www.example.com/"）
• 相对URL - 指向站点内的文件（好比 src="/i/image.gif"）

height 和 width 属性<img width|height="pixels|percent">

• pixels 以像素为单位的高度或宽度值。
• percent 以包含元素的百分比计的高度或宽度值。

usemap 属性<img usemap="value">

• #mapname 要使用的 <map> 元素的 name 或 id 属性

HTML<ul>标签(无序列表)

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
复制代码

定义和用法

• <ul> 标签订义无序列表。 将 <ul>标签与 <li> 标签一块儿使用，建立无序列表。

type属性<ul type="disc|circle|square">

• disc 默认值。实心圆。
• circle 空心圆。
• square 实心方块。

HTML<ol>标签(有序列表)

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
复制代码

定义和用法

• <ol> 标签订义无序列表。 将 <ol>标签与 <li> 标签一块儿使用，建立无序列表。

type属性<ol type="1|a|A|i|I">

• 1默认。十进制数字 (1, 2, 3, 4)。
• a 字母顺序的有序列表，小写 (a, b, c, d)。
• A 字母顺序的有序列表，大写 (A, B, C, D)。
• i 罗马数字，小写 (i, ii, iii, iv)。
• I 罗马数字，大写 (I, II, III, IV) 。

HTML <dl> 标签

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
复制代码

定义和用法

• <dl> 标签订义一个描述列表。
• <dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每个项目/名字）一块儿使用。

HTML<table> 标签

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
<tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot>
复制代码<tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> 复制代码

定义和用法

• <table> 标签订义 HTML 表格。
• 简单的 HTML 表格由table元素以及一个或多个tr、th 或 td 元素组成。
• tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
• 更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

border属性<table border="pixels">

• pixels 规定表格边框宽度。

cellpadding 属性<table cellpadding="pixels|%">

• pixels、% 规定单元边沿与其内容之间的空白。

cellspacing 属性<table cellspacing="pixels|%">

• pixels、% 规定单元之间的空间。

frame 属性<table frame="value">

• void 不显示外侧边框。
• above显示上部的外侧边框。
• below 显示下部的外侧边框。
• hsides 显示上部和下部的外侧边框。
• vsides 显示左边和右边的外侧边框。
• lhs 显示左边的外侧边框。
• rhs 显示右边的外侧边框。
• box 在全部四个边上显示外侧边框。
• border 在全部四个边上显示外侧边框。

rules 属性<table rules="value">

• none 没有线条。
• groups 位于行组和列组之间的线条。
• rows 位于行之间的线条。
• cols 位于列之间的线条。
• all 位于行和列之间的线条。

width 属性<table width="pixels|%">

• pixels 设置以像素计的宽度（例子：width="50"）。
• % 设置以包含元素的百分比计的宽度（例子：width="50%"）。

HTML<tr> 标签

定义和用法

• <tr> 标签订义 HTML 表格中的行。
• tr 元素包含一个或多个 th 或 td 元素。

align 属性<tr align="value">

• left 左对齐内容（默认值）。
• right 右对齐内容。
• center 居中对齐内容（th 元素的默认值）。

valign 属性<tr valign="value">

• top 对内容进行上对齐。
• middle 对内容进行居中对齐（默认值）。
• bottom 对内容进行下对齐。

HTML<td> 标签

定义和用法

• <td> 标签订义 HTML 表格中的标准单元格。
• HTML 表格有两类单元格：
  • 表头单元 - 包含头部信息（由 th 元素建立）
  • 标准单元 - 包含数据（由 td 元素建立）
• td 元素中的文本通常显示为正常字体且左对齐。

align 属性<td align="value">

• left 左对齐内容（默认值）。
• right 右对齐内容。
• center 居中对齐内容。

valign 属性<td valign="value">

• top 对内容进行上对齐。
• middle 对内容进行居中对齐（默认值）。
• bottom 对内容进行下对齐。

colspan 属性<td colspan="number">

• number 设置单元格可横跨的列数。

注释：colspan="0" 指示浏览器横跨到列组的最后一列。

rowspan 属性<td colspan="number">

• 设置单元格可横跨的行数。

注释：rowspan="0" 指示浏览器横跨到表格部分的最后一行（thead、tbody 或者 tfoot）。

HTML<form> 标签

action 属性<form action="URL">

• URL 向何处发送表单数据。
  • 绝对URL - 指向其余站点（好比 src="www.example.com/example.htm"）
  • 相对URL - 指向站点内的文件（好比 src="example.htm"）

enctype 属性<form enctype="value">

• application/x-www-form-urlencoded在发送前编码全部字符（默认）
• multipart/form-data 不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。
• text/plain 空格转换为 "+" 加号，但不对特殊字符编码。

method 属性<form method="post|get">

target 属性<form target="value">

• _blank 在新窗口中打开。
• _self 默认。在相同的框架中打开。
• _parent 在父框架集中打开。
• _top 在整个窗口中打开。
• framename 在指定的框架中打开。

HTML <input> 标签<input type="value">

• button 定义可点击按钮（多数状况下，用于经过 JavaScript 启动脚本）。
• checkbox 定义复选框。
• file 定义输入字段和 "浏览"按钮，供文件上传。
• hidden 定义隐藏的输入字段。
• image 定义图像形式的提交按钮。 <input type="image" src="submit.gif" alt="Submit" >
• password 定义密码字段。该字段中的字符被掩码。
• radio 定义单选按钮。
• reset 定义重置按钮。重置按钮会清除表单中的全部数据。
• submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
• text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

src 属性<input src="url">

• URL 做为提交按钮使用的图像的URL。
  • 绝对 URL - 指向另外一个站点（好比 src="www.example.com/submit.gif"）
  • 相对 URL - 指向网站内的文件（好比 src="submit.gif"）

alt 属性<input alt="value">

• value 图像 input 的替代文本。

alt 属性只能与 <input type="image"> 配合使用。它为图像输入规定替代文本。

checked 属性<input checked="checked">

• checked 预先选定复选框或单选按钮。

checked 属性规定在页面加载时应该被预先选定的 input 元素。
checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。
checked 属性也能够在页面加载后，经过 JavaScript 代码进行设置。

disabled 属性<input disabled="disabled">

• disabled 禁用一个 input 元素。

maxlength 属性<input maxlength="characters">

• characters 输入字段中容许的最大字符数。

readonly 属性<input readonly="value">

• readonly 把输入字段设置为只读。

readonly 属性规定输入字段为只读。
readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。

name 属性<input name="value">

• name 元素的名称。

name 属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识
注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

placeholder 属性<input placeholder="text">

该提示会在输入字段为空时显示，并会在字段得到焦点时消失。
注释：placeholder 属性适用于如下的 <input> 类型：text, search, url, telephone, email 以及 password。

HTML <select> 标签

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
复制代码

multiple 属性<select multiple="value">

• multiple 规定可同时选择多个选项。

HTML <frameset> 标签

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>   
复制代码

定义和用法

• rameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每一个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。必须使用 cols 或 rows 属性。

frameset的cols属性<frameset cols="25%,50%,25%">

• pixels|%|*定义框架集中列的数目和尺寸。

frameset的rows属性<frameset rows="25%,50%,25%">

• pixels|%|*定义框架集中行的数目和尺寸。

HTML <frame> 标签

name属性<frame name="value">

• name 规定框架的名称。

src属性<frame scrolling="value">

• URL 规定在框架中显示的文档的 URL。

定义和用法

• <frame> 标签订义 frameset 中的一个特定的窗口（框架）。
• frameset 中的每一个框架均可以设置不一样的属性，好比 border、scrolling、noresize 等等。

frameborder属性<frame frameborder="value">

• 规定是否显示框架周围的边框。
• 0 不显示
• 1 显示

noresize属性<frame noresize="noresize">

• noresize 规定没法调整框架的大小。

scrolling属性<frame scrolling="value">

• 规定是否在框架中显示滚动条。
• auto 在须要的时候显示滚动条。
• yes 始终显示滚动条（即便不须要）。
• no 从不显示滚动条（即便须要）。