HTML技术入门

原创

Luoyger

发布于 2023-02-13 15:33:38

2.3K0

发布于 2023-02-13 15:33:38

文章被收录于专栏：技术研究和应用

入门前端开发主要需要学习 HTML，CSS 和 JavaScript 三大件。

本文并没有详细介绍每个知识点，因为官方的文档介绍的更好，建议前往学习（https://www.w3cschool.cn/html/），本文主要记录一些重点内容和细节。

介绍

HTML (HyperText Markup Language) 其实并不是编程语言，HTML可以直接运行在浏览器中，HTML 中文名叫做超文本标记语言，其实就是一些标签。

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

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

HTML发展史

HTML没有1.0，因为关于它的初版存在争议，1995年HTML 2.0面世，1997年由国际官方组织W3C推出了HTML 3.2以及HTML 4.0标准，后面W3C(万维网联盟)也渐渐变成Web技术领域的权威，经过漫长的演变，2014年，HTML 5标准最终面世。

HTML 2.0——1995年11月，RFC 1866发布
HTML 3.2——1997年1月14日，W3C发布推荐标准
HTML 4.0——1997年12月18日，W3C发布推荐标准
HTML 4.01——1999年12月24日，W3C发布推荐标准
HTML 5——2014年10月28日，W3C发布推荐标准

通常说的HTML指的是HTML4.0。HTML5是HTML的第五次重大修改而成的，可以理解为升级版，但里面的内容是非常丰富的。

基础概念

HTML速查列表：https://www.w3cschool.cn/html/html-quicklist.html

块级元素

块级元素特点：

总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；
高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
宽度没有设置时，默认为100%；
块级元素中可以包含块级元素和行内元素。

块级元素有：div、h1-h6、form、p、li、ol、li、dl、dt、dd、address、caption、table、tbody、td、tfoot、th、thead、tr

以下口诀方便记忆：三大列表和表格、六大标题和表单、段落地址要分块。

行内元素

行内元素特点：

和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；
高度、宽度是不可控的，设置无效，由内容决定。

行内元素有：heda meat title lable span br a style em b i strong

行内元素不能包含块级元素

行内元素和块级元素相关转换

转换为行内元素：display：inline

转换为块内元素：display：block

转换为行内块元素：display：inline-block

DOCTYPE

<!DOCTYPE>是标准通用标记语言的文档类型声明，有助于在浏览器中正确地显示网页。doctype声明是不区分大小写的。

HTML 4.01 规定了三种不同的<!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。 HTML5 中仅规定了一种。

<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

在 HTML 4.01 中， <!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。

HTML5 不是基于 SGML，因此不要求引用 DTD。

DTD的介绍参考：https://www.w3cschool.cn/dtd/dtd-intro.html

空元素

HTML 空元素即为没有内容的 HTML 元素。空元素应该在开始标签中关闭。<br>（用于定义换行）就是没有关闭标签。

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

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

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

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

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

ID属性

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

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

在 HTML 文档中插入 ID：

<a id="tips">Useful Tips Section</a>

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

<a href="#tips">Visit the Useful Tips Section</a>

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

<a href="//www.w3cschool.cn/html_links.html#tips"> Visit the Useful Tips Section</a>

头部标签

<base> 标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接规定默认地址或默认目标（target）:

<head>

</head>

提示：在 HTML 中，<base> 标签没有结束标签；在 XHTML 中，<base> 标签必须被正确地关闭。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务。

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述：

下面的 meta 元素定义页面的关键词：

name 和 content 属性的作用是描述页面的内容。

实体符号

普通键盘上不存在众多数学、技术和货币符号。

如需将此类符号添加到 HTML 页面，您可以使用 HTML 实体名称（HTML entity name）。

如果不存在实体名称，则可使用实体编号，十进制或十六进制的引用。

字符	数字	实体	描述
©	©	©	COPYRIGHT SIGN

具体参考：https://www.w3cschool.cn/html/html-vcy63gdz.html

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

如需显示小于号，我们必须这样写：< 或 < 或 <

使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

表情符号（Emoji）是来自 UTF-8 字符集的字符：😄😍💗

UTF-8 几乎涵盖世界上所有字符和符号。

表情符号也是来自 UTF-8 字母的字符：

😄 是 128516
😍 是 128525
💗 是 128151

<meta charset="UTF-8"> 元素定义字符集。

字符 A、B、C 由数字 65、66 以及 67 来显示。

为了让浏览器了解您正在显示字符，您必须以 &# 开头并以 ;（分号）结束实体编号。

由于表情符号是字符，因此可以像 HTML 中的其他任何字符一样复制、显示和调整它们的大小。

参考：https://www.w3cschool.cn/html/html-qdnw3g76.html

图像显示

默认情况下，图像在页面中将显示为左侧对齐，在<img>标签中您可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)。

<img src="/logo/logo.jpg"> logo.jpg 位于当前站点根目录的 logo 文件夹

使用相对路径是个好习惯（如果可能）。

如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。

表格

HTML 表格的基本结构：

<table>…</table>：定义表格

<th>…</th>：定义表格的标题栏（文字加粗）

<tr>…</tr>：定义表格的行

<td>…</td>：定义表格的列

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

实例

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

body属性

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。图像文件不应超过 10k。

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

noscript

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

实例

JavaScript :

<!--

document.write("Hello World!")

