“<元素名>”标识元素的结束。例如标题和超连接元素。 2.空元素与标签 空元素指不含内容的元素，空标签指标识空元素的标签。一个空元素只有 个标签。空元素标签语句语法如下： <元素名[属性名="属性值"門.P 2.1.3属性 HTML5标签拥有属性，属性为HTML5元素提供附加信息。属性总是以“名 称/值”对的形式出现，比如：“name="value"”,属性总是在HTML5元素的开始 标签中规定。 开始标签使用多个属性时，用空格分隔，出现的顺序无关紧要。属性值要用单引 号或双引号括起来， 单引号括起来的属性值中可以包含双引号， 双引号括起来的 属性值中也可以包含单引号 2.1.4语法规则 HTML5语法规则要求比较松散，如某些标签语句可以省略，省略并不意味着标 签不存在，它是隐含的：HTML5不区分大小写：可以省略关闭空元素的斜杠： 属性值中只要不包含“>”、“、”、“=”或者空格等受限的字符，就可以不用加号 可以。 WebStorm基础 2.2.1 WebStorm基本操作 2.2.2 WebStorm快捷键 )3文档结物元素 23.1 <html 燃 htm>与<html>标签定义了文档的开始和结束，告知浏览器其自身是一个HTM 文档。 2.3.2<head>标签 head标签用于定义文档头部，head>元素中的内容可以是脚本、样式表和提供 的元信息等。 文档的头部描述了文档的各种属性和信息，绝大多数文档头部包含 的信息不会作为内容显示。 2.3.3<body>标签 body元素定义文档的主体，body元素包含文档的所有内容（如文本、超连接、图 像、表格和列表竿竿)。 )4斗部元去 2.4.1 标效 <tit>定义文档的标题，标题显示在浏览器窗口的标题栏上，当把文档加入用片 的连接列表或者收藏夹时，标题将成为该文档连接的默认名称。4it>标签是 <head>标签中唯一要求包含的。 2.4.2 元素可提供有关页面的元信息《meta-information),如针对搜索引擎提供的 关键词。me心标签位于文档的头部，是空元素，<mea>标签通过属性定义与 档相关联的“名称/值”对来提供页面的元信息。其中“http-equiv”和“name 属性是定义名称的，“content”属性是定义值的
“</元素名>”标识元素的结束。例如标题和超连接元素。 2. 空元素与标签 空元素指不含内容的元素，空标签指标识空元素的标签。一个空元素只有一 个标签。空元素标签语句语法如下： <元素名 [属性名="属性值"] . /> 2.1.3 属性 HTML5 标签拥有属性，属性为 HTML5 元素提供附加信息。属性总是以“名 称/值”对的形式出现，比如：“name="value"”，属性总是在 HTML5 元素的开始 标签中规定。 开始标签使用多个属性时，用空格分隔，出现的顺序无关紧要。属性值要用单引 号或双引号括起来，单引号括起来的属性值中可以包含双引号，双引号括起来的 属性值中也可以包含单引号。 2.1.4 语法规则 HTML5 语法规则要求比较松散，如某些标签语句可以省略，省略并不意味着标 签不存在，它是隐含的；HTML5 不区分大小写；可以省略关闭空元素的斜杠； 属性值中只要不包含“>”、“、”、“=”或者空格等受限的字符，就可以不用加引 号，没有属性值也可以。 2.2 WebStorm 基础 2.2.1 WebStorm 基本操作 2.2.2 WebStorm 快捷键 2.3 文档结构元素 2.3.1 <html>标签 <html>与</html>标签定义了文档的开始和结束，告知浏览器其自身是一个 HTML 文档。 2.3.2 <head>标签 <head>标签用于定义文档头部，<head>元素中的内容可以是脚本、样式表和提供 的元信息等。文档的头部描述了文档的各种属性和信息，绝大多数文档头部包含 的信息不会作为内容显示。 2.3.3 <body>标签 body 元素定义文档的主体，body 元素包含文档的所有内容（如文本、超连接、图 像、表格和列表等等）。 2.4 头部元素 2.4.1 <title>标签 <title>定义文档的标题，标题显示在浏览器窗口的标题栏上，当把文档加入用户 的连接列表或者收藏夹时，标题将成为该文档连接的默认名称。<title>标签是 <head>标签中唯一要求包含的。 2.4.2 <meta>标签 meta 元素可提供有关页面的元信息（meta-information），如针对搜索引擎提供的 关键词。<meta>标签位于文档的头部，是空元素，<meta>标签通过属性定义与文 档相关联的“名称/值”对来提供页面的元信息。其中“http-equiv”和“name” 属性是定义名称的，“content”属性是定义值的
本章节的教学重点、难点： 重点：HML5文档结构、语法规则。 难点：meta>标签。 教学方法、教学手段： 主讲，边演边练，讨论互动。 作业、讨论题、思考题： 1.元素和标签可以分为哪两类？它们的差别在哪里？ 2.叮叮书店首页添加的元信息有什么作用？ 参考资料： 储久良.Web前端开发技术一一HTL5、CSS3、JavaScript(第3版
本章节的教学重点、难点： 重点：HTML5 文档结构、语法规则。 难点：<meta>标签。 教学方法、教学手段： 主讲，边演边练，讨论互动。 作业、讨论题、思考题： 1. 元素和标签可以分为哪两类？它们的差别在哪里？ 2. 叮叮书店首页添加的元信息有什么作用？ 参考资料： 储久良. Web 前端开发技术——HTML5、CSS3、JavaScript（第 3 版）
教案 讲授章节 第3章格式化文本与段落 授课时数2学时 Q 教学目的： 学握HTML5结构标签、HTML5基础标签 理解HML5格式化标签。 教学内容（讲授提纲） 31HTM和结构标签 HTML5结构标签用于搭建页面主体内容结构，形成不同的区块，完成整个页面 的排版布局。 标签 描述 <article 定义文章(HML5.0新标签 <aside> 定义页面内容之外的内容(HTML5.0新标签) sdetails 定义元素的细节(HTML5.0新标签) <footer> 定义section.或page的页脚(HTML5.0新标签) <header> 定义section或page的页眉(HTML5.0新标签) <main> 定义文档的主要内容(HML52新标签) <nav> 定义导航链接(HTML5.0新标签) <section> 定义section(HTML5.0新标签) <summarv> 为<details>元素定义可见的标题(HTML5.0新标签) <div> sspan> 定义文档中的行内元素 3.l.1 header>标签 header心标签定义文档的页眉。通常用来放置整个页面或页面内的一个内容区块 的标题，但也可以包含其他内容， 等等。 比如在header里面放置logo图片、搜索表单 3.1.2<main>标签 <main>标签定义文档的主要内容。main>标签中的内容对于文档来说应当是唯 一的，不包含在文档中重复出现的内容，如边栏、导航栏、版权信息、站点标 3.1.3<nav>标签 <nav>标签定义导航链接的部分，主要用于构建导航菜单、侧边栏导航、内页导 航和翻页操作等区域。 3.l4<article>标签 <artice>标签表示页面中一块与上下文不相关的独立内容，比如一篇文章。 3.1.5 <section>标签
教 案 讲授章节 第 3 章格式化文本与段落 授课时数 2 学时 教学目的： 掌握 HTML5 结构标签、HTML5 基础标签。 理解 HTML5 格式化标签。 教 学 内 容（讲授提纲） 3.1 HTML5 结构标签 HTML5 结构标签用于搭建页面主体内容结构，形成不同的区块，完成整个页面 的排版布局。 标签 描述 <article> 定义文章（HTML5.0 新标签） <aside> 定义页面内容之外的内容（HTML5.0 新标签） <details> 定义元素的细节（HTML5.0 新标签） <footer> 定义 section 或 page 的页脚（HTML5.0 新标签） <header> 定义 section 或 page 的页眉（HTML5.0 新标签） <main> 定义文档的主要内容（HTML5.2 新标签） <nav> 定义导航链接（HTML5.0 新标签） <section> 定义 section（HTML5.0 新标签） <summary> 为<details>元素定义可见的标题（HTML5.0 新标签） <div> 定义文档中的节 <span> 定义文档中的行内元素 3.1.1 <header>标签 <header>标签定义文档的页眉。通常用来放置整个页面或页面内的一个内容区块 的标题，但也可以包含其他内容，比如在 header 里面放置 logo 图片、搜索表单 等等。 3.1.2 <main>标签 <main>标签定义文档的主要内容。<main>标签中的内容对于文档来说应当是唯 一的，不包含在文档中重复出现的内容，如边栏、导航栏、版权信息、站点标 志等。 3.1.3 <nav>标签 <nav>标签定义导航链接的部分，主要用于构建导航菜单、侧边栏导航、内页导 航和翻页操作等区域。 3.1.4 <article>标签 <article>标签表示页面中一块与上下文不相关的独立内容，比如一篇文章。 3.1.5 <section>标签
<section>标签定义文档中的节（区段）。 3.1.6 标器气所处内容之外的内容，这个内容应该与附近的内容相关，如 可用作文章的侧栏或边栏。 3.1.7<footer>标签 <footer>标签定义文档或节的页脚，元素应当含有其包含元素的信息， 3.18 <details>和<summary>标签 3.1.9 <div>标签 <dv>用来定义文档中的分区或节，<dv>标签可以把文档分割为独立的、不 同的部分，是一个容器标签，<div>的内容可以是任何HTML5元素。如果有多 个<div>标签把文档分成多个部分，可以使用id或class属性来区分不同的<div>」 块元素的宽度为100%，而且后面隐藏附带 有换行符，块元素在页面显示时始终占 一行，这样块元素周围的元素不能与块 元素显示在同一行上。 3.1.10<span>标签 <spa>用来定义文档中一行的一部分，显示时默认是一个行内元素，行内元素没 标签 描述 <h1>to<h6> 标题1至标题6 定义段落 <br> <h> 水平线 . 注释 3)1标题 322段落 3.2.3换行符 3.2.4注释 3.3HTML5格式化标签 3.3.1文本格式化标签 标香 描述 <sub> 下标文本 <sup> 上标文术 <ins 插入文本 <del> 删除文本 <wbr> 定义在文本何处适合添加换行符(HTML5.0新标签) 预格式文本 标签 描述 <abbr> 缩写 <address 地址 <bdo> 文字方向 <blockquote> 长的引用语
<section>标签定义文档中的节（区段）。 3.1.6 <aside>标签 <aside>标签定义其所处内容之外的内容，这个内容应该与附近的内容相关，如 可用作文章的侧栏或边栏。 3.1.7 <footer>标签 <footer>标签定义文档或节的页脚，元素应当含有其包含元素的信息。 3.1.8 <details>和<summary>标签 3.1.9 <div>标签 <div>用来定义文档中的分区或节，<div>标签可以把文档分割为独立的、不 同的部分，是一个容器标签，<div>的内容可以是任何 HTML5 元素。如果有多 个<div>标签把文档分成多个部分，可以使用 id 或 class 属性来区分不同的<div>。 <div>元素显示时默认是一个块元素，块元素的宽度为 100%，而且后面隐藏附带 有换行符，块元素在页面显示时始终占据一行，这样块元素周围的元素不能与块 元素显示在同一行上。 3.1.10 <span>标签 <span>用来定义文档中一行的一部分，显示时默认是一个行内元素，行内元素没 有固定的宽度，根据<span>元素的内容决定。 3.2 HTML5 基础标签 标签 描述 <h1> to <h6> 标题 1 至标题 6 <p> 定义段落 <br> 换行 <hr> 水平线 <!-> 注释 3.2.1 标题 3.2.2 段落 3.2.3 换行符 3.2.4 注释 3.3 HTML5 格式化标签 3.3.1 文本格式化标签 标签 描述 <sub> 下标文本 <sup> 上标文本 <ins> 插入文本 <del> 删除文本 <wbr> 定义在文本何处适合添加换行符（HTML5.0 新标签） <pre> 预格式文本 3.3.2 引用和术语定义标签 标签 描述 <abbr> 缩写 <address> 地址 <bdo> 文字方向 <blockquote> 长的引用语
短的引用语 3.33HM5新增格 代标签 标答 描述 <mark> 定义有记号的文本(HTML5.0新标签) <meter> 定义预定义范围内的度量(HTML5.0新标签】 <progress> 定义任何类型的任务的进度(HTML5.0新标签) 定义若浏览器不支持uby元素显示的内容(HTML5.0新 标签) <t> 定义uby注释的解释(HTML5.0新标签) <nhv> 定义uby注释(HTML5.0新标签) time 定义日期时何(HTML5.0新标签) 34叮叮书店首页内容结构的建立 <header> <nav> <main> <article> <aside> <section> <footer> 3.4.1分析设计页面内容结构 本章节的教学重点、难点： 重点：HTML5结构标签、HTML5基础标签。 难点：页面内容结构。 教学方法、教学手段： 主讲，边演边练，讨论互动。 作业、讨论题、思考题： (div》和(snan右什久区到？ 2.常见的页面内容结构是什么？给出标签表示。 参考资料： 储久良.Web前端开发技术一一HTML5、CSS3、JavaScript(第3版)
<q> 短的引用语 3.3.3 HTML5 新增格式标签 标签 描述 <mark> 定义有记号的文本（HTML5.0 新标签） <meter> 定义预定义范围内的度量（HTML5.0 新标签） <progress> 定义任何类型的任务的进度（HTML5.0 新标签） <rp> 定义若浏览器不支持 ruby 元素显示的内容（HTML5.0 新 标签） <rt> 定义 ruby 注释的解释（HTML5.0 新标签） <ruby> 定义 ruby 注释（HTML5.0 新标签） <time> 定义日期/时间（HTML5.0 新标签） 3.4 叮叮书店首页内容结构的建立 3.4.1 分析设计页面内容结构 本章节的教学重点、难点： 重点：HTML5 结构标签、HTML5 基础标签。 难点：页面内容结构。 教学方法、教学手段： 主讲，边演边练，讨论互动。 作业、讨论题、思考题： 1. <div>和<span>有什么区别？ 2. 常见的页面内容结构是什么？给出标签表示。 参考资料： 储久良. Web 前端开发技术——HTML5、CSS3、JavaScript（第 3 版）