HTML学习笔记（二）

<a href="#1">使用列表</a>
<a href="#2">使用表格</a>
<a href="#3">使用表单</a>
<a href="#4">添加多媒体</a>

<a name="1">使用列表</a>

• HTML共有3中列表，分别是无序列表、有序列表和定义列表。定义列表是一组带有特殊含义的列表，一个列表项目里包含条件和说明两部分。
• 有序列表 有序列表在列表中将每个元素按数字或字母顺序标号。创建一个有序列表时，以打开和关闭<ol>为开始，然后在每个列表元素前用<li>标识，标识的结束标记为</li>
• 有序列表的序号类型type

类型值	列表项目的序号类型	类型值	列表项目的序号类型
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......

• type属性仅仅适合于有序和无序列表，并不适用于目录列表、自定义项和菜单列表
• 有序列表的起始竖直start 默认情况下，有序列表的编号是从1开始的，通过start属性可以调整编号的起始值。
• 无序列表除了不使用数字和字母以外，其他方面和有序列表类似。无序列表并不依赖顺序来表示重要的程度。无序列表标记ul
• 无序列表的类型type

类型值	列表项目的符号
disc	默认值，黑色实心圆点项目符号“·”
circle	空心圆环项目符号“○”
square	正方形的项目符号“□”

• 定义列表标记dl。定义列表由两部分组成：定义条件和定义描述。定义列表的全称是definition list。<dt>用来指定需要解释的名词，英文全称是definition term；<dd>是具体的解释，英文全称是definition description.

语法：
<dl>
<dt>定义条件</dt>
<dd>定义描述</dd>
... ...
</dl>
说明：在该语法中，<dl>标记和</dl>标记分别定义了列表的开始和结束，<dt>后边添加要解释的名词，而在<dd>后面则是添加该名词的具体解释
注意：尽管在一个自定义列表之外使用<dd>标记来锁紧文本非常有用，但这并不是有效的HTML。

• 菜单列表标记menu 菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中显示效果和无序列表是相同的，因为它的功能也可以通过无序列表来实现

语法：
<menu>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
... ...
</menu>

<a name="2">使用表格</a>

• 表格式网页制作之中使用最多的一个标签，表格可以更清晰地排列数据，而更多的适用于网页的布局定位
• 表格的基本构成table(表格标记)、tr(行标记)、td(单元格标记)

语法：
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
</table>

