在显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。

而内联元素往往出现在句子里，在浏览器中显示时不会换行。

例如，、等。

因此，如果元素是块级的，则总是在新行上显示，好比是书中的一个新段落；而元素如果是内联的，那么只能在当前行中显示，就像是段落中的一个单词。

块级元素是网页上比较大的结构，因此常包含其他块级元素、内联元素和文本；而内联元素一般只能包含其他内联元素和文本。

1.14HTML注释

在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。

注释可以写在

--和-->之间。

浏览器是忽略注释的，你不会在HTML正文中看到你的注释。

--Thisisacomment-->

1.15相对路径（RelativePath）和绝对路径（AbsolutePath）

HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。

比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接（hyperlink）？

怎样在一个网页中插入一张图片？

HTML有2种路径的写法：

相对路径和绝对路径。

一般相对路径比较常见，主要介绍之；

ØHTML相对路径（RelativePath）

1.同一个目录的文件引用

如果源文件和引用文件在同一个目录里，直接写引用文件名即可。

我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。

假设info.html路径是：

c:

\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：

c:

\Inetpub\wwwroot\sites\blabla\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

2.如何表示上级目录

../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。

假设info.html路径是：

c:

\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：

c:

\Inetpub\wwwroot\sites\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

假设info.html路径是：

c:

\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：

c:

\Inetpub\wwwroot\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

假设info.html路径是：

c:

\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：

c:

\Inetpub\wwwroot\sites\wowstory\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

3.如何表示下级目录

引用下级目录的文件，直接写下级目录文件的路径即可。

假设info.html路径是：

c:

\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：

c:

\Inetpub\wwwroot\sites\blabla\html\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

假设info.html路径是：

c:

\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：

c:

\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html

在info.html加入index.html超链接的代码应该这样写：

index.html

第二章CSS重点知识

CSS（CascadingStyleSheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示HTML元素，用于控制网页的外观。

2.1CSS样式表的调用方式

Ø内部样式：

把CSS样式表放到文档中：

格式如下：

……

Ø内联式：

把CSS样式表写在HTML对应的标记内。

格式如下：

14pt;color:

blue">蓝色14号文字

Ø外部样式：

把编辑好的CSS文档保存成“.CSS”文件，然后在中定义。

格式如下：

.....

从高到低：

内联样式--------外部样式---------内部样式-----------导入样式

2.2CSS选择器分类

Ø类选择器

定义：

类选择器根据类名来选择，前面以”.”来命名，如.demo{color:

#FF0000;}

使用方法：

在HTML中，标记可以定义一个class的属性来调用。

如....

Øid选择器

定义：

根据元素ID来选择元素，具有唯一性。

前面以”#”号来标志，如：

#demo{color:

#FF0000;}

使用方法：

在HTML中，标记可以定义一个id的属性来调用。

如....

Ø标签选择器

定义：

HTML页面是有很多不同的标签组成，标签选择器，则是决定对应标签采用相应的CSS样式。

使用方法：

p{font-size:

12px;background:

#900;color:

090;}，页面里对应的p标记全部应用此样式。

Ø伪类选择器（针对超链接）

一般伪类都只会被应用在链接的样式上，格式如下：

a:

link{color:

#000099;}--------------------------带有超链接的文字显示的样式。

a:

visited{color:

#000099;}---------------------访问过的超链接显示的样式。

a:

hover{color:

#000099;}----------------------鼠标放在超链接上显示的样式。

a:

active{color:

#000099;}-----------------------鼠标按下去是超链接显示样式。

a{color:

#000099;}-------------------------------标签选择器,链接的颜色。

Ø后代选择器（派生选择器）

通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。

#demop{color:

#ff0000;size:

14px;}

Ø通用选择器

通用选择器用*来表示。

例如：

*{font-size:

12px;}表示所有的元素的字体大小都是12px。

Ø并集选择器（群组选择器）

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

比如：

p,td,li{line-height:

20px;color:

#ff0000;}

Ø相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。

（只匹配第一个元素）

ul+p{

     color:

red;

  }

Ø子选择器X>Y

div#container>ul{

    border:

1pxsolidblack;

  }

        

• ListItem

            

               

  • Child

            

          

        

• ListItem

        

• ListItem

        

• ListItem