HTML入门笔记[2]:用HTML说出“HELLO WORLD!”

732 阅读4分钟

不晓得能不能看到

HELLO WORLD!

HELLO WORLD!

HELLO WORLD!

HELLO WORLD!

不同于正经的编程语言,我们只需要一个简单的文本文档,就可以通过浏览器使用HTML说出“HELLO WORLD!”。
就像C需要#include<stdio.h>,C++需要#include <iostream>一样,我们的浏览器也需要HTML文档告诉它“我需要这么做”。所以一个最简单的HTML文档(比如上例),也绝非简单的四个HTML元素。

1. HTML文档构成

最基础的HTML文档可以是这样的

↑↑↑↑这里有东西哟~并不是一个空行 上方的HTML文档虽然没有在浏览器上显示任何信息,但是浏览器知道了它是一个HTML文档,具体代码如下:
<!DOCTYPE html>
<!-- 这是一个声明,告诉浏览器文档由HTML语言编写-->
<html>
<!-- 文档的第一个元素 html-->
    <head>
    <!-- html元素包含的第一个元素 head元素-->
    </head>
    
    <body>
     <!-- html元素包含的第二个元素 body元素-->
    </body>
</html>

有了这些代码,你的浏览器就会“切换”到HTML的模式,为你显示一个空空入野的空白页面。
那么,这些元素为啥必不可缺呢?下面我们就来依次分析这个空页面所包含的内容。

1.1 <!DOCTYPE html>

<!DOCTYPE html>语句声明了文档类型,这样浏览器才会将该语句以下的内容通过HTML语言进行解读,所以你的HTML文档必须由这句话开始
早期的HTML文档声明其实不是<!DOCTYPE html>,而是一串很长的链接:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

不过HTML5规范,你只需要写<!DOCTYPE html>这一句话,就能达到相同的效果。更多的声明写法可以看这里

1.2 <html>根元素

<html></html>: <html>元素包含了整个页面的内容,所以它是HTML文档的根元素。<html>元素包含<head>元素和<body>元素。
lang属性规定了元素内容的语言,<html>元素的lang属性即规定了整个HTML文档的显示语言。
HTML语言代码参考手册

↓↓↓下图是HTML文档可视化的效果,白色的部分是浏览器显示的内容↓↓↓

1.3 <head>元素

<head></head>: <head>元素是一个容器,该元素所包含的内容不会显示在网页页面中,但是会包含在HTML文档内。可以理解它为HTML页面的注释和说明。 <head>元素会包含以下元素:

<head>
    <meat charset="utf-8">
    <!--这里说明该HTML文件采用utf-8字符集-->
    <!--meta元素提供了HTML文档的元数据(Metadata)-->
    <!--元数据不会显示在客户端,但是会被浏览器解析。META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。-->
    <title>我是网页的名称</title>
    <!--title元素描述了文档的标题,该元素在HTML/XHTML文档中是必须的-->
    <style>我是页面的样式</style>
    <!--style元素规定了浏览器如何呈现HTML文档-->
    <base href="http://www.baidu.com" target="_blank">默认链接是百度,会在新的页面打开,而且页面内的其他链接也会以base设定的方式打开</base>
    <!--base标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接-->
    <link>文档和外界外部资源间的关系,标签通常用于链接到样式表</link>
    <script>用于加载脚本文件</script>
    <noscript>定义在脚本未被执行时的替代内容(文本)。</noscript>
    <!-- 此标签可被用于可识别 <noscript>标签但无法支持其中的脚本的浏览器-->
</head>

style元素的示例页面
base元素的示例页面

1.4 <body>元素

<body></body>: <body>元素包含了访问页面时显示在页面上的内容,包括文本,图片,音频,游戏等等。

2. 拿HTML说出“HELLO WORLD!”

了解了HTML文档的基本构成之后,我们就可以让浏览器说出“HELLO WORLD!”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>用HTML说HELLO WORLD!</title>
    </head>
    <body>
        <h1 style="color:pink;">HELLO WORLD!</h1>
        <h2 style="color:lightblue;">HELLO WORLD!</h2>
        <h3 style="color:yellow;">HELLO WORLD!</h3>
        <h4 style="color:lightgreen;">HELLO WORLD!</h4>
    </body>
</html>

显示如下


用HTML说HELLO WORLD!

HELLO WORLD!

HELLO WORLD!

HELLO WORLD!

HELLO WORLD!