HTML基础知识讲解(全)2009年04月25日星期六1852
HTML是网页主要的组成部分,基本上一个网页都是由HTML语言组成的,所以要学习网站怎样建设,必须从网页的基本语言学起。
先简单的介绍一下HTML语言(我们在这灌输大家的是能够实际操作),HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。神奇吗一点都不神奇,因为现在你看到的就是这种语言写的页面。
是呀,HTML并不是很神奇,只是因为你不是很了解它,现在咱们就开始接她的面纱:
一、HTML的组成结构(头部、眼睛、身体----好像一个人一样是不是?)
1、头部。只要你学过英语,你应该知道头怎么用英文写吧!yes,HEAD就是了;所以,头部的HTML写法就是head头部的内容head,简单不,大家注意一下,这两个非常相似,只是后一个比前一个多了“”符号。类似这样的以后会经常用到。
2、眼睛。就好像人的眼睛一样,它是心灵的窗口,而一个网页的眼睛应该就是它的页面的标题了,标题怎么说呢?title,yes!大家知道眼睛是长在头上的,所以啦title标题title这些应放在head和head之间。也就是
headtitle标题titlehead
3、身体。身体是网页最主要的部分了,因为前面讲的都不是页面所显现出来的,而大家所看到的页面页就是他的身体部分了(当然它的TITLE可以在浏览器的最左上角可以看到),身体----BODY,他的写法也就是:body页面内容body
最后,别忘了把这些部分组成一体----网页,所以咱们就用htmlhtml把他们给包起来。
好了,咱们来大体看看网页的结构:
html
head
title
标题
title
head
body
页面内容
body
html
我们了解了网页的主要框架,现在我们来详细的研究网页的内部细则:
先从它的身体部分(body) 开始:
欣赏一个网页时,一般先注意到的是这个页面的背景,如果有背景音乐,那就更吸引人了!
是不是呀,那么这些是怎么实现的呢?看下边:
1、背景颜色
body bgcolor=red我们发现多了个bgcolor其实就是backgroundcolor(背景颜色)的意思,bgcolor=red设置网页的背景颜色为红色,现在颜色一般都是#ff0000样式的。
2、背景图片
body backgroud=back-ground.gif中“backgroud”就是设置背景图片的啦,back-ground.gif 是背景图片的名字,为什么有的朋友也是如此写的,而网页却没有背景图片呢?其实back-ground.gif是该图片相对于这个页面的位置,比如你做的这个页面放在c我的网站,而背景图片的位置放在c我的网站images,那么就得这样写了:body backgroud=imagesback-ground.gif,注意两者的区别!
3、背景音乐
背景音乐和上边介绍的两个有很大的不同,它的代码是放在页面的头部headhead里,为什么在这里讲呢?就是因为它也是显示网页的时候我们首先接受到的信息。看看它的代码吧:bgsound src=background_sound.mid loop=-1
bgsound 不用说了吧背景声音,background_sound.mid是音乐的文件名,当然也得写它的相对路径哦(关于相对路径,可能有的网友,一下子不能搞明白,我们将会在其他板块介绍的)!loop,循环,那么loop=-1是什么意思呢?loop是bgsound 的一个属性,当然src也是了,后边跟得就是属性值了,那么loop=-1就是无限循环的意思,只要是页面打开,音乐不会停止的,loop=1说明循环一次,等于0就是不循环了,呵呵,简单不!
4、body其它属性:topmargin,leftmargin。有的朋友再做页面的时候,感觉文字或者表格怎么也不能靠在浏览器的最上边和最左边,怎么回事呢?因为一般我们用的制作软件或者说html语言默认的都是topmargin和leftmargin值等于12,如果你把他们的值设为0,你看看会有什么效果!如下比较一下body和body topmargin=0 leftmargin=0,有兴趣的朋友可以任意设置他们的值!
同样我们在这里继续讲一下它的body,因为它能直观的让大家观察到你所学到的成果。
这一讲,我们来学习字体及其属性,然后大家在学习完后制作一下,看看它的每一个属性所表现的效果。
字体,英文font,这html语言中也是它---font,下面咱们来研究一下font
1、标题字体h# 文字h# # =1,2,3,4,5,6
比如:h1今天天气真好!h1
注意:这些一般的用在标题上,所以起名叫标题字体;h# ...h# 这些标记显示黑体字;这些标记自动插入一个空行,不必用p 标记再加空行,因此在一行中无法使用不同大小的字体。
2、字体的大小,用于一般文字。
font size=# 文字font #=1, 2, 3, 4, 5, 6, 7 or +#, -#
basefont size=# #=1, 2, 3, 4, 5, 6, 7
例子:font size=7今天天气真好!font
3、逻辑字体(Logical Style)
下划线:u文字u,代码:code文字code,删除线:strike文字strike,闪烁:blink文字blink,增强:strong文字strong,强调:em文字em,示例:samp文字samp,还有老多,一般的这些了解一下就可以。
4、字体的标志,很常用的。粗体:b文字b,斜体:i文字i
5、字体颜色
指定颜色font color=# 文字font # =#rrggbb 16 进制数码,或者是下列预定义色彩:Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
对于16 进制编码的颜色,我们可以这样理解rrggbb六个字符:前两个表示红色,中间的两个表示绿色,后两个表示蓝色;那么,红色(red)ff0000,同样绿色(green)00ff00,蓝色0000ff;其它的颜色就是这几个字符(0-9,a-f)的组合。
比如:font color=red 文字font 红色文字
font color=#ff0000 文字font 红色文字
大家看看font color=#rrggbb 文字font是什么颜色的文字
6、客户端字体(Font Face)
font face=#, #, ..., # ... font #=客户端可获得的字体,什么是客户端,通俗的讲,就是你的电脑,face=#就是从你的电脑获得的字体,大家可以点击
客户端字体(Font Face)示例。
7、字符实体(Entities),字符实体一般用在把html里的符号显示在页面上比如、&等,如果你单独的打上,页面也可以显示,但如果你想显示b这几个字符,怎么办呢?就是它啦。 #=字符实体名称或者ascii 值
& &
这些只是一小部分,那么要显示b就要写成b了。
以上学到的我们可以综合使用:比如font size=2 color=#ff0000ib文字bifont
注意写的时候要前后一致前面b后边对应的也应该b
图像,也就是images,在html语法中用img来表示,其基本的语法是:
img src=# #=图象的URL,关于url就是指的是图像在网上的地址。
img alt=# #=在浏览器尚未完全读入图象时,在图象位置显示的文字;也是图像显示以后,当鼠标放在图片上时所显示的文字。
例子:img src=https://www.doczj.com/doc/037187266.html,forumimagescid4u-2.jpg
图象在页面中的对齐布局:
语法:img align=# #=left, center, right,使用图像的align属性,其实这一属性布置在这里用到,以后我们在学习表格的时候也会遇到align,它的值left, center, right就是他的中文意思,left居左,center居中,right居右。
例子:img src=https://www.doczj.com/doc/037187266.html,forumimagescid4u-2.jpg align=left 网人交流论坛欢迎您的光临!
图象和文字的对齐:
语法:img align=# #=top, middle, bottom,这里的align和上边的实现的效果不一样,大家从它的值可以看出,它所显示出来的是文字在图片的靠上边、中间、底端。大家可以对比这看看各自的效果,很容易记住哦!
图像的边框:img border=# #=value数字,指的是这个图像的边的宽度!
示例:img src=https://www.doczj.com/doc/037187266.html,forumimagescid4u-2.jpg border=1
大家可以在自己的机子上按照我给你的语法,写下来,看看效果就行了。
缺省情况下,表格在浏览器屏幕上左对齐,你可以使用TABLE的ALIGN属性来指定表格的对齐方式。ALIGN属性可以取值“left”、“center”和“right”。例如,让一个表格在屏幕中央显示可以使用:
TABLE ALIGN=“CENTER”
注意
使用TABLE的ALIGN属性要小心,不是所有的浏览器都能识别它。如果你要让表格显示在屏幕中央,使用CENTER标识符来包含表格会更安全些。
你可以使用TR的ALIGN属性来设置表格中每行元素的水平对齐方式,这个属性也可以取值“left”、“center”和“right”。要设置某一行中所有元素的竖直对齐方式,可以使用TR的V ALIGN属性,它可以取值“top”、“middle”和“botton”(缺省情况下取值“middle”)。
要更好地控制表格中某个表头或元素的排列方式,可以使用TH和TD标识符的ALIGN和V ALIGN属性,这两个属性的取值范围与TR相同,然而TH的TDALIGN和V ALIGN属性将会覆盖任何为整个一行指定的排列方式。
控制表项的空间
当浏览器显示一个表格时,它将每一列的宽度设置为这一列中最长表项的宽度。浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中的每一项。你可以使用TABLE的CELLPADDING和CELLSPACING属性来改变这一缺省值。
通过使用CELLPADDING属性,你可以为表格中的每一项安排一个更大的空间,使用CELLSPACING属性,你可以为表项之间留出一定的空间。这两个属性的值都以象素来指定。下面的例子说明了如何使用这两个属性(见图6.20):
HTML
HEAD TITLE Cell Spacing TITLEHEAD
BODY
TABLE BORDER=1
CAPTION Normal Table CAPTION
TR
TD First Column TD
TDSecond Column TD
TR
TABLE
HR
TABLE BORDER=1 CELLSPACING=20
CAPTION Table With Cell Spacing CAPTION
TR
TD First Column TD
TDSecond Column TD
TR
TABLE
HR
TABLE BORDER=1 CELLPADDING=20
CAPTION Table With Cell Padding CAPTION
TR
TD First Column TD
TDSecond Column TD
TR
TABLE
BODY
HTML
控制表格和表项的大小
某些时候你可能想让表格显示出来大一些,你可以用TABLE的WIDTH属性来控制表格的宽度,你可以为WIDTH属性提供宽度的绝对值或相对值。
当为WIDTH属性提供宽度的绝对值时,你用象素来表示。例如,要建立一个宽为100个象素的表格,可以用TABLE WIDTH=100。当然,并不能保证表格显示出来恰好是你指定的宽度,表项中的内容可能会迫使表格显示出来比WIDTH属性指定的值要宽。
另外,你也可以用相对值来指定表格的宽度,例如,如果你想让表格占有整个浏览器屏幕那么宽,你可以用TABLE WIDTH=“100%”,同样地,如果你在WIDTH属性中指定的百分数太小的话,浏览器显示出来的表格就不是那个宽度。
HEIGHT属性可以用来指定表格的整体高度,同样这个属性可取绝对值和相对值。但使用这个属性时要小心,即使Microsoft和Netscape的浏览器都能正确解释它,但它并不是HTML 3.2规范中的一部分。
你也可以用TD和TH标识符的WIDTH和HEIGHT属性来控制表格中某一表项的大小,你必须用绝对象素值来指定这些属性的值。你要知道当你设置这些值时,只不过是在为浏览器提供建议,浏览器尽量按你的意愿去做,但也有可能不能完全按你指定的方式来显示一个表格。
在表格中加入颜色和图象
根据HTML 3.2规范,表格不具有任何颜色属性。然而,值得庆幸的是Netscape和Microsoft 都扩展了HTML来让表格具有自己的背景色,两种浏览器都能识别TABLE标识符的BGCOLOR属性。
你可以使用颜色名或RGB值来设定BGCOLOR的值,下面的例子说明了这个属性的用法:
HTML
HEAD TITLE Table Color TITLE HEAD
BODY BGCOLOR=“white”
CENTER
TABLE BGCOLOR=“lightblue” CELLPADDING=10
TR
TD I have a blue background TD
TR
TABLE
CENTER
BODY
HTML
当这个例子中的文字在浏览器上显示时,它处于一个浅蓝色的框中,这对于突出主页上主体文字中某些特定的文本是很有用的。例如,你可以使用这种方法来突出一个引用、标题或是网页上一个简短的注释。
你也可以为表格中某一行甚至是某一个表项使用BGCOLOR属性。例如,可以用不同的颜色来区分表格中不同列的数据。
BGCOLOR属性的一个更令人兴奋的用处可能是设置你网页的整体颜色,如果你将表格的宽度设为屏幕的宽度,你可以建立一个具有多列的网页,而每一列都具有不同的颜色。下面的例子建立了一个有两列不同颜色的网页:
HTML
HEAD TITLE Two Color Columns TITLE HEAD
BODY BGCOLOR=“white”
CENTER
TABLE WIDTH=“100%” HEIGHT=“100%”
TR
TD BGCOLOR=“Olive” ALIGN=“center” I have a olive background TD
TD BGCOLOR=“Aqua” ALIGN=“center” I have a aqua background TD
TR
TABLE
CENTER
BODY
HTML
Netscape和Microsoft的浏览器都允许你为表格设定背景图片(见图 6.21),你可以通过TABLE标识符的BACKGROUND属性来指定一幅图象:
HTML
HEAD TITLE Two Color Columns TITLE HEAD
BODY BGCOLOR=“white”
CENTER
TABLE WIDTH=“50%” HEIGHT=“100%” BACKGROUND=“myimage.gif”
TR
TD ALIGN=“center” I have a checkered background TD
TR
TABLE
CENTER
BODY
HTML
Netscape Navigator 4.0和Internet Explorer 3.0及4.0还允许你在表格的某一行或某个表项使用BACKGROUND属性,通过为不同的表项使用不同的背景图象,你可以建立一个可视性非常强的网页。
表格作为子页
TABLE标识符最初被引入HTML是用来格式化地显示信息。然而,随着时间的推移,这个标识符的属性被大大地扩充了,现在可以将TABLE看成是用来在网页中建立一个子页的标识符。这个标识符被扩展出了那么多的属性,以致于现在它很象BODY标识符了。在Netscape 和Microsoft的浏览器上,TABLE具有许多和BODY相同的属性,你可以为表格指定它自己的背景色和图象。另外TABLE标识符还能包含所有能在BODY中包含的HTML标识符。
然而,TABLE具有一个比BODY更大的优势,每一个HTML文件必须有且只有一个BODY 标识符,但对于TABLE来说,则没有这种限制,你可以在HTML文件中包含任意数目的TABLE。
当你设计网页时,不要让TABLE这个名字愚弄了你。TABLE不仅仅用于建立表格,还可以在你的网页上建立子页,当你想把单个网页分成多个部分时,就用TABLE标识符。
小结
本章讲述了一些重要的HTML标识符。例如,你现在知道了如何建立HTML窗体来让你的网页具有交互性。你还学习了一些对信息进行列表的有用的HTML标识符。最后,你学习了怎样用表格来组织信息,以及怎样用表格来为你的网点进行高级网页布局。
我们讲了关于《控制表格及其表项的对齐方式》,在这里我要讲讲表格及其属性,然后大家在复习一下上一节的内容,这样就会有事半功倍的感觉。
表格,一般的用于对网页的内容进行排版,比如文字放在页面的某个位置,你就可以做个表格,然后设置一下表格的属性,它文字放在表格的某个单元个里,就行了;其实用过word 的朋友应该非常明白的。除了页面的排版外,表格还可以制作出非常好看的效果,比如按钮、变色、边线等等。大家要会灵活的运用。
看看表格的基本语法:table...table - 定义表格
tr ...tr- 定义表行
th ...th- 定义表头
td ...td- 定义表元
下面看看它的示例:
table border=1 !--border是表格的边框属性,=“1”,即边框的宽为一象素--
tr !--定义表格的行--
thFoodththDrinkththSweetth!--定义表格的表头,即标题--
tr !--行结束--
tr
tdAtdtdBtdtdCtd !--定义表格的表元--
tr
table
不带边框的表格:
table
tr
thFoodththDrinkththSweetth
tr
tr
tdAtdtdBtdtdCtd
tr
table
Food Drink Sweet
A B C
跨多行、多列的表元(Table Span)
跨多列的表元th colspan=#
table border
trth colspan=3 Morning Menuth !--colspan=3,跨三列表元-- trthFoodth thDrinkth thSweetth
trtdAtdtdBtdtdCtd
table
跨多行的表元th rowspan=#
table border
trth rowspan=3 Morning Menuth!--rowspan=3,跨三行表元-- thFoodth tdAtdtr
trthDrinkth tdBtdtr
trthSweetth tdCtdtr
table
表格尺寸设置table border=#边框尺寸设置:
table border=10
trthFoodththDrinkththSweetth trtdAtdtdBtdtdCtd
table
table border width=# height=#表格尺寸设置:
table border width=170 height=100 trthFoodththDrinkththSweetth trtdAtdtdBtdtdCtd
table
table border cellspacing=#表元间隙设置:
table border cellspacing=10 trthFoodththDrinkththSweetth trtdAtdtdBtdtdCtd
table
table border cellpadding=#表元内部空白设置:
table border cellpadding=10 trthFoodththDrinkththSweetth trtdAtdtdBtdtdCtd
table
表格内文字的对齐布局
tr align=#
th align=# #=left, center, right
td align=#
table border width=160
tr
thFoodththDrinkththSweetth
tr
td align=leftAtd
td align=centerBtd
td align=rightCtd
table
tr valign=#
th valign=# #=top, middle, bottom, baseline
td valign=#
table border height=100
tr
thFoodththDrinkth
thSweetththOtherth tr
td valign=topAtd
td valign=middleBtd
td valign=bottomCtd
td valign=baselineDtd table
HTML5教程 什么是HTML5? HTML5 将成为HTML、XHTML 以及HTML DOM 的新标准。 HTML 的上一个版本诞生于1999 年。自从那以后,Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些HTML5 支持。 你是不是多少有了解一点,但是你却对这个不精啊!可以进群交流,⑤①④①⑥⑦⑥⑦⑧。HTML5 是如何起步的? HTML5 是W3C 与WHATWG 合作的结果。 编者注:W3C 指World Wide Web Consortium,万维网联盟。 编者注:WHATWG 指Web Hypertext Application Technology Working Group。WHATWG 致力于web 表单和应用程序,而W3C 专注于XHTML 2.0。在2006 年,双方决定进行合作,来创建一个新版本的HTML。 为HTML5 建立的一些规则: ?新特性应该基于HTML、CSS、DOM 以及JavaScript。 ?减少对外部插件的需求(比如Flash) ?更优秀的错误处理 ?更多取代脚本的标记 ?HTML5 应该独立于设备 ?开发进程应对公众透明 新特性 HTML5 中的一些有趣的新特性: ?用于绘画的canvas 元素
?用于媒介回放的video 和audio 元素 ?对本地离线存储的更好的支持 ?新的特殊内容元素,比如article、footer、header、nav、section ?新的表单控件,比如calendar、date、time、email、url、search 浏览器支持 最新版本的Safari、Chrome、Firefox 以及Opera 支持某些HTML5 特性。Internet Explorer 9 将支持某些HTML5 特性。 HTML 5 视频 许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。 Web 上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准。 今天,大多数视频是通过插件(比如Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过video 元素来包含视频的标准方法。 视频格式 当前,video 元素支持两种视频格式: Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg X X X MPEG 4 X X Ogg = 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件 MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件
HTML知识点总结 第一章知识总结 1.HTML文档结构(括号里面的是注释)
(头部部分) (可写可不写)3)
(段落的对其方式) 换行标签
6.图片标签
(align是用于调整图片相对于周围文本的对其方式) 7.文字布局 1)水平线
HTML知识点汇总
HTML知识点汇总 第一章HTML基础知识 1、HTML简介 HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language,标准通用标识语言)中的一个子集演变而来的。 2、HTML的标记组成 HTML用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来,而且是成对出现的,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。如
、 等 1)单标记:有些标记能完整的表达标记里的意思,只须在尖括号中输入标记名即可,这类标记叫 单标记。XHTML中要求单标记也必须闭合,即在标记“>”前添加斜杠。常见的单标记如
、
等。 2)双标记:双标记有头有尾,且前面的标记与后面的标记保持一致,但在后面的标记前有斜线, 语法形如:<标记>内容标记>。例如:段落 3)XHTML要求所有标记均为小写,且所有标记属性必须添加双引号 4)标记对不能交叉 3、HTML基本结构网页标题 1)标记对不能放在 标记对中,同理,其它表示内容的标记也不能放在标记对 中 2)表示HTML语言,在里面包含头部()和内容体 ()。 1页HTML笔试题目(附答案)HTML基础知识笔试题目(附答案)
) ) web 页的软件? (B )(选择1项) ) Internet Explorer ) FTP A ) place=middle B C ) align=center D 8、 {HTML 题目}将当前页面的背景色为 蓝色, 择1项) A ) bgcolor="blue" C ) backcolor="blue" 9、 {HTML 题目} A 文件夹与 现在我们希望在 B D B 文件夹是同级文件夹,其中 ) type=middle ) type=center 应该使用哪一句代码来描述此种设置 ( A ) (选 ) bgground="blue" ) background="blue" A 下有 a.htm , B 下有 b.htm 文件, a.htm 文件中创建超链接,链接到 b.htm ,应该在 a.htm 页面代码中如何描 1、 {HTML 题目}在HTML 页面中制作一个图像,想要在鼠标指向这个图像时浮出一条提示信 息,应该使用的参数是 :( C ) ( 选择 1 项) A) POP B) SRC C) ALT D) MSG 2、 {HTML 题目}在页面中看不见的表单元素是 那种? (C )(选择1项) A) B C) D 3、(HTML 题目)以下哪一个项目是用来访问 A) Outlook Express B C) QQ D 4. {HTML 题目}下面关于CSS 表述正确的是(A,C,D )(选择3项) A) CSS 是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计 必不可少的工具之一。 B) 层叠样式表是 HTML 的辅助工具, 缺点是设计者设计的网页缺少动感, 网页内容的 排版布局上也有很多困难 C) 使用 CSS 能够简化网页的格式代码, 加快下载显示的速度,也减少了需要上传的代 码数量,大大减少了重复劳动的工作量。 D) CSS 是Cascading Stylesheets 的缩写,中文意思是层叠样式表 5、 {HTML 题目}下面的标记用于表示 HTML 文档的结束的是:(B )( 选择1项) A) /BODY B) /HTML C) /TABLE D) /TITLE 6、 {HTML 题目}在Html 标记中,哪个标记表示表格 (C )(选择1项) A)
B )
C) D )
7、{HTML 题目}在Html 标记中,用什么方法可以将整个表格在页面中居中 (C )( 选择1 项) 述链接内容( C ) ( 选择 1 项) A) b.htm B ) ././././B/b.htm C) ../B/b.htm D../../b.htm 10、 {HTML 题目 }语句 A :HTML 文档必须包括“头”和“主体”两部分 语句B : HTML 文档的扩展名为.htm 或.html ( D ) (选择 1 项) A)两句都对 B)两句都错 C)只有A 对 D)只有B 对 11、 {HTML 题目}我们想要在 HTML 文档中加入图像,可以使用哪个标记来达到要求呢? (选 择1项)( C ) A) B )