Html+css基础资源-CSDN文库

需积分: 15 12 浏览量 2015-09-18 11:43:38 上传评论收藏 116KB DOC 举报

### Html+Css基础知识点详解 #### 一、HTML的基础概念与结构 HTML（HyperText Markup Language）即超文本标记语言，是一种用于创建网页的标准标记语言。通过HTML，我们可以构建网页的基本结构，并添加文本、图像等内容。 ##### HTML的组成结构 HTML文档由一系列标签构成，这些标签分为单标签和双标签两种： - **单标签**：只有一对尖括号`<>`包裹，无需闭合。例如：`<br>`表示换行。 - **双标签**：包括开始标签和结束标签。例如：`<p>这是一个段落。</p>`，其中`<p>`是开始标签，`</p>`是结束标签。 ##### 属性的定义与使用 HTML标签中可以包含属性，用来进一步描述标签的行为或样式。例如： ```html <font size="5">中心内容</font> ``` 这里`<font>`标签包含了`size`属性，其值为`5`，表示字体大小为5号。 #### 二、HTML的全局结构 HTML文档通常遵循一定的全局结构，主要包括头部和主体两大部分。 ##### 头部（Head）头部主要用于放置文档的元数据，如标题、字符集声明等。例如： ```html <head> <title>标题</title> </head> ``` 这里`<title>`标签用于定义文档的标题，它必须位于`<head>`标签内。 - **头部标签（Head）**：`<head>`和`</head>`标签之间的内容代表了文档的头部信息。 - **标题标签（Title）**：`<title>`和`</title>`标签之间的文本将显示在浏览器的标题栏或者标签页上。 ##### 主体（Body）主体部分包含实际的网页内容，是用户可以直接看到和交互的部分。 ```html <body> 页面内容 </body> ``` - **主体标签（Body）**：`<body>`和`</body>`标签之间的内容是网页的主体部分，即用户可以看到的所有内容。 ##### 完整的HTML文档结构一个完整的HTML文档结构如下所示： ```html <!DOCTYPE html> <html> <head> <title>标题</title> </head> <body> 页面内容 </body> </html> ``` #### 三、HTML中的常用属性在`<body>`标签中，可以使用多种属性来控制页面的布局和样式。 - **边距属性**：`leftMargin`和`topMargin`用于设置页面距离屏幕左右和上下边缘的距离，单位为像素。 ```html <body leftMargin="0" topMargin="0"> 内容 </body> ``` - **内部边距属性**：`marginwidth`和`marginheight`用于设置页面内部元素与边缘的距离。 ```html <body marginwidth="0" marginheight="0"> 内容 </body> ``` - **背景颜色**：使用`bgcolor`属性设置整个页面的背景颜色。 ```html <body bgcolor="#ff0000"> 我们发现多了个bgcolor其实就是backgroundcolor（背景颜色）的意思。 </body> ``` - **背景图片**：使用`background`属性设置背景图片。 ```html <body background="images/background.gif"> 背景图片设置示例。 </body> ``` - **背景音乐**：使用`<bgsound>`标签在页面加载时播放背景音乐。 ```html <head> <bgsound src="music/background_sound.mp3" loop="-1"> </head> ``` 这里的`loop`属性可以设置音乐的循环次数，`-1`表示无限循环。 #### 四、字体及其属性、文字排版标识的使用 ##### 标题字体使用`<h#>`标签定义标题，其中`#`可以是1至6之间的数字，数字越大，字号越小。 ```html <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> ``` ##### 字体大小使用`<font>`标签设置普通文本的字体大小。 ```html <font size="5">这是一段5号字体的文本。</font> ``` ##### 基本排版使用`<p>`标签创建段落，`<br>`标签进行换行。 ```html <p>这是第一个段落。</p> <br> <p>这是第二个段落。</p> ``` 以上内容概述了HTML的基础知识，包括文档结构、常用属性以及基本的文字排版方法。通过这些基本概念的学习，可以为进一步深入HTML和CSS的学习打下坚实的基础。

资源推荐

资源详情

资源评论

H t m l + c s s 基础教程

HTML 是网页主要的组成部分，基本上一个网页都是由 HTML 语言组成的，所以要学习网站怎样建

设，必须从网页的基本语言学起。

