1、第一章 HTML5基础本课目标n 学完本门课程后，你能够使用 HTML进行 网页布局使用 CSS3美化网页制作精美的商业网站/38预习检查nHTML5页面的基本结构是什么？n 请找出下面代码的错误之处n 在网页中经常用来编辑标题的标签有哪些？n 编写 HTML5文档时，为什么要遵守 W3C标准？n 超 链接的基本语法是什么？超链接有哪些分类？集中测试/38本章任务n 制作李清照的词 清平乐n 制作李清照 简介n 制作京东读书新闻资讯 页面n 制作京东快速购物导航/38本章目标n 会使用 HTML5的基本结构创建网页n 会使用文本相关标签排版文本信息n 会使用图像相关标签实现图文并茂的页面n 会
2、使用 标签创建超链接、锚链接及 功能性 链接/38什么是 HTMLnHTMLuHyper Text Markup Language（超文本 标记语言 ）超文本包括：文字、图片、音频、视频、动画等/38HTML的发展史nHTML的发展史1993-6超文本标记语言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTML1.12001-5-31XHTML2.0HTML52013-5-6目前网页中常用/38HTML5的优势n 世界知名浏览器厂商对 HTML5的 支持u微软uGoogle
3、u苹果uOperauMozillan 市场的 需求n 跨平台/38W3C标准nW3CuWorld Wide Web Consortium（万维网联盟）u成立于 1994年， Web技术领域最权威和具影响力的国际 中立性技术标准机构uhttp:/www.w3.org/uhttp:/www.chinaw3c.org/nW3C标准 包括u结构 化标准语言（ XHTML 、 XML）u表现 标准语言（ CSS）u行为 标准（ DOM、 ECMAScript ）演示示例 1： 清平 乐诗词 /38网页编辑工具n 记事本nDreamweavernWebStorm演示 示例 2：我的第一个网页/38HTML
4、基本结构nHTML网页基本结构我的第一个网页 我的第一个网页网页头部主体部分、 等成对的标签，分别叫开放标签和闭合 标签单独 呈现的标签（空元素），如 ；意为用 / 来关闭空元素注意/38网页基本信息 3-1nDOCTYPE声明我的第一个网页 我的第一个网页告诉浏览器使用什么规范/38网页基本信息 3-2n标签家用电器排行榜 /38网页基本信息 3-3n标签搜索关键字 内容描述 网页字符编码推荐 utf-8，还可设置为gb2312gb2312包含全部 中文字符utf-8 则包含全世界所有国家需要用到的字符页面 编码 应与 页面文件保存时的编码 一致注意/38网页的基本标签 6-1n 标题标签u
5、uuuuu一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 演示 示例 3：不同等级的标题标签对比/38网页的基本标签 6-2n 段落标签u北京欢迎你 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。 演示 示例 4： 段落标签示例/38网页的基本标签 6-3n 换行标签u北京欢迎你 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。 北京欢迎你，为你开天辟地 演示 示例 5： 换行标签示例/38网页的基本标签 6-4n 水平线标签u北京欢迎你 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。 北京欢迎你，为你开天辟地 演示 示例 6： 水平线标签示例/38网页的基本标签 6-5
6、n 字体样式标签u加粗： u斜体： 徐志摩人物简介 1910年入杭州学堂 1918年赴美国克拉大学学习银行学 演示 示例 7： 字体样式标签示例/38网页的基本标签 6-6n 注释和特殊符号特殊符号 字符实体 示例空格 百度 |新浪 大于号 () 如果时间 晚上 6点，就坐车回家小于号 (标签，文字用 标签，标题与正文之间的分隔线使用 标签，词结束后使用 标签换行指导n 实现思路u诗词内容均放在一个 标签中，诗词中需要换行时使用 换行，使用标签的嵌套讲解需求说明 完成时间： 15分钟/38学员操作 制作李清照简介n 需求说明u标题用标题标签，人名加粗显示，时间斜体显示，并制作页面版权部分练习完
7、成时间 ： 20分钟/38n 常见问题及解决办法n 代码规范问题n 调试技巧共性问题集中讲解共性问题集中讲解 /38图像标签n 常见的图像格式uJPGuGIFuPNGuBMP/38图像标签图像地址 图像的替代文字语法鼠标悬停提示文字图像宽度图像高度示例演示 示例 10： 图像/38链接标签链接文本或图像 链接路径 链接在哪个窗口打开语法姑娘，欢迎降落在这残酷的世界 常用值： _self、 _blank文本超链接图像超链接示例演示示例 11： 超链接的应用 /38常用的超链接 3-1n 页面间链接u从一个页面链接到另外一个页面n 锚链接n 功能性链接演示示例 12： 页面间链接/38常用的超链接 3-2n 锚链接u从 A页面的甲位置跳转到本页中的乙位置u从 A页面的甲位置跳转到 B页面中的乙位置n 创建步骤u创建跳转标记u创建跳转链接乙位置 甲位置 演示示例 13： 锚链接/38常用的超链接 3-3n 功能性链接u电子邮件uQQuMSN联系我们 示例演示示例 14： 邮件链接/38行 内元素和块元素n 块 元素u无论 内容多少，该元素独占 一行（ p、 h1-h6 ）n 行内 元素u内容 撑开宽度，左右都是行内元素的可以排在 一行 (a、 strong、 em)我是 p元素 我是标题 h1我是超链接 a元素 我是 strong元素 示例演示示例 15： 块元素和行内元素 /38
