前端开发笔记 | HTML5标签篇

一:前言

本篇是标签篇,收集HTML标签(约100+)为合集,供学习过程中随时查询使用。详细教程需前往教程篇 | 点此前往

本系列是为萌新准备的HTML超详细基础笔记,统计了大约400+的知识点和扩展开发经验总结,根据B站教学视频顺序对每个知识点进行了特别排序,可以很好的满足新人的上手需求。如您遇到无法解决的难题或者有对笔记不理解的地方,欢迎进群和我们一起讨论 (九依の小屋) 。当然了,也可以前往[W3SChool] 官方网去了解。 推荐学习网站 |菜鸟教程首页 / 在线编程工具

一起讨论:九依の小屋

二:工具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# 常用快捷键​===============================================
# !+Enter:生成HTML头文件
# Lorem:随机生成一句英文
# Ctrl+Shift+/:代码快速注释
# Ait+w:代码快速添加标签
# Shift+Ait+F:代码格式化
# Table+选中代码:代码格式化

# 基础编辑快捷键​===========================================
# |复制/剪切/粘贴行:​Ctrl+C/Ctrl+X (未选中时) //Max系统:Cmd+C/Cmd+X
# |​删除当前行:​Ctrl+Shift+K //Max系统:Cmd+Shift+K
# |​上下移动行:​Alt+↑/↓ //Max系统:Option+↑/↓
# |​上下复制行:​Shift+Alt+↑/↓ //Max系统:Shift+Option+↑/↓
# |​插入新行(上/下):Ctrl+Shift+Enter / Ctrl+Enter //Max系统:Cmd+Shift+Enter / Cmd+Enter
# |​行注释/取消:Ctrl+/ //Max系统:Cmd+/
# |​块注释/取消:Shift+Alt+A //Max系统:Shift+Option+A

# 导航与搜索​==============================================
# |快速打开文件:​Ctrl+P //Max系统:Cmd+P
# |​跳转到行号:Ctrl+G //Max系统:Cmd+G
# |​跳转到符号(类/函数):​Ctrl+Shift+O //Max系统:Cmd+Shift+O
# |​跳转到定义:F12
# |​查看定义(不跳转)​:Alt+F12 //Max系统:Option+F12
# |​全局搜索文本:Ctrl+Shift+F //Max系统:Cmd+Shift+F
# |查找/替换:Ctrl+F / Ctrl+H //Max系统:Cmd+F / Cmd+H
# |​切换已打开文件:Ctrl+Tab

# 代码重构与智能操作​=======================================
# |​重命名符号(变量/函数)​: F2
# |​格式化整个文档: Shift+Alt+F //Max系统:Shift+Option+F
# |​格式化选中代码: Ctrl+K Ctrl+F //Max系统:Cmd+K Cmd+F
# |​快速修复建议: Ctrl+. //Max系统:Cmd+.
# |​选择所有相同变量: Ctrl+F2 //Max系统: Cmd+F2
# |​多光标编辑: Alt+Click 或 Ctrl+Alt+↑/↓ //Max系统:Option+Click 或 Cmd+Option+↑/↓

# 窗口与面板管理​===========================================
# |​切换侧边栏显示: ​Ctrl+B //Max系统:Cmd+B
# |​打开/关闭终端: ​Ctrl+` //Max系统:Cmd+`
# |​新建终端: ​Ctrl+Shift+ ` //Max系统:Cmd+Shift+ `
# |​拆分编辑器: ​Ctrl+\ //Max系统:Cmd+\
# |​切换编辑器组: ​Ctrl+1/2/3 //Max系统:Cmd+1/2/3
# |​全屏模式: ​F11
# |​打开命令面板: ​Ctrl+Shift+P //Max系统:Cmd+Shift+P

# 调试快捷键​===============================================
# |启动/继续调试: F5
# |​停止调试​: Shift+F5
# |​单步进入(函数内部): ​​ F11
# |​单步跳过(不进入函数): ​​ F10
# |​单步跳出(函数返回)​: ​ Shift+F11
# |​切换断点: F9
=============================================================================================================

