web前端知识介绍

HTML+CSS初识web前端和HTML 2 知识导入 本节任务 什么是Web前端 Web前端开发工具 浏览器的介绍 HTML是什么 HTML的文档结构 W3c介绍 Html发展史 Xhtml1.0规范 常用标签的讲解 属性的讲解 3 知识讲解 Web前端开发语言介绍1. Web前端：浏览器展现给用户的所有东西 (设计+布局+特效+交互)2. Web前端的发展：随着时代的发展，在这样一个 “体验至上、视觉为王”的时代，现在的互联网产品不再是以前那样只追求功能的实现，不在乎视觉效果及用户体验。基于这样的时代需求，Web前端在产品组成中起到了举足轻重的作用。3. 职业方向：网站开发(PC+移动)、游戏制作、App开发4. 开发语言：html + css + javascript 4 知识讲解 开发工具介绍1. 三种常用的 IDE：Dreamweaver、HBuilder、Webstorm2. 建议使用HBuilder = 速度快，代码提示好，基于eclipse开发，兼容所有eclipse有的插件 5 知识讲解 浏览器的介绍1. IE浏览器：IE6IE8存在兼容性问题，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 文档结构hello world 网页的DTD声明，告诉浏览器按照指定的标准来解析网页，这里指的是w3c标准。如果不写DTD声明，浏览器认为这是一个不太“标准”的网页，就会以“奇怪模式”来显示这个网页。 8 知识讲解 W3c介绍W3c 万维网联盟，专门制定和维护web标准的组织万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言、可扩展标记语言以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。 9 知识讲解 Html 发展史HTML1.0 草案在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)HTML 2.0 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时HTML 3.2 1996年1月14日,W3C推荐标准HTML 4.0 1997年12月18日,W3C推荐标准HTML 4.01(微小改进) 1999年12月24日,W3C推荐标准XHTML 1.0 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布XHTML 1.1 于2001年5月31日发布 XHTML 2.0 10 知识讲解 xhtml1.0 介绍1. xhtml 就是标准更严格的html版本，增强了一些规范和限制2. xhtml 可以理解成就是html的加强版3. xhtml 好处是增强了程序的可读性 页面必须具有DTD声明 img必须加alt 双标签必须闭合， 单标签由反斜线(/) 封闭 引号必须用双引号 标签名与属性名必须小写xhtml1.0 规范 11 知识讲解 Xhtml 发展史1993年(IETF)HTML 1.0 1995(W3C)HTML 2.0 1996(W3C)HTML3.2 1997(W3C)HTML 4.01999(W3C)HTML 4.01 2000(W3C)XHTML 1.0 2001(W3C)XHTML 1.1 XHTML2.0?分歧2004年(WHATWG)HTML5草案2008年(合并)HTML5 2014年HTML5正式版分化点 12 知识讲解 常用标签的介绍h1 h6 双标签 标题文章标题注：h1只可以出现一次，h2 - h6可以多次出现P 双标签 段落文章内容 13 知识讲解 常用标签的介绍a 双标签 超链接超链接标题属性的介绍1. 用来表示该标签的性质和特性，通常格式 = 属性名=属性值 2. 在开始标签中指定3. 多个属性用空格隔开 14 知识讲解 常用标签的介绍img 单标签 图片注意：1. alt 只有当地址路径错误的时候才显示2. width/height 只给一个值的时候另一个值浏览器默认会算出来，等比例缩放3. 图片名称不可以出现中文 15 知识讲解 元素样式的介绍文章标题注意：1. style 属性规定元素的行内样式(行间样式)2. style 样式内部写法 = 属性名:属性值 = 多个属性用分号隔开3. color 文字的颜色，值有三种形式 = 十六进制，rgb，英文