什么是HTML？

HTML：HyperText Markup Language 超文本标记语言。
HTML不是一种编程语言，而是一种标记语言。HTML拥有许多用于描述一个网页内容和结构的标记标签（Markup Tag）

HTML的诞生：SGML&Tim Berners Lee

       1969年，IBM 的技术人员 Charles Goldfarh 和 Edward Mosher 等人一起发明了通用标记语言 GML（Generalized Marked Language）。它在各文档间共享一些类似的属性，允许文本编辑、检索与格式化等子系统共享文档。
       GML 的大部分内容被 IBM 和其他公司实现在主机时代的出版系统中，即使是现在，IBM 也仍在 80% 以上的文档中采用 GML，另外，图形通讯协会（GCA）也用此开发了用于排版的通用代码 GENCODE。1978年，新成立的 ANSI 机构之文本处理计算机语言委员会（CLPTC）和 GCA 的 GENCODE 委员会合作，在GML的基础上制定了 SGML 的第一份草案。
       1985年在英国成立了国际 SGML 用户组织，在1986年，SGML 成为国际标准ISO8879：信息处理标准通用标记语言（Information processing Text and office system Standard generalized markup language）。
       在80年代末，SGML 引起了包括 CERN 在内的一些组织的注意，1990年，World Wide Web 的发明者 Tim Berners Lee 选择了 CERN 使用的一组 SGML 的 DTD 标记标签，在最早的 WEB 浏览器和编辑器 NEXUS 中，他使用了这些标签和样式表进行排版，并增加了最重要的功能——链接，这就是HTML的前身，基于SGML的HTML是让 SGML 走向World Wide Web 的第一步。
       标准通用标记语言（Standard Generalized Markup Language，SGML）是现时常用的超文本格式的最高层次标准，是可以定义标记语言的元语言，甚至可以定义不必采用 <> 的常规方式。由于它的复杂，因而难以普及。
———————————————— 版权声明：本文为CSDN博主「userkang」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/userkang/article/details/84258073

HTML的起手式？

HTML文件主要由浏览器进行编译渲染，但是浏览器能识别的文档类型不仅仅只有HTML一种，所以HTML文档的最开头，我们需要和浏览器说明这个文档是一个HTML类型的文档。
HTML文档类型声明不区分大小写的，下面是3个不同版本的HTML的文档声明。

// HTML5 文档类型声明
<!DOCTYPE html>

// HTML4.01 文档类型声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

// HTML1.0 文档类型声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

常用的章节标签

* 标题：<h1>~<h6>
* 章节：<section>
* 文章：<artical>
* 段落：<p>
* 页头：<header>
* 页脚：<footer>
* 主要内容：<main>
* 侧边栏/次要内容：<aside>
* 划分：<div>

章节标签的使用最主要就是语义化，不同的内容用不同的标签，让代码富有阅读逻辑。

常用的内容标签

锚点：<a> 可以在页面上定义一个锚点用于跳转页面位置；也能够指向一个网址，跳转网页
语气强调：<em> 对文本语气起到一个强调的作用，字体变为斜体
内容强调：<strong> 对文本内容起到一个强调的作用，字体变粗
代码块：<code> 用于描述一段代码内容，字体等宽
预格式化文本：<pre> 普通情况下，文本中的连续的空格，换行，TAB都会被当作1个空格，而在<pre>标签下的文本的连续的空格，换行，TAB则不会被忽略。
行内引用：<q> 引用模块，display = inline;
块状引用：<blockquote> 引用模块，display = block;

全局属性

什么叫全局属性？

全局属性就是所有标签都拥有的属性。

1.class：样式

使用：`<div class='color border'>` 。class属性可以给标签指定一个样式的类，CSS、JS均能通过class来寻找到标签，赋予该标签样式或者功能。当class有多个值的时候，用空格隔开每个值。

2.contenteditable：可编辑

这是一个无值属性，当标签中出现这个属性的时候，该标签的内容就能够在页面现实中进行编辑。下面代码：通过给 `<style>` 一个 `display:block` 让其在页面中也能够现实（`<style>`必须在`<body>`中才能实现），赋予一个 `contenteditable` 属性让其在页面中可以编辑直接改变 `.border`的样式

<body>
  <style contenteditable style="display:block">
    .border{
      border:1px solid red;
      width: 100px;
      height: 100px;
    }
  </style>
  <div class="border"></div>
</body>

3.hidden：隐藏

这也是一个无值属性。当标签出现这个属性的时候，其样式`display`属性的值会变成`display:none`

4.id：id

`id`属性作用也是便于CSS和JS的选择。非万不得已的情况下不建议使用`id`属性。`id`属性在CSS选择其中没有唯一性，即：2个`id="HAHA"`的标签会被CSS选择器同时选中。但`id`属性在JS中具有唯一性，当存在2个相同`id`时，操作这个`id`的 JS代码会报错。另外在JS中，可以直接使用`id`来进行获取元素，如:`id.style.border = "1px solid red"`。

5.style：行内样式

可以使用`style = ""`来编辑行内样式，行内样式比内联样式，外联样式级别要高。

6.tabindex：tab切换索引

在网页中使用 tab键能够切换到不同的部分，而 tabindex 属性则是控制这一行为的。

使用：`<div tabindex=[number]>`。当`[number]`在1~+∞范围时，tab的切换顺序，根据各标签[number]决定，越小越前，越大越后。其中有个2个特殊值：`tabindex = 0` 等于0的时候，该元素将是最后一个被tab到的。 `tabindex = -1` 等于-1时，该元素将永远不会被tab到。

7.title：标题

`<div title=[value]>` 当鼠标悬浮在拥有`title`属性的标签上一段时间后，会显示`title`设定的内容。