超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML的历史

HTML的首个公开描述出现于一个名为HTML Tags 页面存档备份，存于互联网档案馆的文件中，由蒂姆·伯纳斯-李于1991年底提及。它描述18个元素，包括HTML初始的、相对简单的设计。它的最大特点就是支持超链接，点击链接就可以跳转到其他网页，从而构成了整个互联网。

2004年，网页超文本应用技术工作小组（WHATWG）开始开发HTML5，并在2008年与W3C共同交付，2014年10月28日完成标准化。

HTML 起手

<!DOCTYPE html>
<html lang="zh-CN">
<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>

  • <!DOCTYPE >标签:文档类型，告诉浏览器如何解析网页

  • <html>标签:网页的顶层容器，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html>标签。lang属性，表示网页内容默认的语言。

  • <head>标签:容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息。

    <head>子元素 作用
    <meta> 设置网页的元数据
    <link> 连接外部样式表
    <title> 设置网页标题
    <style> 放置内嵌的样式表
    <script> 引入脚本
    <noscript> 浏览器不支持脚本时，所要显示的内容
    <base> 设置网页内部相对 URL 的计算基准

  • <meta>标签:设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据，网页可以有多个<meta>。<meta>标签约定放在<head>内容的最前面。上面代码中：第一个<meta>标签表示网页采用 UTF-8 格式编码，第二个<meta>标签表示网页在手机端可以自动缩放。

    <meta>标签属性 作用
    name 属性 表示元数据的名字
    content 属性 表示元数据的值
    http-equiv 属性 用来覆盖 HTTP 回应的头信息字段(与content属性一起使用)
    charset属性 指定网页的编码方式 <meta charset="utf-8">

  • <title>标签:用于指定网页的标题，会显示在浏览器窗口的标题栏。

  • <body>标签:是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都放置在它的内部。它是<html>的第二个子元素，紧跟在<head>后面。

**ps:**怎样设置VS code的模板代码

settings——用户代码片段——搜索HTML.json——配置

body中常用章节标签

<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>
  • <header>:表示一篇文章或者一个区块的头部
  • <footer>:表示网页、文章或章节的尾部
  • <main>:标签表示页面的主体内容，一个页面只能有一个<main> <main>是顶层标签，不能放置在<header>、<footer>、<article>、<aside>、<nav>等标签之中。
  • <article>:表示页面里面一段完整的内容
  • <aside>:标签用来放置网页侧边栏或与网页、文章主要内容间接相关的部分
  • <section>:表示一个含有主题的独立部分，通常用在文档里面表示一个章节
  • <nav>:标签用于放置页面或文档的导航信息，往往放置在<header>里面
  • <h1>~<h6>:HTML 提供了6个标签，用来表示文章的标题。按照标题的等级，一共分成六级。

body中常用文本标签

  • <div>:一个通用标签，表示一个区块（division）

  • <p>:是一个块级元素，代表文章的一个段落（paragraph）

  • <span>:一个通用目的的行内标签（即不会产生换行），不带有任何语义

  • <br>:换行符，单独使用的，没有闭合标签

    PS：HTML空格和换行处理规则

    标签内容的头部和尾部的空格，一律忽略不计

    标签内容里面的多个连续空格（包含制表符\t），会被浏览器合并成一个

    浏览器还会将文本里面的换行符（\n）和回车符（\r），替换成空格

  • <hr>:水平线分割线,单独使用的，没有闭合标签

  • <pre>:一个块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。 PS: HTML 标签在<pre>里面还是起作用的。<pre>只保留空格和换行，不会保留 HTML标签 **

    与code标签一起使用

  • <strong>:以粗体显示内容,表示内容本身的重要性

  • <em>:以斜体显示它包含的内容,表示语气上的强调

  • <code>:一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。

  • <blockquote>:是一个块级标签，表示引用,cite属性，它的值是一个网址，表示引言来源，不会显示在网页上 *<q>:是一个行内标签，也表示引用。它与<blockquote>的区别，就是它不会产生换行。

HTML常用行级标签和块级标签

  • 行级标签:可以和其他元素保持在同一行，不可以自动换行，但不能设置宽高
  • 块级标签:不可以和其他元素保持在同一行（独占一行），可以自动换行，能设置宽高
  • 嵌套规则:块标签可以套行标签，行标签不可以套块标签。P标签不要套块属性标签，可以套a，span，文本
    块级标签 行级标签
    <article> <b>
    <aside> <em>
    <blockquote> <strong>
    <div> <i>
    <dl> <a>
    <footer> <br>
    <form> <img>
    <h1>~<h6> <q>
    <header> <span>
    <hgroup> <button>
    <hr> <input>
    <ol> <label>
    <p> <select>
    <section> <code>
    <table> <abbr>
    <ul> &nbsp
    <video> &copy

元素的属性

网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。元素属性的写法是 HTML 标签内部的“键值对”。

  1. 属性名与标签名一样，不区分大小写，lang和LANG是同一个属性。
  2. 属性名与属性值之间，通过等号=连接。属性值可以放在单引号或双引号之中，建议统一使用双引号。某些属性值可以不使用引号，但是建议不要这样写。
  3. 有些属性是布尔属性，属性值可以省略，只要添加了属性名，就表示打开该属性。如：checked、hidden

全局属性

全局属性（global attributes）是所有元素都可以使用的属性。

  • id:属性是元素在网页内的唯一标识符,慎用,html不会纠错重复的id
  • class:属性用来对网页元素进行分类。元素可以同时具有多个 class，它们之间使用空格分隔
  • title:属性用来为元素添加附加说明。鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。
  • tabindex:控制 Tab 键遍历网页元素的顺序。
    1. 0，表示最后才被 tab 访问
    2. -1，表示不可被 tab 访问
    3. 正整数， 网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。
  • style:指定当前元素的 CSS 样式
  • accesskey:指定网页元素获得焦点的快捷键
  • hidden:一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它
  • dir:属性表示文字的阅读方向
    1. ltr：从左到右阅读，比如英语。
    2. rtl：从右到左阅读
    3. auto：浏览器根据内容的解析结果，自行决定
  • contenteditable:contenteditable属性允许用户修改内容。它有两个可能的值。
    1. true或空字符串：内容可以编辑
    2. false：不可以编辑

HTML5验证器

  1. 安装检查工具validator 
    $  yarn global add node-w3c-validator
  2. 在VS code的终端通过命令使用 
    node-w3c-validator -i 被检查的HTMl文件.html

取消HTML标签默认属性样式

cssreset.css

* {
  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;
}