• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

3.1 HTML基本结构

一、HTML基本结构

我们下面通过一张图来说明HTML的基本结构:

HTML基本结构
HTML基本结构

一个HTML文档由4个基本部分组成:

  • ① 一个文档声明:<!DOCTYPE HTML>
  • ② 一个html标签对:<html></html>
  • ③ 一个head标签对:<head></head>
  • ④ 一个body标签对:<body></body>

大家都看到了吧,所谓的HTML就是一对对的标签(也有例外)。我们简单说一下这几个基本标签的作用:

1、文档声明

<!DOCTYPE HTML>声明这是一个HTML文档。

2、<HTML>标签

<html>标签的作用相当于设计者在告诉浏览器,整个网页是从<html>这里开始的,然后到</html>结束。

对于<html>这个标签,我们经常看到这样一句代码:

 
<html xmlns="http://www.w3.org/1999/xhtml">

其实上面这句代码声明了该网页使用的是W3C组织的XHTML标准。

3、<head>标签

head标签是页面的“头部”,只能定义一些特殊的内容。

4、<body>标签

body标签是页面的“身体”,一般网页绝大多数的标签代码都是在这里编写。

在此说明一下:

  • (1)对于HTML的基本结构,你至少要默写出来,这些都要记忆。
  • (2)记忆标签小技巧:根据标签字母意思就很容易记忆了,比如<head>表示“页头”,<body>表示“页身”。

二、用记事本编写网页

第一步:新建“记事本”,把下面这段代码复制到记事本中去,然后保存,将记事本名字改为“我的第一个网页”。

 
    <!DOCTYPE HTML>
    <html>
        <head>
            <title>这是网页的标题</title>    
        </head>
        <body>
            <p>这是网页的内容</p>       
        </body>
    </html>
  

第二步:将记事本后缀名“.txt”改为“.html”:

用记事本编写HTML

第三步:点击“我的第一个网页.html”这个HTML文件,就可以在浏览器打开了。

用记事本编写HTM

在这里说明一下:

<title>标签是<head>标签的内部标签,这里定义的是网页的标题内容,这个标题不是文章的标题,而是在浏览器显示的那个标题;

<p>标签是段落标签,可以定义一段文字内容,我们在后面会讲到这些标签的具体用法,在这里只需要读者了解一下即可。

三、用Visual Studio 2010编写网页

前面我们已经讲解了怎么在Visual Studio 2010建立一个网页,现在我们新建一个“HTML页”,打开如下:

Visual Studio 2010编写HTML网页

那接下来,我们就用Visual Studio2010编写跟用记事本编写的一样的网页。完整的代码如下:

 
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>这是网页的标题</title>      <!--这里添加网页标题-->
</head>
<body>
    <p>这是网页的内容</p>          <!--这里添加网页内容-->
</body>
</html>
  

点击“浏览器查看”,效果如下:

Visual Studio 2010编写HTML效果

虽然用记事本也可以写网页代码,但是这是一个很原始的做法,建议以后都用Visual Studio或者Dreamweaver写。

当然,在这套HTML入门教程中,我们还是使用绿叶学习网的在线代码测试工具来得方便。

总结

1、HTML基本结构:

HTML基本结构
HTML基本结构

2、要熟悉在Visual Studio中编写网页代码.

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部