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

2016-07-13


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>


浏览器显示如下:

  1. Coffee
  2. 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的基础总结写完了,总的来说学的还不错,对于我们的作业来说,让我们写一个浏览器后

台的管理首页界面,自己试着写了写,更加让自己的知识学的更为牢固。努力,加油!~