《HTML与CSS》PPT课件.ppt

1,网络编程,第2章 HTML技术介绍 第3章 CSS技术基础,2,主题,章节内容 本章小结 课后习题,3,章节内容,2.0 引言 2.1 HTML网页文档结构 2.2 常用HTML标签 2.3 CSS（Cascading Style Sheet）,4,2.0 引言,HTML是制作网页的基础，在现实中的各种网页都是建立在HTML基础之上的。通过HTML，可以实现对页面元素的显示处理。本章简单介绍HTML网页文档的基本知识，整体结构，常用的HTML标签和超链接。 CSS技术是网页技术中的核心内容之一，通过CSS不但可以控制页面某个元素的显示样式，而且可以整体控制整个站点内某元素的样式。在本章将简要绍CSS技术的基本知识。 理解HTML、CSS基本原理，是开发静态Web页面的基础。,5,章节内容,2.0 引言 2.1 HTML网页文档结构 2.2 常用HTML标签 2.3 CSS（Cascading Style Sheet）,2.1 HTML网页文档结构,一个完整的HTML文件由标题、段落、表格和文本等各种嵌入的对象组成，这些对象统称为元素，HTML使用标记来分隔并描述这些元素。实际上整个HTML文件就是由元素与标记组成的。 文件开始标记 文件头开始的标记 文件头的内容 文件头结束的标记 文件主体开始的标记 文件主体的内容 文件主体结束的标记 文件结束标记,7,章节内容,2.0 引言 2.1 HTML网页文档结构 2.2 常用HTML标签 2.3 CSS（Cascading Style Sheet）,HTML标签可以划分为如下四种格式： 标记名称：单一型，无设置值。例如，br 标记名称 属性”属性值”：单一型，有设置值。例如，hr width=”80%” 标记名称-/标记名称：对称型，无设置值。例如，title-/title 标记名称 属性”属性值”-/标记名称：对称型，有设置值。例如，body bgcolor=”red”-/body,2.2 常用HTML标签,9,HTML标题 HTML 标题（Heading）是通过 - 等标签进行定义的，此标签只能在head标签内出现。 实例 最大字号标题 中字号标题 最小字号标题,11,HTML段落 HTML 段落是通过 标签进行定义的。 实例 HTML的英文全称是Hyper Text Markup Language，它是超文本标记语言的缩写，是Internet上用于编写网页的主要语言。 HTML中每个用来作为标记的符号都可以看作是一条命令，它告诉浏览器应该如何显示文件的内容。,HTML 图像 HTML 图像是通过 标签进行定义的。 ,14,15,HTML 链接 HTML 链接是通过 标签进行定义的。 实例 内蒙古大学,17,超链接标签 链接文字 超链接 target 属性,表格 表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 row 1, column 1 row 1, column 2 row 2, column 1 row 2, column 2 ,19,设置表格的边框与大小,这几个属性用来定义表格的边框线条粗细及其高度和宽度。 绝对位置表示法：使用像素来做为设定单位 ，不论窗口如何调整，占用固定的像素。 相对位置表示法 ：使用百分比做为设定单位 ，占用某一固定的比例大小 。,20,表格中数据的对齐方式,表格中数据的对齐方式分为水平对齐与垂直对齐两种。 若这两个属性用在标签中，则可设置整行的对齐方式，若用在标签中，则是设置个别单元格中数据的对齐方式。,表单 表单是一个包含表单元素的区域。表单元素允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息，然后服务器端可以获得用户输入的数据。 表单标签（）定义。 姓名: 年龄: ,22,23,24,表单与交互式网页结构,25,JSP借由标签所构成的表单区块中，取得用户在其中特定字段输入的数据內容 。,26,创建表单,标签在网页创建一块特定区域作为一种标签容器，形成收集用户数据功能的网页表单。 属性method、action和name，配合标签，形成创建表单的完整语法。 表单内容 其中method指定网页以何种模式传送表单的属性数据，可能的两种模式分别是Post和Get 。 action代表这一份表单网页传送出去之后，服务器对其响应所返回的网页路径地址 ，若是这个属性没有设定，网页本身会被当作action属性值 。 name代表表单的名称，JSP利用这个名称，辨识网页中的特定表单区域。,27,文本框是用来取得用户在网页所输入的姓名、地址之类等相关数据内容 。 文本框外观 密码输入属性主要用在取得用户输入的密码，且会出现密码符号代替用户所输入的数据以避免密码被其它人看见。,28,文本框属性,29,多行文本输入区域,多行文本输入区域常用于输入大量的文字数据 ,30,属性,31,单选按钮,单选按钮使用于多选一的情况，标签的type属性设定为radio： 具有相同name属性的单选钮，被归纳为同一个选项群组，因此只能选择其中某一个选项，若name属性不同则为各自独立的选择群组， 一个以上的单选按钮組合，提供用户在网页上选择所需的特定选项。,32,单选按钮属性,33,复选框,复选框用来复选多个选项 ，其INPUT标签的type属性设为checkbox。 复选框通常代表一种布尔类型的数据，若是符合其提示说明则选择 。 一组复选框并不会特别限定只允许选择其中一个选项 。,34,复选框属性,35,下拉列表框,下拉列表框的主体由、标签所组成，而其内容选项则是使用标签来设定 。 选项1 选项2 ,36,下拉列表框属性,37,提交按钮与重置按钮,发送按钮：当用户单击按钮后可将数据传送給程序处理。 重设按钮：将输入与选择的数据清除。 属性value用来设定按钮上的显示文字。,特效和多媒体处理,实现滚动效果 实现滚动效果的语法格式如下所示。 滚动内容 ,特效和多媒体处理,设置背景音乐 1代码指定方式 现实中通常使用标记来实现，使用此标记的语法格式如下所示。 ,40,2使用媒体插件 在现实中通常使用标记来实现，使用此标记的语法格式如下所示。 常用属性： Autostart:取true或false，是否自动播放 Loop: 取正整数，重复播放次数 Width、Height:取正整数，播放器的宽高。,特效和多媒体处理,插入Flash 在页面中可以通过标记插入Flash，使用此标记的语法格式如下所示。 ,特效和多媒体处理,使用ActiveX 控件 通过标记可以在页面中插入ActiveX控件，使用此标记的语法格式如下所示。 ,43,HTML小结： 所有的元素不区分大小写，但属性值大小写敏感 所有的标记都必须完结 HTML元素的各属性的取值必须使用”括起来，属性间空格隔开 利用开发工具编写使用的属性时更方便 表单元素必须掌握 网上的学习资料： /h.asp,44,章节内容,2.0 引言 2.1 HTML网页文档结构 2.2 常用HTML标签 2.3 CSS（Cascading Style Sheet）,2.3 CSS（Cascading Style Sheet）,CSS基础 我们看到的HTML文件也是由内容和格式组成，那