按照W3C标准，HTML元素被分为14类
(详请请见 W3C HTML标准)。
本文将根据W3C的分类标准，简要叙述常用的HTML元素。
: head title base link meta style
- The document element: html
- Document metadata
- Sections
- Grouping content
- Text-level semantics
- Links
- Edits
- Embeddet content
- Tabular data
- Forms
- Interactive elements
- Scripting
- Custom elements
HTML元素由以下三部分组成
- <!DOCTYPE html> 声明文档类型
- <head> 文档的相关信息
- <body> 文档的主体
在HTML文档中，<head> 和 <body> 的标签可以省略。
这些标签都是在 head元素内的标签，被称为 文档元数据标签。
包括: meta title base link style
。
现在分别叙述如下：
meta 声明文档元数据的属性和相应的值
例：<meta name="description" content="web教程" name="revised" content="Jhon, 2023/8/8/" />
title 声明文档的标题，该标题会显示在浏览器的标题栏中
base 指定文档中所有链接的前缀
link 指定外部链接文件，比如外部的css文件
script 指定要加载的外部javascript脚本
style 文档内嵌的css样式表
版面分布(Sections)
在编排文档内容之前，首先要考虑的是页面的布局。
在HTML文档中， 预设了很多与布局相关的标签。
包括article nav aside header footer
h1~h6 hgroup section等等。
结构标签默认为块状元素，通常会填满一整行。
- headers <h1~6> 标题 分级标题
- header 页眉，一个页面或一个区域的头部，一组前言或导航助手
- nav 一组导航链接(nav ul li)
- article 独立分布和可重复使用的文章
- section 文档的片区，存放子内容，比如章节、条目等等专题内容，通常带有标题
- aside 文档的附注栏，侧栏，放与文档有一些关联的内容
- footer 页脚，一个页面或一个区域的底部
- hgroup 包裹标题h1~h6的容器
- figure 一组媒体内容以及它们的标题
- figcaption figure元素的标题
- dialog 标记定义一个对话框(会话框、弹窗)
内容的分组(Grouping content)
根据内容的特性，把内容放置在对应的元素上。
- paragraph <p> 段落 文章的段落
- horizontal <hr> 水平线 表示该部分内容的结束
- pre 预文本，标签的内容保留其中的空白
- blockquote 长引用
- ol 有序列表
- ul 无序列表
- menu 菜单列表
- li 列表内的项目
- dl 描述列表
- dt 描述的标题，可嵌入到dialog、details、figure标签
- dd 对应的描述内容，可嵌入到dialog、details、figure标签
- figure 图片
- figcaption 图片的标题
- main 主要部分，一个页面仅使用一次
- div 块
文本中的语义元素(Text-level semantics)
当我们经历了文档的布局、内容的分组后，
则需要编写具体的文本内容，并把文本放入对应的语义标签中。
- a 链接标签
- em 强调文本
- strong 重要的文本
- small 小字
- s 删除的文本
- cite 引用的出处，一个作品的标题，包括书、歌曲、电视节目等等
- q 对话
- dfn 定义的术语
- abbr 缩写
- ruby 注音文本
- rt 注释或注音内容
- rp 如果浏览器不支持注音，则会显示该标签的内容
- data 带有value属性，其值应被计算机识别
- time 关于时间的文本
- code 代码
- var 变量名
- samp 采样
- kbd 用户输入的内容
- sub 上标
- sup 下标
- i 不一般的文本
- b 粗体字
- u 需要注意的、带下划线的文本
- mark 高亮显示的标记
- bdi 有不一样的dir属性值的文本
- bdo 有不一样的dir属性值的文本区(可嵌套)
- span 其余的文本
- br 换行
- wbr 在自动换行时，优先考虑的位置
链接(Links)
链接可以导向文档的某个锚点，也可能是外部网页或内容，是带有 href 属性的 a 标签。 例子：
<a href="http://www.w3school.com.cn" target="_blank">W3School</a>
表示编辑过的文本(Edits)
ins 表示插入的文本；
del 表示要删除或划掉的文本。
嵌套内容(Embedded content)
- picture 包裹 img 标签的容器，以便于对其中的 img 进行选择
- source 指定可替代的媒体源
- img 指代一张图
- Images 为适应不同页面大小而指定不同的图片尺寸
- iframe 可航行的内容
- embed 外部应用或可交互的内容
- object 外部资源，比如图片或子内容
- video
- audio
- track 为多媒体指定外部的、时间相关的文本轨
- MediaElements 媒体属性 src, crossorigin, preload, autoplay, loop, muted, controls
- map 配合img元素，内含area标签
- area
- MathML
- SVG
- DiemensionAttributes 在 img, iframe, embed, object, video, source元素中的 width 和 height 属性
表格数据(Tabular data)
caption: 表格标题
| thead_tr_th: table header cell | 表头部 | thead_tr_td: table data cell |
|---|
| tbody_tr_th: 表头单元格 | 表主体 | tbody_tr_td: 表格数据单元 |
|---|
| 我 是 谁 | 主 谓 宾 | 标签名 属性 属性值或内容 |
|---|
| tfoot_tr_th: 摘要或统计 | 表脚注 | tfoot_tr_td: 统计出的信息 |
|---|
HTML实体 = & + 名称|编号 + ;
| 显示结果 | 描述 | 名称 ** | 编号 | 组成 |
|---|
| | 不可拆分的空格 | nbsp | 160 | |
| < | 小于 | lt | 60 | < |
| > | 大于 | gt | 62 | > |
| & | and符号 | amp | 38 | & |
| " | 引号 | quot | 34 | " |
| ' | 单引号 | | 39 | |
| ¢ | 分 | cent | | |
| £ | 英镑 | pound | | |
| ¥ | 人民币元 | yen | | |
| § | 章节 | sect | | |
| © | 版权 | copy | | |
| ® | 注册 | reg | | |
| × | 乘号 | times | | |
| ÷ | 除号 | divide | | |
| **: 实体名是大小写敏感的。 |
| | 2008 | 2007 | 2006
|
| Research and development
| $ 1,109 | $ 782 | $ 712
|
| Percentage of net sales
| 3.4% | 3.3% | 3.7%
|
| Selling, general, and administrative
| $ 3,761 | $ 2,963 | $ 2,433
|
| Percentage of net sales
| 11.6% | 12.3% | 12.6%
|
通过style属性或class来设置 colgroup 的样式时，color属性无效，但background-color属性有效。
交互元素(Interactive elements)
- details容器与summary文本标签
- details作为容器，summary作为该容器的标题被放在第一的位置，后面跟着具体的HTML内容。
命令(Commands)是隐藏于菜单列、按钮、链接中的一种抽象功能，包含以下五个方面：
显示标签(Label)、访问键(AccessKey)、隐显状态(HiddenState)、启禁状态(DisabledState)、行为(Action)
对话框(dialog)：可通过dialog.open=true 或 dialog.showModel() 来显示。
通过 dialog.close("可选的返回的字符串") 来关闭。通过 dialog.returnValue 获取返回的字符串。
本文在summary元素中，是父元素details的标题
毛泽东同志说过：一切帝国主义都是纸老虎
多媒体交互标签
- video 标记定义一个视频；
- audio 标记定义音频内容；
- source 标记定义媒体资源；
- canvas 标记定义图片；
- embed 标记定义外部的可交互的内容或插件
Web应用标签
- menu 命令列表 重新定义用户界面的菜单，配合commond或者menuitem使用
- menuitem menu命令列表标签（嵌入系统）
- command menu标记定义一个命令按钮
- meter 状态标签(实时状态显示:气压、气温)
- progress 状态标签 (任务过程:安装、加载)
- datalist 为input标记定义一个下拉列表，配合option
- details 标记定义一个元素的详细内容 ，配合dt、dd
其他标签 ✔ output
实时的内容输出，比如计算结果，可配合oninput事件；它与 samp 元素的区别在于实时性。
keygen 标签
使用Web Cryptography API 生成验证键值对，并曝露验证和密钥。 [WEBCRYPTO]
革命军人、人民战士：三大纪律
- 一切行动听指挥，步调一致才能得胜利
- 不拿群众一针线，群众对我拥护又喜欢
- 一切缴获要归公，努力减轻人民的负担
八项注意
- 说话态度要和好，尊重群众，不要耍骄傲
- 买卖价钱要公平，公卖公卖，不许逞霸道
- 借人东西用过了，当面归还，切莫遗失掉
- 若把东西损坏了，照价赔偿，不差半分毫
- 不许打人和骂人，军阀作风，坚决克服掉
- 爱护群众的庄稼，行军作战，处处注意到
- 不许调戏妇女们，流氓习气，坚决要除掉
- 不许虐待俘虏兵，不许打骂，不许搜腰包
脚本(Scripting)
- script： 给 script 指定 defer 属性，那么该段脚本就会在DOM树解析之后执行。
- template 用 template 包裹一段HTML内容，该内容是DocumentFragment内的元素，可通过脚本插入到文档中。
用户自定义元素(Custom elements)
默许的成规(Common idioms without dedicated elements)