• 设置表格的标题使用标签<caption>，表格的标题一般位于整个表格的第1行，一个<table>表格只能含有一个表格标题
• 使用<caption>标签来创建表格标题的好处是标题定义包含在表格内。如果表格移动或在HTML文件中重定位，标题会随着表格相应的移动
• 表头<th>是<td>单元格的一种变体，实质上仍是一种单元格。它一般位于第一行和第一列，用来标明这一行或列的内容类别。在一般情况下，浏览器会以粗体和居中的样式显示<th>元素中内容
• 表格的基本属性----表格宽度width，使用width属性来设置表格的宽度。如果不指定宽度，浏览器就会根据表格内容的多少来自动调整宽度。表格的宽度值可以是像素值也可以是百分比。
• 表格的基本属性----表格高度height，表格的高度值也可以是像素值也可以是百分比。
• 表格的基本属性----表格对齐方式align。可以使用表格的align属性来设置表格的对齐方式语法:<table align="对齐方式">，其中align参数的取值有left(整个表格在浏览器页面中左对齐)、center(整个表格在浏览器页面中居中对齐)、right(整个表格在浏览器页面中右对齐)
• 注意上边的align设置的是表格在浏览器中的对齐方式，表格里的单元格的对齐方式需要在行、列或者单元格内另定义。
• 表格的边框宽度border``语法：<table border="边框宽度">，只有设置border值不为0，在网页中才能显示出表格的边框
• border属性设置的表格边框只能影响表格四周的边框宽度，而并不影响单元格之间边框的尺寸。虽然设置边框宽度没有限制，但是边框设置一般不超过5像素，过于宽大的边框会影响表格的整体美观。
• 表格边框颜色bordercolor。前提是border边框的宽度不能为0，否则无法显示出边框的颜色
• 内框宽度cellspacing。表格的内框宽度属性cellspacing用于设置表格内部每个单元格之间的间距，单位是像素。
• 表格内文字与边框间距cellpadding。在默认情况下，单元格里的内容会紧贴着表格的边框，这样看上去非常的拥挤，可以使用cellpadding来设置单元格边框与单元格里的内容之间的距离，单位是像素
• 表格背景颜色bgcolor,该属性针对的是整个表格，bgcolor定义的颜色可以被行、列或者单元格定义的背景颜色覆盖
• 表格背景图像background 语法：<table background="背景图像地址">，背景图像地址可以是相对位置也可以是绝对位置。
• 表格的行属性----行的高度控制height 语法：<tr height="行的高度">
• 表格的行属性----行的边框颜色bordercolor
• 表格的行属性----行背景bgcolor、background 这两个属性仅作用于当前行。这里设置的bgcolor颜色可以覆盖<table>的bgcolor、background属性，不过会被单元格定义的背景颜色所覆盖
• 表格的行属性----行文字的水平对齐方式align.<tr>的align属性用来控制表格当前的水平对齐方式。它不受表格整体对齐方式的影响，却能够被单元格的对齐方式定义所覆盖
• 表格的行属性----行文字的垂直对齐方式valign,垂直对齐方式优3种，分别是top、middle和bottom.语法:<tr valign="垂直对齐方式">。
• 单元格的属性。单元格式表格中最基本的单位。<td>单元格全部包含在行<tr>中，一个行里面可以有任意多个单元格。可以自定义设置单元格的各项属性，这些样式将覆盖<table>和<tr>已经定义的样式
• 单元格的属性----单元格大小width、height 语法：<td width="单元格宽度" height="单元格高度"> 单位都是像素
• 单元格的属性----水平跨度colspan也就是水平合并单元格。语法：<td colspan="跨度的列数">
• 单元格的属性----垂直跨度rowspan也就是垂直合并单元格。语法：<td rowspan="跨度的行数">
• 单元格的属性----对齐方式align、valign.语法：<td align="水平对齐方式" valign="垂直对齐方式">。该语法中，水平对齐方式取值可以是left、center、right，垂直对齐方式的取值可以是top、middle、bottom
• 单元格的属性----单元格的背景色bgcolor.语法：<td bgcolor="背景颜色">。该属性用来指定单元格的背景颜色。
• 单元格的属性----单元格的边框颜色bordercolor.语法：<td bordercolor="边框颜色">。
• 单元格的属性----单元格的亮边框bordercolorlight、暗边框bordercolordark.单元格的亮边框就是单元格边框向光部分,暗边框就是背光部分，通过bordercolorlight、bordercolordark属性可以设置单元格亮暗边框的颜色。语法：<td bordercolorlight="亮边框颜色">、<td bordercolordark="暗边框颜色">。
• 单元格的属性----单元格的背景图像background.语法：<td background="背景图像的地址">。图像地址可以使绝对地址也可以是相对地址
• 表格的结构，还有一些标记是用来表示表结构的，包括表首标记<thead>、表主体标记<tbody>以及表尾标记<tfoot>。这些成对出现的标记设置应用到表格里，用于整体规划表格的行业属性。使用这些标记能对表格的一行或多行单元格属性进行统一修改，从而省去了逐一修改单元格属性的麻烦
• 表格的表首标记<thead>。用于定义表格最上端表首的样式，可以设置背景颜色、文字对齐方式、文字的垂直对齐方式等。一个表元素只能包含一个<thead>标记.

语法：
<thead bgcolor="背景颜色" align="对齐方式">
... ...
</thead>

• 表格的表主体标记<tbody>。用于统一设定表主体部分的样式.一个表元素只能包含一个<tbody>标记.

语法：
<tbody bgcolor="背景颜色" align="对齐方式">
... ...
</tbody>

• 表格的表尾标记<tfoot>。用于统一设定表尾的样式.一个表元素只能包含一个<tfoot>标记.

