html5 代码生成 页面,HTML5学习# 制作HTML页面

制作HTML页面

1.2.1 创建首个HTML5页面.

Size：

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

Size:

这行代码定义了一个标签，

形同一个声明，告诉浏览器要使用标准、

兼容的模式来解析渲染这个HTML页面。

只需记住，在制作所有HTML5页面时把它放到第一行即可。

为HTML5页面，构建最基本的结构框架

有两大块，一部分是页面的“头”，一部分是页面的“身体”，

分别用

和标签来指定。创建代码如下：

Size：

基本不会作为页面内容给浏览者。需要有两项基本信息：

“名字”、“语言”。

标题--“

” 语言--“”

标注“语言”能便于浏览器正确地解读页面不会出现乱码。

在此用标签的charset来加以设置字符编码为“UTF-8”。

“UTF-8”是通用编码形式，又被称为“万国码”。修改

部分的代码，如下：HTML5学习邀请函

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

Size：

标签中则包含了所有要呈现给浏览者的内容信息。

首先把标题放入

中，代码如下：

Let's learn HTML5

Size:

接下来把文件保存为 index.html ,首个HTML页面便创建好了。

用浏览器打开即可看到显示效果：“Let's learn HTML5”。

1.2.2 增加必要的页面元素

Size:

在HTML的各种标签中，标题标签一共有6个，按层次结构分别为

到

。

因为这里标题只有一个，这里用最大的

，修改代码，如下：

Let's learn HTML5

Size:

接着添加说明文字。在放入文字之前，要有一个结构化的想法，

不直接把内容扔到代码里面。说明文字本身为文本段落，因此可放段落，

即

标签里面。修改

代码，如下：

Let's learn HTML5

发挥您的美感与想象力，探索Web开发的无限可能性，现诚邀您一同踏上HTML5的学习之旅

Size:

最后，将邀请参加的按钮加入到页面中。按钮实质为一个文本连接，单击后跳转到某个URL。

链接的标签为，跳转的URL可以用该标签的href属性来指定。假设点击“邀您参加”字样后，

页面将跳转到一个名为 invite.php的其他页面。修改

代码，如下：

Let's learn HTML5

发挥您的美感与想象力，探索Web开发的无限可能性，现诚邀您一同踏上HTML5的学习之旅

邀您参加

Size:

保存index.html。

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

Size：

在页面中加入一些“容器”、“区块”。将细小的事物归类放入不同的功能或内容区域中，

是页面结构变得井井有条，有助于页面美化。

是通用的区块。还有一些标签：

、、、等后续详细学习。

在这个例子中只有几项简单的内容元素，没有涉及一个页面多个版块，因此

不适用于这样的标签。在此，用

将所有内容包含进去。代码修改，如下：

Let's learn HTML5

发挥您的美感与想象力，探索Web开发的无限可能性，现诚邀您一同踏上HTML5的学习之旅

邀您参加

Size：

区块使页面代码的结构性更强了。为了便于控制这个区块的显示，可以赋予这个div以一个“名字”

，以直接对应到这个区块。做法是给它添加一个id属性，命名为container。修改

这一行代码，如下：

总结： index.html

HTML5学习邀请函

Let's learn HTML5

发挥您的美感与想象力，探索Web开发的无限可能性，现诚邀您一同踏上HTML5的学习之旅

邀您参加