制作HTML页面

1.2.1 创建首个HTML5页面.

Size：
在准备好的开发工具中，首先输入第一行HTML代码，如下：

<!doctype html>

Size:
这行代码定义了一个<!DOCTYPE>标签，
形同一个声明，告诉浏览器要使用标准、
兼容的模式来解析渲染这个HTML页面。
只需记住，在制作所有HTML5页面时把它放到第一行即可。
为HTML5页面，构建最基本的结构框架
有两大块，一部分是页面的“头”，一部分是页面的“身体”，
分别用<head>和<body>标签来指定。创建代码如下：

<html>
    <head>
    </head>
    <body>
    </body>
</html>

Size：
<head>标签中包含了对HTML5页面各种属性、配置信息的描述，
基本不会作为页面内容给浏览者。需要有两项基本信息：
“名字”、“语言”。
标题--“<title>” 语言--“<meta>”
标注“语言”能便于浏览器正确地解读页面不会出现乱码。
在此用<meta>标签的charset来加以设置字符编码为“UTF-8”。
“UTF-8”是通用编码形式，又被称为“万国码”。修改<head>部分的代码，如下：

<head>
    <meta charset="UTF-8">
    <title>HTML5学习邀请函</title>
</head>

范围窄的编码形式，如：简体中文--“GB2312” 简繁体中文--“GB18030” 等。

Size：
<body>标签中则包含了所有要呈现给浏览者的内容信息。
首先把标题放入<body>中，代码如下：

<body>
    Let's learn HTML5
</body>

Size:
接下来把文件保存为 index.html ,首个HTML页面便创建好了。
用浏览器打开即可看到显示效果：“Let's learn HTML5”。

1.2.2 增加必要的页面元素

Size:
在HTML的各种标签中，标题标签一共有6个，按层次结构分别为<h1>到<h6>。
因为这里标题只有一个，这里用最大的<h1>，修改<body>代码，如下：

<body>
    <h1>Let's learn HTML5</h1>
</body>

Size:
接着添加说明文字。在放入文字之前，要有一个结构化的想法，
不直接把内容扔到代码里面。说明文字本身为文本段落，因此可放段落，
即<p>标签里面。修改<body>代码，如下：

<body>
    <h1>Let's learn HTML5</h1>
    <p>发挥您的美感与想象力，探索Web开发的无限可能性，现诚邀您一同踏上HTML5的学习之旅</p>
</body>

Size:
最后，将邀请参加的按钮加入到页面中。按钮实质为一个文本连接，单击后跳转到某个URL。
链接的标签为<a>，跳转的URL可以用该标签的href属性来指定。假设点击“邀您参加”字样后，
页面将跳转到一个名为 invite.php的其他页面。修改<body>代码，如下：

<body>
    <h1>Let's learn HTML5</h1>
    <p>发挥您的美感与想象力，探索Web开发的无限可能性，现诚邀您一同踏上HTML5的学习之旅</p>
    <a href="invite.php">邀您参加</a>
</body>

Size:
保存index.html。

1.2.3 页面中那些看不见的代码

Size：
在页面中加入一些“容器”、“区块”。将细小的事物归类放入不同的功能或内容区域中，
是页面结构变得井井有条，有助于页面美化。<div>是通用的区块。还有一些标签：

<header>、<section>、<aside>、<footer>等后续详细学习。
在这个例子中只有几项简单的内容元素，没有涉及一个页面多个版块，因此
不适用于<section>这样的标签。在此，用<div>将所有内容包含进去。<body>代码修改，如下：

<body>
    <div>
        <h1>Let's learn HTML5</h1>
        <p>发挥您的美感与想象力，探索Web开发的无限可能性，现诚邀您一同踏上HTML5的学习之旅</p>
        <a href="invite.php">邀您参加</a>
    </div>
</body>

Size：
区块使页面代码的结构性更强了。为了便于控制这个区块的显示，可以赋予这个div以一个“名字”
，以直接对应到这个区块。做法是给它添加一个id属性，命名为container。修改<div>这一行代码，如下：

<div id="container">

总结： index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5学习邀请函</title>
    </head>
    <body>
        <div id="container">
            <h1>Let's learn HTML5</h1>
            <p>发挥您的美感与想象力，探索Web开发的无限可能性，现诚邀您一同踏上HTML5的学习之旅</p>
            <a href="invite.php">邀您参加</a>
        </div>
    </body>
</html>

HTML5学习# 制作HTML页面

HTML5学习# 制作HTML页面

制作HTML页面

1.2.1 创建首个HTML5页面.

1.2.2 增加必要的页面元素

1.2.3 页面中那些看不见的代码

推荐阅读更多精彩内容