第1章 HTML5基础（25）（课件)-《网页设计与制作》同步教学（人民邮电出版社）

第 1 章 HTML5基础 1 第 1 章　HTML5基础 知识要点 1.1　什么是 HTML 1.1.1  网页的基本概念 1.1.2  HTML 的工作原理 1.1.3  创建和测试网页 1.1.4  网页编辑工具 1.2　创建网页 1.2.1  标记符基础 1.2.2  网页的基本结构 1.2.3  在网页中添加内容 1.3　综合实例：人物介绍网页 要点回顾 练习题 目录 1 第 1 章　HTML5基础 1.1.1 网页的基本概念 1．Internet 与 WWW WWW 01 Internet 服务 电子邮件（Email） 02 文件传输（FTP） 03 即时信息传递（QQ、微信、MSN） 04 网络游戏 05 1 第 1 章　HTML5基础 1.1.1 网页的基本概念 2．WWW 与浏览器 WWW = Web 服务器 + 信息资源 + 浏览器 1 第 1 章　HTML5基础 1.1.1 网页的基本概念 不同浏览器 → 不同显示效果 PART 1 主流浏览器（用browser statistics搜索Bing） Chrome IE Firefox Safari PART 2 其他平台差异 分辨率 操作系统 1 第 1 章　HTML5基础 1.1.1 网页的基本概念 3．网站与主页 网站（Web Site或Site） = 页面集合 主页（Homepage）= 组织或个人在 Web上的开始页面 01 搜索引擎 02 购物网站 03 公司网站 04 宣传网站 网站的类别 1 第 1 章　HTML5基础 1.1.1 网页的基本概念 4．网站中的各种文件 任何一个网站都是由若干个文件组成的，包括网页文件、图像文件等多种类型。这些文件通过一定 的方式以文件夹的形式组织起来，构成了网站的根文件夹。 文件扩展名  说明 .htm，.html HTML 文件，即网页文件 .css CSS 文件，即层叠样式表文件，用于设置网页内容的显示格式 .js JavaScript 文件，通过程序的方式实现特定的功能 .gif，.jpg，.png 图像文件 .swf Flash 文件 .wav，.mp3 音频文件 .mp4，.mov，.avi 视频文件 1 第 1 章　HTML5基础 1.1.2 HTML 的工作原理 1．网页的 HTML 本质 规范/标准 01 标记符（tag） 02 HTML(Hypertext Markup Language) 1 第 1 章　HTML5基础 1.1.2 HTML 的工作原理 2．关于 Web 标准 对网页信息内容进行整理和分类。用于结构化设计的 Web 标准技术包括 HTML、XML和 XHTML。 结构 Part 01 对被结构化的信息进行显示控制。用于 Web 设计的标准技术是层叠样式表（Cascading Style Sheets，CSS，也称串联样式表或级联样式表） 表现 Part 02 对文档内部模型进行定义，用于控制动态交互内容。这部分标准技术包括文档对象模型（Document Object Model，DOM）、浏览器对象模型（Browser Object Model，BOM）和脚本程序语言 JavaScript 等 行为 Part 03 1 第 1 章　HTML5基础 1.1.3 创建和测试网页 1．创建网页 01. 在 Windows（本书以 Windows 10 为例）中启动“记事本”程序 02. 在“记事本”的窗口中输入 HTML 代码 03. 输入代码结束后，选择“文件”菜单中的“保存”或“另存为”命令，弹出“另存为”对话框 04. 在“文件名”框中输入网页的名称，注意文件名必须以.htm 或.html 为扩展名。如果必要，可定位到特定的目录 1 第 1 章　HTML5基础 1.1.3 创建和测试网页 2．测试网页 保存网页之后，在所选择的文件夹中将包含我们所创建的网页文件。该网页文件名称左边有一个 图标（或者是其他当前计算机上默认浏览器的图标），表示可以由 Chrome 将其打开。找到刚创建的网页文件并双击，则可以自动启动 Chrome 浏览器，此时所创建网页中的内容将在浏览器中显示。 一般情况下，浏览器可以正确显示所有 HTML 代码。如果浏览器不能按照我们的预想进行显示，则表示编写的 HTML 代码有问题，应对代码进行修改。 1 第 1 章　HTML5基础 1.1.4 网页编辑工具 除了使用像“记事本”这样的纯文本编辑器直接进行 HTML 代码编辑以外，制作网页时还可以使用以下两类软件工具来提高工作效率。 1 HTML 编辑器 把 HTML 代码编辑工作简化的一种工具，主要适用于手动编写 HTML 代码的场合。常见的“HTML 编辑器”包括 VS Code、Notepad++、Sublime Text、UltraEdit 和 Xcode（适用于 macOS）等 2 所见即所得的网页编辑器 把 HTML 代码编辑工作用可视化的方式实现的一种工具。这是应用非常广泛的一类网页制作工具，尤其适合初学者使用。最常见的“所见即所得的网页编辑器”是 Dreamweaver 1 第 1 章　HTML5基础 1.2.1 标记符基础 HTML 的语法比较简单，即使没有任何计算机编程语言（如 C、Java 等）的基础也很容易学。在 HTML 中，所有的标记符都用尖括号（<、>）括起来。例如，<html>表示 HTML 标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符，开始标记符和相应的结束标记符定义了标记符所影响的范围。结束标记符与开始标记符的区别是结束标记符在小于号之后有一条斜线。 1．基本的 HTML 语法 <h1>这里是标题</h1> 将以“标题 1”格式显示文字“这里是标题”，而不影响开始标记符和结束标记符以外的其他文字。 某些标记符，例如换行标记符 <br>，只要求单一标记符，不需要结束标记符。 1 第 1 章　HTML5基础 1.2.1 标记符基础 2．标记符的属性 HTML 标记符的样子：<html>、<a>。 不区分大小写，<html>、<Html>和<HTML>一样，但建议用小写。 01 标记符一般成对出现，包括开始标记符和结束标记符，例如<p></p>。 某些标记符只要求单一标记符号，例如<br>。 02 开始标记符与结束标记符的区别在于：结束标记符多一个斜杠“/”（不是反斜杠“\”！） 属性是用来描述对象特征的特性。例如，人的身高、体重。 HTML属性放在开始标记符，属性之间用空格分开，属性值用引号。 <a href="target.htm" title="点击有惊喜">超链接</a> 03 注意：XHTML要求标记符区分大小写！养成习惯都用小写。 注意：对于XHTML，这样的标记写为<br />；对于HTML5，直接写为<br>。 1 第 1 章　HTML5基础 1.2.1 标记符基础 HTML标记符 Part 1 Web 页 = HTML 文件 Part 2 HTML 文件的扩展名： .htm 或 .html Part 3 HTML文档基本结构 <html></html> <head></head> <body></body> 1 第 1 章　HTML5基础 1.2.2 网页的基本结构 Web页的基本结构 1 第 1 章　HTML5基础 1.2.2 网页的基本结构 head标记符 首部标记<head></head>位于 Web 页的开头，其中不包括 Web 页的任何实际内容，而是提供一些与 Web 页有关的特定信息。 首部标记中的内容也用相应的标记符括起来。例如，样式表（CSS）定义位于<style>和</style>之间；脚本定义位于<script></script>之间。 1 第 1 章　HTML5基础 1.2.2 网页的基本结构 title标记符 Part 1 在首部标记符中，最基本、最常用的标记符是标题标记<title>和</title>，用于定义网页的标题 Part 2 当网页在浏览器中显示时，网页标题将在浏览器窗口的标签中显示 注意：网页标题是浏览者第一个看到的网页内容，应确保其简明扼要、有意义！ 1 第 1 章　HTML5基础 1.2.2 网页的基本结构 body标记符 Part 1 正文标记符<body>和</body>包含Web 页的内容。文字、图形、链接以及其他HTML元素都位于该标记符内。 Part 2 正文标记符中的文字，如果没有其他标记符修饰，则将以无格式的形式显示。 注意：空格、回车这些格式控制在显示时都不起作用。 1 第 1 章　HTML5基础 1.2.2 网页的基本结构 添加注释 1 不论是编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作习惯。实际上，添加注释是任何开发工作必须遵循的规范之一 2 HTML 的注释由开始标记符<!-- 和结束标记符 --> 构成。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示 1 第 1 章　HTML5基础 1.2.2 网页的基本结构 显示特殊字符 01. 如果用户需要在网页中显示某些特殊字符，例如：<（小于号）、>（大于号）、”（引号）等，则需使用参考字符来表示，而不能直接输入 02. 参考字符以“&”号开始，以“；”结束，既可以使用数字代码，也可以使用代码名称。 例如：1<a在网页中应写为1&lt;a 1 第 1 章　HTML5基础 1.3 综合实例：人物介绍网页 创建与测试网页 01 在“记事本”中编写代码 02 保存为.htm或.html文件 03 在浏览器中查看与测试 04 如有问题，在“记事本”中再次打开并编辑，修改存盘后重复第3步 1 第 1 章　HTML5基础 1.3 综合实例：人物介绍网页 网页编辑工具 VS Code（推荐） Notepad++ Sublime Text UltraEdit HTML 编辑器 Adobe Dreamweaver（推荐） WYSWYG 编辑器 1 第 1 章　HTML5基础 1.3 综合实例：人物介绍网页 综合实例 1 第 1 章　HTML5基础 THANKS 1 第 1 章　HTML5基础 $$