Html+css基础教程资源-CSDN文库

4星 · 超过85%的资源需积分: 3 75 浏览量 2012-07-02 15:12:03 上传评论收藏 126KB DOC 举报

一、HTML的组成结构 HTML分为单标识语句和双标识语句。 <标识>内容　　　如：<br> <标识>内容</标识>　　　如：<a >搜狐</a> 　　　标识中存在标识属性用来定义各标识属性的值。<font size=5> 中心内容</font> ### Html+Css基础教程知识点详解 #### 一、HTML的基础概念与组成结构 **HTML** (HyperText Markup Language) 是一种标准标记语言，用于创建网页。它通过一系列的标签来组织网页内容，使得内容能够被浏览器正确解析并展示出来。 ##### HTML的组成结构 HTML文档的结构通常包括两大部分：`<head>` 和 `<body>` 部分。 - **单标签语句**：指那些不需要闭合标签的元素。例如 `<br>` 表示换行，这种标签通常被称为自闭合标签或空标签。 - **双标签语句**：这类标签需要有开始标签和结束标签，例如 `<a>` 标签，它需要以 `<a>` 开始，并以 `</a>` 结束。其中的内容会被包裹在这对标签之中。 **示例**： ```html <a href="http://www.sohu.com">搜狐</a> ``` 在这个例子中，`<a>` 标签被用来创建一个链接，链接的目标地址由 `href` 属性指定，链接的文本内容则被放置在 `<a>` 和 `</a>` 之间。 **标签属性**：每个标签可以包含一个或多个属性，用于进一步定义标签的行为或外观。例如： ```html <font size="5">中心内容</font> ``` 这里的 `<font>` 标签定义了一个字体大小为5的文本内容。 #### 二、HTML全局结构详解 **全局结构** 描述了HTML文档的整体框架，包括头部 (`<head>`) 和主体 (`<body>`) 部分。 - **头部 `<head>`**：包含了关于文档的信息，这些信息并不会直接显示在网页上，但对浏览器解释文档至关重要。 - **标题 `<title>`**：定义了浏览器标题栏中显示的文本，同时也是搜索引擎优化(SEO)的重要因素之一。 - **其他元数据**：如字符集、样式表引用、脚本等。 **示例**： ```html <head> <title>我的网站</title> </head> ``` - **主体 `<body>`**：这部分包含了网页上实际显示的所有内容。 **示例**： ```html <body> <p>欢迎来到我的网站！</p> </body> ``` **完整的HTML文档结构**： ```html <html> <head> <title>我的网站</title> </head> <body> <p>欢迎来到我的网站！</p> </body> </html> ``` #### 三、HTML `<body>` 标签的常用属性 **1. 边距属性** - `leftMargin` 和 `topMargin`：分别定义了页面左侧和顶部的空白距离，默认值通常为1。 - `marginwidth` 和 `marginheight`：定义了页面内容与浏览器边缘之间的距离。 **示例**： ```html <body leftMargin="0" topMargin="0" marginwidth="0" marginheight="0"> <p>内容</p> </body> ``` **2. 背景颜色** - `bgcolor` 属性：定义了整个页面的背景颜色。 **示例**： ```html <body bgcolor="#ff0000"> <p>这是一个红色背景的页面。</p> </body> ``` **3. 背景图片** - `background` 属性：用于设置页面的背景图片，需要提供图片的URL。 **示例**： ```html <body background="images/background.jpg"> <p>这是一张背景图片。</p> </body> ``` **4. 背景音乐** - 使用 `<bgsound>` 标签可以为页面添加背景音乐。 **示例**： ```html <head> <bgsound src="sounds/background_music.mp3" loop="-1"> </head> ``` 这里，`src` 属性指定了音频文件的位置，`loop` 属性定义了音频播放的次数（`-1` 表示无限循环）。 #### 四、字体及其属性、文字排版标识的使用 **1. 标题字体** - `<h#>` 标签：用于定义不同级别的标题，`#` 的值可以是 1 到 6，其中 `<h1>` 表示最重要的标题，`<h6>` 表示较次要的标题。 **示例**： ```html <h1>主标题</h1> <h2>副标题</h2> ``` **2. 字体大小** - `<font>` 标签：可以用来定义文本的字体大小和其他属性。 **示例**： ```html <font size="5">这是字号为5的文字。</font> ``` 以上知识点覆盖了HTML基础知识的主要方面，包括文档结构、标签分类、常用属性以及如何使用这些标签来美化和布局网页内容。对于初学者来说，掌握这些基本概念是构建更复杂网页设计的基础。

资源推荐

资源详情

资源评论

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

( 适合新手 )

在这里我把 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、【网页外部的链接】

标志解说：链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了  五彩缤纷的世界。

由于网络上的服务五花八门，所以不同的服务有不同的链接方法，工友将之整理在下表。

使用范例：

剩余23页未读，继续阅读

评论收藏

内容反馈

qiubim

2013-01-08

写的还可以，入门级别的

yufeiflying

粉丝: 0
资源: 3

Html+css基础教程

Html+css基础

Html与css教程

Html基础教程

Html 入门 基础教程

html+css 基础教程

HTML+CSS基础教程-介绍HTML和CSS的基础知识 学习HTML基础语法、标签、CSS基础语法和选择器

尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码

html&css入门基础知识点.pdf

(完整版)《HTML5+CSS3网站设计基础教程》_教学大纲.pdf

Html-css

Html_Js_cssWeb基础教程

Html_css

Html+css帮助手册

Html css参考手册

HTML5+CSS3网站设计基础教程_动手实践源代码

HTML5+CSS3+JS入门教程 + 源代码 pdf

html+js+css基础教程.pdf

HTML + JavaScript + CSS 基础教程.pdf

HTML5+CSS3网站设计基础教程（第2版）_源代码.zip

Html和css帮助文档

Html-css:学徒制

css和Html中文手册

Html基础教程（chm版）

Html+css选择题.docx

HTML5+CSS3网站设计基础教程 源代码.7z

HTML5+CSS3网站设计基础教程_动手实践源代码.zip

《HTML5+CSS3网站设计基础教程》源代码+补充案例+动手实践

HTML5+CSS3网页设计基础教程教学课件汇总完整版电子教案.pptx

HTML5+CSS3网站设计基础教程 源代码.rar

最新资源

Html 入门基础教程

HTML+CSS基础教程-介绍HTML和CSS的基础知识学习HTML基础语法、标签、CSS基础语法和选择器

HTML5+CSS3网站设计基础教程源代码.7z

HTML5+CSS3网站设计基础教程源代码.rar