教程

  • 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言;
  • 可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析;

HTML实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

**注意:**对于中文网页需要使用< meta charset=“utf-8”>生命编码,否则会出现乱码。有些浏览器(如360浏览器)会设置GBK为默认编码,则需要设置为< meta charset=“gbk”>

Have A Try

Examples for HTML

文档的后缀名

  • .html
  • .htm

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

参考手册

Reference

HTML/CSS/JS在线工具

HTML/CSS/JS Online

简介

HTML实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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> 元素定义一个段落。

什么是HTML?

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

  • HTML 指的是超文本标记语言: HyperText Markup Language;
  • HTML 不是一种编程语言,而是一种标记语言;
  • 标记语言是一套标记标签 (markup tag);
  • HTML 使用标记标签来描述网页;
  • HTML 文档包含了HTML 标签文本内容;
  • HTML文档也叫做 web 页面

标签

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

  • HTML 标签是由尖括号包围的关键词,比如 < html>;
  • HTML 标签通常是成对出现的,比如 < b>和< /b>;
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签;
  • 开始和结束标签也被称为开放标签和闭合标签。

<标签>内容</标签></font>

元素

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

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

    HTML元素:

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

Web浏览器

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

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

    1

网页结构

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

页面标题

这是一个标题

这是一个段落。

这是另外一个段落。

只有< body>区域才会在浏览器中显示

版本

从初期的网络诞生后,已经出现了许多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
  • < !DOCTYPE>声明有助于浏览器中正确显示网页;

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

  • doctype 声明是不区分大小写的,以下方式均可







基础

标题

  • HTML 标题(Heading)是通过< h1> - < h6> 标签来定义的。
1
2
3
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

段落

  • HTML 段落是通过标签 < p> 来定义的。
1
2
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

链接

  • HTML 链接是通过标签 < a> 来定义的。
  • 提示:在href属性中指定链接的地址。
1
<a href="https://www.runoob.com">这是一个链接</a>

图像

  • HTML 图像是通过标签 < img> 来定义的。
  • 注意:图像的名称和尺寸是以属性的形式提供的。
1
<img loading="lazy" src="/images/logo.png" width="258" height="39" />

元素

开始标签 元素内容 结束标签
< p> 这是一个段落 < /p>
< a href=“default.htm”> 这是一个链接 < /a>
< br> 换行

开始标签常被称为起始标签(opening tag),结束标签常被称为闭合标签(closing tag)

元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

嵌套的HTML元素

  • 大多数HTML元素可以嵌套(HTML元素可以包含其他HTML元素);
  • HTML文档由相互嵌套的HTML元素构成。

HTML空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

< br> 就是没有关闭标签的空元素(< br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 < br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 < br> 在所有浏览器中都是有效的,但使用 < br /> 其实是更长远的保障。

HTML提示:使用小写标签

  • HTML 标签对大小写不敏感:< P> 等同于 < p>。许多网站都使用大写的 HTML 标签。
  • 菜鸟教程使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
注:本文章转自菜鸟教程

学习源码

Points

  • 换行< br>;

  • <font style="text-decoration: overline;">上划线overline</font>

    1
    <font style="text-decoration: overline;">X</font>
  • <i>斜体</i>

    1
    <i>斜体</i>