《HTML教程》-1.6-1.8教学材料

无序列表用ul标记表示，li表示其中的列表项；有序列表以ol标记表示，li表示其中的列表项；定义列表以dl标记表示，dt标记用于定义列表条目，dd标记用于对列表条目进行说明。列表的基本结构如清单1-12所示。代码说明如下图：以上代码显示了三种列表的基本结构，值得注意的是CSS技术的“选择器”项的说明。“选择器”项的说明，它的结构如下：<dd>选择器</dd><dd> <ul> <li>优先级</li> <li>继承性</li> </ul></dd>这是一种标记的嵌套使用，在定义列表的列表项说明标记dd中嵌套使用了无序列表标记ul。这里虽然只是在dd标记中嵌套使用了ul，但需要说明的是，这种标记嵌套在HTML中是一种普遍的现象。也就是说，HTML标记绝大部分可以相互嵌套！1.7Form标记

Form标记在Web项目开发中占有重要的地位，是收集用户信息的必要元素，并且在许多场合下，还会用Ajax更新某些元素的值，如根据用户的选择更新某个（些）下拉列表的值。HTML5增添了许多新的元素，并增加了许多实用的特性，可以比以前更灵活的使用这Form表单元素。1、表单

HTML表单以form标记表示，用于收集用户不同类型的信息。与以前的标记相同，也是由开始标记<form>和结束标记</form>组成，其中可以包含/嵌套各种表单元素。表单元素稍后进行讲解。先来看一下几个重要的form属性。（1）action属性

用于指定form表单提交时的URL地址，form提交的信息即由URL指定的服务器端脚本进行处理，默认为当面页面，如<formaction="action_handler.jsp">如果整个Web应用请求全部采用Ajax请求的方式，则很少用到这个属性。但在学习服务器端编程时，如JSP，PHP和ASP等，则特别重要。（2）method属性

用于指定提交表单时使用的请求方式，有两种：GET请求和POST请求，默认情况下是GET请求，如下所示。<formaction="action_handler.jsp"method=”POST”>那么，什么时候使用GET请求，什么时候采用POST请求呢？一般来说，有如下规律。以下情况使用GET请求方式：◆提交的数据量小；

◆提交简单的字符数据；

◆提交的数据安全性不敏感（如不包含密码等）。GET请求方式把表单数据连同URL地址一起显示在地址栏中。以下情况使用POST请求：●提交的数据量大；

●提交诸如文件等复杂数据；

●提交安全性敏感的数据。POST请求方式不会将表单信息显示在地址栏中。（3）enctype属性

用于指定表单数据提交时采用的编码方式，默认为application/x-www-form-urlencoded，即提交表单前对所有字符进行编码，空格转换为“+”号（不含双引号），特殊字符转换为ASC码的十六进制数。懂得了这些之后，你就再也不会为了看不懂地址栏中长长的字符串而发愁了！另一个值是multipart/form-data，即提交前不对字符进行编码，文件上传时必须指定属性值。还有一个属性值为text/plain，提交前对字符进行编码，把空格转换成“+”号，但不对特殊字符进行转换。Enctype属性的用法如下：<formaction="action_handler.jsp"method=”POST”enctype=”multipart/form-data”>（4）name属性指定用于识别表单的名字，可以通过这个名字访问表单。在JavaScript操作form表单时十分有用。Form表单还有一些其他属性，为了节约篇幅就不一一列举了，这些属性可以参见表1-7。2、表单元素表单元素有时也称为表单控件。常用的表单元素有：input、select、textarea和button，以及HTML5新增的datalist、keygen和output。Form表单元素中有一个重要的name属性，只有设置了name属性的元素，才可以提交到服务器。这一点务必注意。keygen元素是HTML5新增的用于验证用户的可靠方法，在表单提交时可以生成一对密钥，公钥提交到服务器端，用于后来验证客户端存储的私钥。但这一元素目前仅有Chrome（3.0以上版本）和Opera（10.5以上版本）的浏览器才可以支持，所以虽然很美妙，但离实用还是比较远。（1）input标记Input标记也称为input元素，其他的标记也是一样。它可以指定type属性，生成各种控件，如表1-6和表1-7所示。对于input标记和form标记，HTML5还新增了若干属性，可以对元素进行某些方面的设定，如自动获得焦点，重写某些默认值等。新属性的引入，大大增加了网页制作和程序设计的灵活性。HTML5新增属性如表1-8所示。不论是在Ajax编程还是其他Web脚本编程中，这里的属性都十分有用，希望大家能仔细阅读表1-8，掌握每个属性的用法。（2）select下拉列表标记

