1.7　编写第一个HTML网页

双击index.html打开页面，项目中已经默认生成了HTML5页面所需要的结构，代码如下。另外，在空的.html文档中输入英文状态下的叹号“!”，按Tab键，也能快速生成HTML5页面的基础结构。

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
    </head>
    <body>
    </body>
</html>

第一行代码<!DOCTYPE html>是一个声明，告诉Web浏览器当前页面应该使用哪个HTML版本进行解析。

<html>标签是整个页面的最外层围墙，用它来“包裹”页面的所有内容。<head>标签相当于页面的身份证，包括了页面的所有重要信息，这一部分内容不会呈现在页面上，浏览者不能直接看到。<body>部分是页面的主体部分，它相当于一个房间，里面包含了所有在浏览器上要呈现的内容信息，也就是浏览者可以看到的内容。

在<body></body>标签之间加入标题和内容，标题使用<h1>标签，内容使用<p>标签。不同的标签将在浏览器中呈现不同的样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>第一个页面</title>
    </head>
    <body>
        <h1>我们的第一个HTML页面</h1>
        <p>开始HTML学习的旅程！</p>
    </body>
</html>

此时，网页的结构已经完成了，按快捷键Ctrl+S保存文件，单击【运行】，选择要使用的浏览器，如图1-17所示，即可使用浏览器打开网页，运行结果如图1-18所示。

图1-17　在浏览器中打开网页

图1-18　浏览器显示效果

当然，使用记事本同样可以编写HTML网页，步骤如下。

在.html文件上单击鼠标右键，在弹出的快捷菜单中选择【打开方式】，选择类型为【记事本】。此时，使用记事本打开了.html文件。

在记事本的界面中输入HTML代码，按快捷键Ctrl+S保存，如图1-19所示。此时，双击.html文件即可在浏览器中打开页面，如图1-20所示。

图1-19　在记事本中输入HTML代码

图1-20　在浏览器中打开.html文件

不同浏览器显示的HTML网页效果可能会略有差异，这个问题后期可使用CSS来解决。在.html文件上单击鼠标右键，在弹出的快捷菜单中选择【打开方式】，选择想要使用的浏览器，这样就可以在不同浏览器中打开.html文件了。

上一章目录下一章