HTML 入门笔记1. HTML 的发明者及简介 HTML 的全称为 HyperText Markup Language

1. HTML 的发明者及简介

HTML 的全称为 HyperText Markup Language，翻译成中文为超文本标记语言，是 Tim Berners-Lee 于 1990 年发明的，同时他写出了第一个浏览器和服务器，还发明了 WWW、HTTP 和 URL。（想更多的了解HTML可以点击链接：HTML wikipedia ）

2. HTML 起手式

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网页的名字</title>
  </head>
  <body>
    正文
  </body>
</html>

在 VSCode 中新建一个 html 文件，输入法为英文模式下输入！后按 tap 键就会出现上述代码，我们称上述代码为 HTML 的起手式。下面我们来对上述代码进行说明：

DOCTYPE 全称为 Document Type 既文档类型，<!DOCTYPE html> 的作用是确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。
lang="zh-CN" 是指 language 为简体中文，默认为 lang="en"。
head 标签是头部的意思，该标签用于定义文档的头部，它是所有头部元素的容器。head 的默认属性为 display:none ，表示该容器的内容不会显示在网页的页面上。
meta 标签提供关于 HTML 文档的元数据，元数据是关于数据的信息，charset="UTF-8" 是指文件支持所有文字的字符编码，包括英语、中文等等。一般不建议修改。
name="viewport" 是指用户当前的窗口，content="width=device-width,initial-scale=1.0" 是指当前页面的宽度为用户设备所支持的窗口的宽度，并且不能缩放页面。
title 标签中间写的是网页的名字。
body 标签中间是我们用来写网页内容的地方。

3. 常用的章节标签

我们通过一段代码来了解常用的章节标签。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网页的名字</title>
  </head>
  <body>
    <header>顶部内容</header>
    <div>
      <main>
        <h1>文章标题</h1>
        <section>
          <h2>第一节</h2>
          <p>这是第一节的概括</p>
          <section>
            <h3>第一小节</h3>
            <p>这是第一小节的内容</p>
          </section>
          <section>
            <h3>第二小节</h3>
            <p>这是第二小节的内容</p>
          </section>
        </section>
      </main>
    </div>
    <footer>页脚内容</footer>
  </body>
</html>

如上述代码所示，我们经常用到的章节标签有：

header 是我们放置文章顶部内容的地方
div 用于划分内容
main 是我们放置文章主题内容的地方
h1~h6 都是表示标题的标签，标题的大小随数字的增加而减小
section 用于将文章不同部分的内容进行分割
p 是我们放置文章每一部分内容的地方
footer 是我们放置文章页脚内容的地方

上面代码的运行效果为

4. 其他常用内容标签

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网页的名字</title>
  </head>
  <body>
    <p>下面的内容是ol</p>
    <ol>
      <li>我是第一个li</li>
      <li>我是第二个li</li>
      <li>我是第三个li</li>
    </ol>
    <p>下面的内容是ul</p>
    <ul>
      <li>我是第一个li</li>
      <li>我是第二个li</li>
      <li>我是第三个li</li>
    </ul>
    <dl>
      <dt>愚人节</dt>
      <dd>
        愚人节（April Fool's Day或All Fools' Day）也称万愚节、幽默节，愚人节。
        <br />
        节期为公历4月1日，是从19世纪开始在西方兴起流行的民间节日，并未被任何国家认定为法定节日。
      </dd>
    </dl>
    <div>
      <p>哈哈哈哈</p>
      <pre><p>    哈哈哈哈     </p></pre>
    </div>
    <p>我是内容</p>
    <hr />
    <p>我是内容</p>
    <br />
    <p>我是内容</p>
    <a href="https://baidu.com">百度</a>
    <p><em>期末考试 </em>的重点是：<strong>所有内容</strong></p>
    <code>
      var a = 1;
      <br />
      console.log(a);
    </code>
  </body>
</html>

如上述代码所示，我们还经常用到的其他内容标签有：

ol + li 全称分别为 ordered list 和 list item ，即有序的列表和列表元素，ol 标签写出来的列表前面一般会有数字表示顺序
ul 全称为 unordered list ，即无序的列表，其内容前面一般为黑色实心圆点，和 li 一起使用
dl + dt + dd 全称分别为 description list 、term 、data ，即描述列表、描述词、描述内容，用来描述某个或多个东西
pre 全称是 preview ，如果你想让标签中的空格或者换行出现，可以在标签的外面套上一个 pre 标签
hr 用于生成一条分割线
br 用于换行
a 用于进行页面跳转， href 后跟着要跳转的链接
em 全称是 emphasis ，即强调，默认是斜体，表示语气上的重要性
strong 是对内容的强调，默认是粗体
code 用于在网页中编写代码

上面代码的运行效果为

5. 全局属性（所有标签都有的属性）

class 规定元素的类名，一个元素可以有多个 class，不同 class 用空格隔开就行，不同元素也可以用相同的 class 。
contenteditabale 是由两个单词拼接在一起组成的，这个属性使当前展示在浏览器上的元素能直接被使用者修改。
hidden 用于使当前标签不出现在浏览器中。
id 用于元素定义唯一标识符，是惟一的。但是不建议使用，因为如果你对两个不同的元素定义了同一个 id ，容易产生错误，而且有可能命名的 id 与 windows 本身自带的一些属性发生冲突，此时你所命名的 id 就无法使用。
style 用于直接在标签中写 CSS 样式，但不是 CSS 样式，本质上还是标签的属性，只是写法与 CSS 样式相同。
tabindex 一般是使用者无法使用鼠标时才会用到的属性，通过按 tap 键的次数来访问对应的内容，负数时表示不访问，0 时表示最后访问，其他正数时先访问数值小的标签。
title 一般用于文字过多且你想在一行内显示时使用，鼠标移动到该文字时显示出所有内容。