认识HTML5网页结构

1、第一章 认识HTML5网页结构北京课工场教育科技有限公司本课目标学完本门课程后，你能够熟悉HTML5基本的代码和结构熟悉CSS+DIV布局独立设计制作网站2/33本章任务制作李清照的词网页制作家用电器排行榜网页制作聚美优品新手指面页面3/33本章目标掌握网站的开发流程掌握HTML5的基本结构掌握-/等标签4/33网站的开发流程客户需求分析网站原型制作网站视觉设计前端开发后台开发网站测试网站发布产品经理UI设计师开发人员网站栏目分类网站功能分析网站初步策划网站费用预算网站首页视觉设计网站主栏目页设计网站架构搭建网站所有页面制作UE网站运维中期后期前期5/33团队合作开发中的常见问题 问题 在实际

2、开发中，为什么前端开发人员经常和UI设计师吵架？Web前端开发人员：有时UI设计师自认为网站效果图设计得很棒，但Web前端开发人员感觉很难实现，开发工作量太大UI设计师：对如何将自己设计的网站平面效果图，对于如何变成网页“搬到网站上”感觉很神秘，也纳闷有时前端开发人员开发出来的网页，为什么不如自己设计的效果图好呢？6/33团队合作开发中的常见问题 解决办法:对于UI设计师，需要学会如下知识和技能了解前端开发人员的关注点：网站设计效果图是否能让我看懂？切片后的图片等网站素材，是否方便我做成网页？能否尽量减小我的工作量？了解网页开发的一些基本代码，从而理解网页实现的原理；有的企业要求UI设计师兼做

3、Web前端开发的工作掌握前端开发时常见的UI设计相关问题，以便在设计中规避，方便和Web前端开发人员沟通和配合工作了解“互联网+”时代下的网站，如何方便网站的网络营销和推广？所以必须了解网站SEO7/33了解什么是网站SEO 1、什么是SEO？Search Engine Optimization，搜索引擎优化2、SEO有什么用？提高网站排名，从而为你的网站带来更多的客户，促进产品销售或品牌传播3、SEO怎么做？一般是通过优化站内优化（网页代码、内容）、站外优化（加外部友情链接等），从而提高网站被百度等搜索引擎的收录，最终当用户搜索你网站时，提高网站排名8/33引入网页由什么组成？（网址：）9/

4、33网页的组成1、内容HTML部分文字、图像2、样式CSS部分颜色、字体大小等修饰3、动作(行为) JavaScript部分一些网页特效（横幅广告）、鼠标移过去变颜色、点击弹出个登录框或信息提示框等HTML部分（内容 ）CSS部分（ 样式 ）JS部分（ 特效 ）10/33HTML5简介HTML：Hyper Text Markup Language（超文本标记语言）HTML5效果链接（见Word文档）1993-6超文本标记语言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTM

5、L1.12001-5-31XHTML2.0HTML52013-5-6目前网页中常用11/33HTML基本结构HTML5网页基本结构 我的第一个网页 我的第一个网页网页头部主体部分标签标记着 HTML 文档的开始和结束声明12/33网页编辑工具记事本DreamweaverNotepad+在记事本/Dreamweaver/Notepad+中操作WE CHANGE LIVES 13/33网页基本信息标签家用电器排行榜14/33网页基本信息标签搜索关键字内容描述网页字符编码15/33网页的基本标签的语义化内容的语义化为了方便百度等搜索引擎读懂你的网页内容，要根据内容的类型，使用对应的标签类型标题：段落

6、：图片：16/33标题标签网页的基本标签一级标题二级标题三级标题四级标题五级标题六级标题演示示例2：标题标签WE CHANGE LIVES 17/33了解相关的网站SEO方法 1、和标签中包含关键词，可提升关键词在页面中的权重2、优化标签标签和标签在使用的时候建议包含关键词标签和标签在使用的时候建议只出现一次 、 、标签SEO作用较小，建议不要乱用18/33网页的基本标签段落标签北京欢迎你北京欢迎你，有梦想谁都了不起！有勇气就会有奇迹。演示示例3：段落标签WE CHANGE LIVES 19/33网页的基本标签换行标签北京欢迎你 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。 北京欢迎你，

7、为你开天辟地 演示示例4：换行标签WE CHANGE LIVES 20/33网页的基本标签水平线标签北京欢迎你 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。 北京欢迎你，为你开天辟地 演示示例5：水平线标签WE CHANGE LIVES 21/33图像标签常见的图像格式JPGGIFPNGBMP22/33图像标签图像地址图像的替代文字鼠标悬停提示文字图像宽度图像高度演示示例6：图像WE CHANGE LIVES 语 法示 例23/33设计常见问题（颜色）设计用的颜色尽量少用，红绿蓝等颜色尽量少用下图中网页的主色是什么？24/33了解相关的网站SEO方法 1、标签中的alt属性对百度的好处规

8、定在图像无法显示时的替代文本，在图片上鼠标悬停的时候可以显示文字注释，它可以让百度更好的识别图片信息，从而使图片有收录和排名2、注意事项alt描述要和图片内容相符alt描述控制在100字符内（极限）25/33链接文本或图像链接路径链接在哪个窗口打开无漂白薄皮核桃常用值：_self、_blank文本超链接图像超链接链接标签演示示例7：超链接的应用WE CHANGE LIVES 语 法示 例26/33常用的超链接3-1页面间链接从一个页面链接到另外一个页面锚链接功能性链接演示示例8：页面间链接WE CHANGE LIVES 27/33常用的超链接3-2锚链接从A页面的甲位置跳转到本页中的乙位置从A页面的甲位置跳转到B页面中的乙位置创建步骤创建跳转标记创建跳转链接乙位置甲位置演示示例9：锚链接WE CHANGE LIVES 28/33常用的超链接3-3功能性链接电子邮件QQMSN联系我们演示示例10：邮件链接WE CHANGE LIVES 示 例29/33共性问题说明问题