没有合适的资源?快使用搜索试试~ 我知道了~
内含html5标签,css3使用举例及说明。基础案例附带代码。
资源推荐
资源详情
资源评论
HTML5 是一种设计来组织 web 内容的语言,其目的是通过创建一种标准的和直观的 UI 标
记语言来把 web 设计和开发变得容易起来。HTML5 提供了各种切割和划分页面的手段,
其允许你创建的切割组件不仅能用来逻辑地组织站点,而且能够赋予网站聚合的能力。
HTML5 可谓是“信息到网站设计的映射方法”,因为它体现了信息映射的本质,划分信息,
并给信息加上标签,使其变得容易使用和理解。这是 HTML5 富于表现力的语义和实用性
美学的基础,HTML5 赋予设计者和开发者各种层面的能力来向外发布各式各样的内容,
从简单的文本内容到丰富的、交互式的多媒体无不包括在内。
HTML5 提供了高效的数据管理、绘制、视频和音频工具,其促进了 web 上的和便携式设
备的跨浏览器应用的开发。HTML5 是驱动移动云计算服务方面的发展的技术之一,因为
其允许更大的灵活性,支持开发非常精彩的交互式网站。其还引入了新的标签(tag)和
增强性的功能,其中包括了一个优雅的结构、表单的控制、API、多媒体、数据库支持和
显著提升的处理速度等。
HTML5 中的新标签都是能高度关联唤起的,标签封装了它们的作用和用法。HTML 的过
去版本更多的是使用非描述性的标签,然而,HTML5 拥有高度描述性的、直观的标签,
其提供了丰富的能够立刻让人识别出内容的内容标签。例如,被频繁使用的< div>标签已
经有了两个增补进来的< section>和< article>标签。 < video>、< audio>、<
canvas>和< gure> 标签的增加也提供了对特定类型内容的更加精确的描述。
HTML5 提供了:
1. 确切描述了其旨在要包含的内容的标签
2. 增强的网络通信
3. 极大改善了的常用存储
4. 运行后台进程的 Web Worker
5. 在本地应用和服务器之间建立持续连接的 WebSocket 接口
6. 更好的存储数据检索方式
7. 加快了的页面保存和加载速度
8. 对使用 CSS3 来管理 GUI 的支持,这意味着 HTML5 可以是面向内容的
9. 改进了的浏览器表单处理
10. 基于 SQL 的数据库 API,其允许客户端的本地存储
11. 画布和视频,可在无需安装第三方插件的情况下添加图形和视频
12. Geolocation API 规范,其通过使用智能手机定位功能来纳入移动云服务和应用
13. 增强型的表单,其降低了下载 JavaScript 代码的这种必要性,允许在移动设备和云服
务之间进行更多高效的通信。
HTML5 创建了一种更吸引用户的体验:使用 HTML5 设计的页面能够提供类似于桌面应用
的体验。HTML5 还通过把 API 功能和无处不在的浏览器结合起来的的方式提供了增强的
多平台开发。通过使用 HTML5,开发者能够提供一种顺畅地跨越各个平台的现代应用体
验。
当你说 HTML5 这个词的时候,你使用了一个简短的词来表达一种持续的创新。新的标记、
新 的 一 套方 法 , 以及 一 个 基于 HTML5 和它 的两 个 与之 互 为 补充 的 同 仁: CSS3 和
JavaScript 之间的相互作用的通用开发框架,这是以客户为中心的处理现象的应用的核心。
除了 HTML5 技术的技巧和方法的许多桌面部署之外,HTML5 还可以在功能丰富的 web
移 动 电 话 浏 览 器 中 实 施 — — 移 动 电 话 浏 览 器 是 一 个 正 在 增 长 的 市 场 , Apple
iPhone、Google Android 和运行 Palm webOS 的手机的普及以至于无处不在就可以证
明这一点。
HTML5 的强 大 功 能 中 很 重 要 的 一 面 是 信 息 的 映 射 — — 或 说 是 内 容 块 化 ( content
blocking)。如果你愿意的话 ——这种做法会产生一种容易理解得多的处理过程。你可
以看到,通过日益增加对 web 处理这一领域的控制,这一工具在设计和开发方面已经变得
多么的高效。
HTML5 预示着这样一些情况的出现,即其在文本层面上有着更高效的语义处理,以及在
表单构造和用法上有着更强大的控制。所有的这些特性和 HTML5 创新的其他许多细微之
处是这一越来越占统治地位的范式的基础。许多机构实体,商业的和其他的——甚至许多
根本不把信息的处理和通信作为他们的主要机构活动的组织——都不同程度地被这一不断
增长的现象的发展所侵袭。
HTML5 并不是一盏神灯,不会有精灵出现。然而,它的技术和方法资产使得其成为了一
件次好的东西,仅次于擦亮一盏神灯这件事情。
规划页面
你将要创建一个简单的 web 页面。在这一过程中,我会讨论几个 HTML5 中引入的新标签。
为了创建一个高效的并且是有实效的 web 页面,你必须要制定一个计划,考虑一下想要打
造的所有组件。你创建的网页将会有如图 1 所示的高层设计,页面的设计包含了一个
Header 区、一个 Navigation 区、一个包含了三个 Section 区和一个 Aside 区的 Article
区,以及最后的一个 Footer 区。该页面的设计目标是在 Google 的 Chrome 浏览器中工
作,其消除了一些视觉上的混乱,这些混乱带来的是浏览器兼容问题的调整,同时也妨碍
到了对基础结构的理解。我们的目标是创建出一个清晰地描述了新的 HTML5 标签的用法
的页面,展示如何使用它们来创建格式良好的代码和优雅的页面设计。
图 1. Acme United 的网页的规划
在创建这一页面的过程中,我
会涉及 CSS3,我需要用它来
正 确 地 渲 染 HTML5 网 页 。
CSS3 对 于 HTML5 页 面 的的
风格、导航和一般观感来说是
必不可少的,它的一些属性组,
你 可 以 在 WsSchool 的
CSS3 参考站点(参见参考资料一节)上找到这些属性,其中包括了一些很有用的元素,
比如说 background、font、marquee 和 animation 等。
不过,在开始构造页面之前,你需要学习一些新的 HTML5 的标签。
Header 区
Header 区的例子包含了页面标题和副标题,< header>标签被用来创建页面的 Header
区 的 内 容。 除 了 网页 本 身 之 外 , < header> 标 签 还 可 以 包 含关 于 < section> 和<
article>的公开信息。这里创建的网页有该页面的一个 Header 区,这在高层设计中有给
出 , 以 及 一 个 位 于 Article 和 Section 区 内 部 的 Header 区 。 清 单 1 提 供 了 一 个 <
header>标签标记的例子。
清单 1. < header>标签的例子
< header>
< h1>标题文字< /h1>
< p> 文本或是图像可放在这里< /p>
< p> Logo 通常也放在这个地方< /p>
< /header>
< header>标签还可以包含一个< hgroup>标签,如清单 2 所示。< hgroup>标签把
标题分组放在一起,使用< h1>到< h6>这些标题分级来在此处显示主标题和子标题。
清单 2. < hgroup>标签的例子
< header>
< hgroup>
< h1>主标题< /h1>
< h2>子标题 < /h2>
< /hgroup>
< p> 文本或是图像可放在这里< /p>
< /header>
Navigation 区
你可以使用< nav>标签来创建页面的 Navigation 区。< nav>元素定义了一个专门用于
导航的区域,< nav>标签应该用做主站点的导航,而不是用来放置被包含在页面的其他
区域中的链接。Navigation 区可以包含诸如清单 3 所示的代码。
清单 3. < nav>标签的例子
< nav>
< ul>
< li>< a href="#" kesrc="#">Home< /a>< /li>
< li>< a href="#" kesrc="#">About Us< a>< /li>
< li>< a href="#" kesrc="#">Our Products< /a>< /li>
< li>< a href="#" kesrc="#">Contact Us< /a>< /li>
< /ul>
< /nav>
Article 和 Section 区
剩余12页未读,继续阅读
资源评论
铭扬周
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功