# HTML-------------------------------------------------------------------------------------------------------
//Other:
# |"{SEO}"指代是"搜素引擎优化",用以优化网页的流量曝光或者利于爬虫爬取以此提升网站的访问数.
# |"{块元素}block-level":独占一行且禁止嵌套,宽高默认为100%| 可以通过"display"进行更改元素类型.
# |"{行内元素}lnline":不独占一行,宽度由内容撑开,无法设置宽高.
# |"{行内块元素}lnline-block":兼具上方两种元素特性,可设置宽高而不强制换行.
# |"{替换元素}":内容由外部元素决定(如img和video等).
# |"{表单元素}":交互控件(如from和input等),部分默认为行内块.

三:目录

四:标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
# HTML---------------------------------------------------------------------------------------------------------->
//涵盖HTML5的全部标签以及可用属性值 |说明:HTML标签注重语义化,因此每个标签后的备注仅为经典使用场景,不代表唯一场景。

# 文档结构标签======================================
# <div> :通用布局容器(最高频)//页面区块划分
# <span> :行内容器(最高频)//行内元素包裹
# <body> :文档主体内容 //必备容器
# <header> :页面/区块头部(HTML5) //顶部导航区域
# <footer> :页面/区块底部(HTML5) //版权信息区域
# <nav> :导航链接(HTML5新增)//主导航菜单
# <main> :文档主要内容(HTML5新增)//核心内容区
# <section> :内容区块分组(HTML5) //章节划分
# <article> :独立内容(如博客)(HTML5) //独立内容单元
# <h1>-<h6> :标题(1-6级)//标题层级结构
# <aside> :侧边栏内容(HTML5) //侧边内容区
# <figure> :媒体内容组合(HTML5) //媒体组容器
# <figcaption> :媒体标题(HTML5) //figure的子标题
# <details> :折叠内容块(HTML5) //可展开/折叠模块
# <summary> :details的标题(HTML5) //折叠模块标题
# <!DOCTYPE> :声明文档类型 //单标签(页面首行)
# <html> :根元素 //页面最外层容器
# <head> :文档头部元数据容器 //元信息存放区
# <title> :文档标题 //浏览器标签显示

# 元数据与脚本标签==================================
# <meta> :文档元数据(字符集等)//单标签(必备charset)
# <link> :链接外部资源 //单标签(CSS/图标引入)
# <script> :嵌入或引用JavaScript //逻辑核心
# <style> :内嵌CSS样式 //页面样式定义
# <noscript> :脚本不支持时显示内容 //降级方案
# <template> :定义可复用模板(HTML5) //组件模板容器
# <base> :基础URL //单标签(相对路径基准)
# <basefont> :基本字体(已废弃)//单标签(禁用)

# 文本内容标签======================================
# <p> :段落 //文本基础容器
# <a> :超链接 //交互核心(href属性)
# <ul> :无序列表 //导航/条目展示
# <ol> :有序列表 //步骤流程
# <li> :列表项 //列表子元素
# <strong> :重要文本(语义加粗)//关键内容强调
# <em> :强调文本(语义倾斜)//语气强调
# <br> :换行 //单标签(文本换行)
# <hr> :水平分隔线 //单标签(内容分割)
# <b> :视觉加粗 //样式加粗
# <i> :视觉倾斜 //技术术语/图标
# <del> :删除线文本 //修改标记
# <sup> :上标文本 //公式标注
# <sub> :下标文本 //化学式(如H₂O)
# <pre> :预格式化文本 //保留空格/回车
# <code> :计算机代码 //代码片段展示
# <blockquote> :长引用 //文献引用块
# <dl> :定义列表 //术语解释容器
# <dt> :定义项(术语)//dl子元素
# <dd> :定义描述 //dt对应说明
# <mark> :高亮文本(HTML5新增)//关键词标记
# <u> :下划线文本(不推荐)//CSS替代
# <ins> :插入的新内容 //更新内容标记
# <time> :日期/时间(HTML5新增)//时间语义化
# <ruby> :注音文本 //东亚文字注音
# <rt> :注音解释(HTML5新增)//ruby子标签

