超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML标签的大小写无关的，例如“主体”跟表示的意思是一样的，推荐使用小写

  1. html, address,
  2. blockquote,
  3. body, dd, div,
  4. dl, dt, fieldset, form,
  5. frame, frameset,
  6. h1, h2, h3, h4,
  7. h5, h6, noframes,
  8. ol, p, ul, center,
  9. dir, hr, menu, pre   { display: block; unicode-bidi: embed }
  10. li              { display: list-item }
  11. head            { display: none }
  12. table           { display: table }
  13. tr              { display: table-row }
  14. thead           { display: table-header-group }
  15. tbody           { display: table-row-group }
  16. tfoot           { display: table-footer-group }
  17. col             { display: table-column }
  18. colgroup        { display: table-column-group }
  19. td, th          { display: table-cell }
  20. caption         { display: table-caption }
  21. th              { font-weight: bolder; text-align: center }
  22. caption         { text-align: center }
  23. body            { margin: 8px }
  24. h1              { font-size: 2em; margin: .67em 0 }
  25. h2              { font-size: 1.5em; margin: .75em 0 }
  26. h3              { font-size: 1.17em; margin: .83em 0 }
  27. h4, p,
  28. blockquote, ul,
  29. fieldset, form,
  30. ol, dl, dir,
  31. menu            { margin: 1.12em 0 }
  32. h5              { font-size: .83em; margin: 1.5em 0 }
  33. h6              { font-size: .75em; margin: 1.67em 0 }
  34. h1, h2, h3, h4,
  35. h5, h6, b,
  36. strong          { font-weight: bolder }
  37. blockquote      { margin-left: 40px; margin-right: 40px }
  38. i, cite, em,
  39. var, address    { font-style: italic }
  40. pre, tt, code,
  41. kbd, samp       { font-family: monospace }
  42. pre             { white-space: pre }
  43. button, textarea,
  44. input, select   { display: inline-block }
  45. big             { font-size: 1.17em }
  46. small, sub, sup { font-size: .83em }
  47. sub             { vertical-align: sub }
  48. sup             { vertical-align: super }
  49. table           { border-spacing: 2px; }
  50. thead, tbody,
  51. tfoot           { vertical-align: middle }
  52. td, th, tr      { vertical-align: inherit }
  53. s, strike, del  { text-decoration: line-through }
  54. hr              { border: 1px inset }
  55. ol, ul, dir,
  56. menu, dd        { margin-left: 40px }
  57. ol              { list-style-type: decimal }
  58. ol ul, ul ol,
  59. ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
  60. u, ins          { text-decoration: underline }
  61. br:before       { content: "\A"; white-space: pre-line }
  62. center          { text-align: center }
  63. :link, :visited { text-decoration: underline }
  64. :focus          { outline: thin dotted invert }
  65. /* Begin bidirectionality settings (do not change) */
  66. BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
  67. BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }
  68. *[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
  69. *[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }
  70. @media print {
  71.   h1            { page-break-before: always }
  72.   h1, h2, h3,
  73.   h4, h5, h6    { page-break-after: avoid }
  74.   ul, ol, dl    { page-break-before: avoid }
  75. }

HTML 中有用的字符实体

显示结果 描述 实体名称 实体编号
空格    
< 小于号 < <
> 大于号 > >
& 和号 & &
“ 引号 " "
‘ 撇号 ' (IE不支持) '
￠ 分（cent） ¢ ¢
£ 镑（pound） £ £
¥ 元（yen） ¥ ¥
€ 欧元（euro） € €
§ 小节 § §
© 版权（copyright） © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷

⚠️注意: 实体名称对大小写敏感！
如需完整的实体符号参考，请访问我们的 HTML 实体符号参考手册

元素类型

块级元素

block level element 具有block元素的特点:

  • 高度，行高以及顶、底边距都可控制
  • 宽度缺省是它所在容器的100%，除非设定一个宽度
  • 块级元素时通常以新行开始 | 标签 | 说明 | | —- | —- | | div | 常用块级容易，也是css layout的主要标签
    块元素，表示一块内容，没有具体的语义
    定义文档中的分区或节（division/section） | | table | 表格 | | p | 段落 | | hr | 水平分隔线 | | h1-h6 | 标题

    、

    、

    、

    、

    、
    - 标签可以在网页上定义6种级别的标题
    - 6种级别的标题表示文档的6级目录层级关系，比如说：

    用作主标题，其后是

    ，再其次是

    ，以此类推
    - 搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的
    | | form | 交互表单(只能用来容纳其它块元素) | | ul | 无序列表，和li连着用 | | ol | 有序表单，和li连着用 | | dl | 定义列表，通常和下面的连着用



    | | dir | 目录列表 | | menu | 菜单列表 | | address | 地址 | | blockquote | 块引用 | | center | 居中对齐块 | | fieldset | form控制组 | | isindex | input prompt | | noframes | frames可选内容，对于不支持frame的浏览器显示此区块内容 | | noscript | 可选脚本内容（对于不支持script的浏览器显示此内容） | | pre | 格式化文本 |

内联元素

inline element 具有inline元素的特点:

  • 和其它元素都在一行上
  • 高度，行高以及顶、底边距不可直接添加
  • 宽度就是它所容纳的文字或图片的宽度，不可改变
  • 内联元素通常不会以新行开始 | 标签 | 说明 | | —- | —- | | span | 常用内联容器，定义文本内区块
    没有具体的语义 | | img | 图片 | | br/ | 换行 | | b | 粗体(不推荐) | | strong | 粗体强调 | | big | 大字体 | | a | 锚点 | | em | 强调 | | abbr | 缩写 | | font | 字体设定(不推荐) | | i | 斜体 | | sub | 下标 | | sup | 上标 | | u | 下划线 | | small | 小字体文本 | | dfn | 定义字段 | | var | 定义变量 | | input | 输入框 | | label | 表格标签 | | textarea | 多行文本输入框 | | acronym | 首字 | | bdo | bidi override | | cite | 引用 | | code | 计算机代码(在引用源码的时候需要) | | kbd | 定义键盘文本 | | q | 短引用 | | s | 中划线(不推荐) | | samp | 定义范例计算机代码 | | select | 项目选择 | | strike | 中划线 | | tt | 电传文本 |

可变元素

根据上下文的显示，来确定这个元素是块状元素还是内联元素

标签 说明
applet java applet
button 按钮
del 删除文本
iframe 可以是内嵌一个窗口
frame
inline frame
ins 插入的文本
map 图片区块(map)
object object对象
script 客户端脚本

display属性

作用：检索或者设置元素生成的盒模型类型
在一个项目中，可能用到的标签可能会很多很多，但是比如我想用块元素，但是想用有内联元素的特点；想用内联，又想拥有块元素的特点，这个时候该怎么办呢？就需要用到元素类型的转换
元素类型的转换：

属性 描述
display:block; 将元素转成块状元素，拥有块状元素特点
大部分块状元素，默认的display的值都是block
display:inline; 将元素转成内联元素，拥有内联元素的特点
大部分内联元素，默认的display的值inline;
display:inline-block; 顾名思义就是行内块的意思了
也就是说他具有了行内元素的不换行特征,同时也具有块元素的可以设置宽高等特征
display:none; 将当前隐藏，并不占据空间

常见的语义化标签

因此我们在写页面结构时，应尽量使用有 语义的HTML 标签

标签 说明
</td> <td>页面主体内容</td> </tr> <tr> <td><h1> ～ <h6></td> <td>h1 ~ h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化</td> </tr> <tr> <td><p></td> <td>表示段落</td> </tr> <tr> <td><a></td> <td>表示链接</td> </tr> <tr> <td>dl、dt、dd</td> <td>表示定义列表等，语义化的标签不多</td> </tr> <tr> <td><ul> <li></td> <td>无序列表</td> </tr> <tr> <td><ul> <ol></td> <td>有序列表</td> </tr> <tr> <td><header></td> <td>页眉通常包括网站标志、主导航、全站链接以及搜索框</td> </tr> <tr> <td><nav></td> <td>标记导航，仅对文档中重要的链接群使用</td> </tr> <tr> <td><main></td> <td>页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能</td> </tr> <tr> <td><article></td> <td>定义外部的内容，其中的内容独立于文档的其余部分</td> </tr> <tr> <td><section></td> <td>定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分</td> </tr> <tr> <td><aside></td> <td>定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等</td> </tr> <tr> <td><footer></td> <td>页脚，只有当父级是body时，才是整个页面的页脚</td> </tr> <tr> <td><small></td> <td>呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权</td> </tr> <tr> <td><em></td> <td>将其中的文本表示为强调的内容，表现为斜体</td> </tr> <tr> <td><strong></td> <td>和 em 标签一样，用于强调文本，但它强调的程度更强一些</td> </tr> <tr> <td><mark></td> <td>使用黄色突出显示部分文本</td> </tr> <tr> <td><figure></td> <td>规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）</td> </tr> <tr> <td><figcaption></td> <td>定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置</td> </tr> <tr> <td><cite></td> <td>表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题</td> </tr> <tr> <td><blockquoto></td> <td>定义块引用，块引用拥有它们自己的空间</td> </tr> <tr> <td><q></td> <td>短的引述（跨浏览器问题，尽量避免使用）</td> </tr> <tr> <td><time></td> <td>datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式</td> </tr> <tr> <td><abbr></td> <td>简称或缩写</td> </tr> <tr> <td><dfn></td> <td>定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用</td> </tr> <tr> <td><address></td> <td>作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）</td> </tr> <tr> <td><del></td> <td>移除的内容</td> </tr> <tr> <td><ins></td> <td>添加的内容</td> </tr> <tr> <td><code></td> <td>标记代码</td> </tr> <tr> <td><meter></td> <td>定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）</td> </tr> <tr> <td><progress></td> <td>定义运行中的进度（进程）</td> </tr> </tbody> </table> <p><a name="tUeU3"></a></p> <h3 id="3k8ou6"><a name="3k8ou6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>html5 新增标签</h3><p><img src="https://cdn.nlark.com/yuque/0/2021/png/604921/1615901218730-50addcfa-88ff-4a3a-9fe4-333370dcd992.png#align=left&display=inline&height=270&margin=%5Bobject%20Object%5D&name=image.png&originHeight=270&originWidth=540&size=26289&status=done&style=none&width=540" alt="image.png"></p> <table> <thead> <tr> <th><strong>标签</strong></th> <th><strong>描述</strong></th> </tr> </thead> <tbody> <tr> <td><template></td> <td>js运行时实例化内容的容器</td> </tr> <tr> <td><section></td> <td>定义文档中的一个章节</td> </tr> <tr> <td><nav></td> <td>定义只包含导航链接的章节</td> </tr> <tr> <td><article></td> <td>定义可以独立与内容其余部分的完整独立内容模块</td> </tr> <tr> <td><aside></td> <td>定义和页面内容关联度较低的内容，如果被删除剩下的额内容仍然合理</td> </tr> <tr> <td><header></td> <td>定义页面或章节头部，包含logo、页面标题和导航性的目录</td> </tr> <tr> <td><footer></td> <td>第一文章的尾部</td> </tr> <tr> <td><main></td> <td>定义文章的主要内容</td> </tr> <tr> <td><figure></td> <td>代表一个和文档有关的图例</td> </tr> <tr> <td><figcaption></td> <td>代表一个图例的说明</td> </tr> <tr> <td><data></td> <td>关联一个内容的机器可读的等价形式 （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）</td> </tr> <tr> <td><time></td> <td>代表日期 和时间 值；机器可读的等价形式通过 datetime 属性指定</td> </tr> <tr> <td><mark></td> <td>代表一段需要被高亮的引用文字</td> </tr> <tr> <td><ruby></td> <td>代表被ruby 注释 标记的文本，如中文汉字和它的拼音</td> </tr> <tr> <td><rt></td> <td>代表ruby 注释 ，如中文拼音</td> </tr> <tr> <td><rp></td> <td>代表 ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示</td> </tr> <tr> <td><bdi></td> <td>代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本</td> </tr> <tr> <td><wbr></td> <td>代表建议换行 (Word Break Opportunity) ，当文本太长需要换行时将会在此处添加换行符</td> </tr> <tr> <td><embed></td> <td>代表一个嵌入 的外部资源，如应用程序或交互内容</td> </tr> <tr> <td><video></td> <td>代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面</td> </tr> <tr> <td><audio></td> <td>代表一段声音 ，或音频流</td> </tr> <tr> <td><source></td> <td>为 <video> 或 <audio> 这类媒体元素指定媒体源</td> </tr> <tr> <td><track></td> <td>为 <video> 或 <audio> 这类媒体元素指定文本轨道（字幕）</td> </tr> <tr> <td><canvas></td> <td>代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等</td> </tr> <tr> <td><svg></td> <td>定义一个嵌入式矢量图</td> </tr> <tr> <td><math></td> <td>定义一段数学公式</td> </tr> <tr> <td><datalist></td> <td>代表提供给其他空间的额一组预定义选项</td> </tr> <tr> <td><keygen></td> <td>代表一个密钥对生成器控件</td> </tr> <tr> <td><output></td> <td>计算值</td> </tr> <tr> <td><progress></td> <td>进度条</td> </tr> <tr> <td><meter></td> <td>滑动条</td> </tr> <tr> <td><details></td> <td>代表一个用户可以(点击)获取额外信息或控件的小部件</td> </tr> <tr> <td><summary></td> <td>代表 <details> 元素的综述 或标题</td> </tr> <tr> <td><menuitem></td> <td>代表用户可以点击的菜单项</td> </tr> <tr> <td><menu></td> <td>代表菜单</td> </tr> </tbody> </table>