最新跨平台HTML5实战任务2-熟悉WebSto课件.ppt

1、跨平台HTML5实战软件学院 任务任务2 熟悉熟悉WebStorm开发环境，开发环境，设计和开发个人网页设计和开发个人网页学习目标【知识目标知识目标】 掌握掌握HTML5的新特性：标签和表单；的新特性：标签和表单； 掌握网页设计基本流程；掌握网页设计基本流程； 掌握文档结构相关的标记符；掌握文档结构相关的标记符； 掌握页面布局相关的标记符；掌握页面布局相关的标记符； 掌握文本标记符；掌握文本标记符； 掌握图形和超链接的实现。掌握图形和超链接的实现。 【技能目标技能目标】 能独立实现图文混排的网页；能独立实现图文混排的网页； 能为特殊的网页选用合适的技术。能为特殊的网页选用合适的技术。 引例描述

2、 随着公司业务的发展和随着公司业务的发展和新员工陆续报到，为了新员工陆续报到，为了尽快让新员工上手，薛尽快让新员工上手，薛总工设计了初级网页设总工设计了初级网页设计的培训课题计的培训课题: HTML5快速入门指南。薛总工快速入门指南。薛总工要求学员为动画片要求学员为动画片冰冰河时代河时代的主角的主角.希德创希德创建个人主页。建个人主页。任务陈述 希德的个人网站：布局合理，层次分明，保持统一的风格，有助于加深访问者对希德网站的印象。 要讲究组合、搭配来构成美观的页面，吸引访问者长时间的停留在网页，更重要的是多一些原创的内容，个性色彩可以起到画龙点睛的作用。 1 WebStorm工具 2 HTML

3、5基本结构 3 HTML5常用标签的基本结构知识准备1 WebStorm工具1 WebStorm工具HTML5网页编辑：最直接的是采用记事本。通过选择“开始”菜单 “所有程序”或“程序” “附件”打开记事本。网页预览：需要依赖各种浏览器，比如IE，Chrome或者Firefox等。采用专门的源码编辑工具：语法高亮，同时还有辅助设计命令，如自动缩进、美化代码、提示出错信息等，从而使得源码易于阅读。比如Jetbrains WebStorm（简称：WebStorm）。1 WebStorm工具(1). 启动WebStorm并创建新项目。 项目新建后，在打开的窗口中新建一个网页文件。操作：File-Ne

4、w，在弹出的窗口中选择HTML File，并命名为main。如图所示，WebStorm在创建网页文件的同时会插入一个基本文件框架。 需要注意的是，若此处采用index作为文件名，语法高亮失效，并且也无法自然弹出的浏览器选择条。 1 WebStorm工具(2). 新建一个网页文件 2 HTML5基本结构2 HTML5基本结构一个HTML5文件的基本结构如下： /文件开始标签 /文件头开始的标签 /文件头的内容 /文件头结束的标签 /文件主体开始的标签 /文件主体的内容 /文件主体结束的标签 2 HTML5基本结构（1）HTML部分 双标签标记符HTML的语法格式如下： 代码 标签还能帮助人们阅读

5、HTML代码，以便于平常的文字处理工具能够识别出文档是网页文档。2 HTML5基本结构（2） 标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 文件头部一般包含标题标签、标签、内联样式表及预定义脚本等。即title、meta、link、base、script等常用标签： 2 HTML5基本结构（3）主体部分 双标记符定义了主体部分，它包含显示在Web浏览器中的所有信息。在与中放置的是页面中的所有内容，如文字、图片、链接、表格、表单等。 在HTML4中标签有很多自身的属性，如定义页面文字的颜色、背景的颜色、背景图片等，在HTML

