制作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个，按层次结构分别为

 

　　。

 

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

 

　　Size:

 

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

 

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

 

　　即

 

　　标签里面。修改

 

　　代码，如下：

 

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

 

　　Size:

 

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

 

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

 

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

 

　　代码，如下：

 

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

 

　　邀您参加

 

　　Size:

 

　　保存index.html。

 

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

 

　　Size：

 

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

 

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

 

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

 

　　、、、等后续详细学习。

 

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

 

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

 

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

 

　　Size：

 

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

 

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