web前端知识介绍课件.ppt
1,HTML+CSS初识web前端和HTML,2,知识导入,本节任务,什么是Web前端Web前端开发工具浏览器的介绍HTML是什么HTML的文档结构W3c介绍Html发展史Xhtml1.0规范常用标签的讲解属性的讲解,3,知识讲解,Web前端开发语言介绍,Web前端：浏览器展现给用户的所有东西 (设计+布局+特效+交互)Web前端的发展：随着时代的发展，在这样一个 “体验至上、视觉为王”的时代，现在的互联网产品不再是以前那样只追求功能的实现，不在乎视觉效果及用户体验。基于这样的时代需求，Web前端在产品组成中起到了举足轻重的作用。职业方向：网站开发(PC+移动)、游戏制作、App开发开发语言：html + css + javascript,4,知识讲解,开发工具介绍,三种常用的 IDE：Dreamweaver、HBuilder、Webstorm建议使用HBuilder = 速度快，代码提示好，基于eclipse开发，兼容所有eclipse有的插件,5,知识讲解,浏览器的介绍,IE浏览器：IE6IE8存在兼容性问题，js引擎的性能不好Chrome浏览器：兼容性及js引擎性能都很好FF浏览器：兼容性很好，js引擎性能不如chrome，而且首次打开特别慢,注意：开发调试建议使用 Chrome 浏览器,6,知识讲解,HTML文档结构,1. HTML是什么,Html 是超文本标记语言Html 使用标记来描述网页 Html 文件的后缀名是 .html 或者是 .htmHtml 文件不需要编译，直接由浏览器解析执行,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 介绍,xhtml 就是标准更严格的html版本，增强了一些规范和限制xhtml 可以理解成就是html的加强版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.0,1999(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 双标签 超链接超链接标题,属性的介绍,用来表示该标签的性质和特性，通常格式 = 属性名=属性值 在开始标签中指定多个属性用空格隔开,14,知识讲解,常用标签的介绍,img 单标签 图片,注意：1. alt 只有当地址路径错误的时候才显示2. width/height 只给一个值的时候另一个值浏览器默认会算出来，等比例缩放3. 图片名称不可以出现中文,15,知识讲解,元素样式的介绍,文章标题,注意：1. style 属性规定元素的行内样式(行间样式)2. style 样式内部写法 = 属性名:属性值 = 多个属性用分号隔开3. color 文字的颜色，值有三种形式 = 十六进制，rgb，英文,
