html5开发

泛指Web开发“三剑客”HTML5“本地”应用关系◦MVC(model，view，control)◦网页设计中的体现描述页面内容制定内容的展现形式控制内容的行为◦三层结构：尽可能使不同类型的代码相互分离。优势：代码重用，问题定位容易，可针对用户不同方式的访问三层结构的架构构建网站的过程:自底向上（渐进增强）内容（HTML)表示层（CSS)行为（JavaScript)用户体验的丰富程度推荐工具◦VS2010◦Firefox及Firebug插件◦Notepad++◦Aptana此为eclipse的javascript改良版HTML介绍◦基础，基础，还是基础----〉自学◦注意事项：1、标签封闭；2、树状结构；3、常用标签记忆HTML5◦基于HTML的扩展内容◦重点：Canvas，网络存储◦单纯是标签的使用功能简单请自学记忆CSS指层叠样式表(CascadingStyleSheets)◦样式定义如何显示HTML元素◦样式通常存储在样式表中◦样式添加到HTML5中，是为了解决内容与表现分离◦外部样式表可以极大提高工作效率◦外部样式表通常存储在CSS文件中◦多个样式定义可层叠为一注意：◦所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。1.浏览器缺省设置2.外部样式表3.内部样式表（位于head标签内部）4.内联样式（在HTML元素内部）例子：CSS：p{color:#ff0000;}HTML：htmlheadstyletype=text/cssp{color:#ff0000;}/style/headbodyp你好/p/body/html基本语法◦CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。◦selector{declaration1;declaration2;...declarationN}◦选择器通常是您需要改变样式的HTML元素。◦每条声明由一个属性和一个值组成。selector{property:value}h1{color:red;font-size:14px;}p{text-align:center;color:black;font-family:arial;}CSS属性定义◦属性列表查阅chm帮助文件选择器的分组◦h1,h2,h3,h4,h5,h6{color:green;}继承及其问题◦body{font-family:Verdana,sans-serif;}◦浏览器版本问题打破继承◦个别标签单独定义body{font-family:Verdana,sans-serif;}td,ul,ol,ul,li,dl,dt,dd{font-family:Verdana,sans-serif;}p{font-family:Times,TimesNewRoman,serif;}通过依据元素在其位置的上下文关系来定义样式。◦listrong{font-style:italic;font-weight:normal;}pstrong我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用/strong/pollistrong我是斜体字。这是因为strong元素位于li元素内。/strong/lili我是正常的字体。/li/ol只要strong标签在li标签内部就会起作用，不需要紧挨着。id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以#来定义。CSS：#red{color:red;}#green{color:green;}HTML：pid=red这个段落是红色。/ppid=green这个段落是绿色。/pid选择器和派生选择器结合◦在现代布局中，id选择器常常用于建立派生选择器#sidebarp{font-style:italic;text-align:right;margin-top:0.5em;}div#sidebar{border:1pxdotted#000;padding:10px;}类选择器以一个点号显示◦.center{text-align:center}◦h1class=centerThisheadingwillbecenter-aligned/h1pclass=centerThisparagraphwillalsobecenter-aligned./p可派生选择◦.fancytd{color:#f60;background:#666;}基于元素选择◦td.fancy{color:#f60;background:#666;}对带有指定属性的HTML元素设置样式◦格式[title]{color:red;}单纯的属性选择[title=FirstLevel]{border:5pxsolidblue;}属性值选择[title~=hello]{color:red;}属性多值选择-空格分隔[lang|=en]{color:red;}属性多值选择-连字符分隔元素选择符Selectors选择符Name名称Description简介*通配选择符(UniversalSelector)所有元素对象。style*{color:#f00;}/styleE类型选择符(TypeSelector)以文档语言对象类型作为选择符。E#myidid选择符(IDSelector)以唯一标识符id属性等于myid的E对象作为选择符。E.myclassclass选择符(ClassSelector)以class属性包含myclass的E对象作为选择符。关系选择符Selectors选择符Name名称Description简介EF包含选择符(Descendantcombinator)选择所有被E元素包含的F元素。可以跨层EF子选择符(Childcombinator)选择所有作为E元素的子元素F。层次必须分明E+F相邻选择符(Adjacentsiblingcombinator)选择紧贴在E元素之后F元素。用于交叉配色E~F兄弟选择符(Generalsiblingcombinator)选择E元素所有兄弟元素F。同层次的兄弟属性选择符Selectors选择符Description简介E[att]选择具有att属性的E元素。E[att=val]选择具有att属性且属性值等于val的E元素。E[att~=val]选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。E[att^=val]选择具有att属性且属性值为以val开头的字符串的E元素。E[att$=val]选择具有att属性且属性值为以val结尾的字符串的E元素。E[att*=val]选择具有att属性且属性值为包含val的字符串的E元素。E[att|=val]选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的E元素。实例伪类选择符Selectors选择符Description简介E:link设置超链接a在未被访问前的样式。E:visited设置超链接a在其链接地址已被访问过时的样式。E:hover设置元素在其鼠标悬停时的样式。E:active设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。E:focus设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。E:root匹配E元素在文档的根元素。E:first-child匹配父元素的第一个子元素E。E:last-child匹配父元素的最后一个子元素E。…..实例伪对象选择符关键搞清楚啥是对象，符号：：Selectors选择符Description简介E:first-letter/E::first-letter设置对象内的第一个字符的样式。E:first-line/E::first-line设置对象内的第一行的样式。E:before/E::before设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用E:after/E::after设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用E::selection设置对象被选择时的颜色。实例外部样式表HTML:headlinkrel=stylesheettype=text/csshref=mystyle.css//headCSS:hr{color:sienna;}p{margin-left:20px;}body{background-image:url(images/back40.gif);}内部样式表headstyletype=text/csshr{color:sienna;}p{margin-left:20px;}body{background-image:url(images/back40.gif);}/style/head内联样式pstyle=color:sienna;margin-left:20pxThisisaparagraph/p等级覆盖关系图片显示的控制◦设置图片显示位置大小等=csse_dim_height◦裁减背景图片显示本地实例颜色Name名称Description简介ColorName用颜色名称来指定颜色。包括基本颜色关键字、系统颜色、SVG颜色关键字等如.foreground{color:red;}HEX十六进制记法。语法如：#rrggbb或#rgb如.background{background-color:#808080;}RGBrgb记法如.foreground{color:rgb(255,0,0);}RGBArgba记法如.test{background-color:rgba(0,0,0,0.5);}HSLhsl记法如.test{background-color:hsl(360,50%,50%);}HSLAhsla记法如.test{background-color:hsla(360,50%,50%,0.5);}transparent全透明如background:transparent;}ColorColorNameHEXRGBblack#0000000,0,0silver#C0C0C0192,192,192gray#808080128,128,128white#FFFFFF255,255,255maroon#800000128,0,0red#FF0000255,0,0purple#800080128,0,128fuchsia#FF00FF255,0,255green#0080000,128,0lime#00FF000,255,0olive#808000128,128,0yellow#FFFF00255,255,0navy#0000800,0,128blue#0000FF0,0,255teal#0080800,128,128aqua#00FFFF0,255,255CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面后，可由所有的现代浏览器执行。JavaScript很容易学习。JavaScript与Java是两种完全不同的语言，无论在概念还是设计上。◦Java（由Sun发明）是更复杂的编程语言。◦ECMA-262是JavaScript标准的官方名称。◦JavaScript由BrendanEich发明。