最近重新对HTML进行了学习，感触颇多，话不多说，开始HTML入门总结。

HTML历史

1990年，HTML之父Tim Berners-Lee发明了万维网，同时发明了HTML、URL、HTTP，最早的网页，就由这三部分组成。人们通过输入网址，就能看到网页，URL提供了网址，HTML提供了网页，HTTP让这个系统更加完善。

为了方便人们的阅读，HTML提供了标签来对内容进行不同样式的展示。最原始的HTML，一共有18个标签，经过不断的更新，这些标签现在还保留11个，在最新版的HTML5中，大约有110个标签，可以通过搜索MDN HTML5文档查看。既然说到了HTML5，那么就介绍一下HTML5的技术集合。

HTML5技术集合

新标签、新属性
新的通信技术：WebSockets、WebRTC等
离线存储技术：LocalStorage、断网检测
多媒体技术：视频、音频
图像技术：Canvas、SVG、WebGL
Web增强技术：History API、全屏
设备相关技术：摄像头、触摸屏
新的样式技术：css3新的Flex、Grid布局方式

知道有这些技术后，我们来看一下HTML语法如何书写。

HTML语法

HTML标签对 attr 的操作方式分为赋值和直接引用属性两种方式。注意：如果属性值没有空格，属性值可以使用单、双引号包裹，或者不加引号。有些属性，在标签中引用了就会得到默认的状态，与被赋予的值无关，例如：checked="false" 结果为被勾选，与值无关。

<tag attr=value> 有些标签只支持单闭合语法，例如：<link> ，这里需要注意，在HTML5新语法中，结尾不加斜杠 /> 。

接下来，我们来看看HTML起手式。

HTML起手式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

html文件的第一行，我们需要写下 <!DOCTYPE html> ，来告诉浏览器我们写的文档类型是 html 。

<html lang="en"> 这个标签告诉了浏览器，我们当前默认使用的语言，我们可以把 lang 改成 zh-CN 。

被 <head></head> 标签包裹的内容，一般写的是不让用户看见的元素。

<meta charset="UTF-8"> 告诉了浏览器，当前文件的字符编码为 UTF-8 ，这个一定要写在head标签内的第一行，否则可能出现字符乱码的问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 是为了兼容手机屏幕，禁用缩放。

<meta http-equiv="X-UA-Compatible" content="ie-edge"> 告诉IE浏览器使用最新内核。

<title>Document</title> 用来设置html的标题。

<body></body> 就是我们开发过程中，写页面内容的标签区域。

现在我们开始了解常用的html的章节标签

章节标签

表示文章/书的层级

标题 h1~h6
章节 section
文章 article
段落 p
头部 header
脚部 footer
主要内容 main
旁支内容 aside
划分 div

再来看看全局属性

全局属性

所有标签都有的属性

class ，指定标签的样式
contenteditable ，使元素所在区域可以被编辑
hidden ，设置元素不可见
id ，元素的id，保持全局的唯一性，在样式中用 # 开头表示
style ，每一个元素可以写一个 style 属性，优先级高于 class
tabindex ，让元素可以被tab键控制顺序
title ，通常用来显示完整的内容

注意：

在 html 中，设置相同 id 不会报错，不到万不得已不要用 id 。id 的唯一性主要体现在 js 中，js 可以直接获取 id ，但是尽量不要直接在 js 中用。因为 window 已有的全局属性不能覆盖。我们可以通过 document.getElementById 的方式获取。

<style> 放在 <body></body> 内的时候，也可以看见，这时候我们要设置 style{display:block}。

关于样式优先级，js > style > class。

tabindex = 0 时，元素为最后一个被 Tab 键选中的元素。tabindex = -1 时，元素永远不会被 Tab 键选中。

小提一点

默认样式

在开发者工具中，标记了 User Agent Stylesheet 的样式为标签的默认样式。默认样式现在已经不符合我们的需求了，通常在开始写代码的时候，我们通过 css reset 来自己重写这些标签默认样式。

最后我们来看一下内容标签

内容标签

ol + li ，全称 order list 有顺序的列表，list item 列表中的一项
ul + li ，全称 unorder list 无序的列表
dl + dt + dd ，全称 description list 描述列表，description term 被描述的对象，description data 被描述对象的内容
pre ，通常情况，直接在 html 输入多个空格、回车、Tab键，会被缩进成一个空格。使用 pre 可以保留这些操作效果
hr ，分割线
br ，换行，全称 break
a ，超链接，设置属性 target="_blank" ，点击超链接会在新窗口打开跳转页面
em ，强调，体现在语气上很重要
strong ，强壮，体现在内容本身很重要
code ，让字体等宽
quote ，引用，默认内联
blockquote ，块级引用，块级元素，会换行

HTML入门笔记