第1章 HTML基础
html基础教程
第一章HTML概述与基本结构目前大部分的网页都是用HTML配合其它语言写成的。
本章使用html语言来制作网页，而现在的很多网页制作工具软件，比如FrontPage、DreamWave,.net等，可自动生成一些固定格式的网页元素，在学习本章的过程中，不要一味去死记这些标识内容，我们学习这html 语言的主要目的不是要大家完全使用html语言来制作一个完整的网页，而是掌握其基本语法格式后应用到动态程序中去。
在学习过程中，我们要结合动态程序的方法来应用这些标识。
如果用html完全编写网页，那是过时了；如果不懂html语言那是学网页的无知，更谈不上灵活运用动态程序,php等。
一、HTML的概述HTML（HyperTextMarkupLanguage的缩写），即超文本链接标记语言。
它是在互联网发布超文本文件(通常所说的网页)的通用语言。
所谓超文本，就是它可以加入图片、声音、动画、影视等内容，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML标记，这些标记并不是一种程序语言，它只是一种排版网页中资料显示位置的标记语言。
每个标记的符号都是一条命令、它告诉浏览器如何显示文本。
这些标记均由"<"和">"符号以及一个字符串组成。
而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。
这些标记符号用“<标记名字属性>”来表示。
二、HTML的基本结构：一个HTML文档是由一系列的元素和标记组成。
元素名不区分大小写，HTML用标记来规定元素的属性和它在文件中的位置，HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
下面是一个最基本的html文档的代码:1－1.html<HTML>---------------------------------------- 开始标记<HEAD>-------------------------------------- 头部标记<TITLE>一个简单的HTML示例</TITLE></HEAD>--------------------------------------<BODY>---------------------------------------- 文件主体<CENTER>|<H1>欢迎光临我的主页</H1><BR><HR><FONT SIZE=7COLOR=red>|这是我第一次做主页|</FONT>|</CENTER>|</BODY></HTML>---------------------------------------结尾标记<HTML></HTML>在文档的最外层，文档中的所有文本和html标记都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。
《HTML+CSS网页设计与布局》教案
《HTML+CSS网页设计与布局》教案章节一：HTML基础1.1 教学目标了解HTML的基本概念和作用掌握HTML的基本语法和结构学会使用HTML编写简单的页面1.2 教学内容HTML简介HTML基本语法HTML基本结构常用的HTML标签1.3 教学方法讲授法：讲解HTML的基本概念和作用，演示基本语法和结构实践法：学生动手编写简单的HTML页面1.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）1.5 教学评估课堂练习：学生现场编写简单的HTML页面课后作业：学生完成课后练习，巩固所学知识章节二：CSS基础2.1 教学目标了解CSS的基本概念和作用掌握CSS的基本语法和选择器学会使用CSS样式化网页元素2.2 教学内容CSS简介CSS基本语法CSS选择器常用的CSS属性2.3 教学方法讲授法：讲解CSS的基本概念和作用，演示基本语法和选择器实践法：学生动手编写简单的CSS样式2.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）2.5 教学评估课堂练习：学生现场编写简单的CSS样式课后作业：学生完成课后练习，巩固所学知识章节三：网页布局基础3.1 教学目标了解网页布局的基本概念和原则掌握使用HTML和CSS进行网页布局的方法学会使用浮动布局和定位布局实现网页布局3.2 教学内容网页布局概述浮动布局定位布局布局实践3.3 教学方法讲授法：讲解网页布局的基本概念和原则，演示浮动布局和定位布局的方法实践法：学生动手实践，完成网页布局实例3.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例3.5 教学评估课堂练习：学生现场完成网页布局实例课后作业：学生完成课后练习，巩固所学知识章节四：响应式网页设计4.1 教学目标了解响应式网页设计的基本概念和原则掌握使用CSS媒体查询实现响应式布局的方法学会根据不同设备进行网页布局的调整4.2 教学内容响应式网页设计概述CSS媒体查询响应式布局实践4.3 教学方法讲授法：讲解响应式网页设计的基本概念和原则，演示CSS媒体查询的使用方法实践法：学生动手实践，完成响应式网页布局实例4.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例4.5 教学评估课堂练习：学生现场完成响应式网页布局实例课后作业：学生完成课后练习，巩固所学知识章节五：HTML5与CSS3新特性5.1 教学目标了解HTML5的基本概念和新增特性掌握CSS3的基本概念和新增特性学会使用HTML5和CSS3制作现代化的网页5.2 教学内容HTML5简介HTML5新增特性CSS3简介CSS3新增特性5.3 教学方法讲授法：讲解HTML5和CSS3的基本概念和新增特性实践法：学生动手实践，使用HTML5和CSS3制作现代化的网页5.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例5.5 教学评估课堂练习：学生现场使用HTML5和CSS3制作现代化的网页课后作业：学生完成课后练习，巩固所学知识《HTML+CSS网页设计与布局》教案章节六：表格与表单6.1 教学目标了解HTML中表格的基本用法掌握使用CSS样式化表格学会创建表单以及使用表单元素6.2 教学内容表格的基本结构表格的样式化表单的创建表单元素的使用6.3 教学方法讲授法：讲解表格和表单的基本概念和用法实践法：学生动手实践，编写含有表格和表单的HTML页面6.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）6.5 教学评估课堂练习：学生现场编写含有表格和表单的HTML页面课后作业：学生完成课后练习，巩固所学知识章节七：多媒体与交互7.1 教学目标了解HTML中多媒体元素的使用掌握CSS动画和过渡效果的实现学会使用JavaScript添加网页交互7.2 教学内容多媒体元素（如img, audio, video）CSS动画和过渡效果JavaScript基础和交互实现7.3 教学方法讲授法：讲解多媒体元素的使用和CSS动画效果实践法：学生动手实践，编写包含多媒体和交互的HTML页面7.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例7.5 教学评估课堂练习：学生现场编写包含多媒体和交互的HTML页面课后作业：学生完成课后练习，巩固所学知识章节八：浏览器兼容性与优化8.1 教学目标了解浏览器兼容性的概念掌握使用CSS hacks和兼容性解决方案学会网页性能优化技巧8.2 教学内容浏览器兼容性问题CSS hacks和兼容性解决方案网页性能优化8.3 教学方法讲授法：讲解浏览器兼容性和网页性能优化的概念实践法：学生动手实践，对网页进行兼容性和性能优化8.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例8.5 教学评估课堂练习：学生现场对网页进行兼容性和性能优化课后作业：学生完成课后练习，巩固所学知识章节九：响应式图片与字体9.1 教学目标了解响应式网页设计中图片和字体的处理掌握CSS中的媒体查询和特性检测学会使用srcset和sizes属性9.2 教学内容响应式图片的处理响应式字体的处理CSS媒体查询和特性检测9.3 教学方法讲授法：讲解响应式图片和字体的处理方法实践法：学生动手实践，编写响应式图片和字体的HTML页面9.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例9.5 教学评估课堂练习：学生现场编写响应式图片和字体的HTML页面课后作业：学生完成课后练习，巩固所学知识章节十：版本控制与协作开发10.1 教学目标了解版本控制的概念和重要性掌握Git的基本命令和操作学会在团队中进行协作开发10.2 教学内容版本控制基础知识Git的安装和配置Git的基本命令（如clone, mit, push, pull等）GitHub的基本使用10.3 教学方法讲授法：讲解版本控制的概念和Git的基本命令实践法：学生动手实践，使用Git进行版本控制10.4 教学资源PowerPoint课件Git安装和配置指导文档GitHub的使用文档10.5 教学评估课堂练习：学生现场使用Git进行版本控制课后作业：学生完成课后练习，巩固所学知识《HTML+CSS网页设计与布局》教案章节十一：移动端网页设计11.1 教学目标了解移动端网页设计的基本原则掌握使用CSS媒体查询进行移动端布局学会优化移动端用户体验11.2 教学内容移动端网页设计原则媒体查询的使用触摸事件和手势移动端优化技巧11.3 教学方法讲授法：讲解移动端网页设计原则和媒体查询的使用实践法：学生动手实践，完成移动端网页布局实例11.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例11.5 教学评估课堂练习：学生现场完成移动端网页布局实例课后作业：学生完成课后练习，巩固所学知识章节十二：网页性能优化12.1 教学目标了解网页性能对用户体验的影响掌握网页性能优化的方法和技巧学会使用工具进行性能分析12.2 教学内容网页性能影响因素性能优化方法（如图片优化、代码压缩、缓存利用等）性能分析工具（如Chrome DevTools）12.3 教学方法讲授法：讲解网页性能影响因素和优化方法实践法：学生动手实践，对网页进行性能优化12.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例12.5 教学评估课堂练习：学生现场对网页进行性能优化课后作业：学生完成课后练习，巩固所学知识章节十三：网络标准和前端框架13.1 教学目标了解Web标准的概念和重要性掌握HTML5和CSS3的新特性学会使用前端框架（如Bootstrap）13.2 教学内容Web标准概述HTML5和CSS3新特性前端框架介绍（如Bootstrap）13.3 教学方法讲授法：讲解Web标准和HTML5/CSS3新特性实践法：学生动手实践，使用前端框架进行网页设计13.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）前端框架文档和教程13.5 教学评估课堂练习：学生现场使用前端框架进行网页设计课后作业：学生完成课后练习，巩固所学知识章节十四：项目实践14.1 教学目标综合运用所学知识进行网页设计与布局学会项目规划和管理完成一个完整的个人或团队项目14.2 教学内容项目选题和规划网页设计与布局实践项目展示与评价14.3 教学方法讲授法：讲解项目选题和规划的方法实践法：学生动手实践，完成个人或团队项目14.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）项目管理和评价指南14.5 教学评估项目完成情况评估团队协作和沟通能力评估项目展示和评价章节十五：就业指导与职业规划15.1 教学目标了解Web前端开发的职业前景掌握求职技巧和面试准备学会进行职业规划和发展15.2 教学内容Web前端开发职业前景求职技巧和面试准备职业规划和发展建议15.3 教学方法讲授法：讲解Web前端开发的职业前景和求职技巧实践法：学生进行模拟面试和职业规划练习15.4 教学资源PowerPoint课件求职和职业规划指导文档模拟面试材料15.5 教学评估模拟面试表现评估职业规划文档评估学生反馈和总结重点和难点解析本文主要介绍了《HTML+CSS网页设计与布局》的教学教案，涵盖了HTML基础、CSS基础、网页布局基础、响应式网页设计、HTML5与CSS3新特性、表格与表单、多媒体与交互、浏览器兼容性与优化、响应式图片与字体、版本控制与协作开发、移动端网页设计、网页性能优化、网络标准和前端框架、项目实践以及就业指导与职业规划等十五个章节。
网页设计与制作课件第1章
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
HTML第一章试题( 含答案)
HTML第一章试题（含答案）第1章 HTML基本概念测试1、网页中空格的字符实体为(_____)。
A、>B、"C、©B、文本文件 D、图像文件 B、Meta D、Description B、错误 B、错误 B、错误 B、Keywords D、http-equiv B、错误 B、错误 B、错误D、2、HTML文档属于(_____)。
A、可执行文件 C、批处理文件 A、Keywords C、Img3、在网页头部信息中不包含下面的(_____)对象。
4、用任何文本编辑器都能编辑制作HTML文件。
A、正确 A、正确 A、正确 A、Charset C、Description A、正确 A、正确 A、正确5、页面摘要信息存放在文档主体标签7、HTML文档使用meta元素的(_____)属性指定文档编码。
8、文字、图片或超链接为行级元素。
9、段落标签为块级元素。
10、在网页文档头部定义的标题内容将在浏览器窗口中显示。
11、以下关于块级元素与行级元素的描述中，答案(_____)是错误的。
A、块级标签具有一定的宽度和高度，可以通过设置width、height属性来控制。
B、块级元素可以包含块级元素和行级元素。
C、块级元素各占据一行，垂直方向排列。
D、行级元素设置width、height属性有效。
12、如果希望将某个网页作为网站的首页（主页），文件名可以命名为index.html或index.htm。
A、正确B、错误13、以下关于浏览网页的描述中，答案(_____)是错误的。
A、如果浏览器没有关闭，要在浏览器中看到修改后的效果，不必重新打开该文件，直接单击浏览器工具栏上的“刷新”按钮即可。
B、保存网页时如果是以非.html或.htm的文件后缀名存储的文件，用浏览器打开后，看到的可能是乱码。
C、在IE浏览器中，单击“编辑”菜单中的“源文件”可以打开网页源文件。
D、网页在浏览后如果有不满意的地方，用户可重新在“记事本”中打开该html文件进行修改。
HTML基础ppt课件
15
2.1 head容器的标记
3．meta元素 格式：
<meta name="text" http-equiv="text" content="text“ />
第1章 HTML基础
1
第1章 HTML基础
1 HTML文档结构 2 HTML基本标记的使用 3 超链接标记 4 HTML表格 5 HTML表单
2
1 HTML文档结构
在互联网中传送的文档，绝大部分使 用超文本标记语言编写，这些文档称为 HTML文档。
在基本HTML文档中，只允许两种元 素存在：一种是HTML标记，另一种则是 普通文本。
18
2.1 head容器的标记
5．script元素 格式：
<script type=“text/javascript”> 脚本语言代码段
3
1 HTML文档结构
HTML文档的组成结构如下：
4
1 HTML文档结构
一个完整的HTML文档通常由以下三部分组成：
1．HTML标记 格式：<html> … </html>
2．头部信息 格式：<head> … </head>
3．文本主体 格式：<body> … </body>
5
1 HTML文档结构
11
2.1 head容器的标记
电子商务师考试习题---第一章(答案)
第一章网页制作第一节 HTML语言1、在HTML中，<title>我的花店</title>，表示我的花店是（C）。
P2（A）段落标题（B）表格标题（C）网页标题（D）网页第一行文字2、最大的标题级数是：（D）P3A.<h7>B.<h6>C.<h2>D.<h1>3、在HTML中，（B）是网页标题标记。
P2（Ａ）<head> （Ｂ）<title>（Ｃ）<hr> （Ｄ）<body>4、下面的链接格式，正确的是（ABC）。
（Ａ）<a href=”mailto:gltxiaohong@”>与我联系</a>（Ｂ）<a href=”bg.htm”>概况</a>（Ｃ）<a href=””>友情链接</a>（Ｄ）<a href=”../bg.htm”>首面</a>5、在HTML中，以下对文件的引用，（ C ）使用的是相对地址。
<a href=”/index.htm”>友情</a><a href=”lib/bg.htm”>鲜花</a><a href=”file:///e:/web2/index_files/bg26.jpg”>流量</a><a href=””>风景</a>6、在HTML中，<a href=mailto:webmaster@>链接</a>,使（C）。
（A）指向其他网站文件的链接（B）指向站点内文件的链（C）指向电子邮件的链接（D）指向网页内书签的链接7、在 HTML中，align属性表示的含义是（B）。
P4 （Ａ）显示不同形状的项目符号（Ｂ）控制文字的对齐方式（Ｃ）定义文字所使用的字体（Ｄ）定义该单元格所跨行数8、下面哪一个标记是段落标记符号：（B）A.R>B.<P>C.<LI>D.<UL>9、在HTML中，<font>标记主要包括（ABC）属性。
网页设计与制作实用教程(第3版) 第1章-网站开发基础
1.1.2 网站的类型及定位
2．电子商务网站 电子商务网站是目前最具发展潜力的网站类型。电 子商务网站提供网上交易和管理等全过程的服务， 因为它具有广告宣传、咨询洽谈、网上订购、网上 支付、电子账户、服务传递、意见征询、交易管理 等各种功能。
1.1.2 网站的类型及定位
3．视频分享网站 视频分享网站为用户提供视频播客、视频分享、视 频搜索及所有数字视频内容的存储和传输服务。可 供用户在线观看最新、最热的电视、电影和视频资 讯等。
1.1.3 认识网页
表单：访问者要查找一些信息或申请一些服务时需 要向网页提交一些信息，这些信息就是通过表单的 方式输入到Web服务器，并根据所设置的表单处 理程序进行加工处理的。表单中包括输入文本、单 选按钮、复选框和下拉菜单等。 超链接：超链接是实现网页按照一定逻辑关系进行 跳转的元素。 动态元素：动态元素包括GIF动画、Flash动画、 滚动字幕、悬停按钮、广告横幅、网站计数器等。
网页设计与制作实用教程（Dreamweaver+Flash+Photoshop（第3版））
第1章 网站开发基础
本章主要内容：
网站开发概述 网站开发流程 常用网页设计软件 HTML入门
1.1 网站开发概述
网站开发就是使用网页设计软件， 经过平面设计、网络动画设计、网页排 版等步骤，设计出多个页面。这些网页 通过一定逻辑关系的超链接，构成一个 网站。
1.1.2 网站的类型及定位
网站是一种新型媒体，在日常生活、商业活动、娱 乐游戏、新闻资讯等方面有着广泛的应用。在网站 开发之前，需要认识各种网站的主要功能和特点， 对网站进行定位。下面介绍几种常见的网站类型。
1.1.2 网站的类型及定位
1．综合门户网站 综合门户网站具有受众群体范围广泛，访问量高、信 息容量大等特点，包含时尚生活、时事新闻、运动娱 乐等众多栏目。综合门户网站定位明确，以文字链接 为主要内容、版式和色彩较为直观、简洁。
网页教案(div布局)
网页教案(div布局)第一章：HTML基础1.1 学习目标：了解HTML的基本结构掌握如何使用标签来创建网页的基本元素1.2 教学内容：HTML简介：HTML的作用和重要性HTML基本结构：`<!DOCTYPE >`、`<>`、`<head>`、`<body>`标签网页元素：、段落、、图片等标签的使用1.3 教学活动：演示HTML的基本结构及其功能示例：创建一个简单的网页，包含、段落和图片学生练习：创建一个网页，使用HTML的基本元素1.4 作业：完成一个简单的HTML练习，创建一个包含、段落和图片的网页第二章：CSS基础2.1 学习目标：了解CSS的作用和重要性掌握如何使用CSS来样式化网页元素2.2 教学内容：CSS简介：CSS的作用和重要性内联样式：使用`style`属性来添加样式内部样式表：使用`<style>`标签来添加样式外部样式表：使用`.css`文件来添加样式2.3 教学活动：演示CSS的作用和重要性示例：使用内联样式、内部样式表和外部样式表来样式化网页元素学生练习：创建一个简单的网页，使用CSS来样式化、段落和图片2.4 作业：完成一个简单的CSS练习，创建一个包含、段落和图片的网页，并使用CSS来样式化它们第三章：DIV标签3.1 学习目标：了解DIV标签的作用和重要性掌握如何使用DIV标签来创建布局3.2 教学内容：DIV标签简介：DIV的作用和重要性使用`<div>`标签来创建块级元素使用CSS来样式化DIV元素3.3 教学活动：演示DIV标签的作用和重要性示例：使用DIV标签来创建一个简单的布局学生练习：创建一个简单的网页布局，使用DIV标签来创建不同的区域3.4 作业：完成一个简单的DIV标签练习，创建一个包含、段落和图片的网页布局第四章：定位和布局4.1 学习目标：了解定位的作用和重要性掌握如何使用CSS定位技术来对元素进行精确布局4.2 教学内容：定位概述：静态定位、相对定位、绝对定位和固定定位使用`position`属性来设置元素的定位方式使用`top`、`right`、`bottom`和`left`属性来控制元素的位置了解`z-index`属性的作用4.3 教学活动：演示不同定位方式的原理和效果示例：使用定位技术创建一个导航栏布局学生练习：创建一个网页布局，使用定位技术来实现一个水平导航栏4.4 作业：完成一个定位练习，创建一个包含导航栏的网页布局。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<li type="符号类型1"> 表项1
<li type="符号类型2"> 表项2 „
</ol>
1.10 实训
列表嵌套把主页分为多个层次，给人以很强的层次感。有 序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。 制作无序列表中嵌套有序列表的页面。
习题1
1．使用文字与段落标签制作如图1-14所示的网页。 2．使用嵌套的列表制作如图1-15所示的网页。 3．使用表格和图像标签制作如图1-16所示的网页。
1.4 搭建支持HTML5的浏览器环境
目前， Microsoft的 IE 系列（仅有 IE9 及其以上版本）浏 览器，以及 Opera Software 的 Opera 与 Google 的 Chrome 浏览 器。由于 Windows XP 操作系统下不能安装 IE9 ，因此本书所 有的应用实例，主要执行的浏览器为 Opera ，其对应的版本 号为 11.62 。如果读者需要运行本书中的实例，则要安装该 版本的Opera浏览器。 【 演 练 1-1】 制 作 简 单 的 HTML5 文 档 检 测 浏 览 器 是 否 支 持 HTML5。
1签<!--„-->
注释标签的格式为：
<!-- 注释内容 -->
1.5.2
强制换行标签<br />
强制换行标签的格式为：
文字 <br />
1.5.3
段落标签<p>„</p>
段落标签的格式为：
<p align="left|center|right"> 文字 </p>
网页设计与制作教程 （HTML+CSS+JavaScript）
机械工业出版社同名教材 配套电子教案
第1章 HTML基础
1.1 HTML简介 1.2 HTML编写规范 1.3 网页文件的创建过程 1.4 搭建支持HTML5的浏览器环境 1.5 文字与段落排版 1.6 超链接 1.7 图像
1.8 表格
(1) 实现Web应用程序
HTML5用于实现Web应用程序的功能如下： 绘画的 Canvas 元素，该元素就像在浏览器中嵌入一块画布，程序可 以在画布上绘画。 更好的用户交互操作，包括拖放、内容可编辑等。
扩展的 HTMLDOM API （ Application Programming Interface ，应用 程序编程接口）。
1.9 列表
1.1 HTML简介
HTML是HyperText Markup Language（超文本置标语言） 的缩写，是一种为普通文件中某些字句加上标签的语言，其 目的在于运用标签（tag）对文件达到预期的效果。 1.1.1 HTML发展历史
1.1 HTML简介
1.1.2 HTML5的特性及元素
1.7 图像
1.7.1 图像标签<img>
使用图像标签，可以把一幅图像加入到网页中。用图像 标签还可以设置图像的替代文本、尺寸、布局等属性。图像 标签的格式为：
<img src="图像文件名" alt="简单说明" width="图像宽度" height=" 图像高度" border="边框宽度" hspace="水平方向空白" vspace="垂直 方向空白" align="环绕方式|对齐方式" />
【演练1-2】制作一个购物商城积分说明的页面
1.6 超链接
1．锚点标签<a>„</a> <a>标签的格式为：
<a href="URL" target="打开窗口方式"> 热点 </a>
2．指向其他页面的链接
① 链接到同一目录内的网页文件，格式为： <a href="目标文件名.htm"> 热点文本 </a> ② 链接到下一级目录中的网页文件，格式为： <a href="子目录名/目标文件名.htm"> 热点文本 </a>
③ 链接到上一级目录中的网页文件，格式为：
<a href="../目标文件名.htm"> 热点文本 </a> ④ 链接到同级目录中的网页文件，格式为：
<a href="../子目录名/目标文件名.htm"> 热点文本 </a>
1.6 超链接
3．指向本页中的链接 超链接标签的格式为：
<a href="#记号名"> 热点文本 </a>
<ul type="符号类型"> <li type="符号类型1"> 第一个列表项 <li type="符号类型2"> 第二个列表项 „ </ul>
1.9 列表
1.9.2 有序列表标签<ol><li>„</ol>
通过带序号的列表可以更清楚地表达信息的顺序。使 用<ol>标签可以建立有序列表，表项的标签仍为<li>。格式 为：
</table>
1.8 表格
1.8.2 表格内文字的对齐方式
在默认情况下，表项居于单元格的左端。可用列、行的属 性设置表项数据在单元格中的位置。 1．水平对齐 2．垂直对齐 1.8.3 表格在页面中的对齐方式
设置表格在页面中的位置，格式为：
<table align="left|center|right">
当表格位于页面的左侧或右侧时，文本填充在另一侧；当 表格居中时，表格两边没有文本；当align属性省略时，文本 在表格的下面。
1.9 列表
1.9.1 无序列表标签<ul><li>„</ul>
无序列表中每一个表项的前面是项目符号（如●、■等符 号）。建立无序列表可使用<ul>标签和<li>表项标签。 格式为：
1.5 文字与段落排版
1.5.4 定位标签<div>„</div>
定位标签的格式为：
<div align="left|center|right"> 文本、图像或表格 </div>
1.5.5
水平线标签<hr />
水平线标签的格式为：
<hr align="left|center|right" size=" 横线粗细 " width=" 横线长度 " color="横线色彩" noshade= "noshade" />
其中，属性 size 设定线条粗细，以像素为单位，默认值为 2 。
1.5 文字与段落排版
1.5.6 标题文字标签<h#>„</h#>
标题文字标签的格式为：
<h# align="left|center|right"> 标题文字 </h#>
“#”用来指定标题文字的大小， # 取 1 ～ 6 之间的值，取 1 时 文字最大，取6时文字最小。 1.5.7 文字与段落排版综合实例
在编写 HTML代码时要注意使用代码缩进来提高程序的结 构性和层次性。
1.2 HTML编写规范
1.2.3
<html> <head> <meta charset="gb2312"> <title>文档标题</title> </head> <body> 网页内容 </body> </html>
使用HTML语法编写HTML5文档
<!doctype html>
1.3 网页文件的创建过程
① 打开记事本。单击Windows 的“开始”按钮，在“程序” 菜单的“附件”子菜单中单击“记事本”命令。 ② 创建新文件，并按 HTML 语言规则编辑。在“记事本”窗 口中输入HTML代码，具体的内容如图1-2所示。 ③ 保存网页。打开“记事本”的“文件”菜单，选择“保存” 命令。此时将出现“另存为”对话框，在“保存在”下拉列 表框中选择文件要存放的路径，在“文件名”文本框输入 以 .html 或 .htm 为后缀的文件名，如 welcome.html ，在“保 存类型”下拉列表框中选择“文本文档（ *.txt ）”项，最 后单击“保存”按钮，将记事本中的内容保存在磁盘中。 ④ 在“我的电脑”相应的存盘文件夹中双击 welcome.html 文件启动浏览器，即可看到网页的显示结果。
(2) 更好地呈现内容
基于Web表现的需要，HTML5引入了更好地呈现内容的元素 用于视频、音频播放的video元素和audio元素。 用于文档结构的article、footer、header、nav、section等元素。
1.2 HTML编写规范
1.2.1 1．标签 HTML文档由标签和被标签的内容组成。标签能产生所需 要的各种效果。其功能类似于一个排版软件，将网页的内容 排成理想的效果。其格式为：
<标签> 受标签影响的内容 </标签>
HTML文档结构
2．标签的属性 每个标签都有一系列的属性。标签通过属性来制作出各 种效果，格式为：