1、第二单元 HTML与CSS,网页组成,网页一般是由HTML代码、程序代码和注释组成。 HTML是由一些标记组成，标记一般是成对出现的，包含标记头“ ”和标记尾“ ” 。代码是用由ASP、VBSCRIPT、JAVASCRIPT等语言编写的，实现特定功能的语句。注释是用来说明某些语句或某部分的功能的文字，在网页运行时不被显示在浏览器中。注释的文字包含在“ ”里面。,例 2-1: 一个简单的网页网页标题一个简单的网页,网页文档结构,一个网页一般由三个HTML标记构成网页的基本骨架，即： 和这对标记，这对标记表示一个HTML网页的开始和结束。 和这对标记表示网页的头部信息，包括文档的标题、预定义变量等
2、。若不需头部信息则可省略此和标记。 和这对标记一般不能省略，表示文档的内容。,网页文档结构 续,编写网页文档的工具,HTML文档是一个纯文本文件，可以使用任何文本编辑器编写保存使用记事本 使用Dreamweaver 使用FrontPage,HTML语法,HTML语言一般遵循以下原则： 1、标记不区分大小写的， 和 是相同的。 2、一行可以写多个不同的标记，一对标记也可以写在不同的行中，不需用续行的标记符。 3、每一对标记不能交叉使用，只能嵌套使用 例如：HTML文档的基本结构，正文从这里开始。,在HTML文档源码中的段落标志、空格、换行在浏览器浏览时不会显示其效果的。若要在浏览器中浏览段落的效
3、果在源码中用“ ”把文字包含其内；若要显示空格的效果在源码中用“”表示；若要显示换行的效果在源码中要换行的位置插入“ ”标记。 特殊字符：HTML语言中定义的一些特殊的字符，不能在HTML文档中不能直接从键盘输入小于号、双引号“”等，而应在HTML源码中输入相应的符号。如小于号、双引号“”分别对应着<、>、"。 HTML文档中的任何一个对象都要受制于一个或多个标记。,HTML语法续,例 2-2: 语法应用举例网页标题一个简单的网页,HTML标记,标记是HTML文档中一些有特定意义的符号，这些符号指明内容的含义或结构。标记总是放在三角括号中，大多数标记都是成对出现的，表示开始和结
4、束。,标记按出现的情况可分为： 双标记： 对象内容 例：段落内容。单标记： 比如换行标记 没有标记尾 再比如图像标记 也没标记尾 例: ,HTML标记 的分类,带有属性的标记： 对象内容例：石油化工学院 成组标记：table，form，ul, ol, dl, frameset，fieldset及其子标记等,HTML标记 的分类续,HTML元素的概念和分类(*),把HTML标记（如内容）和标记之间的内容组合称为HTML元素 1. 根据元素有无内容分类 “有内容的元素”是由起始标记、结束标记和两者之间的内容组成，其中元素内容既可以是文字内容，也可以是其他元素。 “空元素”则只有起始标记而没有结束标
5、记和元素内容，可见“空元素”对应单标记,2. 根据元素的排列方式分类,行内元素(inline)是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行 块级元素(block)是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。,常用HTML标记,页面标记 网页文本标记 网页图像标记 网页媒体标记 其他元素标记 代码和注释标记,常用页面标记,1. 标记用来标识Html文档的开始。而用来标识Html文档的结束，两个标签必须一块使用。 2. 和构成Html文档的开头部分，在此标签对之间可以使用、等等标签对，这些标签对都是描述Html文档相关信息的标签对，
6、标签对之间的内容是不会在浏览器的框内显示出来的。两个标签必须一块使用。,3. 是Html文档的主体部分，在此标签对之间可包含、等等众多的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标签必须一块使用。标签中还可以有以下常用属性：,常用页面标记续,常用页面标记续,标签中的属性,4. 浏览器窗口最上边蓝色标题栏部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在标签对之间加入您要显示的文本即可。注意：标签对只能放在标签对之间。,常用页面标记续,5. 框架集可以用来向浏览器窗口中装载多个Html文件。即每个Html文件占据一个框架，
7、而多个框架可以同时显示在同一个浏览器窗口中，它们组成了一个最大的框架，也即是一个包含多个Html文档的Html文件(我称它为主文档)。,常用页面标记续,标签放在之间，用来定义某一个具体的框架。标签具有src和name属性，这两个属性都是必须赋值的。src是此框架的源Html文件名(包括网络路径，即相对路径或网址)，浏览器将会在此帧中显示src指定的Html文件；name是此框架的名字，这个名字可用来指定Html文件显示在哪一个框架中。,常用页面标记续,常用文本格式标记,1. 标题标记 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个
8、等级的标题，n越小，标题字号就越大，以下列出所有等级的标题： 第一级标题 第二级标题 第三级标题 第四级标题 第五级标题 第六级标题,2. 段落标记 源文件中各行之间有换行，但是Web 浏览器忽略这些换行，只有遇到另一个标记时才开始新段落。用标记指明段落，浏览器忽略源文件中的任何缩进或空行，如果没有 标记，文档将被看作一个大段落处理。 注意：结束标记可以省略，这是因为当浏览器遇到一个标记时，它认为前一个段落到此结束。,常用文本格式标记续,3. 字体与样式标记 是一对很有用的标签对，它可以对输出文本的字体大小、颜色进行随意地改变。HTML语言 粗体 HTML语言 斜体 HTML语言 加下划线,常
9、用文本格式标记续,4. Div标签 称为区隔标记，没有任何内容上的意义，表示一块可显示 HTML 的区域。它被用来组合一大块的HTML代码并赋予一定的信息。 属性 align 可选值：center ; left ; right 。决定文字、图像、表格等居中、靠左或靠右。,常用文本格式标记续,常用文本格式标记（续）,5. 文本换行标记 例：春天来临，又到了播种耕种的季节 6. 水平线标记 例： 7. 文本中的字符实体 “”代表符号“”,列表标记,为了合理地组织文本，网页中常常要用到列表。在HTML中可以使用的列表标记有无序列表、有序列表和定义列表三种。 无序列表(Unordered List)
10、, 有序列表(Ordered List) , 定义列表(Defined List) , , ,嵌套的无序列表示例,文章CSS教程 DOM教程XML教程参考XHTMLXMLCSS,图像标记,超链接标记,百度,表格标记,网页中的表格由标记定义，一个表格被分成许多行，每行又被分成许多个单元格，因此、是表格中三个最基本的标记，必须同时出现才有意义。 表格中的单元格能容纳网页中的任何元素，如图像，文本，列表，表格，表单等。 网页中表格的主要作用：网页布局,例：下面这段代码在浏览器中如何显示, row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
11、,表格标记的常见属性,例：设置表格边框为20象素的效果,row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2,例：设置表格边框为0,row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2,可见：设置表格边框为0时，会使单元格边框也变为0象素，而设置表格边框为其他数值时，不会影响单元格边框的宽,例：设置边框颜色为青色,row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2,单元格标记的常见属性,注意：单元格td无border属性，因此无法设置单元
12、格边框的宽度，单元格边框宽度只能是1或0,单元格的合并属性,课程表 星期一,看代码画表格,1 2 3 ,表单标记,表单主要功能是提供给用户输入信息的窗口并收集浏览者填写的信息。它是网站实现互动功能的重要组成部分。 网页中的表单 用户注册表单 提交搜索表单 用户登录表单,表单标记,表单的功能,表单可以用于调查、订购、搜索等功能。一般的表单由两部分组成，一是描述表单元素的html源代码，二是用来处理用户所填信息的程序（暂时不学）。表单信息处理的过程：当单击表单中的提交按纽时，输入在表单中的信息就会上传到服务器中，然后由服务器中的有关应用程序进行处理，处理后或者将用户提交的信息储存在服务器端的数据库
13、中，或者将有关的信息返回到客户端浏览器中。,表单标记的组成,一个表单的标记至少应包括三个组成部分：(1) 表单标记：这里包含了处理表单数据所用动态网页的URL以及数据提交到服务器的方法。(2)表单元素：例如文本框、下拉菜单、复选框和单选框等。(3)提交按钮：将数据传送到服务器上的动态网页。,表单标记,标记用来创建一个表单域，即定义表单的开始和结束位置，这一标记有几方面的作用。第一，限定表单的范围。所有表单对象，都要插入到表单域之中。单击提交按纽时，提交的也是表单范围之内的内容。第二，携带表单的相关信息，例如处理表单的脚本程序的位置（action）、提交表单的方法（method）等。这些信息对于
14、浏览者是不可见的，但对于处理表单确起着决定性的作用,form标记的属性面板,name,target,method,action,enctype,form标记常见属性,1. method： get或post get方式提交的表单信息是非安全方式，附加在URL地址后面（例如百度） url?表单元素1的name=表单元素1的value &表单元素2的name=表单元素2的value,form标记常见属性action,2. action：接一个动态网页名设置action属性后会产生两个作用： 1）点击该表单的提交按钮将会链接到该网页 2 ）同时还会将表单中输入的数据发送给该网页进行处理 如果将acti
15、on属性值设置为空将由当前网页对提交数据进行处理,表单将数据提交给动态页后，动态网页通过request对象取下数据，就能进行处理了，如把这些数据存入数据库，或按这些数据进行查询等。 你输入的密码是:“&PS %,form标记常见属性,enctype：一般不需要设置，如果表单中有文件上传对象，则设置该属性值为multipart/form-data name和id：在表单的接收页面只接收有name属性的表单元素，赋ID的元素通过表单是接收不到值的 target：接收页是否在新窗口打开，和a标记的该属性类似,表单中的元素,表单域form标记中包含的表单标记主要有input，select (optio
16、n)，textarea等 在Dreamwear中表单对象面板中的对象与这些标记的对应关系是：,表单中的元素,1. input-表单元素的通用标记input标记是收集用户输入信息的标记，是一个单标记，其含义由type属性决定。input标记的必备属性（必须具有的属性） 1）name：表单元素的名称，由于表单中通常有很多表单元素，服务器要根据name属性获取相应元素的内容。 2）type：确定input标记的含义其他常见属性 value （input标记的取值） size：文本域的宽度,input-type属性的取值,input标记的type属性总共有10种取值，含义如表1所示：,文本域type=
17、“text“,文本域举例：input标记中的size属性是定义文本域的宽度,单选框type=“radio”,单选框举例： 女性 男性 checked属性设定初始时单选按钮哪项处于选定状态，同一组单选按钮name属性的值必须相同，这样这一组单选框中只有一个能被选中。,复选框type=“checkbox”,复选框，可以选中多项 看书 上网 听音乐,文件域type=“file“, 供上传文件用，需要服务器端的上传组件配合 文件域对表单标记form有特殊要求，method必须设为post，MIME类型必须为multipart/form-data,按钮,提交按钮(type=“submit“) 将表单中所
18、有具有name属性的元素内容发送到服务器端指定的应用程序 重置按钮(type=“reset“) 用户在填写表单时，若希望重新填写，单击该按钮将使全部表单元素的值还原为初始值 普通按钮(type=“button“) 该按钮没有内在行为，但可用javascript为其指定动作,图像域type=“image“,即图像按钮，用一张图片做按钮，功能和提交按钮相同 ,下拉菜单和标记,标记是下拉菜单框或列表框标记，由其size属性决定的元素，如果该标记没有设置size属性，那么表示为下拉菜单框，如果设置了size属性，则变成了列表框。下列列表框中的每一项由标记定义。 例如：你的籍贯： 湖南广东江苏 四川,去
19、掉size属性后,多行文本域标记,是多行文本域标记，用于让浏览者输入多行文本，如发表评论或留言，跟帖。这是一个有4行，每行可容纳40个字符，换行方式为虚拟的多行文本域。,下面的表单元素代码都有错误，你能指出它们分别错在哪里吗？ Your story. ,CSS,CSS概述,CSS也是一种标记语言，是用来控制网页外观的,是层叠样式表单（Cascading Style Sheet）的简称，CSS可以用来对网页的外观进行很灵活地控制。CSS样式具有以下几个优点： （1）创建一个CSS样式，可多次用于一个网页文档，也可用于多个网页文档。 （2）如果修改了某个CSS样式，则文档中所有应用该样式的格式会自
20、动得到更新。 （3）CSS样式可以为网页中的元素设置各种过滤器，从而产生特殊效果，如阴影、辉光、模糊、透明等。 （4）可以精确地控制网页中各元素的位置。 （5）由于是直接的HTML格式的代码，因而网页打开速度快。,CSS样式的组成,一条CSS样式规则由选择器(selector)和声明(declarations)组成。 选择器是为了选中网页中某些元素的，选择器可以是一个HTML标记名，也可以是自己定义的样式名。,最常用的CSS属性,例：CSS样式应用CSS样式基础 CSS样式可以定义任何一个HTML标记。,在HTML中引入CSS的方法,HTML和CSS是两种作用不同的语言，必须通过一些方法，将C
21、SS与HTML挂接在一起，才能正常工作。 在HTML中，引入CSS的方法有 行内式 嵌入式 导入式 链接式,1行内式 行内式是通过标记把CSS样式表的内容直接放到HTML页面的区里，这些定义的样式就应用到页面中了，其语法格式如下：,例：CSS头部文件 CSS头部文件 在HTML文件的头部应用内部样式表方法添加CSS。,2.嵌入式 嵌入式是混合在HTML标记里使用的，即在HTML标记里加入style标记。用这种方法，可以很简单的对某个元素单独定义样式。其语法格式如下： ,例：编写嵌入式CSS样式编写嵌入式CSS样式在HTML文件的主体应用嵌入式方法添加CSS。,3链接式 链入外部样式表是要先把样
22、式表保存为一个单独的CSS样式文件中，然后在页面中用标记链接这个文件，注意这个标记必须放到页面的区内，其语法格式如下： ,例：创建一个CSS样式文件 mystyle.css，内容如下：,例：链接外部CSS样式文件链接外部CSS文件外部CSS文件在HTML文件应用链入外部样式表方法调用外部CSS。百度,4. 导入式 导入式是指使用标记导入一个外部CSS样式，可放在标记外也可以放在标记内，但根据语法规则，一般都是放在标记内，其语法格式如下：import url（外部样式表文件地址）； ,链接式和导入式的比较,链接式和导入式的目的都是将一个独立的CSS文件引入到HTML文件，其优点是可以让很多个网页
23、共享一个CSS文件，在制作网站时主要应采用链接式方法引入CSS，使网站内的所有网页风格统一。 链接式和导入式最大的区别在于链接式使用HTML的标记引入外部CSS文件，而导入式则是用CSS的规则引入外部CSS文件，因此它们的语法不同,CSS选择器的分类,标记选择器 类选择器 id选择器 伪类选择器,标记选择器,标记选择器将拥有同一个标记的所有元素全部选中。如：p /* 标记选择器 */color:blue;font-size:18px; ,例：CSS样式应用CSS样式基础 CSS样式可以定义任何一个HTML标记。,类选择器,例：CSS样式应用选择器之标记选择器1 应用第一种class选择器样式
24、应用第二种class选择器样式 同时应两种class选择器样式 h3同样适用 ,id选择器,id选择器以半角“#”开头，且id名称的第一个字母不能为数字,ID选择器, #onefont-weight:bold; /* 粗体 */ #two font-size:30px; /* 字体大小 */color:#009900; /* 颜色 */ ID选择器1 ID选择器2 ID选择器3 ID选择器3,伪类选择器,所谓伪类就是指元素在某个时候的状态。 网页中的超链接标记能响应浏览者的点击。a标记有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active，伪类选择器的标记和伪类之间用“:”隔开。,a:hover,color: green;,font-size: 20px;,标记名,属性,值,属性,值,声明,声明,伪类名,通过伪类选择器制作动态超链接,伪类选择器可以看成是一种特殊的标记选择器，它用来选中在某种状态下的标记 可以定义标记在四种不同的状态下具有不同的颜色，是否有下划线。 一、伪类选择器的书写应遵循LVHA的顺序，即出现的顺序应为a:link a:visited a:hover a:active。 二、各种伪类选择器将继承a标记选择器定义的样式。,例：伪类选择器举例：,
