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>
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!