语法：
<tfoot bgcolor="背景颜色" align="对齐方式">
... ...
</tfoot`>

<a name="3">使用表单</a>

• 表单主要用于收集客户端提供的相关信息，使网页具有交互性，在网页中使用<form>``</form>标记对用来创建一个表单。在表单的<form>标记中，可以设置表单的基本属性，包括表单的名称，处理程序和传送方法等。一般情况下，表单的处理程序action和传送方法method是必不可少的参数。
• 提交表单action用于指定表单数据提交到哪个地址进行处理；表单名称name同于给表单命名；传送方法method属性用于指定在数据提交到服务器的时候使用哪种HTTP提交方法，可取值只有两种get、post；编码方式enctype属性用于设置表单信息提交的编码方式，有application/x-www-form-urlencoded(默认的)和multipart/form-data(MIME编码，上传文件的表单必须使用这个)；目标显示方式target用来指定目标窗口的打开方式，表单的目标窗口往往用来显示表单的返回信息，目标窗口的打开方式有四个选项：_blank,_parent,_top,_self

代码示例：
<form action="mailto:hanqiao6666@163.com" method="post" enctype="application/x-www-form-urlencoded" name="form1" target="_blank"></form>
</body>

• 插入表单对象。网页中的表单由许多不同的表单元素组成。这些表单元素包括文字字段、单选按钮、复选框、菜单和列表以及按钮。
• 文字字段text，用户可以在文字字段内输入字符或者单行文本

语法：
<input name="控件名称" type="text" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数" />

• 密码域password,密文显示

语法：
<input name="控件名称" type="password" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数" />

• 单选按钮radio，是小而圆的按钮，它可以使用户从选择列表中选择一个选项

语法：
<input name="单选按钮名称" type="radio" value="单选按钮的取值" checked />
说明：在一个单选按钮组中只有一个单选按钮可以设置成checked

• 复选框checkbox，复选框可以让用户从一个选项列表中选择多个选项

语法：
<input name="复选框名称" type="checkbox" value="复选框的取值" checked />
说明： checked参数表示该项在默认情况下已经被选中，一个选项列表可以有多个复选框被选中

• 普通按钮button

语法：
<input name="按钮名称" type="button" value="显示在按钮上的文字" onclick="处理程序" />

• 提交按钮submit，这是一类特殊的按钮，单击该类按钮可以实现表单内容的提交

语法：
<input name="按钮名称" type="submit" value="显示在按钮上的文字" onclick="处理程序" />

• 重置按钮reset,重置按钮用来清除用户在页面中输入的信息

语法：
<input name="按钮名称" type="reset" value="显示在按钮上的文字" onclick="处理程序" />

• 图像域image，还可以使用一幅图像作为按钮，这样做可以创建能想象到的任何外观的按钮

语法：
<input name="图像域名称" type="image" src="图像路径" onclick="处理程序" />

• 隐藏域hidden，有时候可能想传送一些数据，这些数据对于用户来说是不可见的。可以通过一个隐藏域来传送这样的数据。隐藏域包含那些要提交处理的数据，但是这些数据并不在浏览器中显示

语法：
<input name="隐藏域名称" type="hidden" value="隐藏域的取值" />
说明： 表单中可以使用多个隐藏域

• 文件域file，文件域在上传文件时用到，它用于查找硬盘中的文件路径，通过表单将选中的文件上传，在上传图像时也常常用到

语法：
<input name="文件域名称" type="file" size="控件的长度" maxlength="最长字符数" />

• 菜单和列表用来选择给定答案中的一种，主要是为了节省页面的空间，都是通过<select>和<option>标记来实现的
• 下拉菜单

语法：
<select name="下拉菜单名称">
<option value="选项值" selected>选项显示内容
......
</select>
说明：选项值是提交表单时的值，而选项显示内容才是真正在页面中显示的选项内容。selected表示该选项在默认情况下是选中的，一个下拉菜单中只能有一个默认选项被选中。下拉菜单的宽度由<option>标记中包含的最长文本宽度来决定的

• 列表项 在页面中列表项可以显示出几条信息，一旦超出这个信息量，在列表项右侧会出现滚动条，拖动滚动条便可以看见所有的选项了

语法：
<select name="列表项名称" size="显示的列表项数" multiple>
<option value="选项值" selected>选项显示内容
......
</select>

• 文本域标记textarea，当需要输入多行文本时使用文本域标记

语法：
<textarea name="文本域名称" cols="列数" rows="行数"></textarea>
说明：在于法中不能使用value属性来建立一个在文本域中显示的初始值，应当在文本域的开头和结束标记中间包含想要在文本域中显示的任何文本

• id标记 是一个比较特殊的标记，它主要用于标识一个唯一的元素。这个元素可以是文本字段，可以是密码域，也可以是其他的表单元素，甚至可以是一幅图像、一个表格

<a name="4">添加多媒体</a>

• 网页的多媒体元素一般包括动态文字、动态图片、声音以及动画等
• 设置滚动效果，滚动标记marquee，使用marquee标记不仅可以移动文字、也可以移动图片、表格等。

语法： <marquee>...</marquee>
说明： 在标记之间添加要进行滚动的内容，并可以在标机之间设置文字或图像的属性

• 滚动方向direction，包含四个值：up down left(默认) right
• 滚动方式behavior

behavior的取值	滚动效果
scroll	循环滚动，默认效果
slide	只滚动一次就停止
alternate	来回交替进行滚动

• 滚动速度scrollamount,滚动的速度实际上是设置每次滚动时移动的长度，以像素为单位

• 滚动延迟scrolldelay,scrolldelay设置滚动的时间间隔。时间间隔的单位是毫秒。如果设置的时间比较长，会产生走走停停的效果。

• 滚动循环loop。默认情况下滚动会不断地循环下去，如果希望滚动几次后停止，可以使用loop设置滚动次数

• 滚动范围width、height。如果不设置滚动背景的面积，默认情况下，水平滚动的文字背景与文字同高、与浏览器窗口同宽，使用width和height参数可以调整其水平和垂直的范围

• 滚动背景颜色bgcolor

• 空白空间hspace、vspace。默认情况下，滚动对象周围的文字或图像是与滚动背景紧密连接的，使用hspace和vspace可以设置它们之间的空白空间

• 插入Flash动画

语法：
<embed src="多媒体文件地址" width="多媒体的宽度" height="多媒体的高度"></embed>

• 插入音频和视频文件

语法：
<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>