Html+css基础教程
(适合新手)
在这里我把html和css放在一起了，适合新手和在学习的人当成笔记用。希望对大家有所帮助。
HTML是网页主要的组成部分，基本上一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。
一、HTML的组成结构
HTML分为单标识语句和双标识语句。
<标识>内容  　如：<br>
<标识>内容</标识>  　如：<a href=”www.sohu”>搜狐</a>
  　标识中存在标识属性用来定义各标识属性的值。<font size=5> 中心内容</font>
二、HTML全局结构
1、头部。（标题栏）只要你学过英语，你应该知道头怎么用英文写吧！yes，HEAD就是了；所以，头部的HTML写法就是<head>头部的内容</head>，简单不，大家注意一下，这两个非常相似，只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。
    2、眼睛。（标题内容）就好像人的眼睛一样，它是心灵的窗口，而一个网页的眼睛应该就是它的页面的标题了，标题怎么说呢？title,yes！大家知道眼睛是长在头上的，所以啦:<title>标题</title>这些应放在<head>和</head>之间。也就是
<head><title>标题</title></head>
3、身体。（主体）身体是网页最主要的部分了，因为前面讲的都不是页面所显现出来的，而大家所看到的页面页就是他的身体部分了（当然它的TITLE可以在浏览器的最左上角可以看到），身体----BODY，他的写法也就是：<body>页面内容</body>
 最后，别忘了把这些部分组成一体----网页，所以咱们就用<html></html>把他们给包起来。
    咱们来大体看看网页的结构：
        <html>
          <head>
           <title>
             标题
           </title>
          </head>
          <body>
            页面内容
                  </body>
                </html>
在进入主体内容标识讲解之前我想给大家介绍下<body>标识中的常用属性，如：
1、<body leftMargin=0 topMargin=0 marginwidth="0" marginheight="0">内容</body>
leftMargin、topMargin表示：设置页面离外框的左边距和上边距的距离为像素值，默认为1。

marginwidth、 marginheight表示：设置页面文字同页面边缘的间距为像素值，默认为1。
注marginwidth、 marginheight还可以用于表格、框架等中。
 2、背景颜
 <body bgcolor="red">我们发现多了个bgcolor其实就是backgroundcolor（背景颜）的意思，bgcolor="red"设置网页的背景颜为红，现在颜一般都是#ff0000样式的。
 3、背景图片
 <body backgroud＝"back-ground.gif">中“backgroud”就是设置背景图片的啦，back-ground.gif是背景图片的名字，为什么有的朋友也是如此写的，而网页却没有背景图片呢？其实back-ground.gif是该图片相对于这个页面的位置，比如你做的这个页面放在c:\我的网站\，而背景图片的位置放在c:\我的网站\images\，那么就得这样写了：<body backgroud＝"images\back-ground.gif">，注意两者的区别！
 4、背景音乐
 背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部<head></head>里，
为什么在这里讲呢？就是因为它也是显示网页的时候我们首先接受到的信息。看看它的代码吧：
<bgsound src="background_sound.mid" loop="-1">
bgsound 不用说了吧背景声音，background_sound.mid是音乐的文件名，当然也得写它的相对路径哦（关于相对路径，可能有的网友，一下子不能搞明白，我们将会在其他板块介绍的）！loop，循环，那么loop="-1"是什么意思呢？loop是bgsound 的一个属性，当然src也是了，后边跟得就是属性值了，那么loop="-1"就是无限循环的意思，只要是页面打开，音乐不会停止的，loop="1"说明循环一次，等于0就是不循环了，呵呵，简单不！
三、字体及其属性、文字排版标识的使用
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) 标记
 换行：<br>，不换行：<nobr>，分段：<p>内容</p>，原始文字样式（原样显示）<pre>内容</pre>，下划线：<u>文字</u>，删除线：<strike>文字</strike>，闪烁：<blink>文字</blink>，增强：<strong>文字</strong>，强调：<em>文字</em>，粗体：<b>文字</b>，斜体：<i>文字</i>大型字体：<big>，小型字体：<small>，文字上标：<sup>，文字下标：<SUB>还有老多，一般的这些了解一下就可以。
4、字体颜
  指定颜 <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>是什么颜的文字
注：在现行新版本浏览器已经慢慢不使用<font>这样的标识了，已基本被CSS样式表取代。
CSS样式表已作为一门课程，所以有兴趣的同学请自行参考电子书《层叠样式表》CSS教程。
四、链接
1、 链接基本概念：一般而言，所谓链接就是，在网页中有些字会有特别的颜，而且字的底下会有条线，当光标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的...）。 
2、『相对路径』、『绝对路径』
要了解链接，首先必须先了解一下『相对路径』和『绝对路径』， 『相对路径』：相对当前目录的路径，『绝对路径html网页设计css』：从根目录下的全路径（一般不推荐使用）。
现在假设一个情形：我们在自己的计算机里设计网页，所有网页相关的档案我们通通放在 c:\www 里面，现在假设 c:\www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok！ 
现在我们想在 index.htm 里面设一个链接，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下面任一叙述：
<a href="/c|/www/text1.htm">
这就是『绝对路径』
<a href="text1.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文件，图文件、文字文件均可），那我们又该如何来使用『相对路径』呢？他们又不在『同一个目录』下...？ 
<a href="/c|/www/gif/p1.gif">
这是『绝对路径』的写法
<a href="gif/p1.gif">
这是『相对路径』的写法
如何？不难吧！（只是字有点多，看到脑子发胀）
总结一下：很乱吗？嗯...看看这表，或许会清楚些。
相对路径表示方式
代表链接位置
<a href="text1.htm">
text1.htm在目前的目录中（就例子而言，就是在c:\www中）
<a href="docs/text1.htm">
text1.htm在名为docs的次目录中（就本例而言，就是在c:\www\docs中）
<a href="../text1.htm">
text1.htm在目前目录的上一层目录中（就本例而言，就是在c:\底下了）
说到链接，最基本来看有『内部链接』及『外部链接』，所谓『内部链接』就是自己网站间网页的链接，『外部链接』就是链接到外面去
3、【网页内部的链接】
1. 使用方法： 
（1）. 先在欲链接处作记号：<a name="here1">这里是你想链接的点</a> 
（2）. 设定链接：<a href="#here1">链接</a> 
2. 标志解说：有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的到资料。其原理不过是：在欲链接处做个记号（网页的任何地方都可以喔！），然后，链接时就寻这记号，就可以快速到资料。很简单吧！ 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。