HTML教程（看完这篇就够了）

TML教程

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来创建站点。

HTML 很容易学习！相信您能很快学会它！

本教程包含了数百个 HTML 实例。

使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孙叫兽的博客</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

HTML 文档的后缀名

.html

.htm

都可以。

HTML 简介

实例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</header>
<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

标签

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

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

标签对中的第一个标签是开始标签，第二个标签是结束标签

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

<标签>内容</标签>

html元素

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

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

HTML 元素:

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

web浏览器

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

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

html网页结构

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <p>这是一个段落。</p>
        <p>这是另外一个段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>声明

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

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

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

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

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

xhtml1.0

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

中文编码

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

tml+css基础一：html简介和发展史

HTML全称（hypertext markup language）译为超文本标记语言，其译文代表了HTML的含义，它和其他编程语言不同的是，HTML不是一门真正意义上编程语言，而是一种标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构搭建。

1.2、HTML发展史

HTML创始人（蒂姆·伯纳斯-李）蒂姆·伯纳斯-李除了是HTML的创始人，还是w3c组织的主席。

1、HTML1.0 （1991年12月）

1991年万维网（www）在互联网上首次露面，也随之引起了巨大的轰动。

1989年，伯纳斯-李写了一份备忘录，提出建立一个基于互联网的超文本系统。同年和另外一个工程师一起进行联合资金申请，但是这个项目并没有通过。

1991年底的时候，伯纳斯-李公开了一份“HTML Tag”的文档，里面描述了组成HTML初始版本的18个元素

2、HTML2.0（1995年11月）

HTML 2.0是HTML语言的扩展。

与原始版本的HTML不同，HTML 2.0被创建为Web标准，规定了常见的网页结构

3、HTML3.2（1996年1月）

惨淡的"第一次浏览器大战时期（Netspace Vs IE）"，两大巨头不断推出重大举措试图控制整个领域。

网页开发者是这场战争中的焦点。商业战争就像军备竞赛，各家公司为了保持领先，招兵买马。各家都有各家的规则。

那时候，你不得不写两份不同的网页，一个用于网景的浏览器，另一个用于微软的浏览器

4、HTML4（1997年12月）

浏览器大战接近尾声，W3C（世界万维网联盟）成立，他们打算通过制定统一的HTML标准，使整个产业能有序的发展。

他们计划用两种语言分离出HTML的表达式（HTML 4.0）和结构（CSS），并且说服浏览器厂商接受这些标准

这次发布提供了规范的三种变体：

Strict，严格版本；

Transitional，过渡版本；

Frameset，iframe框架集；

HTML4.0 采纳了许多浏览器特定的元素类型及属性，但是同时也把 Netscape 的视觉化标记标记为过时的寻求淘汰; 赞成使用样式表; 同时在1998年4月对HTML4.0进行了微小的修订，没有增加版本号HTML5.0

5、HTML4.01（1999年12月）

像 HTML4.0 一样提供了三种变体，并且他的最终错误修订版在2001年的5月12日发布

6、XHTML 1.0（2000年1月）

各大浏览器厂商纷纷接受W3C标准的时候，新技术出现了。

HTML和另一种语言XML融合，XHTML（可拓展的超文本标记语言）就此诞生。

它继承了HTML的通用型和浏览器的兼容性，继承了XML的严密性和可拓展性

7、HTML5（2014 年 10 月）

HTML5是HTML最新的修订版本，由W3C制定，目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准

我们现在使用的是html5版本，因为由于新兴框架的出现和浏览器兼容性的提升，让我们选择了html5。

文本标记语言

HTML 代表超文本标记语言。它给出了网站或网页的基本结构。它定义了您的网站在结构方面的外观，即网站包含标题、输入、表单、表格、按钮等等。

HTML 代码

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
  </head>
  <body> 
    <h1>Hello world</h1>
  </body>
</html>

您可以在此处查看 Hello world 网站的实时版本，其代码写在上面。

我们将详细讨论每一行代码，以便您能够了解每一行的想法。

<!DOCTYPE html>

这一行基本上告诉网络浏览器我们正在使用哪个HTML版本。在本例中我们是HTML5。

html

这是包含我们网页的所有代码的HTML元素。换句话说，这包含了网页所需的所有结构和设置，即外部 CSS、JS、CDN 等。您可能会注意到所有内容都位于<html>和之间</html>。这是因为这样所有的内容都会在这些元素之间。<html>通常指的是开始标签，</html>通常指的是结束标签。

头

该元素包含了网页的所有要求。例如，如果您想添加一些外部 CSS 文件、外部 JS 文件或一些外部 CDN（这是网站的要求），那么此元素就会派上用场。如果您不了解 CSS，它用于样式目的，JS 用于功能目的，CDN 代表内容交付网络。

标题

该元素包含显示在Web 浏览器选项卡中的标题。如果您访问 Hello world 网站，您会注意到网络浏览器的选项卡中有标题。这是这些标签的主要工作。Hello world<title>...</title>

身体

该元素包含用户可见的结构。您可以想象到的上述元素可以用于我们网页的设置。主要内容进入正文部分。

h1

h1是用于标题的标题元素。如果您访问 hello world 网站，我们可以看到的 hello world 就是标题。h1不仅仅是我们拥有的标题元素。我们有一个标题元素，从开始h1，直到，h6唯一的区别是h1较大，然后尺寸减小，直到 h6。

如果您想了解有关 HTML 元素的更多信息，可以在此处查看。

让我们创建一些表

<table>
  <tr>
    <th>S.No.</th>
    <th>Day</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Sunday</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Monday</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Tuesday</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Wednesday</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Thursday</td>
  </tr>
  <tr>
    <td>6</td>
    <td>Friday</td>
  </tr>
  <tr>
    <td>7</td>
    <td>Saturday</td>
  </tr>
</table>

table：这是用于创建表格的表格元素。
tr：表示表格行。即表的行。
td：表示表数据。即包含该表的数据。

您可以在此处查看代码的实时版本。
注意此代码必须写在body元素之间。

是时候创建 HTML 表单了

当您上网时，您可能见过一些 HTML 表单。让我们来创建我们自己的 HTML 表单。

这是代码片段。

    <form>
        Name: <input type="text" name="name"><br>
        Email: <input type="email" name="email"><br>
        <input type="submit" value="Submit">
    </form>

form：HTML 元素帮助我们创建 HTML 表单。
input：输入元素允许我们获取用户的输入。和称为HTML 属性type="email"。name="email"

您可以在此处查看该网页的实时版本。
注意此代码必须写在body元素之间。

结论

总之，HTML 通过定义其结构作为网站或网页的基础。它决定了网站在标题、表单、表格、按钮等元素方面的显示方式。通过使用 HTML 标签和元素，我们可以创建结构良好且组织良好的网页。

在线咨询

上一篇：图表分析中的HTML5地图需求，这款BI轻松5步就给解决了
下一篇：前端！各种浏览器之间的兼容问题，以及加载js的顺序问题

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商