HTML入门

HTML诞生

HTML是1990年由Web的发明者“Tim Berners-Lee”和同事“Daniel W. Connolly”创立的一种标记语言,它是标准通用化标记语言SGML的应用,而用HTML编写的超文本文档就称为HTML文档。

HTML起手内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    ......
</body>
</html>

章节标签

标题：h1~h6

章节：section

文章：article

段落：p

头部：header

脚部：footer

主要内容：main

旁支内容：aside

划分：div

全局属性

class ：给标签一个类名（不唯一）

contenteditable：使元素可以被编辑

hidden：隐藏一个标签

id：给标签一个id名（唯一）

style：设置标签的样式

tabindex：控制table按下后的选中顺序

注意：tabindex=0的访问顺序是最后一个

title：鼠标移动到标签显示文字

小技巧：让style标签显示

<body>
    <style>
        // 让style标签显示
        style{display:block;}  
        ......
    </style>
</body>

默认样式

查看html元素默认样式

Chrome 开发者工具
Element -> Styles -> user agent stylesheet

去除原始默认样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

内容标签

ol+ li：有序列表

ul+ li：无序列表

dl+dt+ dd：dl定义一个列表 dt定义了列表的标题 dd定义了描述内容

pre：保留原本的空白、空格、换行

hr：分割线

br：换行

a：超链接标签

em：斜体

strong：粗体

code：代码块，里面的因为字体是等宽的

quote：引用内容 blockquote：块级引用