//-->

</script>

iframe

<iframe>标签规定一个内联框架。

　一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

　通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe 语法：

　该URL指向不同的网页，将窗口内容显示为URL地址指向页面。

frameborder属性用于定义iframe表示是否显示边框。

　设置属性值为 "0" 移除iframe的边框:

iframe可以显示一个目标链接的页面

　目标链接的属性必须使用iframe的属性，如下实例：

字符集

ASCII 是第一个字符编码标准。ASCII 定义了 128 种可以在互联网上使用的字符：数字（0-9）、英文字母（A-Z）和一些特殊字符，比如：! $ + - ( ) @ < >。

ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8。

ANSI（Windows-1252）是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同，不同之处在于 ANSI 具有 32 个额外的字符。

HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集，该字符集涵盖了世界上几乎所有的字符和符号！

为了正确显示 HTML 页面，Web 浏览器必须了解页面中使用的字符集。

这在 <meta> 标签中指定：

URL 编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

其它细节

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）

多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。输入类型是由类型属性（type）定义的。

颜色三位数表示法为：#RGB，转换为 6 位数表示为：#RRGGBB。

在 HTML 中我们可以使用带 data- 前缀的属性来存储信息。如：

<ul> <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li > <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li > <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a>< /li> </ul>

.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。区别在于：

.htm 应用在早期 DOS 系统，系统现在后缀只能有三个字符。
在 Unix 系统中后缀没有特别限制，一般用 .html。

XHTML

XHTML 是以 XML 格式编写的 HTML。

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 是大小写敏感的，标准的 XHTML 标签应该使用小写。
XHTML 得到所有主流浏览器的支持

与 HTML 相比最重要的区别：

文档结构

XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

属性语法

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化（即简写）也是禁止的

XHTML 文档必须进行 XHTML 文档类型声明（XHTML DOCTYPE declaration）。

您可以在 W3Cschool 的标签参考手册中找到完整的 XHTML 文档类型：https://www.w3cschool.cn/xhtml/xhtml-dtd.html。

<html>, <head>, <title>, 和 <body> 元素也必须存在，并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Title of document</title>

</head>

<body>

......

</body>

</html>

空元素必须包含关闭标签，如<hr/>和<br/>

禁止属性简写

这是错误的：

这是正确的：

如何将 HTML 转换为 XHTML

添加一个 XHTML <!DOCTYPE> 到你的网页中
添加 xmlns 属性添加到每个页面的html元素中。
改变所有的元素为小写
关闭所有的空元素
修改所有的属性名称为小写
所有属性值添加引号

HTML媒体

辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。

辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。

使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。

插件可以通过 <object> 标签或者 <embed> 标签添加在页面中。object 和 embed 元素都通过添加对浏览器不直接支持的插件的支持来扩展浏览器的功能。

大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

使用 <video> 和 <audio> 标签来显示视频和音频

object

所有主流浏览器都支持 <object> 标签。

该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

或者插入一张图片:

embed

所有主流浏览器都支持 <embed> 元素。<embed> 元素实现与 <object> 元素相同的结果。

或者插入一张图片:

音频播放

下面的代码片段能够显示嵌入网页中的 MP3 文件：<embed height="50" width="100" src="horse.mp3">

问题:

<embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

下面的代码片段能够显示嵌入网页中的 MP3 文件：<object height="50" width="100" data="horse.mp3"></object>

问题:

不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

HTML5 <audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

以下我们将使用 <audio> 标签来描述 MP3 文件 (Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个 OGG 类型文件(Firefox 和 Opera浏览器中有效).如果失败，它会显示一个错误文本信息:

<audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> Your browser does not support this audio format. </audio>

问题:

<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
<audio> 元素在老式浏览器中不起作用。

最好的 HTML 解决方法

下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

问题:

您必须把音频转换为不同的格式。
<embed> 元素无法回退来显示错误消息。

使用雅虎播放器

使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部：

雅虎播放器可以播放 MP3 以及其他各种格式。你只需添加一行代码到你的页面或博客中就可以轻松地将您的 HTML 页面制作成专业的播放列表：

<a href="horse.mp3">Play Sound</a> <script src="http://mediaplayer.yahoo.com/latest"></script>

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码片段显示指向 MP3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：

<a href="horse.mp3">Play the sound</a>

视频播放

视频播放的问题和音频是一样的，最好的 HTML 解决方法

以下实例中使用了4种不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

优酷解决方案

在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。

如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"，比如 Windows Media Player 来播放这个 AVI 文件：

<a href="intro.swf">Play a video file</a>

HTML5

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

以下的 HTML 4.01 元素在HTML5中已经被删除:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

HTML5新元素：https://www.w3cschool.cn/html5/html5-new-element.html

可以为 HTML 添加新的元素，并为该元素定义样式，如<myHero>我的第一个新元素</myHero>

兼容性

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是块级元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

header, section, footer, aside, nav, main, article, figure { display: block; }

可以使用以上的方法来为 IE 浏览器添加 HTML5 元素，但是：Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:

以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。

注意：国内用户请使用百度静态资源库（Google 资源库在国内不稳定）：

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

学习途径

在线学习

菜鸟教程：https://www.runoob.com/html/html-tutorial.html

w3cschool html：https://www.w3cschool.cn/html/

w3cschool html5：https://www.w3cschool.cn/html5/html5-intro.html