第一个html5程序


HTML 5实战HTML 5中不仅增加了很多新的页面标记,而且与HTML 4相比,整体页面的结构也发生了根本的变化。下面使用HTML 5新结构来编写一个简单的页面。
实例1-2 Hello, World页面的实现
1. 功能说明
使用HTML 5结构编写一个HTML页面,在页面中输出“Hello, World”的字样。
2. 实现代码
在Dreamweaver CS5中新建一个HTML页面1-2.html,加入代码如代码清单1-2所示。代码清单1-2 我的第一个HTML 5页面


我的第一个HTML 5 页面

Hello,World

3. 页面效果
该页面在Chrome浏览器下执行后的页面效果如图1-3所示。
图1-3 Hello, World页面实现效果
4. 分析
通过短短几行代码就完成了一个页面的开发,这充分说明了HTML 5语法的简洁;同时,HTML 5不是一种XML语言,其语法也很随意,下面从这两方面进行逐句分析。
第一行代码如下:

短短几个字符,甚至不包括版本号,就能告诉浏览器需要一个doctype来触发标准模式,可谓简明扼要。接下来,我们需要说明文档的字符编码,否则将出现浏览器不能正确解析,导致安全隐患的后果,为此我们加入如下一行代码:


同样也是几个字符,便说明了该文档的字符编码;同时,HTML 5不区分字母大小写、标记结束符及属性是否加引号,即下列代码是等效的:




在主体中,可以省略与标记,直接编写需要显示的内容,代码如下:

Hello,World

虽然我们在编写代码时省略了与标记,但在浏览器进行解析时,将会自动进行添加,如图1-4所示。
图1-4 自动添加与标记后的源文件
因此,考虑到代码的可维护性,我们在编写代码时,尽量增加这些在HTML 5中可选的元素,从而实现页面代码最大限度的简洁与完整。

声明: 除非转自他站(如有侵权,请联系处理)外,本文采用 BY-NC-SA 协议进行授权 | 智乐兔
转载请注明:转自《第一个html5程序
本文地址:https://www.zhiletu.com/archives-2792.html
关注公众号:智乐兔

赞赏

wechat pay微信赞赏alipay pay支付宝赞赏

上一篇
下一篇

相关文章

在线留言

你必须 登录后 才能留言!

在线客服
在线客服 X

售前: 点击这里给我发消息
售后: 点击这里给我发消息

智乐兔官微