HTML和CSS.pptx

1、第一章 Web开发基础,第2节 HTML和CSS,本节内容,Web开发客户端语言简介 HTML基本语法 表格、表单和框架的使用 CSS基本语法 CSS布局网页结构,重点难点,HTML基本语法 表格、表单和框架的使用 CSS基本语法 CSS布局网页结构,当前内容,Web开发客户端语言简介 HTML基本语法 表格、表单和框架的使用 CSS基本语法 CSS布局网页结构,Web开发客户端语言简介,Web浏览器负责展示网页，但只解析HTML、CSS、JavaScript等客户端语言 HTML负责网页结构的设计 CSS负责网页样式设计 JavaScript负责网页特效等动态效果设计（包括Ajax）,当前内

2、容,Web开发客户端语言简介 HTML基本语法 表格、表单和框架的使用 CSS基本语法 CSS布局网页结构,HTML基本语法,几个概念 标签、属性 整体结构,HTML基本语法,添加文字、图像、列表、超链接 段落设置 HTML学习方法 记住常用标签 记住常用标签的常用属性 学会查参考手册,当前内容,Web开发客户端语言简介 HTML基本语法 表格、表单和框架的使用 框架的使用 CSS基本语法 CSS布局网页结构,表格,表格的作用 展示数据 网页结构简单布局 表格的组成 表格、行、单元格 标签、标签、标签,表格,表格内容：在单元格中写入内容（任何内容，甚至是一个表格） 表格、行、单元格的常用属性（

3、见参考手册）,表单,表单的作用 服务器接收数据的接口 表单的组成 表单标签： 表单控件：、,表单,表单标签的常用属性 action属性、method属性、enctype属性 常用表单控件 具体见参考手册,框架,框架的作用 实现静态页面的重复利用 一般使用在后台管理界面中 框架标签 标签 标签 标签,HTML小结,HTML主要作用：确定网页元素整体结构 如何设置网页文字、图片、列表等样式效果？ 使用HTML样式标签，如、等 使用CSS对样式进行设计,当前内容,Web开发客户端语言简介 HTML基本语法 表格、表单和框架的使用 CSS基本语法 CSS布局网页结构,CSS基本语法,在HTML中使用C

4、SS的三种方法 行内样式表 内部样式表 外部样式表, Hello World , p color: #FF0000; ,CSS选择器,CSS的三种基本选择器 标签选择器 类选择器 ID选择器,p font-size: 24px; color: blue; ,.myClassStyle font-size: 24px; color: blue; ,#myIdStyle font-size: 24px; color: blue; ,CSS基本语法,CSS其它选择器 后代选择器、子选择器、兄弟选择器、群选择器 继承和层叠 若一个内层元素未设置样式，则是否会显示样式？ 若多个样式作用于同一个元素，则如

5、何选择样式？ CSS：层叠样式表,当前内容,Web开发客户端语言简介 HTML基本语法 表格、表单和框架的使用 CSS基本语法 CSS布局网页结构,CSS元素显示形式,块级元素和行内元素 、 标签和标签 改变元素的显示类型（display属性） 举例：导航栏（列表 + display属性）,CSS盒子模型,高度（height）、宽度（width） 内边距（padding） 边框（border） 外边距（margin）,网页结构布局,使用表格进行结构设计 若欲交换B模块和C模块的位置，如何处理？ div + CSS 布局页面结构,网页布局之浮动,B模块和C模块如何并排显示？使用浮动 浮动（float）：设置浮动的元素脱离HTML文档流 举例： 浮动问题：页面上移（解决方案：清除浮动）,网页布局之定位,下图中的图片如何实现其效果？ 定位（position） 定位方式：绝对定位、相对定位、静态定位、固定定位 举例：,网页布局,文档流的概念 浮动和定位小结,内容回顾,Web开发客户端语言：HTML、CSS、J