您的位置：首页 > Web前端 > HTML

HTML的列表，表单以及其他属性的详解总结

2014-06-02 09:29 405 查看
HTML 支持有序、无序和定义列表。

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。

每个列表项始于 <li>。例如：

<span style="font-size:18px;"><ul>
<li>Coffee</li>
<li>Milk</li>
</ul></span>


浏览器显示如下：

Coffee
Milk

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标

签。例如：

<span style="font-size:18px;"><ol>
<li>Coffee</li>
<li>Milk</li>
</ol></span>


浏览器显示如下：

Coffee
Milk

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以

<dt> 开始。每个自定义列表项的定义以 <dd> 开始。例如：

<span style="font-size:18px;"><dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl></span>


浏览器显示如下：

Coffee Black hot drink Milk White cold drink
在以上的列表中，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。下面再来说一下HTML 表
单和输入。HTML 表单用于搜集不同类型的用户输入。

表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等

等）输入信息的元素。表单使用表单标签（<form>）定义。例如：

<span style="font-size:18px;"><html>

<body>

<form>
名：
<input type="text" name="firstname">
<br>
姓：
<input type="text" name="lastname">
</form>

</body>
</html>
</span>


运行的结果如下：



输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被

用到的输入类型如下：

文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。例如：

<span style="font-size:18px;"><form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form></span>


浏览器显示如下：



注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。例如：

<span style="font-size:18px;"><form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form></span>


浏览器显示如下：



注意，只能从中选取其一。

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。例如：

<span style="font-size:18px;"><form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form></span>


浏览器显示如下：

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作

属性定义的这个文件通常会对接收到的输入数据进行相关的处理。例如：

<span style="font-size:18px;"><form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form></span>


浏览器显示如下：



假如在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页

面。该页面将显示出输入的结果。

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在

页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法

是：

<span style="font-size:18px;"><img src="url" /></span>


替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<span style="font-size:18px;"><img src="boat.gif" alt="Big Boat"></span>


在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不

是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏

览器的人来说是非常有用的。

背景（Backgrounds）

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<span style="font-size:18px;"><body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black"></span>


以上的代码均将背景颜色设置为黑色。

背景（Background）

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗

口进行复制。

提示：如果你打算使用背景图片，你需要紧记一下几点：

背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后，看上去还可以吗？
对文字的注意力被背景图像喧宾夺主了吗？

基本的注意事项：<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的
HTML标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表

（CSS）来定义 HTML 元素的布局和显示属性。颜色仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：

aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、

yellow。如果使用其它颜色的话，就应该使用十六进制的颜色值。

今天到现在就把HTML的基础总结写完了，总的来说学的还不错，对于我们的作业来说，让我们写一个浏览器后

台的管理首页界面，自己试着写了写，更加让自己的知识学的更为牢固。努力，加油！~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航