HTML 基础知识

前言

  • HTML 指的是超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用来描述网页的标准标记语言。

  • HTML 不是一种编程语言,而是一种标记语言,您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

  • 标记语言是一套标记标签 (markup tag)。

  • HTML 使用标记标签来描述网页。

  • HTML 文档包含了 HTML 标签及文本内容。

  • HTML 文档也叫做 web 页面。

1、HTML 版本

  • 从初期的网络诞生后,已经出现了许多 HTML 版本。
版本 发布时间
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

2、HTML 文档的后缀名

  • .html
  • .htm

  • 以上两种后缀名没有区别,都可以使用。

3、HTML 实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Qian Chia 工作室</title>
    </head>
    <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    </body>
    </html>
  • 实例解析

    • <!DOCTYPE html> 声明为 HTML5 文档。
    • <html> 元素是 HTML 页面的根元素。
    • <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
    • <title> 元素描述了文档的标题。
    • <body> 元素包含了可见的页面内容。
    • <h1> 元素定义一个大标题。
    • <p> 元素定义一个段落。
  • 注:在浏览器的页面上使用键盘上的 F12 按键(Windows 系统)开启调试模式,就可以看到组成标签。

4、HTML 网页结构

  • 下面是一个可视化的 HTML 页面结构

  • 只有 <body> 区域 (白色部分) 才会在浏览器中显示。

5、HTML 声明

  • <!DOCTYPE> 声明有助于浏览器中正确显示网页。

  • 网络上有很多不同的文件,如果能够正确声明 HTML 的版本,浏览器就能正确显示网页内容。

  • doctype 声明是不区分大小写的,用来告知 Web 浏览器页面使用了哪种 HTML 版本。

    1
    2
    3
    4
    5
    6
    7
    <!DOCTYPE html> 

    <!DOCTYPE HTML>

    <!doctype html>

    <!Doctype Html>

5.1 通用声明

  • HTML5

    1
    <!DOCTYPE html>
    • HTML5 不是基于 SGML,因此不要求引用 DTD。
  • HTML 4.01

    1
    2
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    • 在 HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML(Standard Generalized Markup Language 标准通用标记语言)。

    • HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset。

  • XHTML 1.0

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

6、HTML 标签

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>

  • HTML 标签通常是成对出现的,比如 <b></b>

  • 标签对中的第一个标签是开始标签,第二个标签是结束标签。

  • 开始和结束标签也被称为开放标签和闭合标签。

    1
    <标签>内容</标签>

7、HTML 元素

  • “HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思。

  • 但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。

    1
    <p>这是一个段落。</p>

8、HTML 中文编码

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

  • UTF-8 声明:<meta charset="utf-8">

  • GBK 声明:<meta charset="gbk">,有些浏览器(如 360 浏览器)会设置 GBK 为默认编码。

9、Web 浏览器

  • Web 浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取 HTML 文件,并将其作为网页显示。

  • 浏览器并不是直接显示的 HTML 标签,但可以使用标签来决定如何展现 HTML 页面的内容给用户。

10、HTML 编辑工具

  • 可以使用专业的 HTML 编辑器来编辑 HTML,推荐几款常用的编辑器,可以从以下软件的官网中下载对应的软件,按步骤安装即可。

  • Sublime Text 和 Notepad++ 还可以配合 Emmet 插件来提高编码速度。

  • HTML/CSS/JS 在线工具可以在线编辑 HTML、CSS、JS 代码,并实时查看效果,你也可以将优质代码保存分享

文章目录
  1. 1. 前言
  2. 2. 1、HTML 版本
  3. 3. 2、HTML 文档的后缀名
  4. 4. 3、HTML 实例
  5. 5. 4、HTML 网页结构
  6. 6. 5、HTML 声明
    1. 6.1. 5.1 通用声明
  7. 7. 6、HTML 标签
  8. 8. 7、HTML 元素
  9. 9. 8、HTML 中文编码
  10. 10. 9、Web 浏览器
  11. 11. 10、HTML 编辑工具
隐藏目录