HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第1章 认识网站开发.pptx

第1章认识网站开发1.1网站开发概述 1.2HTML简介 1.3一个简单的HTML实例 1.4HTML基本标签 1.5HTML页面的元信息 1.6小结

1.1网站开发概述1.1.1网页构成元素 1.1.2网站建设流程 1.1.3网站开发软件

1.1.1网页构成元素1．文本2．图像图像格式包括JPG、GIF和PNG等。网页常用的图像主要包括如下几类。LogoBanner广告图标背景图3．超链接4．表格5．表单6．导航栏7．其他元素

1.1.2网站建设流程1．网站需求分析2．网站整体规划3．收集资料与素材4．制作网页5．域名和服务器空间的申请6．测试与发布网站7．后期维护与更新

1.1.3网站开发软件

1.2HTML简介1.2.1HTML基本概念 1.2.2HTML基本结构

1.2.1HTML基本概念

1.2.2HTML基本结构HTML文件包括文件头和文件体两部分。一般情况下，HTML文件的基本结构如下。1 html 2 head 3 头部信息 4 /head 5 body 6 文件主体，正文部分7 /body 8 /html

1.3一个简单的HTML实例1.3.1编写HTML代码 1.3.2运行HTML文件查看效果

1.3.1编写HTML代码下面使用记事本编写第一个HTML文件，具体的步骤如下。（1）打开记事本（2）在文本文档中直接输入如下内容。1 !DOCTYPEhtml2 html3 head4 title一个简单的HTML实例/title5 /head6 body7 h2align=center第一个HTML文件/h28 hrwidth=70%9 p下面跟我进入HTML的领域/p10 p来领略这个奇妙而多彩的世界！！/p11 /body12 /html（3）保存（4）设置文本文档的名称为1.1.html

1.3.2运行HTML文件查看效果

1.4HTML基本标签1.4.1文件类型指令标签 1.4.2文件类型标签 1.4.3HTML头标签 1.4.4页面标题标签 1.4.5HTML主体标签

1.4.1文件类型指令标签（1）在HTML5中，说明文件类型!DOCTYPEhtml（2）在HTML4.0中，说明文件类型!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN/TR/html4/loose.dtd

1.4.2文件类型标签文件类型标签htmlhtml/html

1.4.3HTML头标签HTML的头部通常包含表1.1所示的部分或全部标签。标签或属性功能base用于设置当前文件的URL基准，被称为基底网址basefont用于设置基准文字的样式，包括文字的字体、字号、颜色等title用于设置页面的标题（显示在浏览器的标题栏中）。该标签属于HTML的基本标签，开发人员一般情况下都会设置该标签的内容，以帮助浏览者了解页面的主题isindex用于说明该文件可检索的网关脚本，由服务器自动建立meta文件的元信息标签，用于设置文件本身的一些信息，如设置关键字、页面的作者等style用于设置CSS样式表的内容link用于设置该文件相关的外部文件的链接script用于设置页面脚本程序的内容、语言等

1.4.4页面标题标签页面标题标签titletitle标题内容/title下面通过代码（见1.2.html）来展示页面标题的效果。1 !DOCTYPEhtml2 html3 head4 titleHTML基本标签/title5 /head6 body7 /body8 /html

1.4.5HTML主体标签HTML主体标签body

1.5HTML页面的元信息1.5.1页面的关键字 1.5.2页面的对外说明 1.5.3网页的作者信息 1.5.4网页的开发语言 1.5.4页面的定时跳转

1.5.1页面的关键字HTML页面的元信息标签metakeywordsmetaname=keywordscontent=关键字/

1.5.2页面的对外说明descriptionmetaname=descriptioncontent=对页面的描述/

1.5.3网页的作者信息authormetaname=authorcontent=作者名称/

1.5.4网页的开发语言content-typemetahttp-equiv=content-typecontent=text/html;chars