任务3.2 HTML5的基本结构

模块3认识HTML5的文档结构任务3.2HTML5基本结构网页设计项目教程（HTML5+CSS3+JavaScript）学习目标▸从文档类型声明到head、body，掌握标准文档骨架知识目标掌握HTML5文档的基本结构；理解doctype、html、head、body的作用；熟悉title、meta与注释标记的用法。能力目标能编写完整的HTML5文档骨架；能正确使用meta声明编码与跳转。素养目标培养规范编码与注释习惯；树立标准化、语义化开发意识；提升代码可读性与可维护性。02任务描述▸标准HTML5文档由类型声明、根标签、元信息与主体构成标准HTML5文档由类型声明、根标签、元信息与主体构成一个标准的HTML5文档通常由文档类型声明、html根标签、head元信息、body主体标签以及页面注释构成，本任务将逐一讲解它们的作用与写法。DOCTYPE

文档类型声明head

元信息区body

可见内容区033.2.1文档类型标记doctype▸告知浏览器当前文档遵循的HTML规范版本作用与写法<!DOCTYPE>是文档类型声明指令。HTML5统一使用极简声明doctypehtml。必须严格置于文档的首行位置。设计理念向前兼容，无需版本号限制。强制浏览器以标准模式渲染页面。避免怪异模式带来的布局偏差。04HTML5文档的骨架▸从类型声明到元信息与主体，层层嵌套<!DOCTYPEhtml>

声明文档类型，必须位于首行<html>

文档根元素，包裹全部内容<head>

元信息区，用于配置页面<metacharset="UTF-8">

声明字符编码，避免乱码<title>…</title>

浏览器标签页显示的标题<body>

页面可见内容区<h1>/<p>

标题与段落等基础标记05<head>里的元素▸元信息不显示在页面上，却影响页面行为与收录<title>标题定义文档标题，每个文档都必须有显示在浏览器标签页上也是搜索结果的链接文字<meta>元信息声明字符编码、关键字与描述可实现页面的定时跳转空元素，靠属性描述信息<link>/<style>/<script>引入外部样式表内嵌CSS样式内嵌或外链JavaScript06<meta>的四种常见用途▸一个空元素，靠属性描述页面的元信息字符集声明<metacharset="utf-8">告诉浏览器用UTF-8显示搜索关键字name="keywords"影响排名，页面上不可见页面描述name="description"用于搜索结果中的摘要定时跳转http-equiv="refresh"content="秒数;url=网址"07页面注释标记的作用▸注释不显示在页面上，却是好代码的一部分提高可读性解释代码含义，便于理解与维护便于查找比对快速定位某一段代码临时屏蔽代码把暂时不需要的代码放进注释中提示：注释写法：<!--注释内容-->，可以对一行或多行代码进行说明。08案例演示3-2：html与head、body<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width">

<title>标记学习页面</title>

</head>

<body>

<!--这是页面主体内容-->

<h1>HTML基础标记学习</h1>

<p>这是通过记事本创建的基础HTML文件</p>

</body>

</html>mark.htmlHTML基础标记学习这是通过记事本创建的基础HTML文件——注释<!---->不显示在页面上运行观察：DOCTYPE必须位于首行；head存放元数据，body承载可见内容。09任务实施：编写基础标记页面▸在记事本中创建并验证基础HTML文件01声明类型首行写入<!DOCTYPEhtml>02构建根容器用<html>包裹全部内容03配置头部添加title与metacharset04编写主体在body内插入h1与p05添加注释用<!---->说明代码结构提示：注释<!---->不会显示在页面上，但能让代码结构更易读。10任务实施代码（一）：标记学习页面▸文档声明、元信息与页面主体<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>标记学习页面</title>

</head>

<body>

<!--这是页面主体内容-->

<h1>HTML基础标记学习</h1>

<p>这是通过记事本创建的基础HTML文件</p>

</body>

</html>代码要点DOCTYPE声明文档使用HTML5标准。metacharset声明编码，避免乱码。title定义浏览器标签页显示的标题。注释不显示在页面上，便于理解代码。11任务小结▸本任务完成从“文档声明”到“标准结构”的学习会声明能用DOCTYPE声明HTML5文档。会配置能用