一、HTML 的组成结构

 分为单标识语句和双标识语句。

标识内容　　　如：

标识内容标识　　　如：搜狐

　　　标识中存在标识属性用来定义各标识属性的值。<font size=5>中心内容</font>

二、HTML 全局结构

、头部。（标题栏）只要你学过英语，你应该知道头怎么用英文写吧！， 就是了；所以，

头部的  写法就是头部的内容，简单不，大家注意一下，这两个非常相似，只是

后一个比前一个多了“符号。类似这样的以后会经常用到。

、眼睛。（标题内容）就好像人的眼睛一样，它是心灵的窗口，而一个网页的眼睛应该就是它的页面

的标题了，标题怎么说呢？ ! "#！大家知道眼睛是长在头上的，所以啦$ ! "标题 ! "这些应

放在和之间。也就是

 ! "标题 ! "

%、身体。（主体）身体是网页最主要的部分了，因为前面讲的都不是页面所显现出来的，而大家所

看到的页面页就是他的身体部分了（当然它的 & 可以在浏览器的最左上角可以看到），身体''''

()*，他的写法也就是：页面内容

最后，别忘了把这些部分组成一体''''网页，所以咱们就用 " "把他们给包起来。

　　　　咱们来大体看看网页的结构：

　　　　　　　　  "

　　　　　　　　　

　　　　　　　　　  ! "

　　　　　　　　　　　标题

　　　　　　　　　  ! "

　　　　　　　　　

　　　　　　　　　 

　　　　　　　　　　　页面内容



 "

在进入主体内容标识讲解之前我想给大家介绍下<body>标识中的常用属性，如：

、" +!,- .+!,-+!,! /-/+!,!+ /-/内容

" +!,、 .+!, 表示：设置页面离外框的左边距和上边距的距离为像素值，默认为 。

+!,! 、 +!,!+ 表示：设置页面文字同页面边缘的间距为像素值，默认为 。

注 +!,! 、 +!,!+ 还可以用于表格、框架等中。

、背景颜色

+"//我们发现多了个 +" 其实就是 0+,"（背景颜色）的意思，

+"//设置网页的背景颜色为红色，现在颜色一般都是12---- 样式的。

%、背景图片

0+＝/0'+,+!/中“0+就是设置背景图片的啦，0'+,+!

是背景图片的名字，为什么有的朋友也是如此写的，而网页却没有背景图片呢？其实 0'+,+! 是

该图片相对于这个页面的位置，比如你做的这个页面放在 $3我的网站3，而背景图片的位置放在 $3我的网

站3!+3，那么就得这样写了：0+＝/!+30'+,+!/，注意两者的区

别！

4、背景音乐

背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部里，为什么在

这里讲呢？就是因为它也是显示网页的时候我们首先接受到的信息。看看它的代码吧：

+,/0+,5,!/"./'/

+,不用说了吧背景声音，0+,5,! 是音乐的文件名，当然也得写它的相对路径哦

（关于相对路径，可能有的网友，一下子不能搞明白，我们将会在其他板块介绍的）！".，循环，那么

"./'/是什么意思呢？". 是 +,的一个属性，当然  也是了，后边跟得就是属性值了，那

么 "./'/就是无限循环的意思，只要是页面打开，音乐不会停止的，".//说明循环一次，等于 -

就是不循环了，呵呵，简单不！

三、字体及其属性、文字排版标识的使用

、标题字体1文字 11，，%，4，6，7

比如：今天天气真好！

注意：这些一般的用在标题上，所以起名叫标题字体；11这些标记显示黑体字；这些标

记自动插入一个空行，不必用 .标记再加空行，因此在一行中无法使用不同大小的字体。

、字体的大小，用于一般文字。

, !81文字, 1##%#4#6#7#9:1#'1

, !811##%#4#6#7#9

例子：, !89今天天气真好！, 

%、文字排版、逻辑字体;+!"< "=标记

换行：，不换行：,，分段：.内容.，原始文字样式（原样显示）.内容.

，下划线：文字，删除线： !0文字 !0，闪烁："!,0文字"!,0，增

强： ,+文字 ,+，强调：文字，粗体：文字，斜体：!文字

