《HTML5 开发实例大全》——1.2 在页面中输出一段文字

简介:

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章,第1.2节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.2 在页面中输出一段文字


daaa34b14fb5bd8a407d4c372e1f490ac4639709

实例说明

本实例的目的是编写一段基本的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
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
26天前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
184 77
|
27天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
html实现的文字发散动画效果代码
html实现的文字发散动画效果代码
70 30
|
3月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
135 0
|
3月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
120 7
|
3月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
39 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
3月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
53 0

热门文章

最新文章