跳到主要内容

HTML简介

实例解析​

HTML文件代码的结构如下图所示。 html

其中：

  • <!DOCUTYPE html> 声明为HTML5文档
  • <html>元素是HTML页面的根元素
  • <head>元素包含了文档的元(meta)数据，如 <meta charset="utf-8">定义了网页编码编码格式是utf-8
  • <title> 元素描述了文档的标题
  • <body>元素描述了可见页面的内容
  • <h1>元素定义一个大标题
  • <p>元素定义一个段落

注： 在浏览器的页面上按下快捷键F12，可以开启调试模式，就可以看到组成的标签。 F12调试

什么是HTML​

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言：HyperText Markuup Language。取首字母就是HTML
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签（markup tag）
  • HTML 使用标记标签来描述网页
  • HTML 文档包含HTML标签和文本内容
  • HTML 文档也叫 web 页面

HTML 标签​

  • HTML 标记标签通常被称为 HTML 标签（HTML tag）
  • HTML 标签通常是成对出现的，例如<b>和</b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

HTML 元素​

“HTML 标签” 和 “HTML 元素” 通过都是描述相同的意思。 但严格来讲一个HTML元素包含的开始标签和结束标签。

Web 浏览器​

web 浏览器（如谷歌浏览器, edge浏览器，Firefox, Safari，搜狗浏览器，360浏览器等）是用于读取 HTML 文件，并将其作为网页显示。浏览器并不是直接显示HTML标签，但可以使用标签来决定如何展现HTML页面的内页给用户。

HTML 版本​

从初期的网络诞生后，已经出现了许多HTML版本

版本发布时间
HTML1991
HTML +1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML 52012
XHTML 52013

DOCUTYPE 声明​

<!DOCUTYPE> 声明有助于浏览器中正确显示网页。 网络上有许多不现的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页的内容。 docutype的声明是不区分大小写的

<!DOCUTYPE html> <!DOCUTYPE HTML> <!docutype html> <!Docutype Html>

通用声明​

HTML 5​

<!DOCUTYPE html>

HTML 4.01​

<!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0​

<!DOCUTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

查看完整网页声明类型，可以参考 Docutype参考手册

中文编码​

目前大部分浏览器，直接输出中文会出现乱码的情况，这时候我们就需要在头部将字符声明为UTF-8 或 GBK

<!DOCUTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落</p>
    </body>
</html>