html教学分析,HTML教程（看完这篇就够了）

HTML教程

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

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

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

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

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

html>

水香木鱼的博客title>

head>

我的第一个标题h1>

我的第一个段落。p>

body>html>

HTML 文档的后缀名：.html、 .htm 格式

一、HTML 简介

实例：水香木鱼的博客这是我的标题这是我的段落

实例解析：html> 声明为 HTML5 文档 元素是 HTML 页面的根元素

 元素包含了文档的元(meta)数据，如  定义网页编码格式为 utf-8。 元素描述了文档的标题 元素包含了可见的页面内容

 元素定义一个大标题

 元素定义一个段落

1.什么是HTML？

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

2.HTML 指的是超文本标记语言:` HyperText Markup Language`

3.HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 `(markup tag)`

4.HTML 使用标记标签来描述网页

5.HTML 文档包含了HTML 标签及文本内容，HTML文档也叫做 web 页面

6.HTML 标签：HTML 标记标签通常被称为 HTML

2.标签

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

HTML 标签通常是成对出现的，比如  和

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

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

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

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

3.HTML 元素

这是一个段落p>

4.web浏览器

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

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

5.html网页结构

页面标题title>

head>

这是一个标题h1>

这是一个段落。p>

这是另外一个段落。p>

body>html>

6.html的版本：声明声明有助于浏览器中正确显示网页。版本发布时间

HTML1991

HTML+1993

HTML2.01995

HTML3.21997

HTML41999

XHTML1.02000

HTML52012

XHTML52013

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

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

(1)html5html>

(2)html4HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">xhtml1.0

(3)xhtml1.0html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

7.中文编码

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

水香木鱼的博客title>

head>

我的第一个标题h1>

我的第一个段落。p>

body>html>

二、HTML 编辑器

1.推荐几个常用的编辑器

Notepad++

Sublime Text

VS Code

2.提高编码速度插件 `Emmet `插件

三、HTML基础

(1)html标题

HTML 标题(Heading)是通过`-` 标签来定义的.

这是一级标题h1>

这是二级标题h2>

这是三级标题h3>

这是四级标题h4>

这是五级标题h5>

这是六级标题h6>

(2)html段落

HTML 段落是通过标签 `

` 来定义的.

这是一个段落。p>

这是另外一个段落。p>

(3)html链接

HTML 链接是通过标签 `` 来定义的.这是一个指向水香木鱼博客的超链接a>

(4)html图像

HTML 图像是通过img标签 来定义的.

四、HTML 元素开始标签元素内容结束标签

这是一个段落这是一个链接

换行

(1)html元素语法HTML 元素以开始标签起始

HTML 元素以结束标签终止

HTML 文档由嵌套的 HTML 元素构成。

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

嵌套的html元素。

实例：(包含三个元素)html>

这是第一个段落。p>body>html>

不要忘记结束标签

(2)html空元素

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

就是没有关闭标签的空元素(

标签定义换行)。

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

在开始标签中添加斜杠，比如

，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使

在所有浏览器中都是有效的，但使用

其实是更长远的保障。

html提示：使用小写标签

HTML 标签对大小写不敏感：

等同于

。许多网站都使用大写的 HTML 标签。

水香木鱼使用的是小写标签，因为万维网联盟(W3C)在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

五、HTML 属性

1.属性是 HTML 元素提供的附加信息。

2.HTML 元素可以设置属性

3.属性可以在元素中添加附加信息

4.属性一般描述于开始标签

5.属性总是以名称/值对的形式出现，比如：name=“value”。

HTML 链接由 标签定义。链接的地址在 href 属性中指定：这是一个指向水香木鱼博客的超链接a>

html属性值常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

*提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘BE “BAGAN” son’

HTML提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

html属性：标准手册(具体属性参考文档，这里列出几个常用的)

属性描述

class为html元素定义一个或多个类名(classname)(类名从样式文件引入)

id定义元素的唯一ID

style规定元素的行内样式(inline style)

title描述了元素的额外信息(作为工具条使用)

六、HTML 标题

标题(Heading)是通过-

标签进行定义的.

定义最大的标题。定义最小的标题。

这是一级标题。h1>

这是二级标题。h2>

这是三级标题。h3>

这是四级标题。h1>

这是五级标题。h2>

这是六级标题。h3>

注释: 浏览器会自动地在标题的前后添加空行。

标题很重要

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题(最重要的)，其后是 h2(次重要的)，再其次是 h3，以此类推。

html水平线

标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

这是一个段落。p>

---

这是一个段落。p>

---

这是一个段落。p>

html注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:这是一个注释-->

注释: 开始括号之后(左边的括号)需要紧跟一个叹号，结束括号之前(右边的括号)不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

html如何查看源代码？

你是否看过一些网页然后惊叹它是如何实现的的。

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

html标签参考手册标签描述

定义HTML文档

定义文档的主体

-定义HTML标题

定义水平线

定义注释

七、HTML 段落

HTML 可以将文档分割为若干段落，段落是通过

标签定义的。

这是一个段落 p>

这是另一个段落p>

注意：浏览器会自动地在段落的前后添加空行。(

是块级元素)

不要忘记结束标签

即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

这是一个段落

这是另一个段落

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释: 在未来的 HTML 版本中，不允许省略结束标签。

1.html换行

如果您希望在不产生一个新段落的情况下进行换行(新行)，请使用

标签：

这个
段落
演示了分行的效果p>

br元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

2.html输出提醒

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

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

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

3.html参考手册标签描述

定义一个段落

插入单个折行(换行)

八、HTML 文本格式化

加粗文本b>斜体文本i>电脑自动输出code>
 下标sub> 上标sup>

1.html格式化标签标签描述

定义粗体文本

定义着重文字

定义斜体字

定义小号体

定义加重语气

定义下标字

定义上标字

定义插入字

定义删除字

2.html计算机输出标签标签描述

定义计算机代码

定义键盘码

定义计算机代码样本

定义变量

定义预格式文本

3.html引文，引用，标签定义标签描述

定义缩小

定义地址

定义文字方向

定义长的引用

定义短的引用语

定义引用、引证

定义一个定义项目

九、HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML使用标签 来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。这是一个指向水香木鱼博客的超链接a>

href 属性描述了链接的目标。

提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

1.html链接-- target属性

target="_blank">

水香木鱼的博客a>

_blank属性是在新的浏览器页面打开，还有其它属性，前面的文档提到过，有兴趣可以找一下以前我写的帖子，父窗口，顶部打开，新浏览器页面，等4个属性。

2.html链接--id属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

在HTML文档中插入ID:

在HTML文档中创建一个链接到”有用的提示部分(id=“tips”)”：

或者，从另一个页面创建一个链接到”有用的提示部分(id=“tips”)”：

html链接标签

10.HTML head