第1章 HTML5基础（25）电子课件.pptx

第1章HTML5基础

知识要点1.1什么是HTML1.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.1网页的基本概念1．Internet与WWWWWW01Internet服务电子邮件（Email）02文件传输（FTP）03即时信息传递（QQ、微信、MSN）04网络游戏05

1.1.1网页的基本概念2．WWW与浏览器WWW=Web服务器+信息资源+浏览器

1.1.1网页的基本概念不同浏览器→不同显示效果PART1主流浏览器（用browserstatistics搜索Bing）ChromeIEFirefoxSafariPART2其他平台差异分辨率操作系统

1.1.1网页的基本概念3．网站与主页网站（WebSite或Site）=页面集合主页（Homepage）=组织或个人在Web上的开始页面01搜索引擎02购物网站03公司网站04宣传网站网站的类别

1.1.1网页的基本概念4．网站中的各种文件任何一个网站都是由若干个文件组成的，包括网页文件、图像文件等多种类型。这些文件通过一定的方式以文件夹的形式组织起来，构成了网站的根文件夹。文件扩展名?说明.htm，.htmlHTML文件，即网页文件.cssCSS文件，即层叠样式表文件，用于设置网页内容的显示格式.jsJavaScript文件，通过程序的方式实现特定的功能.gif，.jpg，.png图像文件.swfFlash文件.wav，.mp3音频文件.mp4，.mov，.avi视频文件

1.1.2HTML的工作原理1．网页的HTML本质规范/标准01标记符（tag）02HTML(HypertextMarkupLanguage)

1.1.2HTML的工作原理2．关于Web标准对网页信息内容进行整理和分类。用于结构化设计的Web标准技术包括HTML、XML和XHTML。结构Part01对被结构化的信息进行显示控制。用于Web设计的标准技术是层叠样式表（CascadingStyleSheets，CSS，也称串联样式表或级联样式表）表现Part02对文档内部模型进行定义，用于控制动态交互内容。这部分标准技术包括文档对象模型（DocumentObjectModel，DOM）、浏览器对象模型（BrowserObjectModel，BOM）和脚本程序语言JavaScript等行为Part03

1.1.3创建和测试网页1．创建网页01.在Windows（本书以Windows10为例）中启动“记事本”程序02.在“记事本”的窗口中输入HTML代码03.输入代码结束后，选择“文件”菜单中的“保存”或“另存为”命令，弹出“另存为”对话框04.在“文件名”框中输入网页的名称，注意文件名必须以.htm或.html为扩展名。如果必要，可定位到特定的目录

1.1.3创建和测试网页2．测试网页保存网页之后，在所选择的文件夹中将包含我们所创建的网页文件。该网页文件名称左边有一个图标（或者是其他当前计算机上默认浏览器的图标），表示可以由Chrome将其打开。找到刚创建的网页文件并双击，则可以自动启动Chrome浏览器，此时所创建网页中的内容将在浏览器中显示。一般情况下，浏览器可以正确显示所有HTML代码。如果浏览器不能按照我们的预想进行显示，则表示编写的HTML代码有问题，应对代码进行修改。

1.1.4网页编辑工具除了使用像“记事本”这样的纯文本编辑器直接进行HTML代码编辑以外，制作网页时还可以使用以下两类软件工具来提高工作效率。1HTML编辑器把HTML代码编辑工作简化的一种工具，主要适用于手动编写HTML代码的场合。常见的“HTML编辑器”包括VSCode、Notepad++、SublimeText、UltraEdit和Xcode（适用于macOS）等2所见即所得的网页编辑器把HTML代码编辑工作用可视化的方式实现的一种工具。这是应用非常广泛的一类网页制作工具，尤其适合初学者使用。最常见的“所见即所得的网页编辑器”是Dreamweaver

1.2.1标记符基础HTML的语法比较简单，即使没有任何计算机编程语言（如C、Java等）的基础也很容易学。在HTML中，所有的标记符都用尖括号（、）括起来。例如，html表示HTML标记符。绝大多数标记符都是成对出