1、Html基础入门培训,培训:乐凯,HTML英语意思是:Hypertext Marked Language,即超文本标记语言通过HTML可以实现页面之间的跳转通过HTML可以展现多媒体的效果标签“HTML与XMLHTML控制显示XML存储和交换数据,HTML的基本结构文档头、文档体头部信息文档主体,正文部分,HTML的基本结构下面是一个最基本的超文本文档的源码:一个简单的HTML示例欢迎光临我的主页这是我第一次做主页,无论怎么样,我都会努力做好!,超文本中的标签单标签 双标签 内容 强调标签属性,标题换行段落标签水平线段文字的大小设置文字的字体与样式文字的颜色位置控制综合示例,标题HTML中提供
2、了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题,n越小,标题字号就越大第一级标题第二级标题第三级标题第四级标题第五级标题第六级标题,换行在HTML语言规范里,每当浏览器窗口被缩小时,浏览器会自动将右边的文字转折至下一行。所以,编写者对于自己需要断行的地方,应加上标签,段落标签文件段落的开始由来标记,段落的结束由来标记,是可以省略的,因为下一个的开始就意味着上一个的结束标签还有一个属性ALING,它用来指名字符显示时的对齐方式,一般值有CENTER、LEFT、RIGHT三种,这个标签可以在屏幕上显示一条水平线,用以分割页面中的不同部分。有四个属性:size水平线的宽度width
3、水平线的长,用占屏幕宽度的百分比或象素值来表示align水平线的对齐方式,有LEFT RIGHT CENTER三种noshade线段无阴影属性,为实心线段,文字的大小设置提供设置字号大小的是FONT,FONT有一个属性SIZE,通过指定SIZE属性就能设置字号大小,而SIZE属性的有效值范围为17,其中缺省值为3。我们可以SIZE属性值之前加上“”、“”字符,来指定相对于字号初始值的增量或减量。,文字的字体与样式HTML4.0提供了定义字体的功能,用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型,只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。,
4、文字的字体与样式为了让文字富有变化,或者为了着意强调某一部分,HTML提供了一些标签产生这些效果,现将常用的标签列举如下:粗体HTML语言斜体HTML语言加下划线HTML语言打字机字体HTML语言大型字体HTML语言小型字体HTML语言闪烁效果HTML语言 表示强调,一般为斜体HTML语言 表示特别强调,一般为粗体HTML语言 用于引证、举例,一般为斜体HTML语言,文字颜色设置格式如下:这里的颜色值可以是一个十六进制数(用“#作为前缀),也可以是以下16种颜色名称如:Black = #000000 Green = #008000Red = #FF0000 Blue = #0000FF,位置控
5、制通过ALIGN属性可以选择文字或图片的对齐方式,LEFT表示向左对齐,RIGHT表示向右对齐,CENTER表示居中。基本语法如下:#leftrightcenter另外,ALIGN属性也常常用在其它标签中,引起其内容位置的变动。如:#,前面我们所讲是单独使用一个标签的方法,在实际的编写中,许多标签和一些属性是结合起来使用的,比如:文字,列表无序号列表序号列表定义性列表,无序号列表无序号列表使用的一对标签是,每一个列表项前使用。其结构如下所示:第一项第二项第三项,序号列表序号列表和无序号列表的使用方法基本相同,它使用标签,每一个列表项前使用。每个项目都有前后顺序之分,多数用数字表示。其结构如下所
6、示:第一项第二项第三项,定义性列表定义性列表可以用来给每一个列表项再加上一段说明性文字,说明独立于列表项另起一行显示。在应用中,列表项使用标签标明,说明性文字使用表示。在定义性列表中,还有一个属性是COMPACT,使用这个属性后,说明文字和列表项将显示在同一行。其结构如下所示:第一项叙述第一项的定义第二项叙述第二项的定义第三项叙述第三项的定义,TABLE表格表格的基本结构表格的标题表格的尺寸设置表格内文字的对齐、布局跨多行、多列的表元表格的颜色,表格的基本结构. 定义表格.定义标题 定义表行 定义表头 定义表元(表格的具体数据),表格的标题表格标题的位置,可由ALIGN属性来设置,其位置分别由
7、表格上方和表格下方。下面为表格标题位置的设置格式。设置标题位于表格上方: . 设置标题位于表格下方: . ,表格尺寸设置表格的大小一般情况下,表格的总长度和总宽度是根据各行和各列的总和自动调整的,如果我们要直接固定表格的大小,可以使用下列方式:width和height属性分别指定表格一个固定的宽度和长度,n1和n2可以用像素来表示,也可以用百分比(与整个屏幕相比的大小比例)来表示,表格尺寸设置边框尺寸设置边框是用border属性来体现的,它表示表格的边框边厚度和框线。将border设成不同的值,有不同的效果。如: 定货单苹果香蕉葡萄200公斤200公斤100公斤 ,表格尺寸设置格间线宽度格与格
8、之间的线为格间线,它的宽度可以使用中的CELLSPACING属性加以调节。格式是:#表示要取用的像素值例: 定货单苹果香蕉葡萄200公斤200公斤100公斤 ,表格内文字的对齐/布局内容与格线之间的宽度我们还可以在中设置CELLPADDING属性,用来规定内容与格线之间的宽度。格式为:#表示要取用的像素值例: 定货单苹果香蕉葡萄200公斤200公斤100公斤 ,表格内文字的对齐/布局表格中数据的排列方式有两种,分别是左右排列和上下排列。左右排列是以ALIGN属性来设置,而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种:居左(left)、居右(right)和居中(center)
9、;而上下排列基本上比较常用的有四种:上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。 #=left, center, right #=top,middle,bottom,baseline ,表格内文字的对齐/布局左右排列居左居中居右 A B C ,表格内文字的对齐/布局上下排列 上齐居中 下齐基线 A B CD ,表格的颜色在表格中,既可以对整个表格填入底色,也可以对任何一行、一个表元使用背景色。表格的背景色彩 行的背景色彩 表元的背景色彩或#=rrggbb 16进制RGB数码, 或者是下列预定义色彩名称:Black, Olive, Teal, Red,
10、Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua,文件之间的链接超文本中的链接是其最重要的特性之一,使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如:链接文字标签表示一个链接的开始,表示链接的结束;属性“HREF定义了这个链接所指的地方;通过点击“链接文字”可以到达指定的文件。西南财经大学本地链接URL链接目录链接,本地链接以绝对路径表示:文件的链接以相对路径表示:文件的链接链接上一目录中的文件:IP地址,URL链接URL链接的形式是:协议名:/主
11、机.域名路径文件名其中协议包括:file本地系统文件httpWWW服务器ftpftp服务器telnet基于TELNET的协议mailto电子邮件newsUsenet新闻组gopherGOPHER服务器waisWAIS服务器写在HTML文件中,链接其他主机上的文件时,格式如下:西南财大财大bbs,目录链接直接指到某文件上部、下部或是中央部分制作目录链接方法是:首先把把某段落设置为链接位置,格式是:A NAME=链接位置名称”在调用此链接部分的文件,定义连接:链接文字如果是在一个文件内跳转,文件名可以省略不写。请看例子,CSS的必要性许多HTML元素都有外观属性,如果在元素中没有指定相应的值,那么
12、浏览器将使用这些属性的默认值。例如,元素中包含font-size属性,某个浏览器可能将这个属性的默认值设定为30个点(pt)而通过样式表则可以将该默认值更改为26个,这种改动可以只对某个元素有效,也可以对这个文档中所有的元素都有效。,CSS的必要性样式表的某些功能可能需要借助元素的各种属性、字体的样式以及字体的尺寸元素来实现然而,利用样式表可以对这些样式说明进行更精确、更一致的描述目前已经不提倡直接绝大多数用于描述外观的元素属性,而是建议使用样式表。,外部样式表在网站建设中,往往希望网站的整体风格能够一致,这就是外部样式表的主要应用目的外部样式表并不是它们所适用的文档的一部分。外部样式表单独存
13、储,并且在所有使用它们的文档中都要进行说明。,可以用MIME类型text/css将外部样式表编写成一些文本文件,它们可以存储在因特网上的任何一台计算机中,浏览器获取外部样式表就如同获取文档一样。网页首部的元素也可用于指定外部样式表,在元素中,rel属性用于指定被链接的文档与包含该链接的文档之间的关系,而href属性用于指定样式表文档的URL地址,外部样式表的引用指向一个外部样式表的链接必须放在HTML基本文档的头部(header容器中)。,样式说明格式文档层样式说明在文档头部以一个元素内容的形式出现,该说明的格式与内置样式表的格式有很大的区别。,在元素中内容的一般形式如下:,样式说明格式元素中
14、的type属性向浏览器指明了在元素中样式说明的类型。在上面这个例子中,type属性被设置成“text/css,即层叠样式表。由于还有许多其他类型的样式表,因此样式说明的类型还是必要的。,样式说明格式注意,元素中的规则列表是出现在HTML注释中的。由于这些规则列表并不是真正的HTML,在规则列表中所包含的是提供给浏览器的有关外观样式的信息,而不是使用者看到的内容。,元素的注释由于元素的内容是一个HTML注释,所以必须使用一种不同的方法在元素的内容中添加真正的注释在元素中这种注释由“/*开始至“*/结束。,属性和属性值HTML元素中的属性可以分成六大类:字体颜色及背景文本边框与布局列表元素符等。,
15、属性和属性值属性值可以有多种表示形式。当关键字属性值的可选范围有限并且均进行了预定义,那么就可以使用这些关键字属性值,例如underline和small。,属性值度量标准与前述相同。但长度属性值后面必须紧跟着用两个字符的缩写词表示的单位名,在数字和单位名之间不能留有空格。可能出现的单位名包括:px(像素)/ in(英寸)/ cm(厘米)/ mm(毫米)/ pt(点)和百分比,百分比形式的值是在数字后面加上百分号。,在元素中定义属性值之后,该元素中内嵌的所有元素将通过继承获得这些属性值。因此,在元素中使用一个内置样式表设置某个属性值将会有效地影响整个文档中该属性值的设置。除非发生属性值的替代现象
16、,否则文档中的每个元素都将继承中的属性值。,和元素在许多情况下,要求某些特殊的字体属性只应用于整个段落中的部分文本。例如,将同一行中的某个字或词组使用不同的字体尺寸或颜色显示出来通常是很有帮助的。,元素元素就是针对此目的设计的。例如,在下例中,“全面”这个词与段落中的其他部分并没有区别显示。能够对文本进行全面控制是一件很有意思的事,元素元素的惟一用法是使用内置样式表更改属性值,例如:能够对文本进行全面控制是一件很有意思的事,元素在网页中,节是很常见的形式,每节由若干段落构成,而且每节都有各自的外观表示样式。虽然在段落中使用样式类。然而,往往在设计中希望不仅是对各个段落,而且可以对网页中的节进行样式设置。这里,元素可以实现这个要求。因此它的主要用途是指定网页中某节或某区域的外观展示细节。,