网页设计与制作教程课件 项目1 HTML5的基本结构.pptxVIP

项目1HTML5的基本结构;项目描述

;项目目标;项目分析

;知识引入

;3、网页的基本元素

网页的基本元素大体是相同的一般包括网页标题、文本、图象、超链接、动画、表单、音频视频

等内容组成。网页的组成元素如下图1-2所示。

;子任务2了解html5的基本结构;一个基本的HTML5网页由以下几分部组成，如图1-3所示。

(1）内容类型

HTML5的文件扩展名为“.html”或“.htm”，内容类型（ContentType）仍然为“text/html”。

（2）!DOCTYPEhtml文档的声明，该声明必须位于HTML5文档中的第一行，也就是位于html标签之前。

在HTML5中，文档的类型声明方法如下：

!DOCTYPEhtml

（3）html标签出现在文档的开始，每一个html文档都是从html开始，结束于/html。

（4）head标签出现在文档的开头部分。head与/head之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

;(5)meta标签

meta标签元素定文档的字符编码，其写法如下：

metacharset=UTF-8

meta标签中name属性语法格式是：

metaname=参数content=具体的描述

其中name属性共有以下几种参数。(①-③为常用属性)

①keywords(关键字)

说明：用于告诉搜索引擎，你网页的关键字。举例：

metaname=keywordscontent=PHP中文网

②description(网站内容的描述)

说明：用于告诉搜索引擎，你网站的主要内容。举例：

metaname=descriptioncontent=php中文网提供大量免费、原创、高清的php视频教程

;③viewport(移动端的窗口)

说明：这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport。

metaname=viewportcontent=width=device-width,initial-scale=1

width=device-width：表示宽度是设备屏幕的宽度initial-scale=1.0：表示初始的缩放比例。

④http-equiv属性，http-equiv顾名思义，相当于HTTP的作用。

meta标签中http-equiv属性语法格式是：

metahttp-equiv=参数content=具体的描述

常用的结构是：

metahttp-equiv=X-UA-Compatiblecontent=IE=edge,chrome=1/

说明：X-UA-Compatible用于告知浏览器以???种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）

content=IE=edge,chrome=1：指定IE和Chrome使用最新版本渲染当前页面。

;（6）title标签定义HTML文档的标题。title与/title之间的内容将显示在浏览器窗口的标题栏。

（7）body标签表明是HTML文档的主体部分。在body与/body之间，通常都会有很多其它元素,如：在页面中的文字、图像、动画、超链接；这些元素和元素属性构成HTML文档的主体部分。

;子任务3安装VisualStudioCode编辑器;子任务4使用VisualStudioCode编辑器

;子任务6使用Chrome浏览器的开发者工具;子任务7使用换行标签

;子任务8使用段落标签

;任务9使用标题标签、水平线标签;项目实施

;步骤2：单击状态栏的“纯文本”在“选择语言模式”对话框中选择“HTML(html)”，如图1-24所示；

;步骤3：英文输入“！”或“html:5”,然后按Tab键或Ctrl+E组合键，即可出现如

下所示的代码；

!DOCTYPE?html

html?lang=en

head

?meta?charset=UTF-8

?meta?name=viewport?content=width=device-width,?initial-scale=1.0

????titleDocument/title

/head

body??

/body

/html

;步骤4：修改title网页标题、meta元素信息和注释内容，并在网页的主体中添加内容，代码如下；

!DOCTYPE?html

html?lang=en

head

????meta?charset=UTF-8

????!--设置浏览器的阅读编码--

????meta?name=keywords?content=web前端设计

????!--设置网站的关键字--

????meta?name=descriptio