HTML是每个前端工程师都必须会的一个技能，通过HTML才能是许许多多分散的资源链接为一个整体并在浏览器中显示出一个网页，所以，今天我将通过以下几个方面简单的介绍以下HTML。

HTML 是谁发明的；
HTML 起手应该写什么；
常用的表章节的标签有哪些，分别是什么意思；
全局属性有哪些；
常用的内容标签有哪些，分别是什么意思

HTML 是谁发明的

HTML是由Tim Berners-Lee（李爵士）在1990年发明的。李爵士在发明HTML的同时还发明了URL和HTTP并通过它们创立了我们现在所熟知的万维网。通过HTML,HTTP,URL等一系列发明创立的万维网，是一个可以通过网址就能直接看到内容的系统。正是因为万维网的创立，我们所熟知的淘宝等网站才能被我们轻易的访问。

HTML 起手应该写什么

了解完HTML的历史，我们应该来学习一下HTML的语法。HTML起手应该写一个!。然后我们就能得到以下代码。

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

我们可以看到HTML文档由以下几个部分组成：

DOCTYPE
lang
head
UTF-8
meta name="viewport" content="width=device-width, initial-scale=1.0"
title
body

首先，我们可以看到一个DOCTYPE，他的意思是文档类型，所以!DOCTYPE html表示下面是一个html文档。

其次，lang的意思是语言，lang="en"表示下面的语言是英文，我们可以将它改成lang="zh-CN"，来表示下面的语言是中文。

第三，head是与body所对应的，head中常用来放不需要我们看见的代码，例如：样式。

第四，UTF-8表示下面的语言的编码方式，UTF-8与其他的编码方式不同，它可以编码世界上所有的语言，所以，我们在HTML中常用UTF-8.

第五，第五行代码的意思为防止页面缩放，以用来兼容手机。

第六，title表示网页的标题

最后，body中一般放用户可以看见的东西，例如文字、图片、视频、音频等。

常用的表章节的标签有哪些，分别是什么意思

常用的表章节的标签有：

标题标签：h1
章节标签：section
顶部标签：head
底部标签：footer
主要内容标签：main
旁支标签：aside
划分标签：div
文章标签：article
段落标签：p

第一，标题标签：

<h1>标题标签</h1>
<h2>标题标签</h2>

h1一般用来表示大标题，h2一般用来小标题，h3，h4，h5等同理。

第二，章节标题：

<section>章节标签</section>

section一般用来表示章节，也可以在section中再次嵌套section。

第三，顶部标签：

<head>顶部标签</head>

head标签一般放在网页顶部，用来放一些广告等内容。

第四，底部标签：

<footer>底部标签</footer>

第五，主要内容标签：

<main>主要内容标签</main>

主要内容标签主要用来在代码中将主要内容标记出来。

第六，旁支标签：

<aside>旁支标签</aside>

与main相对应，aside主要将次要代码标记出来。

第七，划分标签：

<div>划分标签</div>

div标签一般用来将代码分成块状，方便写与维护。

第八，文字标签：

<article>文章标签</article>

article标签中一般写完整的文章

第九，段落标签：

<p>段落标签</p>

段落标签中一般只写一个段落

全局属性有哪些

全局属性有以下几个：

class
contenteditable
style
hidden
id
tabindex
tittle

第一，class class可以给给标签分一个类，然后在style中为其编辑样式。

第二，contenteditor contenteditor可以使标签内的字变为可编辑状态。

第三，style style标签可以为下面标签内的内容添加一个样式。

第四，hidden hidden标签中的内容一般会被隐藏起来。

第五，id id作用与class类似，但其标签后的内容，一般会被默认为全局唯一，为防止歧义，最好别用。

第六，tabindex tabindex一般用来帮助没有鼠标的用户，需要注意的是，tabindex=0是表最后一个，tabindex=-1表不要到我这里来。

第七，tittle tittle通常用来作为提示展现给用户。

常用的内容标签

常用的内容标签有以下几个：

有序列表：ol+li
无序列表：ul+li
描述：dl+dt+dd
空格：pre
等宽字符：code
分割线：hr
换行：br
超链接：a
强调：em
加粗：strong
应用：quote
换行引用：blockquote

第一，有序列表 ol=ordered list li=list item 故ol+li表示一个有顺序的列表

<ol>
  <li>第一</li>
  <li>第二</li>
</ol>

第二，无序列表 ul=unordered list li=list item 故ul+li表示一个无顺序的列表

<ul>
  <li>xxx</li>
  <li>xxx</li>
</ul>

第三，dl+dt+dd dl=description itrm dt=description term 表示描述的项目 dd=description data 表示描述的内容

<dl>
  <dt>描述项目</dt>
  <dd>描述内容</dd>
</dl>

第四，pre HTML在会合并多个空格，使用pre后就不会在合并空格了

<pre>
合并多个空格
合并多个空格
</pre>

第五，code code标签中的字为等宽字体

<code>xxxx</code>

第六，hr hr表示一条分割线

第七，br br表示换行，可以在不使用pre的情况下换行

第八，a a后面一般接超链接后面在加上target="_blank"表示在新页面中打开

<a href="http://baidu.com">百度</a>

第九，em em表示强调，强调内容

<em>强调</em>

第十，strong strong表示加粗，强调语气

<strong>加粗</strong>

第十一，quote quote表示引用名人名言

<quote>引用名人名言</quote>

第十二，blockquote blockquote表示换行应用

  引用名人名言
  <blockquote>
    引用名人名言
  </blockquote>

《HTML入门笔记1》

HTML 是谁发明的

HTML 起手应该写什么

常用的表章节的标签有哪些，分别是什么意思

全局属性有哪些

常用的内容标签