HTML 入门笔记

176 阅读3分钟

1. HTML 起源

HTML(全称:HyperText Markup Language),也称为超文本标记语言,是一种用于创建网页的标准标记语言。它与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。

1989 年,Sir Timothy John Berners-Lee(蒂莫西·约翰·伯纳斯-李)在一份备忘录中提出一个基于互联网的超文本系统。1990 年 12 月 25 日他成功利用互联网实现了超文本传输协议客户端与服务器的第一次通讯。

伯纳斯-李,英国计算机科学家。他是万维网(基于互联网实现的输入地址即可看到网页的网络)、HTML、HTTP、URL 的发明者,同时也是万维网联盟(W3C,维护 HTML 和 CSS 标准的组织)的主席。2004 年,获得了英女皇伊丽莎白二世颁发的大英帝国爵级司令勋章 。2017年,因 “发明了万维网、第一个浏览器和使得万维网得以扩展的基础协议及算法” 获得了 2016 年度的图灵奖。

2. HTML 起手式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- 如果当前页面在IE显示,让IE升级成最新的内核 -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>标题</title>
</head>
<body>
</body>
</html>

3. 章节标签

常用章节标签 9 类。

  • h1 ~ h6 标题:通常每个网页只有一个 h1 标签
  • section 章节:可嵌套使用
  • article 文章
  • p 段落
  • header 头部:可用于放置顶部广告
  • footer 尾部:可用于放置版权信息等
  • main 主要内容:放置文章主体
  • aside 旁支内容:可用于放置导航等辅助内容
  • div 划分:可用于包裹内部部分,更好的与头部、底部区分

4. 全局属性

  • class
  • id:尽量少用,重复编辑器不会提示,可能会导致出错
  • style:JS设置的样式优先级 > 行内 style 属性 > style 标签

当 style 标签放在 body 中,其 display 属性设置为 block 时,就可以在页面上看到。结合 contenteditable,可以让用户自己修改样式

  • hidden
  • contenteditable:可编辑的,可用于做编辑器
  • tabindex:设置 tab 键标记的顺序,可以不连续。tabindex=0 是最后一个, tabindex=-1表示不到达这里
  • title:鼠标悬停时显示的提示内容

5. 默认属性

HTML 标签默认样式通常已不符合现代审美,通过 reset.css 去掉默认属性。

6. 内容标签

常见内容标签如下:

  • ol + li 有序列表
  • ul + li 无序列表
  • dl + dt +dd 描述列表
  • pre 预格式文本
  • code 代码文本
  • hr 分隔线
  • br 换行
  • a 链接
  • em 强调(语气),默认样式斜体
  • strong 重要(本质),默认样式粗体
  • quote 引用
  • blockquote 换行引用