2.3.3 外部引用标签linklink标签用于链接并引入信息及外部文件。链接到HTML网页的外部信息包括网站的授权信息、列出网页作者的文档、网站的帮助页面、在浏览器分页栏出现的图标、或者是用于页面布局的一个或多个样式表等。link是空元素在head元素内部使用。所有信息都是在属性中提供的。最常用的两个例子如下所示·指定使用的样式表·指定网站相关的图标同样你可以在TagExample.html的源代码中查看对应的内容。注意rel属性描述的是当前文档和链接文档之间的关系类型。href属性则指定外部文件的位置。type属性描述了文件在MIME模式中所属的类型。[1]2.3.4 强调标签b、i和strong像b、i和strong这样的标签都是布局标签分别对应粗体、斜体和加重的强调。我们可以利用在强调标签里的信息来定位具有特定布局的内容。假设某文档含有一个地址列表其中的姓名都设为斜体。查找i标签就能比较容易识别出有用的信息。下面的例子描述了各种布局标签的用法。TagExample.html展示了它们在一个完整的HTML网页中的应用。2.3.5 段落标签pp标签会标记其中包含的内容为一个段落并确保在其中内容的前后都有换行2.3.6 标题标签h1、h2、h3等为了定义不同级别的标题——从一级到六级——HTML提供了一系列的标签h1h2…h6。一些示例如下所示2.3.7 通过ul、ol和dl列举内容有几种标签存在的意义是列举内容。它们的用法取决于它们是用来包装排序列表ol、非排序列表ul还是描述列表dl。前面两种标签利用嵌套的li元素来定义列表项而最后一种需要另外两种元素dt用于关键字dd用于它的描述。一个非排序列表的例子如下2.3.8 组织型标签div和span另一个定义HTML网页片段的显示形式的方式是div和span标签。虽然div和span本身不会改变它们包含内容的显示形式但是这些标签可以用于把文档片段组织起来前者用于定义跨行、跨标签和跨段的分组而后者用于内联分组。HTML网页的分组片段在与层叠样式表Cascading Style SheetCSS配套使用时非常方便。CSS是一种用于描述HTML及如XML、SVG和XHTML等其他标记文档的布局的语言。下面是两种样式的定义示例。第一种样式定义应用于所有具有happy类class属性的div元素而第二种则应用于所有同类的span元素样式定义一般保存在单独的CSS文件里如awesomestyle.css然后可以通过link标签在HTML网页的标头header引入之后在HTML网页里可以通过另一个class属性把它们传递给一个元素除此之外样式也可以在某个元素的style属性里直接定义CSS的用途是把内容和布局分开以此改善文档的可用性。在HTML网页外部定义样式并通过class属性对它们进行分配的做法让网站设计师能够在不同元素和文档中重复使用这些样式。这样能让开发者只需在一个地方——即CSS文件内部——改变一个样式然后所有用到这个样式的元素和文档都会产生效果。那么我们为什么要关心样式呢首先样式和格调在英语里是一个单词关心样式就是关心格调。人嘛总是必须要有一些格调的。不过其次呢CSS对开发者来说太方便了所以div、span和class标签是经常会用到的。那么div、span和class标签就提供了HTML网页的一些结构让我们可以充分利用它来找到我们需要的信息的存放位置。2.3.9 form标签及其同伴HTML的一个高级特性是表单。HTML表单比纯布局内容的用途更广。它们让用户能以发送数据的方式与服务器进行交互而不仅仅只是从服务器接收数据。表单是由form标签引入的它还支持其他一些标签如fieldset、input、textarea、select和option以及和它们相关的一些属性。这种在用户和服务器之间进行的双向信息交换让更具灵活性的浏览体验成为可能。我们日常使用表单的例子有类似于Google这样的搜索引擎。我们在一个文本字段里输入查询条件然后根据我们发送的查询请求会出现一个新的网页。让我们继续用一个例子来解释HTML表单的各种概念。下面的代码片段是本书材料中FormExample.html的一个片段上面例子中的表单由一个form元素和嵌套在它之中的两个input元素组成。form标签有一个name属性、一个action属性以及一个特定的method属性。表单的name是作为一个内部识别符。action和mehtod属性则定义了当submit按钮被按下时浏览器需要进行的操作。action定义了响应的位置。在网络上发送请求和接受资源最常用的协议是HTTP超文本传输协议。method属性用于表示向服务器发送信息的HTTP方法。最常见的方法是POST或GET。暂时可以这样理解当使用GET方法时发送到服务器的信息是附加在URL后面的。反之如果使用POST方法数据就不是通过请求URL传输的。要了解HTTP方法的细节请参阅第5章内容。对于input元素我们可以区分出多个类别。其中有普通输入、隐藏输入、重置输入以及用于定义提交按钮的输入等。普通输入用于采集被发送到服务器的数据它有多种形式如文本域、颜色选择器、多选框、日期选择器和滑动条等。隐藏输入定义的也是被发送到服务器的数据但用户对它没有控制能力。重置输入则是用来重置所有输入项及当前被选的选项的。提交按钮形式的输入负责发送用户提供的数据。输入的类别是由type属性的值定义的。对于隐藏输入来说type属性是hidden重置输入的是reset提交按钮的则是submit。普通输入的type取决于要采集信息的类型如text、color、checkbox、date和range。输入元素需要两个属性首先用name属性明确地把特定输入元素和特定信息关联起来还需要type属性告诉浏览器采集信息的方式。另外还有一个可选属性value它可以提供一个默认值在用户没有输入任何信息的情况下默认值就会被发送给服务器。还有另外三个标签也可以用于从表单中采集信息textarea以及select和option的组合。textarea元素用于采集多行的文本。要从一个清单中选择一个或多个项目可以在HTML网页中使用select元素。select元素负责设置属性值而其中嵌套的option元素则定义了用户可以选择的条目清单。类似于input元素从textarea和select元素发送数据也需要一个name属性。要了解各种类型的输入的概述请查看InputTypes.html。如需查看实际使用的表单你可以打开网页http://www.r-datacollection.com/materials/html/FormExample.html。该页面伪装为一个网站入口要求用户输入密码。考虑到我们已经把HTML这一章学得差不多一半了我们相信你最多试三次就能猜到密码是什么。去试试吧在这个例子里action属性被设为Passed.html这意味着在第一页采集到的密码会被提交到这个新页面。多试一次输入另一个密码。我们再次转到了新的网页页面上包含了我们在文本域里输入的信息。HTML表单把静态的HTML转变成了灵活而强有力的工具。[2]这里的要点是被发送的信息以及返回的响应是随着我们输入的内容而变化的。我们再看一下上面的表单例子。我们注意到第一个input元素的name属性是pw。我们已经知道input的name属性会作为传输信息的一个标记。如果你查看响应的URL你会注意到密码是附加在URL后面的看起来类似于…/Passed.htmlpwxxxxxxx。从这里我们可以判断该表单使用了GET方法而不是POST方法否则密码就不会出现在URL里。包含了密码的这个URL片段就是查询字符串。查询字符串通常出现在URL的尾部并由开头。在查询字符串内的信息会以参数值的形式编写就和HTML标签属性一样。而且当有超过一个配对参数值时它们之间要用分开。既然你了解了HTML表单和查询字符串现在花点时间用浏览器查看一些实际使用的表单。找到一些使用了表单的页面仔细查看它们是否使用了查询字符串以及具体是怎么使用的。你可能还会想在浏览器里返回到Passed.html并在地址栏里直接改动pw的值看看会有什么情况发生。2.3.10 外部脚本标签scriptHTML本身并不是一种编程语言。HTML是一种描述内容并定义其表征的标记语言。一旦HTML文件在浏览器中加载它会保持稳定不会随着事件或用户交互而改变。不过我们都知道一些高度动态化网站的例子。它们中的大部分很可能都大量使用了script元素。[3]script元素是一种脚本的容器它让HTML能够纳入来自其他编程语言的功能。这里说到的其他编程语言通常是JavaScript。在从服务器加载到页面之后JavaScript让浏览器能够改变内容和文档的结构让用户交互和事件处理成为可能。在FormExample.html和Passed.html里我们已经使用了script元素。在Passed.html里有两个script元素。第一个放在header内部定义了一个从URL里提取特定参数值的函数。第二个直接放在body内部执行定义好的函数从pw参数里查找密码值。把密码值保存到一个变量之后它就把这个值写到HTML网页里。再一次自己尝试一下打开Passed.html并修改URL让它看起来类似于…/Passed.htmlpwxxxx。把该页面保存到你的硬盘里右键点击保存为…然后在浏览器里重新打开你保存的页面。现在查看一下保存前和保存后的页面源代码。原始页面里面是原始的源代码而第二个包含了加载页面之后在浏览器中修改的内容。让我们回顾一下HTML以及我们如何能识别其中所用的JavaScript。JavaScript大体上以三种形式出现在一个script元素中显式定义在一个script元素中隐式引用一个外部JavaScript文件以及在一个HTML元素中隐式作为一个事件。下面你可以找到所有这三种类型的JavaScript使用方式的例子。·显式JavaScript输出当前时间和日期这段代码向页面加入当前日期和时间。·引用一个外部JavaScript文件并从另一个script元素中调用其中的函数输出查看页面所用的浏览器这段代码加载一个外部JavaScript文件browserdetect.js并使用其中包含的函数BrowserDetect向页面加入有关浏览器的信息。·利用事件触发JavaScript当鼠标悬停在某个元素上时改变样式的class这段代码会触发两个事件一个是当鼠标光标悬停在元素上时触发一个是当鼠标光标离开元素所占区域时触发即onmouseover和onmouseout并在事件发生时分配两个要执行的JavaScript函数。这些函数改变元素的样式class为over或out然后与这两个类相关的样式就会产生效果。现在在你的浏览器中打开http://www.r-datacollection.com/materials/html/JavaScript.html看看这个例子。页面会显示你打开它的时间显示当前时间指出你使用的浏览器版本号以及它运行在的电脑平台当你用鼠标悬停在Hover Me文字上时把它的背景色从白色改成黑色还能在你填写文本域并回车时把输入的文字添加到页面上。看看源代码然后区分一下页面的哪些部分是纯HTML哪些是JavaScript。