admin 管理员组文章数量: 887021
2024年2月24日发(作者：ps排版插件)
Html+css基础教程
(适合新手)
在这里我把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还可以用于表格、框架等中。
1
2、背景颜色
我们发现多了个bgcolor其实就是backgroundcolor（背景颜色）的意思，bgcolor="red"设置网页的背景颜色为红色，现在颜色一般都是#ff0000样式的。
3、背景图片
中“backgroud”就是设置背景图片的啦，是背景图片的名字，为什么有的朋友也是如此写的，而网页却没有背景图片呢？其实是该图片相对于这个页面的位置，比如你做的这个页面放在c:我的网站，而背景图片的位置放在c:我的网站images，那么就得这样写了：，注意两者的区别！
4、背景音乐
背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部
里，为什么在这里讲呢？就是因为它也是显示网页的时候我们首先接受到的信息。看看它的代码吧：bgsound 不用说了吧背景声音，background_是音乐的文件名，当然也得写它的相对路径哦（关于相对路径，可能有的网友，一下子不能搞明白，我们将会在其他板块介绍的）！loop，循环，那么loop="-1"是什么意思呢？loop是bgsound 的一个属性，当然src也是了，后边跟得就是属性值了，那么loop="-1"就是无限循环的意思，只要是页面打开，音乐不会停止的，loop="1"说明循环一次，等于0就是不循环了，呵呵，简单不！
三、字体及其属性、文字排版标识的使用
1、标题字体
比如：
今天天气真好！
注意：这些一般的用在标题上，所以起名叫标题字体；
标记再加空行，因此在一行中无法使用不同大小的字体。
2、字体的大小，用于一般文字。
文字 #=1, 2, 3, 4, 5, 6, 7 or +#, -#
例子：今天天气真好！
3、文字排版、逻辑字体(Logical Style) 标记
换行：
，不换行： 内容内容
，下划线：文字，删除线：文字，闪烁：，增强：文字，强调：文字，粗体：文字，斜体：文字大型字体：，小型字体：，文字上标：，文字下标：还有老多，一般的这些了解一下就可以。
4、字体颜色
指定颜色 文字 # ="#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）的组合。
比如： 文字 红色文字
2
文字 红色文字
大家看看 文字 是什么颜色的文字
注：在现行新版本浏览器已经慢慢不使用这样的标识了，已基本被CSS样式表取代。
CSS样式表已作为一门课程，所以有兴趣的同学请自行参考电子书《层叠样式表》CSS教程。
四、链接
1、 链接基本概念：一般而言，所谓链接就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当光标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的...）。
2、『相对路径』、『绝对路径』
要了解链接，首先必须先了解一下『相对路径』和『绝对路径』， 『相对路径』：相对当前目录的路径，『绝对路径』：从根目录下的全路径（一般不推荐使用）。
现在假设一个情形：我们在自己的计算机里设计网页，所有网页相关的档案我们通通放在 c:www 里面，现在假设
c:www 里面目前有 、 、 、 这四个档案。ok！
现在我们想在 里面设一个链接，能够按一下就连到 ，那我们该怎么做呢？基本上，有两中方式可以做到，在 里面加上下面任一叙述：
这就是『绝对路径』
这就是『相对路径』
瞧出什么端倪了没有？嗯嗯....没错，『绝对路径』要给计算机一个非常详尽的位置，让计算机寻着这路径去找到档案。而『相对路径』就简单多啦！如果没有特别指定，他就会直接在 的所在目录（当前目录）下找，也就是在 c:www
底下去找。
如果说，今天我们将 c:www 里所有的档案都上传到网络上的网页服务器（总不能做好了只给自己看吧！），且该服务器是别人的计算机，而非你自己架设的主机，那么问题就来了！你猜，哪一种链接会出问题？呵呵...答案是『绝对路径』，您猜对了吗？
为什么说『绝对路径』会出问题呢？因为，当您将档案上传到网络上时，您的整个网页目录架构一定会变，到时候，计算机可能找不到 。所以说，没事的话，尽量用『相对路径』来作链接吧！好写又不容易出错。
另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:wwwgif 底下放进了 、
两个图，而 、 依旧在 c:www 底下。现在我们想在 下设个链接到 这图档（链接不限于只能连html文件，图文件、文字文件均可），那我们又该如何来使用『相对路径』呢？他们又不在『同一个目录』下...？
这是『绝对路径』的写法
这是『相对路径』的写法
如何？不难吧！（只是字有点多，看到脑子发胀）
总结一下：很乱吗？嗯...看看这表，或许会清楚些。
3
相对路径表示方式
代表链接位置
在目前的目录中（就例子而言，就是在c:www中）
在名为docs的次目录中（就本例而言，就是在c:wwwdocs中）
说到链接，最基本来看有『内部链接』及『外部链接』，所谓『内部链接』就是自己网站间网页的链接，『外部链接』就是链接到外面去
3、【网页内部的链接】
1. 使用方法：
（1）. 先在欲链接处作记号：这里是你想链接的点
（2）. 设定链接：链接
2. 标志解说：有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的找到资料。其原理不过是：在欲链接处做个记号（网页的任何地方都可以喔！），然后，链接时就寻这记号，就可以快速找到资料。很简单吧！
3. 使用范例：
范例 第一步骤 第二步骤
www链接标志基本概念 欲链接的位置 www链接标志基本概念
4、【网页外部的链接】
1. 标志解说：链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。由于网络上的服务五花八门，所以不同的服务有不同的链接方法，工友将之整理在下表。
2. 使用范例：
网站链接 好站 好站
4
电子邮件链接 写信给朋友
ftp链接
下载档案
news链接 seednet news服务 seednet news服务
gopher链接 seednet gopher服务 seednet gopher服务
bbs链接 seednet gopher服务 seednet bbs服务
【链接标志的参数】
1. 使用方法：在链接后面加入 target=_参数
2. 标志解说：链接的参数并不多，常见的大概就属 target 这参数了，target 的意思是『目标』，也就是网页链接的指向目标，这参数在框窗（frame）里尤为重要！
3. 使用范例：
o target=框窗名称：这在『框架标志』中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名称，因此，我们可以利用此标志，来指定链接的内容显示到哪一个框窗中。
o target=_blank：将链接的画面内容，开在新的浏览窗口中。
o target=_parent：将链接的画面内容，当成文件的上一个画面。
o target=_self：将链接的画面内容，显示在目前的窗口中。
o target=_top：这个参数可以解决新链接的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。
五、图像的使用，也就是images
在html语法中用img来表示，其基本的语法是：
#=图象的 URL，关于url就是指的是图像在网上的地址。
#=在浏览器尚未完全读入图象时，在图象位置显示的文字；也是图像显示以后，当鼠标放在图片上时所显示的文字。
例子：
图象在页面中的对齐/布局：
语法： #=left, center, right，使用图像的align属性，其实这一属性布置在这里用到，以后我们在学习表格的时候也会遇到align，它的值left, center, right就是他的中文意思，left居左，center居中，right居右。
例子： 网人交流论坛欢迎您的光临！
图象和文字的对齐：
语法： #=top, middle, bottom，这里的align和上边的实现的效果不一样，大家从它的值可以看出，它所显示出来的是文字在图片的靠上边、中间、底端。大家可以对比这看看各自的效果，很容易记住哦！
图像的边框： #=value数字，指的是这个图像的边的宽度！
示例：
六、表格
5
表格，一般的用于对网页的内容进行排版，用过word的朋友应该非常明白的。通常表格还用于网页内容的定位。
表格的基本语法：
表格的边框： border是表格的边框属性，=“1”即边框的宽为一象素，为0表示无边框
跨多行、多列的表元(Table Span)
跨多列的表元
跨多行的表元
|
|