HTML技术入门

自在人生分类：IT技术人气：90 回帖：0 发布于1年前收藏

入门前端开发主要需要学习 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 字符集的字符：

标签：暂无标签

介绍