web前端开发
http:/www.w3school.com.cn/index.html,Web前端开发,http:/radio.wuyiu.edu.cn,网页设计师、Web前端设计师与交互设计师、网站开发工程师等的区别： 网页设计师是指精通Photoshop、CorelDRAW、Flash、Illustrator、Dreamweaver等多项网页设计工具的网页设计人员,请叫我周某人 武夷学院广播台,NO.1 Web前端开发设计？,Web前端开发是从网页制作演变而来的，是web2.0的产物，包括三个要素：HTML、CSS和JavaScript,Web前端开发,http:/radio.wuyiu.edu.cn,请叫我周某人 武夷学院广播台,NO.1 Web前端开发设计？,Web前端开发,http:/radio.wuyiu.edu.cn,网页设计师、Web前端设计师与网站开发工程师、交互设计师等区别： 交互设计师：秉承以用户为中心的设计理念，应用“以目标为导向的设计”方法，进行互联网产品的设计。,请叫我周某人 武夷学院广播台,NO.1 Web前端开发设计？,Web前端开发,http:/radio.wuyiu.edu.cn,网页设计师、Web前端设计师与网站开发工程师、交互设计师等区别： 网站开发工程师：掌握ASP、PHP、.NET、JSP等开发语言，熟悉运用Access、SQL语言、SQL数据库等；对IIS、Apache等服务器有一定的理解等,请叫我周某人 武夷学院广播台,NO.1 Web前端开发设计？,请叫我周某人 武夷学院广播台,http:/radio.wuyiu.edu.cn,XHTML 是更严谨更纯净的 HTML 版本。XHTML 与 HTML 4.01 标准没有太多的不同。（目前最新为HTML 5） XHTML 是 HTML 与 XML（扩展标记语言）的结合物。 XHTML 1.0在2000年1月26日成为W3C的推荐标准。（其标准应用为CSS+DIV）,Web前端开发,NO.2 Web标准？Xhtml？,例如： 所有标签都必须小写 在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。看一个例子。 错误： 正确： 标签必须成双成对 像是.、.、.标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样。 错误：大家好我是muki 正确：大家好我是muki 标签顺序必须正确 标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。 错误：大家好 正确：大家好,请叫我周某人 武夷学院广播台,http:/radio.wuyiu.edu.cn,如何验证Xhtml？ http:/jigsaw.w3.org/css-validator/ http:/validator.w3.org/ 学习网站推荐： http:/www.w3school.com.cn/index.html http:/www.oschina.net/,Web前端开发,NO.2 Web标准？Xhtml？,请叫我周某人 武夷学院广播台,http:/radio.wuyiu.edu.cn,如何新建Xhtml文件？（初期建议用记事本书写代码！） 无标题文档 ,Web前端开发,NO.2 Web标准？Xhtml？,W3C将XHTML1.0分为三种规范：transitional是过渡版（默认选择） strict是严格版、frameset为框架版,请叫我周某人 武夷学院广播台,http:/radio.wuyiu.edu.cn,Xhtml（html）语法规则： 元素必须被正确地嵌套 元素必须被关闭（如）、非空标签必须使用结束标签（） 元素必须小写（标签名和属性对大小写敏感）（） 属性值必须加引号（ ）,Web前端开发,NO.2 Web标准？Xhtml？,请叫我周某人 武夷学院广播台,http:/radio.wuyiu.edu.cn,Xhtml（html）语法规则： 属性不能简写（） 用 id 属性代替 name 属性（） 在 “/“ 符号前添加一个额外的空格，以使你的 XHTML 与当今的浏览器相兼容 ,Web前端开发,NO.2 Web标准？Xhtml？,请叫我周某人 武夷学院广播台,http:/radio.wuyiu.edu.cn,Xhtml（html）语法规则： 不要在注释内容中使“-”，如（ 是不行的！） 把所有和&特殊符号用编码表示，如（大于号用& g t ；小于号用& l t ；）,Web前端开发,NO.2 Web标准？Xhtml？,请叫我周某人 武夷学院广播台,http:/radio.wuyiu.edu.cn,Xhtml（html）语法规则： 首页 节目 （结构化代码）,Web前端开发,NO.2 Web标准？Xhtml？,http:/radio.wuyiu.edu.cn,请叫我周某人 武夷学院广播台,Web前端开发,NO.3 纠结的浏览器兼容问题,http:/radio.wuyiu.edu.cn,你们知道哪些浏览器？,请叫我周某人 武夷学院广播台,Web前端开发,NO.3 纠结的浏览器兼容问题,IE7/IE8,IE9,http:/radio.wuyiu.edu.cn,这些浏览器算什么？,请叫我周某人 武夷学院广播台,Web前端开发,NO.3 纠结的浏览器兼容问题,http:/radio.wuyiu.edu.cn,浏览器兼容测试：（除了IE其他都可以下载测试） 下载IETester，地址：http:/www.my-debugbar.com/wiki/IETester/HomePage 在线测试：http:/browsershots.org/（需要已上线）、https:/browserlab.adobe.com/en-us/index.html（Adobe，需要注册）,请叫我周某人 武夷学院广播台,Web前端开发,NO.3 纠结的浏览器兼容问题,http:/radio.wuyiu.edu.cn,浏览器兼容测试：（除了IE其他都可以下载测试） 在火狐浏览器中安装插件Firebug、Compatibility Detector for Firefox（两个插件非常强大！）,请叫我周某人 武夷学院广播台,Web前端开发,NO.3 纠结的浏览器兼容问题,http:/radio.wuyiu.edu.cn,CSS Hack（解决兼容问题）： 由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 1、IE6能识别下划线“_“和星号“ * “；IE7能识别*+html和星号“ * “；background-color:red0 IE8能识别0；background-color:blue90 仅IE9支持,请叫我周某人 武夷学院广播台,Web前端开发,NO.3 纠结的浏览器兼容问题,http:/radio.wuyiu.edu.cn,CSS Hack（解决兼容问题）： 火狐和IE7能识别“!important“； #divcss1 background:blue; /*Firefox 背景变蓝色*/ *+background:green !important; /*IE7 背景变绿色*/ _background:orange; /*IE6 背景变橘色*/ background:black0; /*IE8 背景为黑色*/ background:red90; /*IE9 背景为红色*/ body:nth-of-type(1) background:red; /*Chrome Safari背景为红色*/ ,请叫我周某人 武夷学院广播台,Web前端开发,NO.3 纠结的浏览器兼容问题,http:/radio.wuyiu.edu.cn,CSS Hack（解决兼容问题）： （使ie8、ie9使用ie7模式显示）,请叫我周某人 武夷学院广播台,Web前端开发,NO.3 纠结的浏览器兼容问题,http:/radio.wuyiu.edu.cn,CSS Hack（解决兼容问题）： 除IE外都可识别 所有的IE可识别 IE6以下版本可识别 IE6以及IE6以上版本可识别 结语：积累经验解决兼容问题,请叫我周某人 武夷学院广播台,Web前端开发,NO.3 纠结的浏览器兼容问题,http:/radio.wuyiu.edu.cn,HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 ,请叫我周某人 武夷学院广播台,Web前端开发,NO.4 html标签/元素和属性,http:/radio.wuyiu.edu.cn, 武夷学院广播台官方网站！ ,请叫我周某人 武夷学院广播台,Web前端开发,NO.4 html标签/元素和属性, 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。,标签可告知浏览器其自身是一个 HTML 文档。 与 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。,这些标签可用在 head 部分：, , , , , 以及 。 定义文档的标题，它是 head 部分中唯一必需的元素。, 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签永远位于 head 元素内部。必须属性为content，可选属性有http-equiv、name、scheme,http:/radio.wuyiu.edu.cn,1、标签： http-equiv：content-type、expires、refresh、set-cookie； name：author、description、keywords、generator、revised、； content=“text/html; charset=gb2312“ : charset=gb2312/GBK/utf-8 （5秒刷新） （搜索引擎） ,请叫我周某人 武夷学院广播台,Web前端开发,NO.4 html标签/元素和属性,http:/radio.wuyiu.edu.cn,2、常见使用的标签： （标题标签） （段落）; （换行）;（水平线） ，不支持任何属性 （文本） （图像） （来组合文档中的行内元素） （链接CSS样式表，在插入） （定义客户端脚本，如javascript）； 如:（链接JS文件）,请叫我周某人 武夷学院广播台,Web前端开发,NO.4 html标签/元素和属性,http:/radio.wuyiu.edu.cn,3、表单标签： （创建一个html表单） （用于搜集用户信息） （定义多行的文本输入控件） Volvo （select创建单选或多选菜单；optgroup定义选项组；option定义下拉列表中的一个选项） （input等表单元素必须在之间）,请叫我周某人 武夷学院广播台,Web前端开发,NO.4 html标签/元素和属性,http:/radio.wuyiu.edu.cn,3、表单标签： ,请叫我周某人 武夷学院广播台,We
