网页设计与制作HTML5+CSS3

任务1制作第一个HTML页面

第1章网页制作入门知识目标技能目标素质目标（1）了解网页相关的概念与术语（2）熟悉HTML的发展历史（3）掌握HTML文档的结构（1）掌握SublimeText的基本操作（2）能够创建简单的网页（1）培养勤奋学习的态度（2）培养逻辑思维能力及实训操作能力（3）通过课前课中课后的行为规范，使学生养成良好的行为习惯

网页相关知识常用的开发工具——SublimeTextHTML5基础任务实现第1章网页制作入门

1.网页相关知识1.1网页与网站的相关概念1.2网页分类第1章网页制作入门

1.1网页与网站的相关概念网页1.网页相关知识网页究竟是什么？浏览新闻（信息）查询信息网上购物

1.1网页与网站的相关概念以江西工业工程职业技术学院一个页面为例认识网页：1.网页相关知识打开谷歌浏览器，在地址栏输入/info/1031/11291.htm

/info/1031/11291.htm文本图片文本超链接

为了快速了解网页是如何形成的，在谷歌浏览器中按下F12，即可看到网页的源码

1.1网页与网站的相关概念网页通常由文字、图像、链接、音频、视频等元素构成，通常是HTML文件。常见的网页文件是以.html或.htm为扩展名的，因此俗称为THML文件。网页是构成网站的基本元素1.网页相关知识网站是万维网上一组相关网页和有关文件的集合（本质是文件夹），实行分类管理，即用不同的文件夹管理。网页（WebPage）是网站中的一个页面，通常是HTML文件，它要通过浏览器来阅读。网站中一般有一个特殊的网页作为浏览的起始点，称为主页（或首页）。主页的文件名为index.html，其它页面称为内面或子页。

1.2网页分类依据网页的位置：1.主页2.内页1.网页相关知识依据表现形式：1.静态网页2.动态网页

网页相关知识常用的开发工具——SublimeTextHTML5基础任务实现第1章网页制作入门

2.常用的开发工具——SublimeTextHTML5文档实质是一个文本文件，扩展名为.htm或者.html，常用的工具有Sublimetext、Hbuilder、Dreamweaver、NotePad++等等。2.1下载并安装2.2中文设置第1章网页制作入门

2.1下载并安装2.常用的开发工具——SublimeTextWindows32位操作系统选择“Windows”64位操作系统选择“Windows64bit”下载安装包官网下载链接：/3

2.1下载并安装2.常用的开发工具——SublimeText安装双击安装包，点击next，注意勾选“Addtoexplorercontextmenu”，即添加右键菜单的选项，后续文档都可以使用SublimeText打开。点击“install”安装，直到“Finish”。

2.2中文设置2.常用的开发工具——SublimeTextSublimeText操作界面默认的语言是全英文，根据需求可选择性地将sublimetext设置成中文。打开软件，点击Preference，选择最底部的PackageControl搜索框中输入关键字Install，选择PackageControl:InstallPackage

2.2中文设置2.常用的开发工具——SublimeText等待插件列表加载完成，在搜索框中输入chinese，选择下拉框中的ChineseLocalizations，完成安装。

网页相关知识常用的开发工具——SublimeTextHTML5基础任务实现第1章网页制作入门

3.HTML5基础用户浏览网页时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。3.1HTML5文档基本格式3.2HTML5标签及属性3.3代码的注释第1章网页制作入门

3.1HTML5文档基本格式3.HTML5基础HTML5文档的基本格式如下：!DOCTYPEhtmlhtml head metacharset=UTF-8/ titleDocument/title /head body /body/html文档类型声明根标记头部标记主体标记

3.1HTML5文档基本格式3.HTML5基础!DOCTYPE标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范。html标签!DOCTYPE标签之后，也被称为根标签，用于告知浏览器其自身是一个HTML文档，html标志HTML文档的开始，/html标志着HTML