HTML 入门笔记HTML 指的是超文本标记语言 (Hyper Text Markup Language)，它是一种标识

1、HTML 简介

HTML 指的是超文本标记语言 (Hyper Text Markup Language)，它是一种标识性的语言，包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体。简单来说，我们上网所看到的网页界面基本上都用 HTML 编写的。

HTML 与 1990 年左右诞生，发明人蒂莫西·约翰·“蒂姆”·伯纳·李爵士（Tim Berners-Lee），英国计算机科学家，他是万维网（World Wide Web）的发明者，2017年，他因发明万维网、第一个浏览器和使万维网得以扩展的基本协议和算法而获得 2016 年度的图灵奖。1990 年 12 月 25 日，他和他的队友在一起成功通过 Internet 实现了 HTTP 代理与 服务器 的第一次通讯，从某种意义上说，如果没有他当时的这一举动，就不会有如今互联网的前后端岗位，可以说这是我们的祖师爷了，快来膜拜一下。

2、HTML 起步

HTML 起手式的意思是，写 HTML 时所必须的基本格式，它包括文档类型，字符集编码，语言以及浏览器兼容等。一般在使用编译器的时候，可以通过 ! + Tab 一键配置 HTML 的基本格式，如下图所示：

3、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)，它是由尖括号包围的关键词，比如： <html>、<head>、<body>。HTML 标签通常是成对出现的，其中一个是开始标签，一个是结束标签，比如：<html></html>、<head><head>，<body></body>，开始和结束标签也被称为开放标签和闭合标签。除了上述的双标签之外也存在单标签，比如：<img>、<input>。

英文	翻译	英文	翻译
heading	标题	order	顺序、秩序
body	身体、正文	ordered	有顺序的
paragraph	段落	unordered	无顺序的
section	章、节	description	描述
article	一篇文章	term	术语
main	主要	data	数据
aside	旁边的	quote	引用
anchor	锚、定点	block	块
strong	强壮、重要	inline	行内、内联
emphasis	强调、重读	break	打断

4、常用的章节标签

在 HTML5 版本中，新增了很多语义标签，常见的有：article、header、footer、nav、aside 和 section 标签。

标签	描述：标签语义化可以让结构更加有层次感，更加清晰
~	标题，h1~~h6 分别表示一级标题~~六级标题，字体大小逐级递减。
	标签用来定义文档的某个区域，它和 div 标签不一样，不是用来定义局域样式的，而是用来定义一个明确的主题，通常含有一个标题（h1~h6）。但如果是文章，通常会使用 article 标签来代替。
	标签是用来定义独立于文档且有意义的来自外部的内容，比如：一些投稿文章、新闻记者的文章，或者是摘自其它博客、论坛的信息等。
	<main> 标签规定文档的主要内容，<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
	标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。

5、常用的内容标签

标签	描述
	<a> 标签定义超链接，用于从一张页面链接到另一张页面，它最重要的属性是 href 属性，它指示链接的目标。
	标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
	标签和标签一样，用于强调文本，但它强调的程度更强一些，由它包裹的内容呈现加粗样式。
	<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。包含在该标签内的文本将用等宽样式显示。
	标签可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符，而且文本也会呈现为等宽字体。

6、追加一些小知识

知识	描述
contenteditable 属性	当标签被添加这个属性后，该标签的内容可以直接在前端页面进行编辑，这就很神奇了。
style 标签的内容可显示	style 样式标签，如果将其放置到 body 标签内，可以通过 display=block 的方式在页面上显示出来，如果再给 style 标签设置上 contenteditable 属性，就可以做到在前端界面修改样式后，绑定样式的元素就可以直接同步过来，这也太神奇了。
tabindex 属性	tabindex 是用来控制 tab 的顺序的，值是 number 类型，tab 访问顺序从 1 开始依次往后，0 最后访问，负数不访问。
文本行末省略	样式设置：white-space:nowrap；text-overflow:ellipsis；overflow:hidden；如果想让鼠标悬浮显示全部值，可以设置 title 属性
默认样式reset	浏览器的默认样式不符合需求时，所以我们可以通过 CSS reset 将浏览器样式干掉。推荐：css reset ，推荐：normalize.css
大厂reset样式	比如找到淘宝，通过控制台检查 element、找到 h1h2 字样的演示右上角的 index 标识复制到自己的项目命名为 reset.css。class 的属性都删掉，剩下的就是默认样式了。鸡贼的呦。
table样式设置	table { border-collapse:collapse；border-spacing:0 }，不然 table 表格的样式真的很丑的，老弟。

HTML 入门笔记