高二下北京理工大学出版社移动Web前端开发课件第2章 开启HTML之旅
2023-01-09
|
67页
|
81人阅读
|
0人下载
普通
内容正文：
本章简介：
第2章 开启HTML之旅
目前，各个主流浏览器厂商提供的浏览器版本，都已经完全或者比较完全的支持HTML5。论及HTML5，它不仅仅是HTML的最新版本，通常还是指包括HTML、CSS、JavaScript在内的一套技术的整合。其中，HTML指的是超文本标记语言，它可以描述网页中的文本、图像、链接等信息，可以搭建出最原始的网站框架，但是，什么是HTML？标签是什么含义？它又是如何通过标签搭建起网页的呢？本章将介绍网页基本概念、HTML文档结构、网站组织结构以及做任何网页都可能用到的标签元素。
课堂学习目标
掌握网页的基本概念
了解网站组织结构
掌握HTML的文档结构
掌握HTML超链接的使用方法
掌握HTML的图像标签
掌握HTML的文本控制标签
掌握HTML的列表标签
2.1 【案例1】HTML文档结构
案例分析——制作“西游首页”
实现步骤
知识点讲解——HTML文档结构
案例练习
2.1.1 案例分析——制作“西游首页”
《西游记》是中国古典长篇小说，四大名著中的一部，习近平总书记曾多次在国际论坛评论该小说，并向国际社会、外国知名人士做热情地推荐、介绍，这引起了国内外舆论的关注，也形成了一个共识：《西游记》是世界认识中国的一扇文学之窗，是一个中国传统文化光彩耀眼的新标杆。在本案例中，将规划一个介绍西游记的网站，以此为例，介绍HTML文档结构。效果如图2.1所示。
1．需求分析
图2.1 西游首页
根据最终效果，对案例进行分析，通过以下几个方面实现：
（1）规划站点结构。为网站建立项目。
（2）HTML部分。为HTML页面用到的元素进行设置。
2．设计思路
（1）构建西游网站项目。
（2）创建“西游首页”文件。
（3）编写首页代码。
2.1.2 实现步骤
1．新建“西游记”WEB项目
制作网站，首先要新建一个项目文件。
1）新建文件夹xyj，作为项目的根目录文件夹。
2）打开Sublime编辑器，在菜单栏中选择“项目”，如图2.2所示。
图2.2 项目菜单
3）根据向导选择硬盘上建立的文件夹“xyj”作为项目的根目录，点击“确定”回到Sublime界面中，效果如图2.3所示。
图2.3 新建项目
2．新建“西游首页”文件
新建文件，另存为index.html，保存文件时，注意正确选择文保存件类型，如图2.4所示。
图2.4 新建index.html文件
3．HTML部分
编辑index.html文件，编写HTML文档的基本格式内容。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大爱西游</title>
</head>
<body>
<p>四众回到长安，受到唐太宗和众官欢迎。次日，太宗升朝，作《圣教序》 以谢唐僧取经之功，又纳萧（王+禹）之议，请唐僧去雁塔寺演涌经法。唐僧捧经登台，忽听八大金刚召唤，便腾空而去西天。如来授唐僧为旃檀功德佛；孙悟空为斗战胜佛；猪八戒为净坛使者；沙僧为金身罗汉；白龙马为八部天龙马。</p>
</body>
</html>
2.1.3 知识点讲解——HTML文档结构
1．WEB页面
网页，是网站中的一个页面，是构成网站的基本元素，是承载各种网站元素的平台。通俗的说，网站就是由网页组成的。WEB页面是一个按照HTML格式组织起来的文件。在通过万维网进行信息查询时，以信息页面的形式出现，它可包括图形、文字、声音和视频等信息。
1）WEB页面的构成元素
构成网页的元素有很多，如：文本、图片、超链接、表格、表单等等，其中文本与图片是最基本的两个。文本用来显示网页的内容，图片用来美化网页或展示某些信息。
2）WEB页面的类型
网页有多种分类方式，传统意义上的分类是指静态页面和动态页面。
静态页面，通过基本的HTML技术制作而成，网页代码都在页面中，用户在浏览的时候不需要通过服务器进行编译。静态页面需要占一定的服务器空间，而且不能自主管理更新已经发布的页面，静态页面都是以.htm 或.html后缀结尾的文件，俗称HTML文件。
动态网页是基本的HTML语法规范与JAVA、VB、VC等高级程序设计语言、数据库编程等多种技术的融合，实现与用户的交互和网页动态变化，设计者可以通过网站后台对网站进行更新管理。动态页面的文件根据使用的动态技术不同而分为不同的类型，比如：CGI、ASP、PHP、JSP等。
3）W
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。