类别	说明
<html>	HTML页面根元素；定义了整个 HTML 文档
<head>	HTML页面头部元素
<body>	HTML页面主体元素；包括脚本标签<script>

类别	说明
<article>	完整的文章结构；通常包括以下结构化标签
<header>	页眉/头部信息，通常用在<body>；<article>和<section>头部
<nav>	navigation；导航，使用<ul>实现；顶部、侧边、分页导航
<aside>	侧边栏
<section>	节元素，类似于<div>，但是HTML5建议应带上标题<header>；如果不需要标题，使用<div>即可
<footer>	页脚/底部信息，通常位于<body>、<article>底部，包括：版权声明、友情链接、备案信息等
<div>	division；块，用于分隔区域/布局；对搜索引擎来说，无语义，不利于网站的推广和使用
<span>	行内块；对搜索引擎来说，无语义
<h1> - <h6>	headline；标题，h1只能出现一次；便于搜索引擎为网页编制索引
<p>	paragraph；段落

普通元素标签

. 页面的内容|细节呈现

类别	说明
<a>	anchor；超链接/导航；单级导航可直接使用；多级导航应配合列表
<img>	image；图像；多使用<figure>或<picture>代替
<figure>	图形标签，配合<figcaption>一起使用，可以取代<img>
<picture>	图片标签，组合标签；配合<source>、<img>一起使用，可以实现响应式开发
<ul><ol><li><dl><dt><dd>	<ul>；unordered list 有序列表；其子标签只能是列表项<li> <ol>；ordered list 无序列表；其子标签只能是列表项<li> <dl>；defined list 自定义列表；其子标签只能是：<dt>、t:title；<dd>、d:description
<table>	表格；由行列组成 <tr>；行 <th>；标题行单元格 <td>；普通单元格
<form>	表单 <input>；单行文本输入框、单选、多选 <textarea>；多行文输入本框 <select>；下拉列表 <button>；按钮等
<iframe>	inner-frame；内联框架；在当前页面嵌入/显示另外一个页面；早期使用较多
<audio>	音频
<video>	视频

其他标签

类别	说明
<pre>	定义预格式文本/按照原始代码的排列方式进行显示
<code>	定义计算机代码
<details>	细节\|更多标签，用于区域的折叠和展开
<summary>	配合<details>使用，定义标题
<sup>	定义上标字
<sub>	定义下标字
<small>	小字体标签
<progress>	动态进度条标签
<meter>	静态进度条

标签属性 Attribute

. HTML 标签可以拥有属性。属性提供更多元素信息，如类、ID、名称、值、数据等等

. 不同的标签所拥有的属性不完全相同，如<a>有专有的href属性；<img>有专有的alt属性；两者都有通用的title属性

. 属性总是以值对的形式出现：名称name/值value；如：class="warn"，其中class是名称，warn是值

. 请始终为属性值添加引号：双引号或单引号，并保持引号类型一致，不能混用

. 属性总是在开始标签中指定

. 部分元素的属性可以省略属性值，多见于布尔类型，如disabled，有该属性，元素被禁止；没有则正常使用

. 部分元素建议必须使用某些属性，如<img>，请始终使用 alt 属性，当图像无法显示时给出提示

以上为HTML元素的原生属性；实际开发过程中，多使用框架，如Vue，这些框架具有自己特定的属性，如@click、:class等等

类别	说明
id	ID属性，唯一标识元素
class	类样式属性；一个元素可以指定多个类，以空格分隔
style	内联样式属性
data-	数据属性[自定义属性]
title	额外提示信息
alt	替换属性
contenteditable	是否可编辑
src	资源路径属性
href	超链接地址属性
hidden	隐藏属性
checked	选中属性
selected	选中属性

标签分类 Classification

. 使用显示模式display区分标签种类

. 每个元素有自己默认的显示模式

. 根据设计需要，元素的显示模式可以相互转换；如通常将<a>转换为块元素更方便、安全

按占位/宽度

内联元素 inline

display: inline;

. 也称行内元素，行盒

. 根据本身宽度占有空间，在文档流中从左到右依次显示

. 不能设置宽度，不会独占一行

. 满行时候切换到下一行重新开始

. 内联元素和文字一样，并不是紧紧挨着，而是有一定的间隙

. 常见的有：<a> <i> <span> <label> <small> <img> <audio> <video>

行内块元素 inline-block

display: inline-block;

. 可以设置宽度的内联元素

. 在文档流中的排列方式同inline

. 数量很少： <input> <button>

块级元素 block

display: block;

. 也称块盒

. 可以设置宽度

. 独占一行，在文档流中从上到下依次排列

. 大部分标签都是块级元素；很多结构化的标签，如<header>本质上都是块元素

布局类元素

弹性盒子 - flex

display: flex;

网格 - grid

display: grid;

表格类元素

. 特指table系列的元素，特性类似inline-block；特意区分的目的之一是为了更高效的渲染页面

. 修改表格元素的模式，可以实现特定的应用；更多信息，请访问表格 - table

// <tabel>
display: table;

// <tr>
display: table-row;

// <td> <th> 
display: table-cell;

[] 使用浏览器的检查功能，查看常见元素的默认display

按语义

. 语义化 semantic 标签：清晰地定义其内容；大部分标签都是，如<form>、<table>

. 非语义化标签：无法提供关于其内容的信息，仅仅作为容器/载体使用，如<div>、<span>、<i>；多用于布局和功能型拓展，如大部分字体图标都是依托<span>、<i>实现，已经失去了其标签本意

. 页面不单单是给人看的，更是给计算机看的；在给人看之前，首先要给计算机看

. 规范的Web页面，可以让计算机和人更加高效的理解和处理文档

. 在正确的地方使用正确的标签，创建有意义的Web页面

1. 结构化：见者知内容

2. 语义化：见者知用途