HTML5前端开发培训.pptx

HTML5前端开发培训我们从这里开始这里不是速成班 Web标准Web标准不是某一个标准，而是一系列标准的集合 结构Structure 表现Presentation 行为BehaviorXHTMLXML HTML CSSCSSDOMECMAScript JavaScript各自职责各自职责HTML: 结构内容CSS: 样式JS: 结构内容样式动画交互发展演变HTML: 结构内容交互CSS: 样式动画JS: 结构内容样式动画交互目录? HTML? CSS? JavaScriptHTML超文本标记语言Hyper Text Markup LanguageWeb应用的基石 发展简史1989 Tim Berners-Lee 发明HTML1993 第一款 浏览器“Mosaic”发布1994 W3C成立1997 HTML 3.21999 HTML4.012000 XHTML 1.02008 HTML5???????HTML语法起始标记结束标记div id=i超文本标记语言/div元素属性内容基本结构 HEAD BODY html 与 /html 之间的文本描述网页 head 与 /head 之间定义文档的头部 body 与 /body之间的文本是可见的页面内容!DOCTYPE htmlhtml head title标题 /title /head body 内容 /body/htmlDoctype文档类型声明说明你用的 的XHTML或者 者HTML是什么版本? HTML4.0 XHTML 1.1!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd? HTML4.0 ~ HTML5.0!DOCTYPE html向上向下兼容《DOCTYPE的奇怪影响》Head文件? title页面标题，而且必须唯一? meta提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词? link定义文档与外部资源的关系? script定义文档内部的JavaScript? style定义文档内部的CSS 常用元素结构：p,div,span,h1~h6,body…列表：ul,ol,dl,li,dd,dt文本：a,em,strong,pre…表单：form,input,button,label…媒体：img,object…表格：table,tr,td,caption,tbody……???????元素分类 行内元素块级元素嵌套规则元素分类? 块级元素(block)div、p、h1~h6、table、td、tr、ul、li、fieldset、legend...特点：在文档流中默认占据整行位置? 行内元素(inline)span、en、strong、label、a、img、input、button、select...特点：在文档流中默认一行可以展示多个行内元素? 嵌套规则块级元素可以嵌套行内元素，除a以外的行内元素不能嵌套块级元素语义化元素? header，footer? section，article? nav，aside，figure? h1~h6? ol，ul，dl? table，tr，th，td《HTML5介绍》语义化标签语义化意义? 增强页面的可访问性? 提高开发效率? 搜索引擎优化SEO元素通用属性? id 唯一性? class? 不再使用的属性algin，bgcolor，background，color...CSS定义 - 样式与结构分离书籍推荐目录? HTML? CSS? JavaScriptCSS层叠样式表Cascading Style Sheets程序员的画笔 发展简史1994 HakonWium Lie提出CSS概念1996 CSS Level 11997 CSSWorking Group1998 CSS Level 2CSS Level 3 – 进化中…????? CSS语法? 选择器\属性\值 selector{ property:value }多个属性之间采用分号分隔例如： p {color:#ff0000;} CSS选择器元素选择器 h1类选择器 .classnameid选择器 #id全局选择器 *继承选择器 div p分组选择器 h1,h2伪类选择器 :hover属性选择器 input[type=button]????????CSS优先级层叠样式的优先级? 浏览器缺省设置? 外部样式表? 内部样式表? 标签自定义样式CSS优先级清除浏览器缺省样式清除浏览器缺省样式reset.csshtml, body, div, span, object, iframe,h1,