web开发案例ch04.ppt

第4章 HTML高级应用及编辑工具 教学目标 教学重点 教学过程 教学目标 掌握HTML的高级应用 掌握常见的HTML编著工具 教学重点 HTML的高级应用 HTML应用实例 教学过程 ◆ span的使用 ◆ div的使用 ◆框架的使用 ◆表单的使用 ◆ HTML头部信息 3.3 XHTML的基本语法（常用标签） ◆ span的使用 使用 span /span来组合行内元素，可以通过样式style来格式化它们。 3.3 XHTML的基本语法（常用标签） span style=color:#0000CC; font-size:80px; font-family:Arial, Helvetica, sans-serif;G/span span style=color:#C61800; font-size:80px;font-family:Arial, Helvetica, sans-serif;o/span span style=color:#EFBA00; font-size:80px;font-family:Arial, Helvetica, sans-serif;o/span span style=color:#0000CC; font-size:80px; font-family:Arial, Helvetica, sans-serifg/span span style=color:#66CC33; font-size:80px;font-family:Arial, Helvetica, sans-serif;l/span span style=color:#C61800; font-size:80px;font-family:Arial, Helvetica, sans-serif;e/span 3.3 XHTML的基本语法（常用标签） ◆层div …/div 层称为定位标签，其作用主要是在布局中确定某一块的位置，像一个容器。 3.3 XHTML的基本语法（常用标签） 用法： div style=color:#FFFF33;background:#336699;margin:20px 0 0 20px;padding-top:10;padding-left:10;width:300px;height:200px h3p定位 margin:20px 0 0 50px; /p 其中的数值顺序是：上右下左。/h3 /div 属性： padding 内边距 margin 外边距 3.3 XHTML的基本语法（常用标签） 层的浮动属性：float 即使块状元素div的宽度不是100%，它也不允许其他元素和他同在一行 3.3 XHTML的基本语法（常用标签） html head style .redbox {border:2px solid red; width:200px; height:100px; margin:5px;} .bluebox {border:2px solid blue; width:200px; height:100px; float:left; margin:5px;} /style /head body div class=redboxBlock1/div div class=redboxBlock2/div div class=redboxBlock3/div div class=blueboxBlock1,float:left/div div class=blueboxBlock2,float:left/div div class=blueboxBlock3/div /body /html 3.3 XHTML的基本语法（常用标签） 使用层布局页面 3.3 XHTML的基本语法（常用标签） 使用层布局页面 html body div id=logologo/div div id=content div id=sidebarsidebar/div div id=mainmain/div /div div id=footerfooter/div /body /html 3.3 XHTML的基本语法（常用标签） head style type=text/css #logo { border:1px solid blue; background-image:url(images/banner.png); width:900px; height:150px; padding:10 } 3