基础之htmlhttp和css介绍

浙江大学宁波理工学院*1 Java EE 企业级应用开发 宁波理工学院 Web 基础知识 HTTP This may include an optional port number. (80 is default for HTTP) Name of the resource at the server Technically a web resource is identified by a Uniform Resource Identifier or URI (URI is a super-set containing URLs). 浙江大学宁波理工学院4 HTTP Request: What is in it? The request contains: Request-Method URI HTTP/Version Optional Request Header A blank line 请求正文： Optional data for some types of request methods Get /index.jsp HTTP/1.1 Accept: image/gif, image/jpeg, */* Accept-Language: zh-cn Connection: Keep-Alive Host: localhost User-Agent: Mozilla/4.0(compatible;MSIE5.01;Windows NT 5.0) Accept-Encoding: gzip,deflate userName=liuqiyu 浙江大学宁波理工学院27 基本表格 第一行第一列 第一行第二列 第二行第一列 第二行第二列 第三行第一列 第三行第二列 是表格的基本标记。代表表格的行，代表表格的列。 浙江大学宁波理工学院28 Table 标记的属性 标记的一般形式是： Width: 表格宽度，在默认状态下为自动适应表格内容 的宽度，即根据表格中内容来自动调节表格的宽度。 取值可以是绝对或者相对长度标准单位。 Bgcolor: 表格的背景颜色，在默认状态下表格无背景 色，亦可使用HTML的各种颜色单位进行指定。 Background: 表格的背景图案，须用URL来指定作为 表格背景图片的文件路径。 Border: 表格边框的风格（在作为布局使用时往往取 默认值“0”, 即不显示表格边框），在 “Border=1”时 ，表格的边框成3D的状态。 CellSpacing: 表格中单元格之间的间距。 CellPadding: 单元格的边距，即单元格内容与边框之间的留白距离。 浙江大学宁波理工学院29 跨行和跨列 跨两行 跨两列 1000 1000 3000 2000 4000 在 标记的属性中： Align: 指定该行中单元格的对齐方式，可选值 如下： Left左对齐（默认值） Center居中对齐 Right右对齐 Bgcolor: 指定该行的背景颜色 浙江大学宁波理工学院30 标记的属性 在标记的属性中： Width单元格宽度 Height单元格高度 Align单元格水平对齐方式 Valign单元格垂直对齐方式 RowSpan单元格的行跨度 ColSpan单元格的列跨度 浙江大学宁波理工学院31 Example: 表格的样式 序号 院系 师资评分 学生评分 设备评分 1信息分院 100100100 2机电分院 10010097 浙江大学宁波理工学院32 表单（Form） 表单的功能是收集用户信息实 现系统与用户交互。比如用户 注册页面就是一个十分典型的 表单页面。 表单信息的处理过程如下：当 单击表单中的提交按钮时，表 单中的信息就会上传到服务器 中，然后由服务器端的应用程 序（例如CGI，ASP，PHP，JSP 等）进行处理，处理后将用户 提交的信息存储在服务器端的 数据库中，或者将有关信息返 回到客户端浏览器上。 浙江大学宁波理工学院33 表单头及其属性 用户名： 密码： 浙江大学宁波理工学院34 表单中常用控件 在常用的表单制作过程中，经常遇到的是按钮制作、输入 元素的制作等。 常见的表单控件包括文本框、文本域、密码框、多选框、 单选框和下拉列表框，等等。 表单输入元素 用来把不同的字段放在表单里，以便用户输入信息； name属性指定该字段在某个表单中的唯一名称； 可选的value属性给出该标记的默认值。 浙江大学宁波理工学院35 表单输入元素 type 属性给出所使用标记的样式，主要有 CHECKBOX（复选框）。 RADIO（单选按钮） TEXT（单行的文本输入栏）。 IMAGE（图像放在表单里） SUBMIT（提交按钮） RESET（清除按钮） HIDDEN（在表单中保留不供显示的内容） SIZE属性用于设置文本字段的窗口大小（以字符数为计量单位）。 CHECKED 属性与 CHECKBOX 和 RADIO 类型一起使用，用于表 示按钮在默认状态时是否被选中。 浙江大学宁波理工学院36 表单输入元素 多行文本输入 XXX 类似于标记，但允许多行文本输入。 name属性与的类似，用行和列属性的数值定义文本输入 区域的大小。元素中XXX的值将作为默认内容显示在文本区域中。 浙江大学宁波理工学院37 选项选择元素 选项选择元素（类似Windows中的组合框） content1 content2 所有可选项目由元素逐条列出； 每个标记后面的文本在下拉框中显示； multiple属性允许选择多于一个的选项； selected属性指定默认的选择。 浙江大学宁波理工学院38 块级元素 I am a layer! I am a Span! 浙江大学宁波理工学院39 设计网页框架 浙江大学宁波理工学院40 使用框架 一般在工程应用中，都是由三个页面组成的框架组合，分 成上框架，右框架和左框架。 浙江大学宁波理工学院41 CSS 概述 CSS（Cascading Style Sheets，层叠样式表），describes appearance of particular elements in a document. 用于（增强）控制网页样式。 将样式信息与网页内容分离。 CSS是一种标记性语言。 从 Netscape 4 和 IE 4 开始支持, W3C 标准。 CSS是DHTML的一部分。 原来的HTML: 布局和内容紧紧绑定, 不易修改。 DHTML: 布局和内容分开, 可以动态(用脚本)修改。 浙江大学宁波理工学院42 DHTML 和 CSS DHTML 定义(Internet Explorer) Dynamic Styles 动态风格 Dynamic Content 动态内容 Positioning and Animation 定位和动画 Filters and Transitions 过滤器和页面切换效果 Font Download 字体下载 Data Binding 数据绑定 Dynamic HTML Object Model 动态 HTML 对象模型 (DOM) XSL Extensible Stylesheet Language 可扩展样式语言 CSS 和 XSL 都可以用来对 XML 指定输出。 浙江大学宁波理工学院43 Example: 使用CSS H1 FONT-SIZE: X-LARGE; COLOR: RED H2 FONT-SIZE: LARGE; COLOR: BLUE 中国，我的祖国！H1显示的 中国，我的祖国！H2显示的 浙江大学宁波理工学院44 如何加入 CSS 样式表: 三种方法 链入外部样式表文件 (Linking to a Style Sheet) HTML 中, 可以出现在页首, 也可以在页末 在XML中，在声明区中加入： 定义内部样式块对象 (Embedding a Style Block) P font: 10pt Arial 内联定义 (Inline Styles) 段落 最近的风格定义优先级最高。 浙江大学宁波理工学院45 定义内部样式块对象 H1 COLOR:GREEN;FONT-SIZE:37PX; P BACKGROUND:YELLOW; 浙江大学宁波理工学院 信息与计算科学系 浙江大学宁波理工学院46 在 BODY 内引用 浙江大学宁波理工学院 信息与计算科学系 浙江大学宁波理工学院47 链入外部CSS文件 文件名：mystyle.css H1 COLOR:GREEN;FONT-SIZE:37PX; P BACKGROUND:YELLOW; 文件名：a.htm 浙江大学宁波理工学院 信息与计算科学系 浙江大学宁波理工学院48 CSS 的基本用法 如何定义CSS Selector property: value 参数说明： Selector - 选择符 property : value - 样式表定义。属性和属性值之间用冒号(:)隔开。 定义之间用分号(;)隔开。 注释： /* 注释用来对CSS 进行说明，以*号和一个斜线作为开始 */ Example: H1, H2, H3, H4 background-color: black; border-left: 1px solid rgb(120,172,255); border-left-color: #C71585; 多个选择符可以共用一个属性定义 浙江大学宁波理工学院49 CSS 的基本用法 常见的选择符用法 Elements 元素 a color: blue; text-decoration: underline; Classes 类别 .previewcontent background: #E0E0E0; padding: 1em; IDs 指定元素标识 #topMenu color:red Top Menu 选择符可以组合 #footer .copyright clear: both; 版权所有 浙江大学宁波理工学院50 CSS Pseudo-Classes（伪类）Reference 浙江大学宁波理工学院51 理解布局 浙江大学宁波理工学院52 CSS的元素嵌套 浙江大学宁波理工学院53 元素嵌套的优点和缺点 优点 减少命名, 将元素的属性关联起来 对某区块内的元素外观进行统一设置, 便于修改 CSS: .dynamic-tab-pane-control .tab-row .tab .selected background:#FFEEC2; border:1px solid ThreeDDarkShadow; border-bottom:0; z-index:3; padding:2px 6px 4px 6px; margin:1px -3px -3px 0px; top:-2px; HTML: General 浙江大学宁波理工学院54 元素嵌套的优点和缺点 缺点 学习曲线高, 需要熟悉 CSS 概念 某些浏览器对元素嵌套的支持不是太好(例如 IE) 用可视化编辑器修改时不易预览设计效果 综合 一流的Web界面, 建议学习元素嵌套 原型开发或者要求不高可使用简单模式 复杂的定位使用 Table 更方便快捷一些 浙江大学宁波理工学院55 类选择符 在STYLE标记定义一个“.类名”，然后在HTML标记中使 用CLASS=“类名”就可以引入该样式。 .LITTLERED COLOR:RED;FONT-SIZE:18px .LITTLEGREEN COLOR:GREEN;FONT-SIZE:18px 这是红色，而且比较小！ 这是绿色，而且比较小！ 浙江大学宁波理工学院56 ID选择符 定义ID选择符时，在样式名之前加“#名字”，引用的时候 使用“ID=名字”。 #SZG COLOR:RED 这是ID选择符号！ 浙江大学宁波理工学院57 定义超级链接样式 可以指定A标记以不同的方式显示。 一个超级链接有几种不同的状态： 未被访问链接（Link） 已访问链接（Visited） 鼠标移动过（Hover） 可以定义超级链接文字的颜色，也可以定义字体的大小， 一般超级链接都有下划线，可以利用