网页基础三部曲html_css_js.pptx

网页基础三部曲 --html+css+js交流 主要内容 HTML相关知识 CSS相关知识 CSS hack HTML CSS JS 关系 结构HTML 表现CSS 行为JS HTML CSS JS HTML CSS JS 关系 主要内容 HTML相关知识 CSS相关知识 CSS hack HTML-是什么 超文本标记语言 HyperText Mark-up Language 新的结构元素有 aside、figure 和 section 、header、footer 等。 新的内联元素有 time、meter 和 progress。 新的内嵌元素有 video 和 audio。 新的交互元素有 details、datagrid 和 command。 HTML5-新元素 HTML-5 块级元素 (block) div h1~h6 ul ol li dt dd dl form p … HTML-标签概念 行内(内联)元素 (inline) span strong em a img input button select … HTML-标签概念 块级元素能嵌套所有内联元素 divspan/span/div 内联元素不能嵌套块级元素 spanh2/h2/span 注意： 以下块级元素不要再嵌套块级元素 h1~h6 p dt address HTML-标签使用基本原则 标签和属性名称采用小写 h1/h1 H1/H1 属性值用引号 a href=“”/a a href=/a 标签必须闭合 liText/li liText br/ br HTML-代码书写规范 主要内容 HTML相关知识 CSS相关知识 CSS hack CSS-是什么 层叠样式表 Cascading Style Sheet CSS 1 1996.12成为推荐标准（字体，颜色、空白边） CSS 2 1998.5成为推荐标准 (浮动,定位,选择器) CSS 2.1 2002年修订(伪类，属性选择器) CSS 3 2010年 CSS-历史 CSS-3 例子 CSS-样式表 行内式样式表（Inline Style） 嵌入式样式表（Embedded Style Sheets） 外部样式表（Link Style Sheets） 浏览器缺省设置-浏览器默认设置 优先级 行内式样式表（Inline Style） CSS-样式表 body div style=“width: 12px; color: red;” phello～/p /div /body 嵌入式样式表（Embedded Style Sheets） CSS-样式表 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style div { width: 12px; color: red; } /style /head body div phello~/p /div /body 外部样式表（Link Style Sheets） CSS-样式表 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title link href=jquery-ui-1.7.custom.css rel=stylesheet type=text/css / /head body div phello~/p /div /body 选择器 Selector { 属性 Property : 属性值 Value ; } CSS-写法规则 h1 { color: red; background: #000; } 全局选择器: * 元素选择器: p/ol/li 选择器分组: h1,h2..h6 类选择器: .+classname id选择器（唯一）: #+id