HTML入门 – Tony's Tech Blog

说实在的，从最早接触HTML到现在已经快20年了，中间断断续续到现在每天都在用，一度认为自己对HTML就算不精通，也应该算熟练了，但昨天听了方老师的课，发现自己对HTML还有许多盲区，有老师带领学习还是比自己摸索精准的多，写个博客记录下昨天的学习内容。

HTML的由来

1990年Tim Berners-Lee爵士发明了万维网，使人们可以通过网址来访问互联网上特定的内容，开启了新的纪元，从此整个世界通过互联网链接为一体，万维网最初有三大重要元素构成：HTTP，URL，HTML，最初的网页就是由HTML这种超文本标记语言编写，然后通过URL来访问。

HTML起手式

打开编辑器，新建Html文档，输入!，然后按tab健，自动生成HTML的结构代码

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

</body>
</html>

其中lang可以改成zh-CN,可以在head中导入js和css文件，在body中写Html代码，这些以前都知道，一略而过。

HTML章节标签

HTML有很多标签，我们先学习一下最常用的章节标签，常见的章节标签有

标题 H1-H6
章节 section
文章 article
段落 p
头部 header
尾部 footer
主要内容 main
旁支内容 aside
划分 div

这里面section, article, main, aside我似乎从来没用过，以后可以尝试用一下，以上标签可以使整个HTML看起来层次分明，下面用以上标签写一段代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <header>顶部广告</header>
  <div>
    <aside>
      nav
    </aside>
    <main>
      <h1>文章标题</h1>

      <section>
        <h2>第一章</h2>
        <p>
          这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，
        </p>

        <section>
          <h3>1.1节</h3>
          <p>
            这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，
          </p>
        </section>

        <section>
          <h3>1.2节</h3>
          <p>
            这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，这是一段话，
          </p>
        </section>
      </section>
    </main>
  </div>
  <footer>&copy; copyright</footer>
</body>
</html>

HTML全局属性

全局属性是指所有标签都有的属性

class ,最常用属性，可用于定义标签的类别，通常用于指向样式表的类
contenteditable，可使标签下内容在浏览器内进入可编辑状态
hidden, 可让标签内容消失，可通过css display: block再次显示
id,并非全局唯一，因为如果出现两个相同id，浏览器并不报错，因此非必须不建议用id
style, 定义标签样式，优先级别 css < elem_style < js
tabindex, 不常用，定义标签tab切换的优先级别，tabindex = 0 表示优先级在最后，tabindex = 1表示不在切换范围内
title, 定义鼠标移到dom上所显示的文字

HTML默认样式

每个标签都有默认样式，但这些样式通常不是很好看，所以我们写前端代码前，通常要reset一些默认样式，示例如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

*表示全局通用匹配符

HTML内容标签

ol + li (ordered list + list item)
ul + li (unordered list + list item)
dl + dt + dd (description list + term + data)
pre (preview，该标签可使多个空格，回车在页面里生效)
br (换行)
hr (生成水平直线)
a (该标签通常用于链接)
em (斜体，表语气强调)
strong (粗体，表内容强调)
code (格式化代码)
q (引用，不常用)
blockquote (块级引用，不常用)

以上为Html的一些入门知识，通过总结，了解了很多以前不知道的一些知识和用法，以后会在实际场景中应用，使html代码更具结构性和可读性，用博客记录所学真是一个很好的习惯，要坚持.