1. 前言
HTML（Hyper Text Markup Language，超文本标记语言）是一种用于创建网页的标记语言，通过使用HTML标签决定如何展现HTML页面的内容。
2. 基础知识
| HTML标签 | 说明 | 示例 |
| <!DOCTYPE html> | 声明为HTML5文档 | <!DOCTYPE html> |
| <!-- 注释 --> | 定义注释 | <!-- 这是一行注释 --> |
| <html> | HTML页面的根元素 | <html> <head> <title>标题</title> <base href="URL" target="_blank"> <meta charest="utf-8"> <meta name="keywords" content="HTML, CSS, XML, JavaScript"> <meta http-equiv="refresh" content="30"> <link rel="stylesheet" type="text/css" href="style.css" /> <style> body { background-color: blue; } </style> </head> <body> </body> </html> |
| <head> | 包含所有头部标签 | |
| <title> | 定义文档的标题 | |
| <base> | 基本的链接地址和链接目标 | |
| <meta> | 描述文档的一些元数据 | |
| <link> | 定义外部资源引用地址 | |
| <style> | 定义文档的文本样式 | |
| <body> | 包含可见的页面内容 | |
| <h1> <h2> <h3> <h4> <h5> <h6> | 定义1-6级标题 | <h1>标题一</h1> <h2>标题二</h2> <h3>标题三</h3> <h4>标题四</h4> <h5>标题五</h5> <h6>标题六</h6> |
| <p> | 定义段落 | <p id="first" class="paragraph" style="color: red; text-align: justify; " title="段落"> 这是一个段落 </p> |
| <b> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <code> <kbd> <samp> <var> <pre> <abbr> <address> <bdo> <blockquote> <q> <cite> <dfn> | 定义粗体文本 定义着重文字 定义斜体字 定义小号字 定义加重语气 定义下标字 定义上标字 定义插入字 定义删除字 定义计算机代码 定义键盘码 定义计算机代码样本 定义变量 定义预格式文本 定义缩写 定义地址 定义文字方向 定义长的引用 定义短的引用 定义引用、引证 定义一个定义项目 | <b>加粗文本</b><br><br> <i>斜体文本</i><br><br> <code>电脑自动输出</code><br><br> 这是 <sub> 下标</sub> 和 <sup> 上标</sup> |
| <a> | 定义超链接 | <a href=“URL” target="_blank | _self" rel="nofollow | noopener noreference"> 这是一个链接 </a> <a href=“#section”>这是一个链接</a> <a name="section"></a>或<a id="section"></a> |
| <img> | 定义图像 | <img src="URL"width="258" height="39" alt="预备可替换的文本"/> |
| <map> <area> | 定义图像地图 定义图像地址可点击区域 | <略> |
| <hr> | 定义水平线 | <hr /> |
| <br> | 定义换行 | <br /> |
| <table> <caption> <thead> <th> <tbody> <tfoot> <tr> <td> <colgroup> <col> | 定义表格 定义表格标题 定义表格的页眉 定义表格的头 定义表格的主体 定义表格的页脚 定义表格的行 定义表格的单元 定义表格列的组 定义用于表格列的属性 | <table> <caption></caption> <thead> <tr> <th></th><th></th><th></th> </tr> </thead> <tbody> <colgroup> <col span="2" style="background: red"></col> <col style="background: yellow"></col> </colgroup> <tr> <td></td><td></td><td></td> </tr> </tbody> <tfoot> <tr> <td></td><td></td><td></td> </tr> </tfoot> </table> |
| <ul> <ol> <li> <dl> <dt> <dd> | 无序列表 有序列表 列表项 自定义列表 自定义列表项目 自定义列表项目描述 | <ul> <li>one</li> <li>two</li> </ul> <ol> <li>1</li> <li>2</li> </ol> <dl> <dt>1</dt> <dd>-Hello</dd> <dt>2</dt> <dd>-World</dd> </dl> |
| <div> | 是一种块级元素，是用于组合其他HTML元素的容器 | <div style="color: #00F"> <p>div中的<span>很有意思的</span>段落</p> </div> |
| <span> | 是一种内联元素，可用作文本的容器 | |
| <form> | 用于创建表单 | <form action="/" method="post"> <label for="name">用户名:</label> <input type="text" id="name" name="name" required /> <br /> <label for="password">密码:</label> <input type="password" id="password" name="password" required /> <br/> <label>性别:</label> <input type="radio" id="male" name="gender" value="male" checked /> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female" /> <label for="female">女</label> <br /> <input type="checkbox" id="subscribe" name="subscribe" checked /> <label for="subscribe">订阅推送信息</label> <br /> <label for="country">国家:</label> <select id="country" name="country"> <option value="cn">CN</option> <option value="usa">USA</option> <option value="uk">UK</option> </select> <br /> <input type="submit" value="提交" /> </form> |
| <label> | 为表单元素添加标签 | |
| <input> | 创建输入框、密码框、单选按钮、复选框 | |
| <select> | 创建下拉列表 | |
| <iframe> | 框架 | <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p> <a href="URL" target="iframe_a"> 点击 </a> </p> |
| <script> <noscript> | 定义客户端脚本 无法使用脚本时替代内容 | |
| 语义元素 | ||
| <article> <aside> <bdi> <command> <details> <dialog> <summary> <figure> <figcaption> <footer> <header> <mark> <meter> <nav> <progress> <ruby> <rt> <rp> <section> <time> <wbr> | 定义页面独立的内容区域 定义页面的侧边栏内容 允许设置一段文本，使其脱离父元素的文本方向设置 定义命令按钮，比如单选按钮、复选框或按钮 用于描述文档或文档某个部分的细节 定义对话框、比如提示框 标签包含details元素的标题 规定独立的流内容（图像、图表、照片、代码等等） 定义<figure>元素的标题 定义section或document的页脚 定义文档的头部区域 定义带记号的文本 定义度量衡，仅用于已知最大和最小的值的度量 定义导航链接的部分 定义任何类型的任务的进度 定义ruby注释 定义字符（中文注音或字符）的解释或发音 在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容 定义文档中的节（section、区段）‘ 定义日期或时间 规定在文本中的何处适合添加换行符 | |
| <canvas> | 用于图形绘制，通过JS来完成 | <canvas id="canvas" width="200" height="100"> </canvas> const c=document.getElementById("canvas"); const ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); |
| <svg> | 宝义可缩放矢量图形 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> |
| <math> | MathML是数学标记语文，也是一种基于XML的标准 | <略> |
| <audio> | 定义音频内容 | <略> |
| <video> | 定义视频（video或movie） | <略> |
| <source> | 定义多媒体资源 <video>和<audio> | <略> |
| <embed> | 定义嵌入的内容，比如插件 | <略> |
| <track> | 为<video>和<audio>元素之类的媒介规定外部文本轨道 | <略> |
| <input> | input新增支持类型 color date datetime datetime-local month number range search tel time url week | <略> |
| <datalist> | 定义选项列表，和input元素配合使用该元素 | <略> |
| <keygen> | 用于表单的密钥对生成器字段 | <略> |
| <output> | 定义不同类型的输出，比如脚本的输出 | <略> |
| <form> 新属性 | autocomplete novalidate | <略> |
| <input> 新属性 | autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget width height list min max multiple pattern placeholder required step | <略> |
整理参考：HTML 教程 | 菜鸟教程 (runoob.com)
注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~
