项目十 HTML5 新增结构元素和属性（课件）《电子商务网页设计与制作》（中国劳动保障出版社）

10 html5 新增结构元素和属性 602 602 任务 1 制作订单支付网页地址区 任务 2 制作订单支付网页 603 项目十 html5 新增结构元素和属性 603 制作订单支付网页地址区 任务 1 604 604 ● 掌握 html5 新增结构元素的用法。 605 项目十 html5 新增结构元素和属性 605 为了使文档的结构更加清晰、明确，html5 新增加了一些可以改善文档结构的元素，如header、footer、article、aside、section 等。这些结构元素能够让网页设计者更加语义化地创建文档。而在之前的 html4 中，设计者要实现这些语义化的功能，需要使用 div 标签的额外属性，且由于设计者编码习惯不同，很难做到统一。 本任务主要使用 section 元素实现网页语义化，并用 nav 标签设置导航栏来制作缤购乐食电子商务网站订单支付网页地址。网页效果如图所示。 606 项目十 html5 新增结构元素和属性 606 607 订单支付网页地址区效果图 项目十 html5 新增结构元素和属性 607 608 步骤一： 在 body 标签中插入一个大的 section 模块，里面包含两个小 section 模块，第二个 section模块包含一个 ul 无序列表。网页的导航列表主要用 ul 无序列表来布局，为了更加语义化地表达网页内容，在 ul 外层包裹一组 nav 标签。在导航列表下方使用 div 标签和 span 标签的嵌套来完成“收货地址”区域的布局。具体 html 代码如图所示。 项目十 html5 新增结构元素和属性 608 609 支付网页导航列表结构布局 项目十 html5 新增结构元素和属性 609 610 支付网页导航列表结构布局 项目十 html5 新增结构元素和属性 610 611 支付网页导航列表结构布局 项目十 html5 新增结构元素和属性 611 612 支付网页导航列表结构布局 项目十 html5 新增结构元素和属性 612 613 支付网页导航列表结构布局 项目十 html5 新增结构元素和属性 613 614 支付网页导航列表结构布局 项目十 html5 新增结构元素和属性 614 615 支付网页导航列表结构布局 项目十 html5 新增结构元素和属性 615 616 步骤二： 设置相应的 CSS 样式代码。这里要注意，“默认地址”标志设置了半透明的效果，这是使用“ opacity:0.7”来实现的，此处的值只能取 0 ～ 1 之间，值越小，透明度越高。用 CSS设置支付网页导航列表样式的代码如图所示。 用 CSS 设置支付网页导航列表样式代码 项目十 html5 新增结构元素和属性 616 617 用 CSS 设置支付网页导航列表样式代码 项目十 html5 新增结构元素和属性 617 618 用 CSS 设置支付网页导航列表样式代码 项目十 html5 新增结构元素和属性 618 619 用 CSS 设置支付网页导航列表样式代码 项目十 html5 新增结构元素和属性 619 620 用 CSS 设置支付网页导航列表样式代码 项目十 html5 新增结构元素和属性 620 621 用 CSS 设置支付网页导航列表样式代码 项目十 html5 新增结构元素和属性 621 622 用 CSS 设置支付网页导航列表样式代码 项目十 html5 新增结构元素和属性 622 623 用 CSS 设置支付网页导航列表样式代码 项目十 html5 新增结构元素和属性 623 624 用 CSS 设置支付网页导航列表样式代码 项目十 html5 新增结构元素和属性 624 625 运行代码，效果如图所示。 制作完订单支付网页地址区导航列表的网页效果 项目十 html5 新增结构元素和属性 625 626 步骤三： 制作物流选择区和支付方式选择区。物流品牌的图片用到了雪碧图技术，雪碧图技术就是将很多图标都放在一张大图上，然后通过控制 background-position 来显示大图中的某个小图。具体 html 代码如图所示。 物流选择区和支付方式选择区结构布局 项目十 html5 新增结构元素和属性 626 627 物流选择区和支付方式选择区结构布局 项目十 html5 新增结构元素和属性 627 628 物流选择区和支付方式选择区结构布局 项目十 html5 新增结构元素和属性 628 629 用 CSS 设置物流选择区和支付方式选择区样式的代码，如图所示。 用 CSS 设置物流选择区和支付方式选择区样式的代码 项目十 html5 新增结构元素和属性 629 630 用 CSS 设置物流选择区和支付方式选择区样式的代码 项目十 html5 新增结构元素和属性 630 631 用 CSS 设置物流选择区和支付方式选择区样式的代码 项目十 html5 新增结构元素和属性 631 632 一、section 元素 section 元素是区块元素，用于对网页中的内容分块，它往往是文章中的一段，通常由标题和内容组成。 项目十 html5 新增结构元素和属性 632 633 section 元素强调分段和分块，而 article 元素则强调独立性。没有标题的内容不推荐使用section 元素，可以使用 html 轮廓工具检查网页中是否存在没有标题的 section 元素。html5轮廓工具网址为“http://gsnedders.html5.org/outliner”。 section 元素演示代码如图所示。其中 h1 标签包含的是标题部分，p 标签包含的是内容部分。 section 元素演示代码 项目十 html5 新增结构元素和属性 633 634 二、nav 标签 nav 标签用来定义网页导航列表的部分。nav 标签的使用场合主要有传统导航条、侧边栏导航、页内导航、翻页操作。nav 标签只起语义化的作用，没有实际的显示效果。 需要注意的是，不要用 menu 标签代替 nav 标签，nav 标签包含帮助用户浏览网页的链接，menu 标签则包含一组菜单命令，帮助用户执行某些任务。nav 标签演示代码如图所示。 项目十 html5 新增结构元素和属性 634 635 nav 标签演示代码 项目十 html5 新增结构元素和属性 635 制作订单支付网页 任务2 636 636 ● 掌握 html5 表单新属性的特征。 637 项目十 html5 新增结构元素和属性 637 html 表单一直都是 web 的核心技术之一，依靠它可以完成 web 上各种应用的输入界面，从而使客户端和服务器进行方便快捷的交互。html5 表单新增了许多属性，方便设计者应对更加多样的场景，而不用借助其他前端脚本语言。在缤购乐食电子商务网站订单支付网页上，需要通过 html 表单做出供用户选择的收货地址、快递公司、支付方式等，并通过 html表单将信息传输到服务器完成下单操作。本任务通过之前学习的 html 表单相关知识以及html5 表单控件的新属性来完成订单支付网页，网页效果如图所示。 638 项目十 html5 新增结构元素和属性 638 639 订单支付网页效果 项目十 html5 新增结构元素和属性 639 640 步骤一： 首先制作订单表格标题，图所示为订单表格标题的 html 代码。 订单表格标题的 html 代码 项目十 html5 新增结构元素和属性 640 641 接着设置 CSS 代码，如图所示。 订单表格标题 CSS 样式代码 项目十 html5 新增结构元素和属性 641 642 订单表格标题 CSS 样式代码 项目十 html5 新增结构元素和属性 642 643 步骤二： 制作订单商品信息列表部分。每一行的布局是由一个单独的 ul 无序列表来完成的，每一行要显示的图文信息分别放在 li 列表项中，所有的 li 列表项都设置为左浮动，并排列成一行。具体 html 代码如图所示。 订单商品信息列表布局 项目十 html5 新增结构元素和属性 643 644 订单商品信息列表布局 项目十 html5 新增结构元素和属性 644 645 订单商品信息列表布局 项目十 html5 新增结构元素和属性 645 646 订单商品信息列表布局 项目十 html5 新增结构元素和属性 646 647 订单商品信息列表布局 项目十 html5 新增结构元素和属性 647 648 订单商品信息列表布局 项目十 html5 新增结构元素和属性 648 649 接着设置 CSS 代码，宽度和高度的属性值不仅可以使用具体的像素值，也可以设置百分比，当需要按比例去分配高度和宽度的时候，建议使用百分比；当宽度和高度为具体确定的值时，建议使用像素值。用 CSS 设置订单商品信息列表样式的代码如图所示。 用 CSS 设置订单商品信息列表样式的代码 项目十 html5 新增结构元素和属性 649 650 用 CSS 设置订单商品信息列表样式的代码 项目十 html5 新增结构元素和属性 650 651 用 CSS 设置订单商品信息列表样式的代码 项目十 html5 新增结构元素和属性 651 652 运行代码，效果如图所示。 订单商品信息列表效果 项目十 html5 新增结构元素和属性 652 653 步骤三： 制作买家留言和商品优惠信息部分，买家留言部分用文本输入框实现，商品优惠信息部分用 select 下拉列表控件实现。具体 html 代码如图所示。 买家留言和商品优惠信息部分结构布局 项目十 html5 新增结构元素和属性 653 654 买家留言和商品优惠信息部分结构布局 项目十 html5 新增结构元素和属性 654 655 买家留言和商品优惠信息部分结构布局 项目十 html5 新增结构元素和属性 655 656 用 CSS 设置买家留言和商品优惠信息部分样式的代码，如图所示。 用 CSS 设置买家留言和商品优惠信息部分样式的代码 项目十 html5 新增结构元素和属性 656 657 用 CSS 设置买家留言和商品优惠信息部分样式的代码 项目十 html5 新增结构元素和属性 657 658 步骤四： 制作支付信息及提交订单部分。支付信息由大 div 盒子中嵌套小 div 盒子及 span 标签来实现，“提交订单”按钮使用超链接 a 标签来实现其样式，此按钮也可以使用“表单提交”按钮来实现，读者可自行尝试。具体 html 代码如图所示。 支付信息及提交订单部分结构布局 项目十 html5 新增结构元素和属性 658 659 支付信息及提交订单部分结构布局 项目十 html5 新增结构元素和属性 659 660 支付信息及提交订单部分结构布局 项目十 html5 新增结构元素和属性 660 661 接着设置 CSS 代码，这里需要注意 outline 属性和 border 属性的区别：border 指网页元素的边框，outline 指网页元素边框的边缘，设置无边框使用“ border:none”，设置无轮廓使用“outline:0”。具体代码如图所示。 用 CSS 设置支付信息及提交订单部分的代码 项目十 html5 新增结构元素和属性 661 662 用 CSS 设置支付信息及提交订单部分的代码 项目十 html5 新增结构元素和属性 662 663 用 CSS 设置支付信息及提交订单部分的代码 项目十 html5 新增结构元素和属性 663 664 一、required/pattern 属性 required 属性规定必须在提交之前填写输入域，即输入域不能为空。required 属性适用于以下类型的 input 标签：text、search、url、telephone、email、password、datepickers、number、checkbox、radio 和 file。格式如下。 项目十 html5 新增结构元素和属性 664 665 pattern 属性规定用于验证 input 域的模式，pattern 类型为正则验证，它可以完成各种复杂的验证。pattern 属性适用于以下类型的 input 标签：text、search、url、telephone、email 和password。格式如下。 项目十 html5 新增结构元素和属性 665 666 二、autofocus 属性 autofocus 属性规定在页面加载时，域自动获得焦点，可在页面加载完成时聚焦到指定的表单控件上，类似于 Javascript 的 focus（ ）方法。autofocus 属性适用于所有类型的 input表单控件。格式如下。 三、outline 属性 outline 属性用于在元素周围绘制一条线，该线位于边框边缘的外围，可起到突出元素的作用。 项目十 html5 新增结构元素和属性 666 $$