初探HTML5——Hello World

记得刚接触HTML的时候,有一些元素只会写但是不明白其含义,这情况真是很尴尬。本节将来解析一下HTML文档的主要的骨架标签的含义。

一、Hello World

编写第一段HTML代码,在页面上输出Hello World文本。代码如下:

<!--声明文档内容为html-->
<!DOCTYPE html>
<!--设置语言为英文-->
<html lang="en">
<head>
    <!--设置文档默认编码-->
    <meta charset="UTF-8">
    <!--网页的title-->
    <title>系统首页</title>
</head>
<body>
     <p>Hello World</p>
</body>
</html>

这是一段最简单HTML代码,但是其骨架完整。在浏览器中浏览效果如图:


Hello World

二、读懂每一个标签

一个符合规范的HTML文档会包含DOCTYPE、html、head、body这些基本的文档元素。当然即使没有显式的元素标签,网页也是可以显示,但是不建议这么去做。

1、HTML5基本文档结构

<!DOCTYPE html>
<html lang="en">
<head></head>
    <body>
    </body>
</html>

上述示例演示了HTML文档骨架的4种文档元素的使用方法。接下来,将逐一解读。

<!DOCTYPE HTML>

!DOCTYPE元素主要有两个作用第一是告诉浏览器,它即将处理的是一份HTML文档;第二是用来标记HTML的版本。通常这样的声明都在文档的第一行。

<html></html>

html元素是文档的根元素。

<head></head>

head元素是文档的头部(通俗的理解),在head元素中可以使用title元素和其他的元数据元素,也可以在head中引用js、css和定义js、css。

<body></body>

body元素(容器)中是文档的展示内容。

PS:小伙伴们真棒,已经写出了第一个网页。加油!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 格式后期处理。 Jeremy Keith在 Fronteers 2010 上的主题演讲 今天我想跟大家谈一谈HTM...
    LordZhou阅读 1,157评论 0 17
  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,112评论 1 25
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,814评论 0 8
  • 沉默就像一声清磐,摇曳着尾声,周围的活物都在其中凝结了。
    牧澄阅读 142评论 0 0