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