Select标记表示下拉列表，可以单选也可以多选。其中列表项以option标记表示。也可以通过optgroup将逻辑上相关的选项组合在一起，使选项更加清晰。下面通过一个例子来说明它的用法。我们列出各个专业供用户选择，代码如下：<selectname="specialty"> <optgrouplabel="计算机系"> <optionvalue="">计算机科学与技术</option> <optionvalue="">软件工程</option> <optionvalue="">软件技术</option> <optionvalue="">计算机应用</option> </optgroup><optgrouplabel="机械系"> <optionvalue="">机械设计与制造</option> <optionvalue="">工业设计</option> <optionvalue="">机电一体化</option> </optgroup></select>未展开时的下拉列表显示效果如下：展开的下拉列表效果如下：需要说明的是，这个“计算机系”和“机械系”只是一个选项组的说明，不能作为选项使用，既不能选择，也无法传递到后台服务器。（3）textarea和button

Textarea标记是一个多行文本框，可以输入任意多的字符。可以使用cols和rows指定它的列数和行数，但推荐使用CSS的width和height属性指定其大小。HTML5对其新增了wrap属性，属性值可以是soft或者hard。如果是hard，则必须与cols联用。Wrap属性规定了在表单提交时，textarea中的文本如何处理换行。其中，soft为默认值，表示不提交换行符，即不换行。Hard表示提交换行符（如果包含换行符的话，或者超过了指定的列数）。例如：<textareacols="30"wrap="hard">

</textarea>效果如下：即超过30列的字符自动换到下一行显示，而且在提交到服务器时也自动带有换行符。Button标记Button标记表示一个按钮，它与<inputtype=”button”/>的主要区别：开始<button>和结束</button>标记之间可以放置任何内容，包括图像与文本等，可以制作多种效果的按钮。使用该标记时，必须指定type=”button”，否则各浏览器对它的解释不尽相同。IE中默认为“button”，而其他浏览器，甚至W3C规范默认都是“submit”。实际应用时在表单中创建按钮，请使用<inputtype=”button”/>。如下面的代码制作了一个带有删除图标的删除按钮：<buttontype="button"> <imgsrc="../images/button-remove.png"/>删除</button>显示效果如图所示：（4）datalist和output。

Datalist标记用于指定选项列表，与input标记配合使用，指定input元素的可能值。使用list属性指定datalist的id值，将input标记与datalist定义的列表联系起来。实例如下：<inputtype="text"name="tech"list="techs"/><datalistid="techs"> <optionvalue="html"/> <optionvalue="CSS"/> <optionvalue="JavaScript"/></datalist>显示效果如图1-7所示。图1-7datalist创建的选项列表观察图1-7可以得出如下结论：★包含datalist的input默认情况下与普通的input没有任何区别。

★获得焦点时出现下拉列表，并可从下拉列表中选择，也可以直接输入。

★输入列表项中包含的文字可出现智能提示，并可选择提示的内容。

★点击右侧的下拉箭头显示列表选项，可以选择进行输入。Out标记Out标记用于定义某些元素的输出，通过引用out标记的id属性指定它要显示的值，实例如下：<inputid="age"type="range"min="18"max="65"

onchange="ageDis.value=value"/><outputid="ageDis"/>其中，min和max为HTML新的属性，见表1-8的说明，分别指定age的最小值和最大值。Onchange属性是注册change事件的一种方式，在range元素的值发生变化时，触发其后面的代码ageDis.value=value，其中ageDis.value指的是output的value，也就是要显示的值，而等号后的value为id=”age”的range元素的值。显示效果如图1-8所示。图1-8out显示range元素的值以上的例子代码见源代码的Listing1-13.html。大家可以下载运行观察效果，并可以网页中进行描述的操作，观察实际效果。真是一次漫长的学习之旅，html的内容就到这里吧。最后，需要说明的是：凡是涉及HTML5的标记和属性，不同的浏览器对它的支持是不尽相同的，有的浏览器甚至不支持，在观察效果时，如果一个浏览器不能正常显示或看不到应该的效果，可能是浏览器问题，可以换个浏览器试试。常用的浏览器有Google的Chrome浏览器、Firefox浏览器和IE浏览器，它们代表三种不同内核的浏览器，具有一定的代码性，练习时可同时使用这种个浏览器观察显示效果。1.8总结

本章主要介绍了HTML基本知识，什么是HTML，HTML的结构，HTML的头元素以及头元素在实际项目的运用。如何编辑HTML文件，如何运行HTML文件等。还介绍了以下内容：◆资源路径——它是十分重要的，所有网页中使用的资源必须保证路径的正确性，才能正常显示和访问。◆超链接标记——它是HTML中最重要的标记，各网页之间主要靠超链接相互连接起来。而且还介绍了各种超级链接的制作技术。

◆图像