第1章 初识HTML5_补充案例.docVIP

博学谷——让IT教学更简单，让IT学习更有效 第1章 补充案例 【案例1-1】 入门案例 一、案例描述 考核知识点 HTML5文档基本格式 练习目标 初步了解HTML5文档基本格式。 能够运用HTML5文档基本格式制作简单的页面。 需求分析 学习任何一门语言，都要首先掌握它的基本格式，HTML5标记语言也不例外。要想制作丰富多彩的HTML5网页，首先需要掌握HTML5文档的基本格式。本案例通过编写一个简单的HTML5网页，使初学者更好地理解HTML5文档的基本格式。 案例分析 效果如图1-1所示。 入门案例效果 具体实现步骤如下： 新建Dreamweaver默认文档。 在title/title标记中添加网页标题。 在body/body标记中添加两个段落。 二、案例实现 新建HTML页面，具体代码如下： !doctype html html head meta charset=utf-8 title入门案例/title /head body p吾生也有涯/p p而知也无涯/p /body /html 保存后，在谷歌浏览器中预览，效果如图1-2所示。 入门案例效果 注意： 上述案例是一个基本的html基本结构，在此结构的基础上可以再增加更多的样式和内容来充实网页。 【案例1-2】 标题标记的应用 一、案例描述 考核知识点 HTML标记、标记的属性 练习目标 掌握hr /标记及其属性的应用。 熟练掌握h1到h6标记的使用。 需求分析 在有哪些信誉好的足球投注网站引擎的文本分析中，标题的信息权重要比正文的大，所以标题的样式非常重要。本案例通过把标题标记和常规文本进行对比输出各种样式的标题。 案例分析 效果如图1-3所示。 标题标记的应用效果 具体实现步骤如下所示： 首先在Dreamweaver中添加一段无格式文本作为参照文本。 添加水平线，并为水平线设置颜色、宽高、左对齐属性。 依次添加标题标记h1、h2、h3、h4样式文本。 二、案例实现 新建HMTL文件，具体代码如下： !doctype html html head meta charset=utf-8 title常见文本标记的应用/title /head body 我是普通的文本br/ hr color=green width=500 align=left size=5/ h1我是h1标记的文本/h1 h2我是h2标记的文本/h2 h3我是h3标记的文本/h3 h4我是h4标记的文本/h4 /body /html 保存后，在谷歌浏览器中预览，效果如图1-4所示。 标题标记的应用效果 注意： 1、hr/的作用是换行并在该行下画一条水平直线，直线的上下两端都会留出一定的空白。 2、在段落标记中，h1最大，h6最小。 【案例1-3】 城东早春 一、案例描述 考核知识点 段落标记、文本格式化标记 练习目标 了解斜体、粗体、下划线、删除线等文本格式化标记。 掌握p标记及其属性的应用。 需求分析 在网页中，有时需要为文字设置粗体、斜体或下划线效果，为此HTML准备了专门的文本格式化标记。本案例通过使用文本格式化标记输出特殊格式的文本。 案例分析 效果如图1-5所示。 城东早春效果 具体实现步骤如下： 在Dreamweaver默认文档中写好6个段落。 在每个段落中分别使用不同的文本格式化标记： 第一个段落即题目设置为粗体； 第二个段落即作者设置为斜体； 第四个段落添加下划线效果； 第六个段落添加删除线效果。 其他段落使用普通的文本格式输出。 二、案例实现 新建HTML页面，代码如下： !doctype html html head meta charset=utf-8 title城东早春/title /head body p align=centerstrong城东早春/font/p p align=rightem作者：杨巨源/em/p pfont color=blue诗家清景在新春，/fontp pins绿柳才黄半未匀。/ins/p pfont color=blue若待上林花似锦，/font/p pdel出门俱是看花人。/del/p /body /html 保存后，在谷歌浏览器中预览，效果如图1-6所示。 城东早春效果 【案例1-4】 如何插入特殊字符 一、案例描述 考核知识点 特殊字符标记 练习目标 掌握常用特殊字符标记的使用。 需求分析 制作网页时，为了让数学符号、版权信息等符号正常显示，就需要了解插入特殊字符的方法。本案例将通过插入特殊字符的方法在页面输出各种各样的特殊字符。 案例分析 效果如图1-7所示。 如何插入特殊字符效果 具体实现步骤如下： 在Dreamweaver默认文档中添加5个段落。 在每个段落中分别使用不同的代码插入相应的特殊字符。 二、案例实现 新建HTM