本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章,第1.2节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.2 在页面中输出一段文字
![daaa34b14fb5bd8a407d4c372e1f490ac4639709](https://yqfile.alicdn.com/daaa34b14fb5bd8a407d4c372e1f490ac4639709.png?x-oss-process=image/resize,w_1400/format,webp)
实例说明
本实例的目的是编写一段基本的HTML 5程序,这段程序能够在页面中输出一段文字。本功能可以使用传统的HTML段落标记< p >< /p >来实现,请读者体会全新HTML 5代码的简洁性。
具体实现
使用Dreamweaver创建一个名为“002.html”的文件,具体代码如下所示:
<!DOCTYPE HTML>
<META charset="utf-8">
<TITLE>我的第一个HTML 5 页面</TITLE>
<P>欢迎学习HTML 5</P>
这样通过短短的几行代码就完成了一个页面的开发,这充分说明了HTML 5语法的简洁性。同时HTML 5并不是一种XML语言,其语法非常随意。上述程序中的第一行代码如下:
<! DOCTYPE HTML>
通过上述几个简短的字符,甚至不包括版本号,就能够告诉浏览器需要一个“doctype”来触发标准模式。接下来,我们需要说明文档的字符编码,否则将出现浏览器不能正确解析的错误,会导致安全隐患,为此加入如下一行代码:
<META charset="utf-8">
通过上述代码指明了该文档的字符编码。另外,因为HTML 5不区分字母大小写、标记结束符及属性是否加引号,所以如下3行代码是完全等效的:
<meta charset="utf-8">
<META charset="utf-8" />
<META charset=utf-8>
在HTML 5的主体代码中,可以省略< html >与< body >标记,可以直接编写需要显示的内容,代码如下:
<P>欢迎学习HTML 5</P>
虽然在编写代码时省略了< html >与< body >标记,但在浏览器进行解析时会自动进行添加。最终的执行效果如图1-3所示。
![7e3c499cb37ae297f4a1321eadcc21ac9c1a5607](https://yqfile.alicdn.com/7e3c499cb37ae297f4a1321eadcc21ac9c1a5607.png?x-oss-process=image/resize,w_1400/format,webp)