HTML 基础知识

前言

  • 根据 W3C(万维网联盟)标准,一个页面由三个部分构成:结构、表现、行为动作。

  • 结构:HTML 用于描述页面接口

  • 表现:CSS 用于控制页面元素中的样式
  • 行为:JavaScript 用于响应用户的操作

1、HTML



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

  • HTML 不是一种编程语言,而是一种标记语言,使用标记标签来描述网页。

  • HTML 文档包含了 HTML 标签及文本内容,HTML 文档也叫做 web 页面。

  • HTML 运行在浏览器上,由浏览器来解析。

2、版本

  • 从初期的网络诞生后,已经出现了许多 HTML 版本。
版本 时间 版本 时间
HTML 1991
HTML+ 1993年6月
HTML 2.0 1995年11月
HTML 3.2 1996年1月
HTML 4.0 1997年12月
HTML 4.01 1999年12月
XHTML 1.0 2000年1月
XHTML 1.1 2001年5月
HTML5 2012
XHTML5 2013

3、文档后缀名

后缀名 描述
.htm 静态网页后缀名
.html 静态网页后缀名,html 与 htm 后缀可以互换,对网页完全没有影响,同时也没有区别
.shtm 可以在文件中写入 SSI 指令,当客户端访问这些文件时,服务器端会把这些文件进行读取和解释,把文件中包含的 SSI 指令解释出来
.shtml shtml 与 shtm 后缀可以互换,对网页完全没有影响,同时也没有区别
  • SSI:服务器端嵌入或者叫服务器端包含,是 Server Side Include 的简写。SSI 技术通过在文档中加入 SSI 指令,让服务器端在输出文档之前解析 SSI 指令,并把解析完的结果和文档一同输出给客户端。

4、页面结构

  • 下面是一个可视化的 HTML 页面结构,只有 <body> 区域 (白色部分) 才会在浏览器中显示。

4.1 实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    </head>

    <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
    </body>

    </html>
  • 效果

  • 解析

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

5、声明

  • <!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 tag)。

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

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

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

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

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

7、元素

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

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

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

8、中文编码

  • 目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8GBK
中文编码 声明 描述
UTF-8 <meta charset="utf-8" />
GBK <meta charset="gbk" /> 有些浏览器(如 360 浏览器)会设置 GBK 为默认编码

9、显示

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

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

  • 你是否看过一些网页然后惊叹它是如何实现的,如果您想找到其中的奥秘,只需要单击右键,然后选择”查看源文件”(IE)或”查看页面源代码”(Firefox),其他浏览器的做法也是类似的,这么做会打开一个包含页面 HTML 代码的窗口。

10、输出

  • 我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。

  • 对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

  • 当显示页面时,浏览器会移除源代码中多余的空格和空行,所有连续的空格或空行都会被算作一个空格。

11、编辑工具

  • 可以使用专业的 HTML 编辑器来编辑 HTML,推荐几款常用的编辑器,可以从以下软件的官网中下载对应的软件,按步骤安装即可。
软件 描述
VS Code Microsoft 在开发者大会上正式宣布一个运行于 Mac OS X、Windows 和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器
Sublime Text 可以配合 Emmet 插件来提高编码速度
Notepad++ 可以配合 Emmet 插件来提高编码速度
HTML/CSS/JS 在线工具 可以在线编辑 HTML、CSS、JS 代码,并实时查看效果,你也可以将优质代码保存分享

12、HTML 测验

12.1 HTML 测验

12.2 HTML5 测验

13、HTML 实例

文章目录
  1. 1. 前言
  2. 2. 1、HTML
  3. 3. 2、版本
  4. 4. 3、文档后缀名
  5. 5. 4、页面结构
    1. 5.1. 4.1 实例
  6. 6. 5、声明
    1. 6.1. 5.1 通用声明
  7. 7. 6、标签
  8. 8. 7、元素
  9. 9. 8、中文编码
  10. 10. 9、显示
  11. 11. 10、输出
  12. 12. 11、编辑工具
  13. 13. 12、HTML 测验
    1. 13.1. 12.1 HTML 测验
    2. 13.2. 12.2 HTML5 测验
  14. 14. 13、HTML 实例
隐藏目录