《HTML与CSS简介02577.ppt》由会员分享,可在线阅读,更多相关《HTML与CSS简介02577.ppt(23页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、HTML与CSS简介冰山一角2011/9/26什么是Web标准?Web标准是针对网页的网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)结构化标准语言:XHTML和XML表现标准语言:CSS行为标准主要包括对象模型(如W3C DOM)、ECMAScript等强烈建议关注强烈建议关注HTML 5!为什么要有标准?我们不得不为不同的浏览器写不同的代码增加一种新设备时,不得不专门为其开发新版本网站代码臃肿繁杂浪费了我们大量的带宽针对某种浏览器的特效,使用其它浏览器的人看不到Web标准的优点对用户的好处文件下载与页面显示速度更快内容能被更多的用
2、户所访问内容能被更广泛的设备所访问(包括屏幕阅读机、手持设备、搜索机器人、打印机等等)用户能够通过样式选择定制自己的表现界面 所有页面都能提供适于打印的版本 Web标准的优点对网站制作者的好处更少的代码和组件,容易维护 带宽要求降低(代码更简洁)更容易被搜寻引擎搜索到 改版方便,不需要变动页面内容 提供打印版本而不需要复制内容 提高网站易用性HTMLCSSJavascriptPHPSQLPhotoshopFlash做网站,需要学习什么什么是什么是 HTML?HTML 是用来描述网页的一种语言,具体指的是超文本标记语言(Hyper Text Markup Language)。HTML 不是一种编
3、程语言,而是一种标记语言(markup language),拥有一套标记标签(markup tag),并用这套标签来描述网页!网页的组成结构:这块是标题,这块是头,这块是身体,这块是由HTML代码定义内容:网页的文字、图片、视频音频表现形式:这块的字体该多大,什么颜色,用什么框架,外边框多粗.由CSS文件定义网页分类静态网页静态网页特点静态网页特点 每个网页都有一个固定的每个网页都有一个固定的URLURL,且网页,且网页URLURL以以.htm.htm、.html.html、.shtml.shtml等常见形式为后缀等常见形式为后缀 是实实在在保存在服务器上的文件,每个网页都是一是实实在在保存在
4、服务器上的文件,每个网页都是一个独立的文件个独立的文件 内容相对稳定,因此容易被搜索引擎检索内容相对稳定,因此容易被搜索引擎检索 没有数据库的支持,在网站制作和维护方面工作量较没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态网页制作大,因此当网站信息量很大时完全依靠静态网页制作方式比较困难方式比较困难 静态网页的交互性交差,在功能方面有较大的限制静态网页的交互性交差,在功能方面有较大的限制网页分类动态网页动态网页特点以数据库技术为基础,可以大大降低网站维护以数据库技术为基础,可以大大降低网站维护的工作量的工作量 采用动态网页技术的网站可以实现很多的功能采用动
5、态网页技术的网站可以实现很多的功能 实际上并不是独立存在于服务器上的网页文件,实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网只有当用户请求时服务器才返回一个完整的网页页 HTML标签家族集会常常用用标标签签稍稍作作了了解解HTML标签属性概述align、checked、maxlength、name、size、src、type、value、class、id、language、style、alt、border、width、height、hspace、vspace、href、target、rel、bgcolor、background、bordercolor、cel
6、lpadding、cellspacing、valign、rowspan、colspan、nowrap、noshade、face、content、http、equiv、vlink、alink、marginheight、marginwidth、noresize、scorlling、onload、onunload、onchange、onsubmit、onreset、onselect、onblur、onfocus、onabort、onkeydown、onkeypress、onkeyup、onclick、ondblclick、onmousedown、onmousemove、onmouseout、onmo
7、useover、onmouseup静态网页示例HTML整体布局注册页面新闻列表链接图片Cascading Style Sheets层叠样式表CSS发挥的作用:分离了表现和结构,网站制作上更为轻松可以方便地改变网站样式,制作不同样式的皮肤可以随意轻松地控制网站布局代码量小,代码清晰什么是CSS?哈工大微软技术俱乐部CSS语法语法规则选择符 属性1:值1;属性2:值2;h1 font-size:18px;color:red;CSS语法选择符HTML元素名元素的id类元素的类元素的元素元素的组合CSS语法元素属性字体属性颜色及背景属性文本属性方框属性分类属性单位一种选择器的派生现象派生选择器通过依据
8、元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。li strong font-style:italic;font-weight:normal;两类选择器id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以#来定义。下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:#red color:red;#green color:green;类选择器以一个点号显示:.center text-align:centerCSS加载到文件外部样式表外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表
9、的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。标签在(文档的)头部:浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。内部样式表内部样式表当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 标签在文档头部定义内部样式表,就像这样:hr color:sienna;p margin-left:20px;body background-image:url(images/back40.gif);内联样式内联样式由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:This is a paragraph网页布局使用div+CSS来进行网页布局,而非tablediv网页中层的概念静态网页示例HTML+CSS整体布局注册页面新闻列表链接图片参考资料:段志岩课件参考资料:段志岩课件+林家欣业余林家欣业余PPT+w3cschool+网上无名氏网上无名氏谨向他们表示衷心的感谢!谨向他们表示衷心的感谢!
限制150内