6、5中，删除了所有的特殊属性，减少不必要的标签。主体部分 2 HTML5基本结构DOCTYPE声明，该标记符必须以惊叹号开始，而且要声明，该标记符必须以惊叹号开始，而且要放在文档的开始处，在其他的所有标记符之前。放在文档的开始处，在其他的所有标记符之前。HTML5的语法中大多数标记符都不区分大小写，但的语法中大多数标记符都不区分大小写，但DOCTYPE必须全部大写。必须全部大写。 meta定义好字型，从而支持中文显示定义好字型，从而支持中文显示title是网页唯一标题标签是网页唯一标题标签 3 HTML5常用标签行行列列单元格单元格在在 HTML 文档中，广泛使用表格来存放网页上的文本和图像文档

7、中，广泛使用表格来存放网页上的文本和图像表格的基本结构表格的基本结构3 HTML5常用标签页面布局相关的标记符 3 HTML5常用标签 单元格内容单元格内容 .定义表定义表格格 定定义列义列 定义定义行行 border用来设置表格边框尺寸大小用来设置表格边框尺寸大小页面布局相关的标记符 块。 如何创建表格 移动移动 联通联通 铁通铁通 IBM 惠普惠普 华硕华硕 3 HTML5常用标签页面布局相关的标记符 作为使用最广的标签标签，它可以把文档分割为独立的、不同的部分。div可以用作严格的组织工具，并且不使用任何格式与其关联。在HTML5以前的时代，常常在代码中看到环环嵌套的，造成浏览器在解读代

8、码时效率低下，也给源码的维护造成了困难。HTML5通过提供一组标签（nav、section、article、aside、footer、header）来解决这个问题，这些标签可以更清晰地定义构成某个HTML文档的主要内容。块。 3 HTML5常用标签页面布局相关的标记符 HTML4页面页面 HTML5页面页面 3 HTML5常用标签页面布局相关的标记符 nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其它部分。并不是所有的链接组都要被放进nav元素，只需要将主要的、基本的链接组放到nav元素中即可。如果文档中有“前后”按钮，则应该把它放到 元素中 一个页中可以拥

9、有多个nav元素，作为页面整体或不同部分的导航。具体来讲，nav元素可以用于以下场合： 传统导航条； 侧边栏导航； 内页导航； 翻页导航。 3 HTML5常用标签页面布局相关的标记符/ 与的无语义相对， 相当于带有语义的。常表示一段专题性的内容，一般会带有标题。应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。 是一个特殊的标签，它比具有更明确的语义,它代表一个独立的、完整的相关内容块。通常会有标题部分(通常包含在header内)，有时也会包含footer。3 HTML5常用标签页面布局相关的标记符 标签是HTML 5的新标签，的内容可用作文章的侧栏。 在网站制作中主要

10、有以下两种使用方法： 被包含在被包含在article元素中作为主要内容的附属信息元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相部分，其中的内容可以是与当前文章有关的相关资料、名词解释等等。关资料、名词解释等等。 在在article元素之外使用作为页面或站点全局的附属信息部元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。客中的其它文章列表、广告单元等。 3 HTML5常用标签页面布局相关的标记符 标签定义section或document的页脚，即网页

11、底部的文字。典型地，页脚会包含创作者的姓名、文档的创作日期，版权信息以及/或者联系信息。若使用footer来插入联系信息，应该使用元素。 3 HTML5常用标签页面布局相关的标记符使用对比 div section article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 s

12、ection 。 nav 和 aside 的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。 3 HTML5常用标签/ 显示在网页上的文字，每个段落应该被封装在双标记符中，这个双标记符会指示段落的类型。最基本的段落类型是主体段落，这种段落用双标记符标记符定义。 浏览器在显示网页时，会自动在段落之间插入一个空行作为分隔。若只想换行而不希望插入额外空行，则需要采用单标记符来产生一个换行。 这部分仍然与上述内容同一段落3 HTML5常用标签到标签 文章通常包含标题、副标题、章和节等结构，HTML中也提供了相应的标题标

13、签, 其中n为标题的等级，HTML共提供6个等级的标题，n越小，标题字号就越大，下面列出一级、二级、三级和四级标题： /第一级标题 /第二级标题 /第三级标题 /第四级标题 3 HTML5常用标签水平分隔线标签- 标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。通过设置标签的属性值，可以控制水平分隔线的样式。在HTML5中color，align, noshade, size 以及 width 属性均不再支持。 水平线的应用水平线的应用 春夜喜雨春夜喜雨 好雨知时节，当春乃发生。好雨知时节，当春乃发生。 随风潜入夜，润物细无声。随风潜入夜，润

