PDF《第1篇》

5 1.2.4 化繁为简的优势 作为当下流行的通用标记语言,HTML

5 越简单越好.所以在设计 HTML

5 时,严格遵 循了 简单至上 的原则,主要体现在以下几个方面. (1) 新的简化的字符集声明. (2) 新的简化的 DOCTYPE. (3) 简单而强大的 HTML

5 API. (4) 以浏览器原生能力替代复杂的 JavaScript 代码. 为了实现以上这些简化操作,HTML

5 规范需要比以前更加细致、精确,比以往任何版 本的 HTML 规范都要精确. 在HTML

5 规范细化的过程中,为了避免造成误解,几乎对所有内容都给出了彻底、完 全的定义,特别是对 Web 应用. 基于多种改进过的、强大的错误处理方案,HTML

5 具备了良好的错误处理机制.具体 来讲,HTML

5 提倡重大错误的平缓恢复,再次把最终用户的利益放在了第一位.举例来 说,如果页面中有错误的话,在以前,可能会影响整个页面的显示,而在 HTML

5 中,不会 出现这种情况,取而代之的是以标准方式显示 broken 标记,这要归功于 HTML

5 中精确定义 的错误恢复机制. 1.3 HTML

5 文件的编写方法 有两种方式可以产生 HTML 文件:一种是自己写 HTML 文件,事实上这并不是很困难, 也不需要特别的技巧;

另一种是使用 HTML 编辑器,它可以辅助使用者来做编写工作. 1.3.1 使用记事本手工编写 HTML

5 前面介绍过,HTML

5 是一种标记语言,标记语言代码是以文本形式存在的.因此,所 有的记事本工具都可以作为它的开发环境. HTML 文件的扩展名为.html 或.htm,将HTML 源代码输入到记事本并保存之后,可以在 浏览器中打开文档以查看其效果. 使用记事本编写 HTML 文件的具体操作步骤如下. 单击 Windows 桌面上的 开始 按钮,选择 所有程序 → 附件 → 记事 本 命令,打开一个记事本,在记事本中输入 HTML 代码,如图 1-1 所示. 编辑完 HTML 文件后,选择 文件 → 保存 命令或按 Ctrl+S 组合键,在弹 出的 另存为 对话框中,选择 保存类型 为 所有文件 ,然后将文件扩展名 设为.html 或.htm,如图 1-2 所示. 单击 保存 按钮,即可保存文件.打开网页文档,在浏览器中预览,如图 1-3 所示.

8 图1-1 编辑 HTML 代码 图1-2 另存为 对话框 图1-3 网页的浏览效果 1.3.2 使用 Dreamweaver CC 编写 HTML 文件 工欲善其事,必先利其器. 虽然使用记事本可以编写 HTML 文件,但是编写效率太 低,对于语法错误及格式都没有提示.因此,很多专门编写 HTML 网页的工具弥补了这种缺 陷.Adobe 公司的 Dreamweaver CC 用户界面非常友好,是一款非常优秀的网页开发工具,深 受广大用户的喜爱.Dreamweaver CC 的主界面如图 1-4 所示. 1.文档窗口 文档窗口位于界面的中部,它是用来编排网页的区域,与在浏览器中的结果相似.在文 档窗口中,可以将文档分为

3 种视图显示模式. (1) 代码视图.使用代码视图,可以在文档窗口中显示当前文档的源代码,也可以在该 窗口中直接键入 HTML 代码. (2) 设计视图.在设计视图下无须编辑任何代码,可以直接使用可视化的操作编辑网页.

9 第1章初识HTML

5 图1-4 Dreamweaver CC 的主界面 (3) 拆分视图.在拆分视图下,左半部分显示代码视图,右半部分显示设计视图.在这 种视图模式下,可以通过键入 HTML 代码直接观看效果,还可以通过设计视图插入对象,直 接查看源文件. 在各种视图间进行切换时,只需要在文档工具栏中单击相应的视图按钮即可.文档工具 栏如图 1-5 所示. 图1-5 文档工具栏 2. 插入 面板 插入 面板是在设计视图下使用频度很高的面板之一. 插入 面板默认打开的是 常用 页,它包括了最常用的一些对象. 例如,在文档中的光标位置插入一段文本、图像或表格等.用户可 以根据需要切换到其他页,如图 1-6 所示. 3. 属性 面板 属性 面板中主要包含当前选择的对象相关属性的设置.可 以通过菜单栏中的 窗口 → 属性 命令或 Ctrl+F3 组合键打开 或关闭 属性 面板. 属性 面板是常用的一个面板,因为无论要编辑哪个对象的 属性,都要用到它.其内容也会随着选择对象的不同而改变.例如,当光标定位在文档主体文字内容部分时, 属性 面板显示文字的相关属性,如图 1-7 所示. 文档窗口 属性面板 插入面板 图1-6 插入 面板