HTML5前端开发培训案例.pptx

HTML5前端开发培训 我们从这里开始 这里不是速成班 结构 Structure 表现 Presentation 行为 Behavior Web标准 Web标准不是某一个标准，而是一系列标准的集合 XHTMLXML HTML CSS CSS DOMECMAScript JavaScript 各自职责 HTML: 结构内容 CSS: 样式 JS: 结构内容样式动画交互 各自职责 发展演变 HTML: 结构内容交互 CSS: 样式动画 JS: 结构内容样式动画交互 ? HTML ? CSS ? JavaScript 目录 HTML 超文本标记语言 Hyper Text Markup Language Web应用的基石 ? ? ? ? ? ? ? 发展简史 1989 Tim Berners-Lee 发明HTML 1993 第一款 浏览器“Mosaic”发布 1994 W3C成立 1997 HTML 3.2 1999 HTML4.01 2000 XHTML 1.0 2008 HTML5 div id=i超文本标记语言/div HTML语法 起始标记 结束标记 元素 属性 内容 !DOCTYPE html html head title标题 /title /head body 内容 /body /html 基本结构 HEAD BODY html 与 /html 之间的文本描述网页 head 与 /head 之间定义文档的头部 body 与 /body之间的文本是可见的页面内容 Doctype文档类型声明 ? HTML4.0 XHTML 1.1 ? HTML4.0 ~ HTML5.0 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd !DOCTYPE html 说明你用的 的XHTML或者 者HTML是什么版本 向上向下兼容 《DOCTYPE的奇怪影响》 ? title 页面标题，而且必须唯一 ? meta 提供有关页面的元信息（meta-information），比如针对搜索引擎和更 新频度的描述和关键词 ? link 定义文档与外部资源的关系 ? script 定义文档内部的JavaScript ? style 定义文档内部的CSS Head文件 ? ? ? ? ? ? ? 常用元素 结构：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 ? JavaScript 目录 CSS 层叠样式表 Cascading Style Sheets 程序员的画笔 ? ? ? ? ? 发展简史 1994 HakonWium Lie提出CSS概念 1996 CSS Level 1 1997 CSSWorking Group 1998 CSS Level 2 CSS Level 3 – 进化中… 例如： p {color:#ff0000;} CSS语法 ? 选择器\属性\值 selector{ property:value } 多个属性之间采用分号分隔 ? ? ? ? ? ? ? ? CSS选择器 元素选择器 h1