14、物细无声。 野径云俱黑，江船火独明。野径云俱黑，江船火独明。 晓看红湿处，花重锦官城。晓看红湿处，花重锦官城。 3 HTML5常用标签标签 一幅图胜过万语千言，图像在网页制作中是非常重要的一个方面，HTML语言也专门提供了标签来处理图像的输出。3 HTML5常用标签标签 HTML5的新标签规定独立的流内容（图像、图表、照片、代码等）。Figure标签表示一组相关联的内容，元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。基本语法：卡耐基梅隆大学语法解释： 标签定义 figure 元素的标题（caption）。figcaption 元素应该被置于 figure 元素的第一个或最后

15、一个子元素的位置。3 HTML5常用标签超链接标签 基本语法： 超链接名称 语法解释： 标签表示超链接的开始，表示超链接的结束。 标签定义超链接，用于从一个页面链接到另一个页面。 元素最重要的属性是 href 属性，它指定链接的目标。在所有浏览器中，链接的默认外观是： 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接带有下划线而且是红色的3 HTML5常用标签表单对象 标签用于创建供用户输入的 HTML 表单，它是HTML文档中用户输入交互的重要元素。 当前，开发者通常使用JavaScript（客户端）和PHP（服务端）代码对用户在表单的输入内容进行确认，如

16、一些页面的表格中e-mail等必填内容是否合法。在HTML 5中无需使用确认脚本，直接提供元素属性，比如required和e-mail属性，能自动检查用户名和E-mail栏是否空白的，e-mail地址格式是否有效，简化了很多重复性工作。 3 HTML5常用标签 form 元素包含一个或多个表单元素，比如： button 与input元素的button类型不同，可以在 button 元素放置内容，比如文本或图像。 input 用于输入，具有多种类型。 keygen 用于表单的密钥对生成器字段。object 定义一个对象（如flash等）。 output 用于不同类型的输出，比如计算或脚本输出。

17、3 HTML5常用标签 HTML5增加了新的类型，可以方便地验证用户输入的内容是否为指定类型的内容： e-mail e-mail 类型用于设置应该包含 e-mail 地址的输入框。在提交表单时，会自动验证 e-mail 框的值是否符合e-mail的格式。如下关键代码所示： E-mail: url url 类型用于应该包含URL地址的输入框。在提交表单时，会自动验证url框的值。关键代码如下： Homepage: number number 类型用于应该包含数值的输入框。还能够设定对所接受的数字的限定（如最大max为10，最小min为1），关键代码如下： Points: 3 HTML5常用标签

18、range range类型用于应该包含一定范围内数字值的输入框。range 类型显示为滑动条。还能够设定对所接受的数字的限定（最大max与最小min）,关键代码如下： Date pickers (date, month, week, time, datetime, datetime-local) HTML5拥有多个可供选取日期和时间的新输入类型：date - 选取日、月、年；month - 选取月、年；week -选取周和年；time -选取时间（小时和分钟）；datetime -选取时间、日、月、年（UTC 时间）；datetime-local - 选取时间、日、月、年（本地时间）； 如从日

19、历中选取一个日期，关键代码如下： Date: 3 HTML5常用标签 search search类型用于搜索框，比如站点搜索或Google搜索。search框显示为常规的文本框。用法与文本类型text相同。 color color 类型用于选择颜色，对不同颜色选择而得到不同颜色值，与文本框类似，用法相同，值为颜色对应的值。 3 HTML5常用标签在 HTML5中，与以往标准不同的是，新增加了 和 元素的属性，例如： list 属性 list属性规定输入框的datalist。datalist是输入框的选项列表（单击输入框弹出提示）。list 属性适用于以下类型的标签：text, search,

