web前端知识介绍

HTML+CSS初识web前端和HTML2知识导入本节任务•什么是Web前端•Web前端开发工具•浏览器的介绍•HTML是什么•HTML的文档结构•W3c介绍•Html发展史•Xhtml1.0规范•常用标签的讲解•属性的讲解3知识讲解Web前端开发语言介绍1.Web前端：浏览器展现给用户的所有东西(设计+布局+特效+交互)2.Web前端的发展：随着时代的发展，在这样一个“体验至上、视觉为王”的时代，现在的互联网产品不再是以前那样只追求功能的实现，不在乎视觉效果及用户体验。基于这样的时代需求，Web前端在产品组成中起到了举足轻重的作用。3.职业方向：网站开发(PC+移动)、游戏制作、App开发…4.开发语言：html+css+javascript4知识讲解开发工具介绍1.三种常用的IDE：Dreamweaver、HBuilder、Webstorm2.建议使用HBuilder=速度快，代码提示好，基于eclipse开发，兼容所有eclipse有的插件5知识讲解浏览器的介绍1.IE浏览器：IE6—IE8存在兼容性问题，js引擎的性能不好2.Chrome浏览器：兼容性及js引擎性能都很好3.FF浏览器：兼容性很好，js引擎性能不如chrome，而且首次打开特别慢注意：开发调试建议使用Chrome浏览器6知识讲解HTML文档结构1.HTML是什么•Html是超文本标记语言•Html使用标记来描述网页•Html文件的后缀名是.html或者是.htm•Html文件不需要编译，直接由浏览器解析执行2.HTML的基础语法•Html语法是由标签组成的=标记=标签=元素=节点•Html标签分为双标签和单标签•Html标签不区分大小写，推荐使用小写7知识讲解HTML文档结构!DOCTYPEHTMLhtmlhead/headbodyhelloworld/body/html!DOCTYPEHTML网页的DTD声明，告诉浏览器按照指定的标准来解析网页，这里指的是w3c标准。如果不写DTD声明，浏览器认为这是一个不太“标准”的网页，就会以“奇怪模式”来显示这个网页。8知识讲解W3c介绍W3c万维网联盟，专门制定和维护web标准的组织万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言、可扩展标记语言以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。9知识讲解Html发展史HTML1.0–草案在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)HTML2.0–1995年11月作为RFC1866发布,在RFC2854于2000年6月发布之后被宣布已经过时HTML3.2–1996年1月14日,W3C推荐标准HTML4.0–1997年12月18日,W3C推荐标准HTML4.01(微小改进)–1999年12月24日,W3C推荐标准XHTML1.0–发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布XHTML1.1–于2001年5月31日发布XHTML2.010知识讲解xhtml1.0介绍1.xhtml就是标准更严格的html版本，增强了一些规范和限制2.xhtml可以理解成就是html的加强版3.xhtml好处是增强了程序的可读性•页面必须具有DTD声明•img必须加alt•双标签必须闭合，单标签由反斜线(/)封闭•引号必须用双引号•标签名与属性名必须小写xhtml1.0规范11知识讲解Xhtml发展史1993年(IETF)HTML1.01995(W3C)HTML2.01996(W3C)HTML3.21997(W3C)HTML4.01999(W3C)HTML4.012000(W3C)XHTML1.02001(W3C)XHTML1.1XHTML2.0?分歧2004年(WHATWG)HTML5草案2008年(合并)HTML52014年HTML5正式版分化点12知识讲解常用标签的介绍h1–h6双标签标题h5文章标题/h5注：h1只可以出现一次，h2-h6可以多次出现P双标签段落p文章内容/p13知识讲解常用标签的介绍a双标签超链接ahref=地址title=提示文字target=打开方式超链接标题/a属性的介绍1.用来表示该标签的性质和特性，通常格式=属性名=属性值2.在开始标签中指定3.多个属性用空格隔开14知识讲解常用标签的介绍img单标签图片imgsrc=图片路径alt=替换文本width=宽度height=高度/注意：1.alt只有当地址路径错误的时候才显示2.width/height只给一个值的时候另一个值浏览器默认会算出来，等比例缩放3.图片名称不可以出现中文15知识讲解元素样式的介绍h5style=“color:red”文章标题/h5注意：1.style属性规定元素的行内样式(行间样式)2.style样式内部写法=属性名:属性值=多个属性用分号隔开3.color文字的颜色，值有三种形式=十六进制，rgb，英文人有了知识，就会具备各种分析能力，明辨是非的能力。所以我们要勤恳读书，广泛阅读，古人说“书中自有黄金屋。”通过阅读科技书籍，我们能丰富知识，培养逻辑思维能力；通过阅读文学作品，我们能提高文学鉴赏水平，培养文学情趣；通过阅读报刊，我们能增长见识，扩大自己的知识面。有许多书籍还能培养我们的道德情操，给我们巨大的精神力量，鼓舞我们前进。