aliases | tags | created | modified | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
|
2023-08-18 12:44:52 -0700 |
2025-02-12 04:41:53 -0800 |
HTML 全名叫 「超文本标记语言」(HperText Markup Language)。
1989 年由欧洲核子研究中心的物理学家蒂姆.伯纳斯.李(Time Berners-Lee)开发出世界上第一个 Web 服务器和客户机。
1989 年 12 月,蒂姆为他的发明正式定名为 「World Wide Web」。
1991 年 5 月 WWW 在 Internet 上首次露面,并成为了标准。
- 1995 年 11 月 24 日 HTML2
- 1997 年 1 月 14 日 HTML3
- 1997 年 12 月 18 日 HTML4
- 1998 年 4 月 24 日 HTML 4.0 微调,不增加版本号
- 1999 年 12 月 24 日 HTML 4.01 作为 W3C 推荐标准发布。
- 2014 年 10 月 28 日 HTML 5 作为 W3C 推荐标准发布。
#xhtml
XHTML 是 「3 种 HTML4 文件根据 XML 1.0 标准重组」而成的。
HTML 语法比较的「自由奔放」,所以在不同的浏览器渲染出现不同的表现。W3C 想要把 HTML 标准纳入 XML 标准中,让「严格」的 XML 来 「规范」HTML,所以就有了 XHTML 这货。
XHTML 应用出现在 2005 年到 2012 年左右的「重构时代」。
#html5
HTML 5 实质是 WHATWG 的,W3C 只是「发布者」。
从 HTML 5 始,W3C 已经失去对 包括 HTML 及 DOM 在内的控制权。
[!info]
2018 年 W3C 的 DOM 4.1 标准被苹果、Mozilla、Google 及微软四大浏览器厂商反对。
2019 年 5 月 28 日,W3C 宣布 WHATWG 将是 HTML 和 DOM 标准的唯一发布者。
WHATWG 背后站着的是浏览器厂商。
万维网联盟
WHATWG(WHATWG 正确发音是:[what-wig]), Web Hypertext Application Technology Working Group,在 2004 年,由 Apple 公司、Mozilla 基金会和 Opera 软件公司所组成。
后来随着 Chrome 浏览器大行其道,Google 也加入其中。再后来连微软了加入的。
WHATWG 是针对 W3C 网页标准的发展缓慢,以及 W3C 意图放弃 HTML 转而发展以 XML 为基础的技术而成立。
HTML 本质上是文本,所以对 HTML 文件编辑可以使用「文本编辑器」。
大概介绍几种常用的文本编辑器:
Windows 自带的,最朴素的文本编辑器。
#editor #sublime
SublimeText 是一款轻量级、顔值高的文本编辑器。最新版本是 SublimeText4。
#editor #vim
#editor #vscode
对于有更大项目管理需要的用户,可以使用 VSCode。
虽然 vim,但如果是做一些有点规模的项目时,VSCode 更优秀。
免费的编辑器:
还有什么 Adobe 的 Brackets、Github 的 Atom、Komodo edit。
IDE:
当然还有古老又笨重还收费的 Adobe Dreamweaver。
另外还有个装 X 货 Hbuilder X。
[!info]
Hbuilder 没有 Linux 版本,如果系统是 Linux 的,就略过了。
当然,还有个重量级成员:webstorm。个人十分讨厌 JetBrains 全系的 IDE,因为我非常讨厌 Swing。
还有顺便提一句,Notepad++ 这种烂货就不要用了!
HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。
Tip
html 是给页面搭「骨架」的。
HTML 代码由不同的标签构成。
浏览器渲染网页时候,会把 HTML 源码解析成一个标签树,每个 标签 都是一个节点(node),被称为网页「元素」(element)。
[!info]
「标签」和「元素」使用的场合不一样:标签是网页源码的角度来看,而元素是从编程角度来看。
标签和元素的关系:
行内元素也称为「内联元素」,inline element。
行内元素不会独占一行,宽度随元素的内容变化而变化。
属性 是标签的额外信息,使用空格与棱名和其他属性分隔。
网页的基本标签有以下这些:
<!doctype>
<html>
<head>
<meta>
<title>
<body>
符合语法标准的网页,应满足以下基本结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
用来声明文档类型的。
在 xhtml 时代,这个声明是写成类似这样的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
当初 W3C 就是想把 Html 弄成 XML 的子集,所以使用了与 XML 一样的声明样式。
到了 HTML 5 时代,WHATWG 把 HTML 5 拉回了 html 4 那种比较自由的风格,所以对 XHTML 的风格作了调整,文档声明部分就简化成现在这个样子。
<!DOCTYPE html>
这货建议使用大写形式,因为这货本质上不是标签,而是一个处理指令。
<html>
这是网页的根元素。该元素包含整个页面的内容。
该标签有一个 lang 属性,表示网页内容默认的语言。
<head>
这个是一个窗口标签,这个标签或元素的内容对用户不可见,用于放置网页的「元信息」,是为了网页渲染做准备的。
<head>
有 7 个子元素:
<meta>
设置网页元数据<meta>
常用属性:-
charset
设置网页编码,如<meta charset="utf-8">
-
name
属性,content
属性,这两属性以 键 - 值对的方式给文档提供元数据。description
网页内容的描述keywords
网页内容的关键字author
网页作者referrer
控制由当前文档发出的请求的 HTTP Referer 请求头。generator
生成此页面的软件的标识符theme-color
设定颜色,其content
值必须是有效的 CSS<color>
值。示例:
<meta name="description" content="HTML 语言入门"> <meta name="keywords" content="HTML,教程"> <meta name="author" content="张三">
-
<link>
连接外部样式表<title>
网页标题<style>
放置内嵌的样式表<script>
引入脚本<noscript>
浏览器不支持脚本时,所要显示的内容<base>
设置网页内部相对 URL 的计算基准