Web设计-第01章-HTML介绍.ppt

信息学院陈伟锋,Web开发技术（.NET）,HTML语言介绍(1),什么是HTML?,HTML-HyperTextMark-upLanguage超文本标记语言HTML不是编程语言，而是一种根据需要把相关信息链接起来的信息管理技术，是一种用于编写超文本的标记语言。HTML文件的后缀名可以是*.htm或*.html，本质上就是一种文本文件，可以使用任何的文本编辑器(如记事本/Editplus等)来编写，也可以利用所见即所得的编辑器(如DreamWeaver、FrontPage)来编写。,什么是HTTP?,HTTP-HyperTextTransferProtocolHTTP协议(超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议。HTTP协议采用TCP80端口。,WWW介绍,WWW-WorldWideWebWWW即万维网，通常也简称为Web，它是由无数的商业、教育、娱乐等资料组成的一个庞大的信息空间。我们可以在这个信息空间中遨游、浏览、搜索资料，最终呈现在浏览器中的信息，就是web页面，这些页面绝大部分都是由HTML语言所编写的。所以，绝大部分web网站的域名都是以www开头，但并不是必须的。,一个最简单的HTML页面,第一步：如果您使用Windows，请启动记事本。第二步：键入以下文本:页面标题这是我的第一个页面！第三步：将这个文件存为mypage.htm。第四步：双击该文件，浏览器就会显示这个页面。,HTML页面解释,HTML文件中的第一个标签是。这个标签告诉浏览器这个HTML文件的开始点。文件中最后一个标签是。这个标签告诉您的浏览器，这是HTML文件的结束点。位于标签和标签之间的文本是头信息。头信息不会显示在浏览器窗口中。标签中的文本是文件的标题。标题会显示在浏览器的标题栏。标签中的文本是将被浏览器显示出来的文本。和标签中的文本将以粗体显示。,HTML文件的基本结构,HTML基本结构如下:标题部分正文部分,HTML标签,HTML标签用来组成HTML文件。HTML标签两端有两个包括字符：,这两个包括字符被称为角括号。HTML标签一般成对出现，比如和。一对标签的前面一个是开始标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容。HTML标签是大小写无关的，跟表示的意思是一样的。但一般建议用小写标签。,HTML标签的三种形式,关闭型标签:文本例如:这是我的第一个网页!非关闭型标签:例如:换行标签、水平线标签等。带可选属性的标签:文本例如:这是我的第一个网页!,举例,下面是一个HTML元素:这是粗体文字!此HTML元素以开始标签起始，内容是：这是粗体文字!，以结束标签中止。标签的目的是定义一个需要被显示成粗体的HTML元素。,举例,下面也是一个HTML元素：这是我的第一个页面.这是粗体文字!此HTML标签以开始标签起始，终止于结束标签。标签的目的是定义一个HTML元素，使其包含HTML文档的主体。,标签属性,标签属性:标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。属性通常由属性名和值成对出现，就像这样：name=value。属性通常是附加给HTML元素的开始标签的。,标签属性,属性值的引号问题:属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。举例:name=JohnShotGunNelson。注意:中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。,标签属性举例,举例:标签定义了HTML页面的主体元素。使用一个附加的bgcolor属性，表明你页面的背景色是红色的。例如:这是蓝色的字体！,基本标签-段落标签,段落标签:HTML自动在一个段落前后各添加一个空行。Align属性可用来设置段落按左(left)、中(center)、右(right)对齐。举例:静夜思-李白床前明月光,疑是地上霜,举头望明月,低头思故乡。,基本标签-换行标签,换行标签:当需要结束一行，并且不想开始新段落时，使用标签。标签不管放在什么位置，都能够强制换行。举例:静夜思-李白床前明月光,疑是地上霜,举头望明月,低头思故乡。,基本标签-空格问题,空格的问题:不要想在编辑器中写一些空行和空格来协助排版。HTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。一点附加信息：在HTML里面，一个空行也只被当作一个空格来处理。如果想显示一个空格，则需要输入有两个空格。,基本标签-字符实体,字符实体问题:在HTML中，有些字符拥有特殊含义，比如小于号定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。一个字符实体拥有三个部分：一个and符号(特别注意:实体名是大小写敏感的。,基本标签-字符实体,常用的字符实体:,例如:,基本标签-字符实体,常用的字符实体:,字符实体参考手册：,基本标签-标题标签,标题标签:、标题元素由标签到定义。定义了最大的标题，定义了最小的标题。HTML自动在一个标题元素前后各添加一个空行。举例:这是1级标题。这是2级标题。这是居中的3级标题。,基本标签-注释标签,注释标签:注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。但是可以通过html源文件查看到注释。举例:注释标签用来在HTML源文件中插入注释。,基本标签-水平线标签,水平线标签:其属性有:align、width、size、color此标签只有开始标记，没有结束标记。举例:这里有一条红色水平线。,基本标签-body标签,页面的背景颜色:页面的背景图片:页面的边距设置:topmargin和leftmargin默认值等于12。页面的链接设置:注意:link设置未使用的链接颜色,vlink设置已使用的链接的颜色，alink设置正在被点击的链接的颜色。,基本标签-背景音乐标签,页面的背景音乐1:注意:背景音乐标签是放在页面的头部里，loop=“-1”代表无限循环播放。注意:当窗口被最小化后，音乐将停止播放（依IE版本有所区别，但是仅支持微软IE）。页面的背景音乐2:,基本标签-body标签,补充:HTML颜色颜色有两种表示方式:一种是用颜色名称表示，比如blue表示蓝色。另外一种是用16进制的数值表示RGB的颜色值,如#FF0000代表红色,#0000FF代表蓝色。在W3C制定的HTML4.0标准中，16种颜色可以用颜色名称表示(aqua-浅绿色,black-黑色,blue-蓝色,fuchsia-紫红色,gray-灰色,green-绿色,lime,maroon-栗色,navy-藏青色,olive-橄榄色,purple-紫色,red-红色,silver-银白色,teal-凫蓝色,white-白色,yellow-黄色)，其它的颜色都要用16进制RGB颜色值表示。,基本标签-body标签,举例:页面标题此页面以图片为背景,左边距为50。,基本标签-文本格式标签,文本格式标签:粗体标签:粗体斜体标签:斜体下划线标签:下划线下标标签:H2O上标标签:32=9加重标签(通常是黑体):加重单词(通常是黑体),基本标签-字体标签,字体(font)标签:color属性:指定字体颜色。size属性:一般为1-7，最大为7，最小为1.face属性:指定字体种类，如黑体。举例:静夜思静夜思注意：在新标准中不建议使用这样的设置方式，而推荐使用style设定。,基本标签-滚动字幕标签,滚动字幕(marquee)标签:direction属性:left(向左滚动)、right(向右滚动)、top(向上滚动)、down(向下滚动)behavior属性:滚动方式,其值为scroll(循环滚动,默认)、slide(只滚动一次)、alternate(来回往复滚动)width属性:指定水平滚动范围。height属性:指定垂直滚动范围。hspace属性:指定水平滚动的起始或结束位置。vspace属性:指定垂直滚动的起始或结束位置。scrollamount属性:指定滚动速度(每次移动的象素点)。,基本标签-滚动字幕标签,滚动字幕(marquee)标签:举例:欢迎访问我的网站!,基本标签-图像标签,图像(image)标签:src属性:指定图像文件的位置和名称。align属性:指定图像周围文本的对齐方法,可取下面值:top、bottom、middle、left、right。width和height属性:指定图像的宽度和高度。alt属性:在浏览器装载图像失败的时候，浏览器将显示这个交互文本来代替图像。border属性:指定图像的边框的宽度。举例:岳飞像,基本标签-超文本标签,超文本链接标签:target属性:指定目标窗口的打开方式,其值有_blank、_self、_parent、_top举例:友情链接:新浪第1章课件下载岳飞介绍站长邮箱,基本标签-列表标签,列表:无序列表:列表项前面带有圆点符号()。有序列表:列表项前面带有数字编号(如1、2、3)。,基本标签-列表标签,无序列表标记:,列表内的每个项目用标记,结束标记为可选项。type属性定义了列表项符号,其值可能为square、disc、circle等。举例:我最喜爱的网络游戏:反恐精英传奇巨人,基本标签-列表标签,有序列表标记:,列表内的每个项目用标记,结束标记为可选项。指定列表的起始数字表示用大写字母作编号表示用大写字母作编号表示用小写字母作编号表示用大写罗马字母作编号表示用小写罗马字母作编号,基本标签-列表标签,有序列表标记:举例:我经常访问的门户网站有:新浪163雅虎搜狐,基本标签-表格标签,和标签:用来定义表格的开始和结束,主要的属性有:align属性:对齐方式,值有left、center、right。width属性:表格宽度,单位可以是百分比或象素。bgColor属性:表格的背景色。backGround属性:表格背景用图片显示。border属性:表格边框。borderColor属性:表格边框颜色。cellSpacing属性:两个单元格之间的距离。cellPadding属性:单元格内文字与边框的距离。,基本标签-表格标签,和标签:用来定义表格的标题,此项可省略。和标签:tr=tablerow,用来定义表格的一行。和标签:th=tablehead,用来定义表格的表头(标题栏),显示为粗体。其colspan属性可以实现HTML表格中一行跨越多列,即列的合并。其rowspan属性可以实现HTML表格中一列跨