项目十 html5 新增结构元素和属性

10html5新增结构元素和属性602任务1制作订单支付网页地址区任务2制作订单支付网页603制作订单支付网页地址区任务1604●掌握html5新增结构元素的用法。605为了使文档的结构更加清晰、明确，html5新增加了一些可以改善文档结构的元素，如header、footer、article、aside、section等。这些结构元素能够让网页设计者更加语义化地创建文档。而在之前的html4中，设计者要实现这些语义化的功能，需要使用div标签的额外属性，且由于设计者编码习惯不同，很难做到统一。本任务主要使用section元素实现网页语义化，并用nav标签设置导航栏来制作缤购乐食电子商务网站订单支付网页地址。网页效果如图所示。606607订单支付网页地址区效果图608步骤一：在body标签中插入一个大的section模块，里面包含两个小section模块，第二个section模块包含一个ul无序列表。网页的导航列表主要用ul无序列表来布局，为了更加语义化地表达网页内容，在ul外层包裹一组nav标签。在导航列表下方使用div标签和span标签的嵌套来完成“收货地址”区域的布局。具体html代码如图所示。609支付网页导航列表结构布局610支付网页导航列表结构布局611支付网页导航列表结构布局612支付网页导航列表结构布局613支付网页导航列表结构布局614支付网页导航列表结构布局615支付网页导航列表结构布局616步骤二：设置相应的CSS样式代码。这里要注意，“默认地址”标志设置了半透明的效果，这是使用“opacity:0.7”来实现的，此处的值只能取0～1之间，值越小，透明度越高。用CSS设置支付网页导航列表样式的代码如图所示。用CSS设置支付网页导航列表样式代码617用CSS设置支付网页导航列表样式代码618用CSS设置支付网页导航列表样式代码619用CSS设置支付网页导航列表样式代码620用CSS设置支付网页导航列表样式代码621用CSS设置支付网页导航列表样式代码622用CSS设置支付网页导航列表样式代码623用CSS设置支付网页导航列表样式代码624用CSS设置支付网页导航列表样式代码625运行代码，效果如图所示。制作完订单支付网页地址区导航列表的网页效果626步骤三：制作物流选择区和支付方式选择区。物流品牌的图片用到了雪碧图技术，雪碧图技术就是将很多图标都放在一张大图上，然后通过控制background-position来显示大图中的某个小图。具体html代码如图所示。物流选择区和支付方式选择区结构布局627物流选择区和支付方式选择区结构布局628物流选择区和支付方式选择区结构布局629用CSS设置物流选择区和支付方式选择区样式的代码，如图所示。用CSS设置物流选择区和支付方式选择区样式的代码630用CSS设置物流选择区和支付方式选择区样式的代码631用CSS设置物流选择区和支付方式选择区样式的代码632一、section元素section元素是区块元素，用于对网页中的内容分块，它往往是文章中的一段，通常由标题和内容组成。633section元素强调分段和分块，而article元素则强调独立性。没有标题的内容不推荐使用section元素，可以使用html轮廓工具检查网页中是否存在没有标题的section元素。html5轮廓工具网址为“/outliner”。section元素演示代码如图所示。其中h1标签包含的是标题部分，p标签包含的是内容部分。section元素演示代码634二、nav标签nav标签用来定义网页导航列表的部分。nav标签的使用场合主要有传统导航条、侧边栏导航、页内导航、翻页操作。nav标签只起语义化的作用，没有实际的显示效果。需要注意的是，不要用menu标签代替nav标签，nav标签包含帮助用户浏览网页的链接，menu标签则包含一组菜单命令，帮助用户执行某些任务。nav标签演示代码如图所示。635nav标签演示代码制作订单支付网页任务2

636●掌握html5表单新属性的特征。637html表单一直都是web的核心技术之一，依靠它可以完成web上各种应用的输入界面，从而使客户端和服务器进行方便快捷的交互。html5表单新增了许多属性，方便设计者应对更加多样的场景，而不用借助其他前端脚本语言。在缤购乐食电子商务网站订单支付网页上，需要通过html表单做出供用户选择的收货地址、快递公司、支付方式等，并通过html表单将信息传输到服务器完成下单操作。本任务通过之前学习的html表单相关知识以及html5表单控件的新属性来完成订单支付网页，网页效果如图所示。638639订单支付网页效果640步骤一：首先制作订单表格标题，图所示为订单表格标题的html代码。订单表格标题的html代码641接着设置CSS代码，如图所示。订单表格标题CSS样式代码642订单表格标题CSS样式代码643步骤二：制作订单商品信息列表部分。每一行的布局是由一个单独的ul无序列表来完成的，每一行要显示的图文信息分别放在li列表项中，所有的li列表项都设置为左浮动，并排列成一行。具体html代码如图所示。订单商品信息列表布局644订单商品信息列表布局645订单商品信息列表布局646订单商品信息列表布局647订单商品信息列表布局648订单商品信息列表布局649接着设置CSS代码，宽度和高度的属性值不仅可以使用具体的像素值，也可以设置百分比，当需要按比例去分配高度和宽度的时候，建议使用百分比；当宽度和高度为具体确定的值时，建议使用像素值。用CSS设置订单商品信息列表样式的代码如图所示。用CSS设置订单商品信息列表样式的代码650用CSS设置订单商品信息列表样式的代码651用CSS设置订单商品信息列表样式的代码652运行代码，效果如图所示。订单商品信息列表效果653步骤三：制作买家留言和商品优惠信息部分，买家留言部分用文本输入框实现，商品优惠信息部分用select下拉列表控件实现。具体html代码如图所示。买家留言和商品优惠信息部分结构布局654买家留言和商品优惠信息部分结构布局655买家留言和商品优惠信息部分结构布局656用CSS设置买家留言和商品优惠信息部分样式的代码，如图所示。用CSS设置买家留言和商品优惠信息部分样式的代码657用CSS设置买家留言和商品优惠信息部分样式的代码658步骤四：制作支付信息及提交订单部分。支付信息由大div盒子中嵌套小div盒子及span标签来实现，“提交订单”按钮使用超链接a标签来实现其样式，此按钮也可以使用“表单提交”按钮来实现，读者可自行尝试。具体html代码如图所示。支付信息及提交订单部分结构布局659支付信息及提交订单部分结构布局660支付信息及提交订单部分结构布局661接着设置CSS代码，这里需要注意outline属性和border属性的区别：border指网页元素的边框，outline指网页元素边框的边缘，设置无边框使用“border:none”，设置无轮廓使用“outline:0”。具体代码如图所示。用CSS设置支付信息及提交订单部分的代码662用CSS设置支付信息及提交订单部分的代码663用CSS设置支付信息及提交订单部分的代码664一、required/pattern属性required属性规定必须在提交之前填写输入域，即输入域不能为空。required属性适用于以下类型的input标签：text、search、url、telephone、email、password、datepickers、number、checkbox、radio和file。格式如下。665pattern属性规定用于验证input域的模式，pattern类型为正则验证，它可以完成各种复杂的验证。pattern属性适用于以下类型的input标签：text、search、url、telephone、email和password。格式如下。66