HTML入门基础教程.docx
- 文档编号:5626843
- 上传时间:2022-12-29
- 格式:DOCX
- 页数:32
- 大小:574.92KB
HTML入门基础教程.docx
《HTML入门基础教程.docx》由会员分享,可在线阅读,更多相关《HTML入门基础教程.docx(32页珍藏版)》请在冰豆网上搜索。
HTML入门基础教程
HTML基础-第一讲
HTML是网页主要的组成部分,基本上一个网页都是由HTML语言组成的,所以要学习网站怎样建设,必须从网页的基本语言学起。
先简单的介绍一下HTML语言(我们在这灌输大家的是能够实际操作),HTML是网络的通用语言,一种简单、通用的全置标记语言。
它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
神奇吗?
一点都不神奇,因为现在你看到的就是这种语言写的页面。
是呀,HTML并不是很神奇,只是因为你不是很了解它,现在咱们就开始接她的面纱:
一、HTML的组成结构(头部、眼睛、身体----好像一个人一样是不是?
)
1、头部。
只要你学过英语,你应该知道头怎么用英文写吧!
yes,HEAD就是了;所以,头部的HTML写法就是
头部的内容,简单不,大家注意一下,这两个非常相似,只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。
2、眼睛。
就好像人的眼睛一样,它是心灵的窗口,而一个网页的眼睛应该就是它的页面的标题了,标题怎么说呢?
title,yes!
大家知道眼睛是长在头上的,所以啦:
也就是
3、身体。
身体是网页最主要的部分了,因为前面讲的都不是页面所显现出来的,而大家所看到的页面页就是他的身体部分了(当然它的TITLE可以在浏览器的最左上角可以看到),身体----BODY,他的写法也就是:
页面内容
最后,别忘了把这些部分组成一体----网页,所以咱们就用把他们给包起来。
好了,咱们来大体看看网页的结构:
标题
页面内容
第一讲完
HTML基础-第二讲
我们在第一讲里概括了一下网页的主要框架,现在我们来详细的研究网页的内部细则:
先从它的身体部分(body)开始:
欣赏一个网页时,一般先注意到的是这个页面的背景,如果有背景音乐,那就更吸引人了!
是不是呀,那么这些是怎么实现的呢?
看下边:
1、背景颜色
2、背景图片
其实back-ground.gif是该图片相对于这个页面的位置,比如你做的这个页面放在c:
\我的网站\,而背景图片的位置放在c:
\我的网站\images\,那么就得这样写了:
3、背景音乐
背景音乐和上边介绍的两个有很大的不同,它的代码是放在页面的头部
里,为什么在这里讲呢?就是因为它也是显示网页的时候我们首先接受到的信息。
看看它的代码吧:
bgsound不用说了吧背景声音,background_sound.mid是音乐的文件名,当然也得写它的相对路径哦(关于相对路径,可能有的网友,一下子不能搞明白,我们将会在其他板块介绍的)!
loop,循环,那么loop="-1"是什么意思呢?
loop是bgsound的一个属性,当然src也是了,后边跟得就是属性值了,那么loop="-1"就是无限循环的意思,只要是页面打开,音乐不会停止的,loop="1"说明循环一次,等于0就是不循环了,呵呵,简单不!
4、body其它属性:
topmargin,leftmargin。
有的朋友再做页面的时候,感觉文字或者表格怎么也不能靠在浏览器的最上边和最左边,怎么回事呢?
因为一般我们用的制作软件或者说html语言默认的都是topmargin和leftmargin值等于12,如果你把他们的值设为0,你看看会有什么效果!
如下比较一下
和
好了,这一节先讲到这里!
大家在自己的电脑上实习一下,呵呵!
HTML基础第三讲---字体
同样我们在这里继续讲一下它的body,因为它能直观的让大家观察到你所学到的成果。
这一讲,我们来学习字体及其属性,然后大家在学习完后制作一下,看看它的每一个属性所表现的效果。
字体,英文font,这html语言中也是它---font,下面咱们来研究一下font:
1、标题字体
比如:
今天天气真好!
注意:
这些一般的用在标题上,所以起名叫标题字体;
标记再加空行,因此在一行中无法使用不同大小的字体。
2、字体的大小,用于一般文字。
例子:
3、逻辑字体(LogicalStyle)
下划线:
文字,代码:
文字
,删除线:
文字,闪烁:
,增强:
文字,强调:
文字,示例:
文字,还有老多,一般的这些了解一下就可以。
4、字体的标志,很常用的。
粗体:
文字,斜体:
文字
5、字体颜色
指定颜色
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)的组合。
比如:
大家看看
6、客户端字体(FontFace)
客户端字体(FontFace)示例。
7、字符实体(Entities),字符实体一般用在把html里的符号显示在页面上比如"<"、"&"等,如果你单独的打上<,页面也可以显示,但如果你想显示这几个字符,怎么办呢?
就是它啦。
#=字符实体名称或者ascii值
& &
< <
> >
" "
这些只是一小部分,那么要显示就要写成了。
以上学到的我们可以综合使用:
比如
注意写的时候要前后一致前面后边对应的也应该
好了,关于字体就讲完了!
HTML基础第四讲---图像
图像,也就是images,在html语法中用img来表示,其基本的语法是:
例子:
图象在页面中的对齐/布局:
语法:
例子:
图象和文字的对齐:
语法:
大家可以对比这看看各自的效果,很容易记住哦!
图像的边框:
示例:
大家可以在自己的机子上按照我给你的语法,写下来,看看效果就行了。
HTML基础第五讲---控制表格及其表项的对齐方式
缺省情况下,表格在浏览器屏幕上左对齐,你可以使用
和 | 标识符的ALIGN和VALIGN属性,这两个属性的取值范围与 | ||
---|---|---|---|
的 | ALIGN和VALIGN属性将会覆盖任何为整个一行指定的排列方式。 最专业Web开发技术QQ群: 96453007,最新最全的一手技术资料免费发布 控制表项的空间 当浏览器显示一个表格时,它将每一列的宽度设置为这一列中最长表项的宽度。 浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中的每一项。 你可以使用
| ||
FirstColumn | SecondColumn |
控制表格和表项的大小
某些时候你可能想让表格显示出来大一些,你可以用
和 | 标识符的WIDTH和HEIGHT属性来控制表格中某一表项的大小,你必须用绝对象素值来指定这些属性的值。 你要知道当你设置这些值时,只不过是在为浏览器提供建议,浏览器尽量按你的意愿去做,但也有可能不能完全按你指定的方式来显示一个表格。 在表格中加入颜色和图象 根据HTML3.2规范,表格不具有任何颜色属性。 然而,值得庆幸的是Netscape和Microsoft都扩展了HTML来让表格具有自己的背景色,两种浏览器都能识别
当这个例子中的文字在浏览器上显示时,它处于一个浅蓝色的框中,这对于突出主页上主体文字中某些特定的文本是很有用的。 例如,你可以使用这种方法来突出一个引用、标题或是网页上一个简短的注释。 你也可以为表格中某一行甚至是某一个表项使用BGCOLOR属性。 例如,可以用不同的颜色来区分表格中不同列的数据。 最专业Web开发技术QQ群: 96453007,最新最全的一手技术资料免费发布 BGCOLOR属性的一个更令人兴奋的用处可能是设置你网页的整体颜色,如果你将表格的宽度设为屏幕的宽度,你可以建立一个具有多列的网页,而每一列都具有不同的颜色。 下面的例子建立了一个有两列不同颜色的网页: |
---|