POSTS

HTML入门笔记1

有幸看了 2 天 TI，大巴黎咚咚咚！

概述

HTML 的全名是“超文本标记语言”（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。

起手

平常写 HTML 通过 EMMET 语法，!+tab 即可

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

标签

浏览器渲染网页的时候，会把 HTML 源码解析成一个标签树，每个标签都是一个节点（node），称为网页元素（element）。所以，“标签”和“元素”基本上是同义词，只是使用的场合不一样：标签是源码角度来看，元素是从编程角度来看，比如<p>标签对应网页的 p 元素。

章节标签

  1. h1~h6 标题
  2. section 章节
  3. article 文章
  4. p 段落
  5. header 头部
  6. footer 脚部
  7. main 主要内容
  8. aside 旁支内容
  9. div 划分

内容标签

  1. ol+li 有序列表
  2. ul+li 无序列表
  3. dl+dt+dd 术语+描述
  4. pre 保留 html 中的空格
  5. hr 分隔线
  6. br 换行
  7. a 超链接
  8. em 着重元素
  9. strong 加粗
  10. code 呈现代码
  11. quote 引用
  12. blockquote 块级引用

全局属性

属性（attribute）是标签的额外信息，使用空格与标签名和其他属性分隔。

以下属性功能基本和其名称意义一样

  1. class
  2. contenteditable
  3. hidden
  4. id
  5. style
  6. tabindex
  7. title

最后附上一个 reset 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;
}

参考来自：MDN、饥人谷、阮一峰