HTML5教程

第一章HTML5基础本课目标学完本门课程后，你能够使用HTML进行网页布局使用CSS3美化网页制作精美的商业网站2/38预习检查HTML5页面的基本结构是什么？请找出下面代码的错误之处在网页中经常用来编辑标题的标签有哪些？编写HTML5文档时，为什么要遵守W3C标准？超链接的基本语法是什么？超链接有哪些分类？ahref=#target=_blankimgalt=image/book.jpgsrc=book//a集中测试3/38本章任务制作李清照的词《清平乐》制作李清照简介制作京东读书新闻资讯页面制作京东快速购物导航4/38本章目标会使用HTML5的基本结构创建网页会使用文本相关标签排版文本信息会使用图像相关标签实现图文并茂的页面会使用a标签创建超链接、锚链接及功能性链接5/38什么是HTMLHTMLHyperTextMarkupLanguage（超文本标记语言）超文本包括：文字、图片、音频、视频、动画等6/38HTML的发展史HTML的发展史1993-6超文本标记语言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTML1.12001-5-31XHTML2.0HTML52013-5-6目前网页中常用7/38HTML5的优势世界知名浏览器厂商对HTML5的支持微软Google苹果OperaMozilla市场的需求跨平台8/38W3C标准W3CWorldWideWebConsortium（万维网联盟）成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构W3C标准包括结构化标准语言（XHTML、XML）表现标准语言（CSS）行为标准（DOM、ECMAScript）演示示例1：清平乐诗词9/38网页编辑工具记事本DreamweaverWebStorm演示示例2：我的第一个网页10/38HTML基本结构HTML网页基本结构htmlheadtitle我的第一个网页/title/headbody我的第一个网页/body/html网页头部主体部分body、/body等成对的标签，分别叫开放标签和闭合标签单独呈现的标签（空元素），如hr/；意为用/来关闭空元素注意11/38网页基本信息3-1DOCTYPE声明!DOCTYPEhtmlhtmlheadlang=enmetacharset=utf-8/title我的第一个网页/title/headbody我的第一个网页/body/html告诉浏览器使用什么规范12/38网页基本信息3-2title标签……title家用电器排行榜/title……13/38网页基本信息3-3meta标签metacharset=UTF-8/metaname=keywordscontent=北大青鸟，IT培训/metaname=descriptioncontent=北大青鸟是国内最大的……/搜索关键字内容描述网页字符编码推荐utf-8，还可设置为gb2312gb2312包含全部中文字符utf-8则包含全世界所有国家需要用到的字符页面编码应与页面文件保存时的编码一致注意14/38网页的基本标签6-1标题标签h1…/h1h2…/h2h3…/h3h4…/h4h5…/h5h6…/h6h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6演示示例3：不同等级的标题标签对比15/38网页的基本标签6-2段落标签p…/ph1北京欢迎你/h1p北京欢迎你，有梦想谁都了不起！/pp有勇气就会有奇迹。/p演示示例4：段落标签示例16/38网页的基本标签6-3换行标签br/h1北京欢迎你/h1p北京欢迎你，有梦想谁都了不起！br/有勇气就会有奇迹。br/北京欢迎你，为你开天辟地br/……/p演示示例5：换行标签示例17/38网页的基本标签6-4水平线标签hr/h1北京欢迎你/h1hr/p北京欢迎你，有梦想谁都了不起！br/有勇气就会有奇迹。br/北京欢迎你，为你开天辟地br/……/p演示示例6：水平线标签示例18/38网页的基本标签6-5字体样式标签加粗：strong…/strong斜体：em…/emstrong徐志摩人物简介/strongpem1910/em年入杭州学堂br/em1918/em年赴美国克拉大学学习银行学br/……/p演示示例7：字体样式标签示例19/38网页的基本标签6-6注释和特殊符号特殊符号字符实体示例空格 ahref=#百度/a | ahref=#新浪/a大于号()>如果时间>晚上6点，就坐车回家小于号()<如果时间<早上7点，就走路去上学引号()"W3C规范中，HTML的属性值必须用成对的"引起来版权符号@©©2003-2013北大青鸟演示示例8和9：注释和特殊符号20/38学员操作—制作《清平乐》训练要点标签的嵌套使用网页中基本标签的使用需求说明标题用h2标签，文字用p标签，标题与正文之间的分隔线使用hr/标签，词结束后使用br/标签换行指导实现思路诗词内容均放在一个p…/p标签中，诗词中需要换行时使用br/换行，使用标签的嵌套讲解需求说明完成时间：15分钟21/38学员操作—制作李清照简介需求说明标题用标题标签，人名加粗显示，时间斜体显示，并制作页面版权部分练习完成时间：20分钟22/38常见问题及解决办法代码规范问题调试技巧共性问题集中讲解共性问题集中讲解23/38图像标签常见的图像格式JPGGIFPNGBMP24/38图像标签imgsrc=pathalt=texttitle=textwidth=xheight=y/图像地址图像的替代文字语法鼠标悬停提示文字图像宽度图像高度imgsrc=image/hetao.jpgwidth=160height=160alt=无漂白薄皮核桃title=无漂白薄皮核桃/示例演示示例10：图像25/38链接标签ahref=pathtarget=目标窗口位置链接文本或图像/a链接路径链接在哪个窗口打开语法ahref=detail.htmltarget=_blank姑娘，欢迎降落在这残酷的世界/aahref=detail.htmltarget=_blankimgsrc=image/img1.pngalt=姑娘，欢迎降落在这残酷的世界title=姑娘，欢迎降落在这残酷的世界//a常用值：_self、_blank文本超链接图像超链接示例演示示例11：超链接的应用26/38常用的超链接3-1页面间链接从一个页面链接到另外一个页面锚链接功能性链接演示示例12：页面间链接27/38常用的超链接3-2锚链接从A页面的甲位置跳转到本页中的乙位置从A页面的甲位置跳转到B页面中的乙位置创建步骤创建跳转标记创建跳转链接aname=marker乙位置/aahref=#marker甲位置/a演示示例13：锚链接28/38常用的超链接3-3功能性链接电子邮件QQMSNahref=mailto:[e-mail]联系我们/a示例演示示例14：邮件链接29/38行内元素和块元素块元素无论内容多少，该元素独占一行（p、h1-h6…）行内元素内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)p我是p元素/ph1我是标题h1/h1ahref=#我是超链接a元素/astrong我是strong元素/strong示例演示示例15：块元素和行内元素30/38学员操作—制作京东读书新闻资讯页面需求说明使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制作京东读书新闻资讯页面，主标题使用一级标题标签，副标题使用二级标题标签，二级标题与图片之间使用水平线分隔练习完成时间：20分钟31/38学员操作—制作京东快速购物导航2-1训练要点使用WebStorm制作网页超链接和锚点链接的应用需求说明使用学过的标签制作京东快速购物导航页面，单击F*链接，页面跳转到对应的版块指导讲解需求说明32/38stylep{position:fixed;right:5%;top:50%;font-size:40px;}/style学员操作—制作京东快速购物导航2-2实现思路及关键代码F*请使用超链接标签，把这些超链接放在p标签中，关键代码如下左边主要内容使用img标签把以下代码放到head标签里指导完成时间：20分钟pahref=#F1/a!--其余超链接省略--/p33/38常见问题及解决办法代码规范问题调试技巧共性问题集中讲解共性问题集中讲解34/38总结HTML5文件的基本结构编写HTML文档时遵守W3C标准，W3C是制定和维护统一的国际化Web开发标准的组织网页基本标签插入图像时使用标签img/，要求src和alt属性必选超链接标签行内元素和块元素的特性超链接的基本用法超链接的应用场合标题标签段落标签换行标签水平线标签注释和特殊符号HTML5基础页面间链接锚链接功能性链接35/38