20、url, telephone, e-mail, date pickers, number, range以及color。关键代码如下所示： Webpage: 3 HTML5常用标签 pattern 属性 用于验证中的输入内容，可以用正则表达式验证，适用于以下类型的 标签：text, search, url, telephone, e-mail 以及password。如显示了一个只能包含三个字母的文本域（不含数字及特殊字符），关键代码如下： Country code: 3 HTML5常用标签在 placeholder 属性 placeholder 属性提供一种提示（hint），描述输入框所期望的值

21、，适用于以下类型的 标签：text, search, url, telephone, e-mail 以及password。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失，关键示例代码如下： required 属性 用于验证是否为空。关键示例代码如下： Name: 使用HTML5标签的原则绝对不能少的可行性检查必须的兼容性处理省略不必要的属性部分不必要的最好不要省准确理解和使用新标签语意及其功能不同的需求使用不同的元素自定义属性更强大不支持的元素属性不要用正确的处理用户需求，提高用户体验可行性兼容性检查通过JavaScript来检测浏览器是否支持某个属性:对于IE不支持的标签

22、需要自己处理:if (!pattern in document.createElement(input) ) / do client/server side validation让HTML5元素以block形式正确渲染header, footer, article, section, nav, menu, hgroup display: block;对不支持的标签需要自己处理document.createElement(footer);document.createElement(header);document.createElement(hgroup);也可以使用第三方库：http:/ 脚

23、本(scripts)和链接(links)不必指定type属性:改为:不必要的属性值的引号和闭合元素，为了保证文档的结构化，建议不要省略: Start the reactor. 改为: Start the reactor.准确理解和使用标签contenteditable用于指定某个区域可以被用户编辑: HTML5非常优秀 webkit引擎开始支持HTML5可以为输入框指定类型不在麻烦，下面是一个邮箱的例子:邮箱:表单允许新的必要属性，用来指定是否需要特殊的input:准确理解标签的语义被定位为“小字”了，不用于创建和logo靠近的副标题；比如制作网站的版权信息。Header和Footer的正确语

24、意: . . . . 将相关内容组合到一起: 主标题副标题准确理解标签的语义定义一组媒体内容，以及他们的标题，如下定义一个图片及其标题:Image of Mars. This is an image. 不同的需求使用不同的元素header, article, section, 和footer的出现减少了div的使用.元素可以高亮显示某些内容:HTML5是目前最先进的Web标准,各浏览器都逐渐开始支持。 output元素被用来显示部分位置的值: 10 + 5 = 使用区域input创建滑块:自定义属性更强大简单的以”data”为前缀定义我们的自定义属性:HTML5的未来！var theDiv =

25、 document.getElementById(customDiv );var attr = theDiv.getAttribute(data-custom-attr);.data_custom display:inline-block; position: relative; .data_custom:hover color: transparent; .data_custom:hover:after content: attr(data-hover-response); color: black; position: absolute; left: 0;不支持或不建议使用的标签不支持的元

26、素（属性）不要用!使用自动获取焦点属性autofocus，可以提高用户体验: 在需要的地方使用视频预加载: 合理利用占位符（placeholder）提醒用户:增强的表单控件拾色器日期字段时间字段 数字字段滑动组件类型匹配除了这些，还有搜索进度条25%密钥输出10 + 5 = And so on正则匹配必填字段选项列表 从个人编程从个人编程-自动编程自动编程结构是指代码设计的层次关系结构是指代码设计的层次关系框架是指网页布局和相应的代码框架是指网页布局和相应的代码软件流水线任务实施 本任务将文字段落与图片进行混排，通过HTML的页面的基本布局、解决文字与图片的混排。任务实施步骤如下： 第一步：编辑和预览网页，使用WebStorm工具自动创建代码框架； 第二步：设计页面布局，结合HTML5的布局方法、图像和文本标记符完成图文设计； 第三步：展示设计效果。的基本结构任务实施页面布局 实现效果作业要求参照任务1课件中“增强的表单控件”内表单效果，制作相似界面网页。 小小 结结