认识HTML文件结构及标签

2022-01-06大约9分钟

HTML的语法

HTML标签是一种和XML非常相似的一种结构：

标签由英文尖括号<和>括起来，如<html>就是一个标签。
html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

比如下面这些例子：

<p>乐码范网站</p>
<div>乐码范网站</div>
<span>乐码范网站</span>

两个标签中间的字符就是要显示的内容。比如<p>乐码范网站</p>，<p>和</p>分别是p标签的开始和闭合，乐码范网站就是内容。

标签是可以嵌套的

比如下面这个例子，<span>标签嵌进了<div>标签里面：

<div>乐码范<span>是</span>一个学习编程的网站</div>

但是内部的标签<span>必须先闭合，然后外面<div>在后面才能闭合。

这样的代码是错误的，原因就是因为标签<span>没有在</div>之前闭合：

<div>乐码范<span>是一个学习编程的网站</div>

标签不区分大小写

<DIV>,<Div>和<div>是一样的，但建议小写，因为大部分程序员、浏览器都以小写为标准。

HTML的结构

一个HTML通常是这样一种结构：

<!doctype html>
<html>
    <head>...</head>
    <body>...</body>
</html>

<!doctype html>是HTML的文件类型标记，应该放到HTML的第一行，这样浏览器在开始解析的时候，就知道这是一个符合HTML5规范的HTML文档。
<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<style>、<link>、<meta>等标签，这里的标签目的主要是不用来显示，而是为了提供一些涉及到浏览器对网页的渲染，SEO（搜素引擎优化）等功能。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

HTML的标签

HTML规范里定义了许多标签，这些标签是用来定义一个HTML网页的基础。结合上面说过的结构，再加上一些新的标签，看下面这个例子：

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>表白</title>
    </head>

    <body>
        <h1>表白</h1>
        <p>一个男生暗恋一个女生很久了。</p>
        <p>一天自习课上，男生偷偷的传了小纸条给女生，上面写着“其实我注意你很久了”。</p>
        <p>不一会儿，女生传了另一张纸条，男生心急火燎的打开一看“拜托你不要告诉老师，我保证以后再也不嗑瓜子了”。。。。。</p>
    </body>
</html>

可以点"运行"按钮，来查看网页的具体执行效果。点击“结果” 标签可以关掉运行窗口。

除了前面提到的<html>、<head>、<body>等标签，我们来分析一下，这个网页还有哪些新的标签：

在<head>里，我们用了<meta>和<title>标签。

<meta>用来告诉浏览器网页中字符用的字符集是utf-8，防止浏览器打开的时候出现乱码。
<title>用来告诉浏览器，在浏览器的窗口显示什么标题。

在里，我们用了<h1>和<p>标签。

<h1>表示的是内容的标题，一般情况下，一个网页要有一个<h1>标签作为一个大标题。
<p>表示的是一段内容，我们为每个段落用了一个<p>标签。

在下一章，我们将对常见的标签进行详细的解释。

HTML

前一页

后一页