!大型字体：!+，小型字体：""，文字上标：.，文字下标：<>(还有老多，一般

的这些了解一下就可以。

4、字体颜色

指定颜色 , "1文字 , 1/1++/7进制数码，或者是下列预定义色彩：

("0#)"!?#"#@#("#,#A?#B#!#C!#D! #B,#E."#<!"?#

*""#F

对于 7进制编码的颜色，我们可以这样理解 ++ 六个字符：前两个表示红色，中间的两个表示绿色，

后两个表示蓝色；那么，红色（）2----，同样绿色（+,）--2--，蓝色 ----2；其它的颜色就

是这几个字符（-'G，'）的组合。

比如：, "文字 , 红色文字

, "12----文字 , 红色文字

大家看看, "1++文字 , 是什么颜色的文字

注：在现行新版本浏览器已经慢慢不使用, 这样的标识了，已基本被 H<< 样式表取代。

H<< 样式表已作为一门课程，所以有兴趣的同学请自行参考电子书《层叠样式表》H<< 教程。

四、链接

、链接基本概念：一般而言，所谓链接就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当光标移到

那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的）。

、『相对路径』、『绝对路径』

要了解链接，首先必须先了解一下『相对路径』和『绝对路径』，『相对路径』：相对当前目录的路径，『绝对路

径』：从根目录下的全路径（一般不推荐使用）。

现在假设一个情形：我们在自己的计算机里设计网页，所有网页相关的档案我们通通放在 $3里面，现在假设 $3

里面目前有 !,I 、 I  、 .+!、 .+!这四个档案。0！

现在我们想在 !,I 里面设一个链接，能够按一下就连到 I  ，那我们该怎么做呢？基本上，有两中方式

可以做到，在 !,I 里面加上下面任一叙述：

 跳到顶层目录下的  

  跳到上一层目录下的  

跳到上二层目录下的  

跳到上三层目录下的  

<a href="/c|/www/text1.htm"> 这就是『绝对路径』

<a href="text1.htm"> 这就是『相对路径』

瞧出什么端倪了没有？嗯嗯没错，『绝对路径』要给计算机一个非常详尽的位置，让计算机寻着这路径去找到档案。

而『相对路径』就简单多啦！如果没有特别指定，他就会直接在 !,I 的所在目录（当前目录）下找，也就是在

$3底下去找 I  。

如果说，今天我们将 $3里所有的档案都上传到网络上的网页服务器（总不能做好了只给自己看吧！），且该服

务器是别人的计算机，而非你自己架设的主机，那么问题就来了！你猜，哪一种链接会出问题？呵呵答案是『绝对路

径』，您猜对了吗？

为什么说『绝对路径』会出问题呢？因为，当您将档案上传到网络上时，您的整个网页目录架构一定会变，到时候，

计算机可能找不到。所以说，没事的话，尽量用『相对路径』来作链接吧！好写又不容易出错。

另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：$33+!3底下放进了 .+!

、 .+! 两个图，而 !,I 、 I  依旧在 $3底下。现在我们想在 !,I 下设个链接到

.+!这图档（链接不限于只能连  " 文件，图文件、文字文件均可），那我们又该如何来使用『相对路径』呢？他

们又不在『同一个目录』下？

<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:\底下了）

说到链接，最基本来看有『内部链接』及『外部链接』，所谓『内部链接』就是自己网站间网页的链接，『外部链

接』就是链接到外面去

%、【网页内部的链接】

使用方法：

（）先在欲链接处作记号：,//这里是你想链接的点

（）设定链接：/1/链接

标志解说：有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的找到资料。其原理不

过是：在欲链接处做个记号（网页的任何地方都可以喔！），然后，链接时就寻这记号，就可以快速找到资料。很简

单吧！

%使用范例：

范例第一步骤第二步骤

www 链接标志基本概念 <a name="m1">欲链接的位置</a> <a href="#m1">www 链接标志基本概念</a>

网页内部的链接 <a name="m2">欲链接的位置</a> <a href="#m2">网页内部的链接</a>

网页外部的链接 <a name="m3">欲链接的位置</a> <a href="#m3">网页外部的链接</a>

4、【网页外部的链接】

剩余24页未读，继续阅读

评论收藏

内容反馈

xionghui7090

粉丝: 1
资源: 20

Html+css基础

最新资源