# 表格标签==========================================
# <table> :表格容器 //数据表格 快捷:table>tr*5>td{文本},合并单元格:colspan,rowspan
# <tr> :表格行 //行容器
# <td> :数据单元格 //基础单元格
# <th> :表头单元格 //标题单元格
# <thead> :表头区域 //标题行容器
# <tbody> :表体区域 //数据行容器
# <caption> :表格标题 //表格描述
# <tfoot> :表尾区域 //汇总行
# <colgroup> :列组 //多列样式控制
# <col> :列属性 //单标签(列样式设置)
# <datagrid> :动态数据表格(非标准)//极少支持
//{CSS内嵌可用值}:
# <border>=: "表格的边框"
# <cellspacing>=: "格与格间距"
# <cellpadding>=: "格与内容间距"
# <colspan>=: "表格水平合并" [保留左边,删除右边](td:2)
# <rowspan>=: "表格垂直合并" [保留上边,删除下边](td:2)
# <valing>=: "top" [td:设置一个单元格宽/高,影响这一整列/行的宽/高]
# 表格:type: 列表符号 | (ol:1,a,A,i,I)(ul:disc默认实心圆,circle空心圆,square小方块,none不显示)

# 媒体与嵌入标签====================================
# <img> :嵌入图像 //单标签(src/alt必备)
# <video> :嵌入视频(HTML5新增)//多媒体播放
# <audio> :嵌入音频(HTML5新增)//音频播放
# <iframe> :内嵌网页 //第三方内容嵌入
# <canvas> :动态绘图(HTML5新增)//JS图形绘制
# <source> :多格式媒体源(HTML5新增)//格式兼容
# <track> :字幕/说明(HTML5新增)//视频字幕
# <embed> :外部插件嵌入(逐步淘汰)//传统插件
# <object> :嵌入外部资源 //PDF/Flash嵌入
# <param> :object参数 //单标签
# <map> :图像地图 //可点击区域定义
# <area> :图像地图区域 //单标签(热区坐标)
//{CSS内嵌可用值}:
# src:图片 |
# ait:图像异常文本 |
# href:链接 | a标签

# 表单标签==========================================
# <form> :表单容器 //数据提交核心
# <input> :输入控件(文本/密码等)//交互核心
# <button> :可点击按钮 //表单操作
# <label> :表单控件标签 //焦点绑定
# <textarea> :多行文本输入 //长文本输入
# <select> :下拉选择框 //选项容器
# <option> :下拉选项 //select子项
# <datalist> :输入提示列表(HTML5新增)//输入建议
# <fieldset> :表单分组 //区块包裹
# <legend> :fieldset标题 //分组标题
# <optgroup> :选项分组 //选项分类
# <progress> :任务进度条(HTML5新增)//进度显示
# <meter> :标量值测量(HTML5新增)//数值范围
# <output> :计算结果输出(HTML5新增)//动态结果
# <keygen> :加密密钥生成(已废弃)//禁用
//{CSS内嵌可用值}:
# 表单:type=: 表单按钮| (button按钮/submit提交按钮/value登录/name自定义文本/reset清空内容)
# 表单:type=: 表单类型| (text文本框/password表单类型/)
# 表单:action=:向何处发送表单数据
# 表单:method=:表单数据 | (get/从服务器获取数据,post/向服务器发送数据)
# 表单:name=:数据名称
# 表单:value=:输入框默认输入值
# 表单:maxlength=: 输入框最大可输入长度
# 表单:target:网页打开方式 | (_self默认/_blank新窗口)

# 交互与脚本标签====================================
# <a> :超链接(已在文本类列出)//重复项
# <dialog> :对话框(HTML5新增)//模态弹窗
# <menu> :菜单列表//功能菜单
# <command> :命令按钮(已废弃)//禁用
# <noscript> :脚本不支持显示(已在元数据列出)

# 其他标签==========================================
# <abbr> :缩写(如“HTML”)//title属性提示
# <address> :联系信息 //作者/公司信息
# <cite> :作品引用 //文献来源
# <q> :短引用 //自动加引号
# <bdo> :文本方向控制 //dir="rtl"设置
# <var> :变量名 //代码变量标识
# <wbr> :可选换行点(HTML5新增)//响应式断字