第1章 HTML5基础电子课件_第1页
第1章 HTML5基础电子课件_第2页
第1章 HTML5基础电子课件_第3页
第1章 HTML5基础电子课件_第4页
第1章 HTML5基础电子课件_第5页
已阅读5页，还剩20页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第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网络游戏051.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等行为Part031.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代码编辑工作用可视化的方式实现的一种工具。这是应用非常广泛的一类网页制作工具，尤其适合初学者使用。最常见的“所见即所得的网页编辑器”是Dreamweaver1.2.1标记符基础HTML的语法比较简单，即使没有任何计算机编程语言（如C、Java等）的基础也很容易学。在HTML中，所有的标记符都用尖括号（<、>）括起来。例如，<html>表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符，开始标记符和相应的结束标记符定义了标记符所影响的范围。结束标记符与开始标记符的区别是结束标记符在小于号之后有一条斜线。1．基本的HTML语法<h1>这里是标题</h1>将以“标题1”格式显示文字“这里是标题”，而不影响开始标记符和结束标记符以外的其他文字。某些标记符，例如换行标记符<br>，只要求单一标记符，不需要结束标记符。1.2.1标记符基础2．标记符的属性HTML标记符的样子：<html>、<a>。不区分大小写，<html>、<Html>和<HTML>一样，但建议用小写。01标记符一般成对出现，包括开始标记符和结束标记符，例如<p></p>。某些标记符只要求单一标记符号，例如<br>。02开始标记符与结束标记符的区别在于：结束标记符多一个斜杠“/”（不是反斜杠“\”！）属性是用来描述对象特征的特性。例如，人的身高、体重。HTML属性放在开始标记符，属性之间用空格分开，属性值用引号。<ahref="target.htm"title="点击有惊喜">超链接</a>03注意：XHTML要求标记符区分大小写！养成习惯都用小写。注意：对于XHTML，这样的标记写为<br/>；对于HTML5，直接写为<br>。1.2.1标记符基础HTML标记符Part1Web页=HTML文件Part2HTML文件的扩展名：.htm

或.htmlPart3HTML文档基本结构<html></html><head></head><body></body>1.2.2网页的基本结构Web页的基本结构1.2.2网页的基本结构head标记符首部标记<head></head>位于Web页的开头，其中不包括Web页的任何实际内容，而是提供一些与Web页有关的特定信息。首部标记中的内容也用相应的标记符括起来。例如，样式表（CSS）定义位于<style>和</style>之间；脚本定义位于<script></script>之间。1.2.2网页的基本结构title标记符Part1在首部标记符中，最基本、最常用的标记符是标题标记<title>和</title>，用于定义网页的标题Part2当网页在浏览器中显示时，网页标题将在浏览器窗口的标签中显示注意：网页标题是浏览者第一个看到的网页内容，应确保其简明扼要、有意义！1.2.2网页的基本结构body标记符Part1正文标记符<body>和</body>包含Web页的内容。文字、图形、链接以及其他HTML元素都位于该标记符内。Part2正文标记符中的文字，如果没有其他标记符修饰，则将以无格式的形式显示。注意：空格、回车这些格式控制在显示时都不起作用。1.2.2网页的基本结构添加注释1不论是编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作习惯。实际上，添加注释是任何开发工作必须遵循的规范之一2HTML的注释由开始标记符<!--和结束标记符-->构成。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示1.2.2网页的基本结构显示特殊字符01.如果用户需要在网页中显示某些特殊字符，例如：<（小于号）、>（大于号）、”（引号）等，则需使用参考字符来表示，而不能直接输入02.参考字符以“&”号开始，以“；”结束，既可以使用数字代码，也可以使用代码名称。例如：1<a在网页中应写为1<a1.3综合实例：人物介绍网页创建与测试网页01在“记事本”中编写代码02保存为.htm或

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论