Skip to content

HTML笔记

概述

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

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

对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">

html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>青山之巅(qinshan.top)</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 按键开启调试模式,就可以看到组成标签。

HTML文档的后缀名:.html、.htm,以上两种后缀名没有区别,都可以使用。

什么是 HTML?

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

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

HTML 标签

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

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

<标签>内容</标签>

HTML 元素

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

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

HTML 元素: <p>这是一个段落。</p>

Web 浏览器

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

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

HTML版本

从初期的网络诞生后,已经出现了许多HTML版本:

版本发布时间
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

<!DOCTYPE> 声明

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

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

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

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

通用声明

HTML5

html
<!DOCTYPE html>

HTML 4.01

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

XHTML 1.0

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

中文编码

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

HTML 编辑器推荐

可以使用专业的 HTML 编辑器来编辑 HTML,几款常用的编辑器:

基础

HTML 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。

html
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML 段落

HTML 段落是通过标签 <p> 来定义的。

html
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 链接

HTML 链接是通过标签 <a> 来定义的,在 href 属性中指定链接的地址。

html
<a href="https://www.qinshan.top">这是一个链接</a>

HTML 图像

HTML 图像是通过标签 <img> 来定义的,图像的名称和尺寸是以属性的形式提供的。

html
<img src="/images/logo.png" width="258" height="39" />

HTML 元素

HTML 文档由 HTML 元素定义。

HTML 元素

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

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

HTML 元素语法

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

注释: 您将在本教程的下一章中学习更多有关属性的内容。

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。

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

HTML 文档实例

html
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>

以上实例包含了三个 HTML 元素。

HTML 实例解析

<p> 元素:

html
<p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。 这个元素拥有一个开始标签<p> 以及一个结束标签 </p>. 元素内容是: 这是第一个段落。

<body> 元素:

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

<body> 元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。 元素内容是另一个 HTML 元素(p 元素)。

<html> 元素:

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

<html> 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>. 元素内容是另一个 HTML 元素(body 元素)。

不要忘记结束标签

即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

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

以上实例在浏览器中也能正常显示,因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

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

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

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

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

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

HTML 提示:使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

菜鸟教程使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

HTML 属性

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

属性总是以 name="value" 的形式写在标签内,name 是属性的名称,value 是属性的值。

HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

实例

HTML 属性常用引用属性值

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

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

Remark提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='John "ShotGun" Nelson'

HTML 提示:使用小写属性

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

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

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

HTML 属性参考手册

查看完整的HTML属性列表: HTML 标签参考手册

下面列出了适用于大多数 HTML 元素的属性:

属性描述
class为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式(inline style)
title描述了元素的额外信息 (作为工具条使用)
  1. id: 给元素一个唯一的标识符,可以用于 CSS 选择器或 JavaScript 操作。

    <div id="header">This is a header</div>
  2. class: 给元素指定一个或多个类名,方便通过 CSS 或 JavaScript 操作。

    <p class="text-muted">This is a paragraph.</p>
  3. style: 直接为元素定义 CSS 样式。

    <span style="color: red;">This text is red.</span>
  4. href: 用于 <a> 标签,指定链接目标。

    <a href="https://www.example.com">Visit Example</a>
  5. src: 用于 <img><script> 标签,指定资源的路径。

    <img src="image.jpg" alt="Description">
  6. alt: 用于 <img> 标签,提供图片的替代文本。

    <img src="logo.png" alt="Company Logo">
  7. title: 提供关于元素的额外信息,通常在鼠标悬停时显示。

    <button title="Click me">Submit</button>
  8. name: 在 <input>, <form>, <select> 等表单元素中使用,定义元素的名称。

    <input type="text" name="username">
  9. value: 定义表单元素的值。

    <input type="text" value="Default text">
  10. target: 用于 <a> 标签,指定链接的打开方式(如 _blank 在新窗口中打开)。

    <a href="https://www.example.com" target="_blank" rel="noopener">Open in new tab</a>
  11. type: 指定表单元素的类型(如 text, password, submit)。

    <input type="password" name="password">
  12. placeholder: 为 <input><textarea> 提供一个占位符文本。

    <input type="text" placeholder="Enter your name">

更多标准属性说明: HTML 标准属性参考手册.

更新时间: