HTMLCss大全.docx
- 文档编号:5008754
- 上传时间:2022-12-12
- 格式:DOCX
- 页数:22
- 大小:33.82KB
HTMLCss大全.docx
《HTMLCss大全.docx》由会员分享,可在线阅读,更多相关《HTMLCss大全.docx(22页珍藏版)》请在冰豆网上搜索。
HTMLCss大全
HTML/CSS大全
HTML是网页主要的组成部分,基本上一个网页都是由HTML语言组成的,所以要学习网站怎样建设,必须从网页的基本语言学起。
一、HTML的组成结构
HTML分为单标识语句和双标识语句。
<标识>内容 如:
<标识>内容标识> 如:
标识中存在标识属性用来定义各标识属性的值。
二、HTML全局结构
1、头部。
(标题栏)只要你学过英语,你应该知道头怎么用英文写吧!
yes,HEAD就是了;所以,头部的HTML写法就是
头部的内容,简单不,大家注意一下,这两个非常相似,只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。
2、眼睛。
(标题内容)就好像人的眼睛一样,它是心灵的窗口,而一个网页的眼睛应该就是它的页面的标题了,标题怎么说呢?
title,yes!
大家知道眼睛是长在头上的,所以啦:
也就是
3、身体。
(主体)身体是网页最主要的部分了,因为前面讲的都不是页面所显现出来的,而大家所看到的页面页就是他的身体部分了(当然它的TITLE可以在浏览器的最左上角可以看到),身体----BODY,他的写法也就是:
页面内容最后,别忘了把这些部分组成一体----网页,所以咱们就用把他们给包起来。
咱们来大体看看网页的结构:
标题
页面内容
在进入主体内容标识讲解之前我想给大家介绍下
标识中的常用属性,如:1、
leftMargin、topMargin表示:
设置页面离外框的左边距和上边距的距离为像素值,默认为1。
marginwidth、marginheight表示:
设置页面文字同页面边缘的间距为像素值,默认为1。
注marginwidth、marginheight还可以用于表格、框架等中。
2、背景颜色
3、背景图片
其实back-ground.gif是该图片相对于这个页面的位置,比如你做的这个页面放在c:
\我的网站\,而背景图片的位置放在c:
\我的网站\images\,那么就得这样写了:
4、背景音乐
背景音乐和上边介绍的两个有很大的不同,它的代码是放在页面的头部
里,为什么在这里讲呢?就是因为它也是显示网页的时候我们首先接受到的信息。
看看它的代码吧:
bgsound不用说了吧背景声音,background_sound.mid是音乐的文件名,当然也得写它的相对路径哦(关于相对路径,可能有的网友,一下子不能搞明白,我们将会在其他板块介绍的)!
loop,循环,那么loop="-1"是什么意思呢?
loop是bgsound的一个属性,当然src也是了,后边跟得就是属性值了,那么loop="-1"就是无限循环的意思,只要是页面打开,音乐不会停止的,loop="1"说明循环一次,等于0就是不循环了,呵呵,简单不!
三、字体及其属性、文字排版标识的使用
1、标题字体
比如:
今天天气真好!
注意:
这些一般的用在标题上,所以起名叫标题字体;
标记再加空行,因此在一行中无法使用不同大小的字体。
2、字体的大小,用于一般文字。
例子:
3、文字排版、逻辑字体(LogicalStyle)标记
换行:
,不换行:
内容
,原始文字样式(原样显示)内容,下划线:
文字,删除线:
文字,闪烁:
,增强:
文字,强调:
文字,粗体:
文字,斜体:
文字大型字体:
,小型字体:
,文字上标:
,文字下标:
还有老多,一般的这些了解一下就可以。
4、字体颜色
指定颜色
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)的组合。
比如:
大家看看
注:
在现行新版本浏览器已经慢慢不使用这样的标识了,已基本被CSS样式表取代。
CSS样式表已作为一门课程,所以有兴趣的同学请自行参考电子书《层叠样式表》CSS教程。
四、链接
1、链接基本概念:
一般而言,所谓链接就是,在网页中有些字会有特别的颜色,而且字的底下会有条线,当光标移到那些字上时,会变成手指形状,按下去,则会连到别的文章或网站,就像这样(以上这段是给超级新手看的...)。
2、『相对路径』、『绝对路径』
要了解链接,首先必须先了解一下『相对路径』和『绝对路径』, 『相对路径』:
相对当前目录的路径,『绝对路径』:
从根目录下的全路径(一般不推荐使用)。
现在假设一个情形:
我们在自己的计算机里设计网页,所有网页相关的档案我们通通放在c:
\www里面,现在假设c:
\www里面目前有index.htm、text1.htm、p1.gif、p2.gif这四个档案。
ok!
现在我们想在index.htm里面设一个链接,能够按一下就连到text1.htm,那我们该怎么做呢?
基本上,有两中方式可以做到,在index.htm里面加上下面任一叙述:
这就是『绝对路径』
这就是『相对路径』
瞧出什么端倪了没有?
嗯嗯....没错,『绝对路径』要给计算机一个非常详尽的位置,让计算机寻着这路径去找到档案。
而『相对路径』就简单多啦!
如果没有特别指定,他就会直接在index.htm的所在目录(当前目录)下找,也就是在c:
\www底下去找text1.htm。
如果说,今天我们将c:
\www里所有的档案都上传到网络上的网页服务器(总不能做好了只给自己看吧!
),且该服务器是别人的计算机,而非你自己架设的主机,那么问题就来了!
你猜,哪一种链接会出问题?
呵呵...答案是『绝对路径』,您猜对了吗?
为什么说『绝对路径』会出问题呢?
因为,当您将档案上传到网络上时,您的整个网页目录架构一定会变,到时候,计算机可能找不到。
所以说,没事的话,尽量用『相对路径』来作链接吧!
好写又不容易出错。
另外一个情形是:
为了整理方便,有些网友喜欢将图档通通放到同一个目录下,如:
c:
\www\gif\底下放进了p1.gif、p2.gif两个图,而index.htm、text1.htm依旧在c:
\www底下。
现在我们想在index.htm下设个链接到p1.gif这图档(链接不限于只能连html文件,图文件、文字文件均可),那我们又该如何来使用『相对路径』呢?
他们又不在『同一个目录』下...?
这是『绝对路径』的写法
这是『相对路径』的写法
如何?
不难吧!
(只是字有点多,看到脑子发胀)
总结一下:
很乱吗?
嗯...看看这表,或许会清楚些。
相对路径表示方式
代表链接位置
text1.htm在目前的目录中(就例子而言,就是在c:
\www中)
text1.htm在名为docs的次目录中(就本例而言,就是在c:
\www\docs中)
text1.htm在目前目录的上一层目录中(就本例而言,就是在c:
\底下了)
说到链接,最基本来看有『内部链接』及『外部链接』,所谓『内部链接』就是自己网站间网页的链接,『外部链接』就是链接到外面去
3、【网页内部的链接】
1.使用方法:
(1).先在欲链接处作记号:
(2).设定链接:
2.标志解说:
有时候,当某页的内容很多时,我们可以利用网页的内部链接,来使使用者快速的找到资料。
其原理不过是:
在欲链接处做个记号(网页的任何地方都可以喔!
),然后,链接时就寻这记号,就可以快速找到资料。
很简单吧!
3.使用范例:
范例
第一步骤
第二步骤
www链接标志基本概念
网页内部的链接
网页外部的链接
4、【网页外部的链接】
1.标志解说:
链接到外面去,可以扩充您网站的实用性及充实性,也正因这功能,才造就了www五彩缤纷的世界。
由于网络上的服务五花八门,所以不同的服务有不同的链接方法,工友将之整理在下表。
2.使用范例:
网站链接
好站
电子邮件链接
写信给朋友
fuxing@">写信给朋友 ftp链接 下载档案 //">下载档案 news链接 seednetnews服务 ">seednetnews服务 gopher链接 seednetgopher服务 //gopher服务 bbs链接 seednetgopher服务 //bbs服务 【链接标志的参数】 1.使用方法: 在链接后面加入target=_参数 2.标志解说: 链接的参数并不多,常见的大概就属target这参数了,target的意思是『目标』,也就是网页链接的指向目标,这参数在框窗(frame)里尤为重要! 3.使用范例: otarget=框窗名称: 这在『框架标志』中也有提到,而且也只有在框架(框窗orframe)中才用得到。 正常而言,框窗有各自的名称,因此,我们可以利用此标志,来指定链接的内容显示到哪一个框窗中。 otarget=_blank: 将链接的画面内容,开在新的浏览窗口中。 otarget=_parent: 将链接的画面内容,当成文件的上一个画面。 otarget=_self: 将链接的画面内容,显示在目前的窗口中。 otarget=_top: 这个参数可以解决新链接的画面内容,被旧框窗包围的困扰,使用这参数,会将整个画面重新显示成链接的画面内容。 五、图像的使用,也就是images 在html语法中用img来表示,其基本的语法是: 例子: 图象在页面中的对齐/布局: 语法: 例子: 图象和文字的对齐: 语法: 大家可以对比这看看各自的效果,很容易记住哦! 图像的边框: 示例: 六、表格 表格,一般的用于对网页的内容进行排版,用过word的朋友应该非常明白的。 通常表格还用于网页内容的定位。 表格的基本语法: 表格的边框: border是表格的边框属性,=“1”即边框的宽为一象素,为0表示无边框 跨多行、多列的表元(TableSpan) 跨多列的表元 跨多行的表元 #为象素值或者百分比。 如width=325,height=80% 为0是为没有间隙。 为0是为没有间隙。 表格内文字的对齐/布局 七、框架(Frame)* 框架(Frame)也就是所谓的分割窗口、分割画面、框窗效果 【开始分割】 1.别急、别急,分割窗口可是一门学问,要分割也是要一步一步来的。 看看刚刚那例子,想象画面是一个蛋糕,你要怎么割,才能割成那样呢? 原始码 呈现结果 ...
-定义表格... -定义表行... -定义表头... -定义表元
2.各位会发现,奇怪,在上面的语法中,怎么都没见到
熟悉的身影?呵呵...没错,它已经被待会儿要加进去的
卷标给取代了!也就是说,如果我们要分割画面,就要先用
4.在
6.看见了没?
原本的
所以要注意喔!
第二组
(乱七八糟了对不对?
)
7.呵呵...不知不觉就大功告成了,其实只要将最后完成的那些语法存成index.htm,然后再准备三个档a.htm、b.htm、c.htm那么就完工啰!
当然,这是一个最简单的分割法,我们会再将一些进阶的卷标在底下一一说明。
【其它卷标参数说明】
1.COLS="120,*"
就是垂直切割画面啦!
你可以一次切成左右两个画面,当然也可以切成三个,很简单只要写成COLS="30,*,50"(数字随便您自己调整啦!
),依此类推,四个以上当然就是四组数字啦!
2.ROWS="120,*"
就是横向切割画面,也就是将画面上下分开,切法同上。
3.frameborder=0
设定框架的边框,其值只有0和1,0就是不要边框,1就是要显示边框。
边框是无法调整粗细的。
4.framespacing=5
表示框架与框架间的保留空白的距离,以免看起来太挤。
1.SRC="a.htm"
设定此框架中要显示的网页名称,每个框架一定要对应一个网页,否则就会产生错误,这里就是要您填入对应网页的名称。
(如果该网页在不同目录,记得路径要写清楚)
2.NAME="1"
设定这个框架的名称,这样才能指定框架来作连结,所以一定要设定喔!
当然名称随你高兴取名。
3.frameborder=0
设定框架的边框,其值只有0和1,0就是不要边框,1就是要显示边框。
边框是无法调整粗细的。
4.scrolling="no"
设定是否要显示滚动条,YES是要显示滚动条,NO是无论如何都不要显示,AUTO是视情况显示。
5.noresize
设定不让使用者可以改变这个框框的大小,如果没有设定这个参数,使用者可以很容易的拉动框架,改变其大小。
6.marginhight=2
表示框架高度部份边缘所保留的空间。
7.marginwidth=2
表示框架宽度部份边缘所保留的空间。
【相关用法】
◆
1.使用方法:
2.卷标解说:
有些浏览器较为老旧,无法显示Frame的功能,因此,就要使用此卷标,让这些网友知道,该换换浏览器了。
或者,你也可以在这卷标中,摆上没有Frame语法的网页卷标,那么,没有支持Frame功能的浏览器,便会自动显示没有Frame语法的网页。
◆Iframe标记的使用
提起Iframe,可能你早已将之扔到“被遗忘的角落”了,不过,说起其兄弟Frame就不会陌生了。
Frame标记即帧标记,我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTMLCss 大全
![提示](https://static.bdocx.com/images/bang_tan.gif)