https://amatsuzero.github.io/LastStand/tags/html-5-%E6%96%B0%E7%89%B9%E6%80%A7/Recent content in HTML 5 新特性 on Last StandHugozh-cnWed, 06 Nov 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/html/html-001/Tue, 24 Sep 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/html/html-001/<h2 id="html5-新特性">HTML5 新特性</h2> <ol> <li>语义标签</li> <li>增强型表单</li> <li>视频和音频</li> <li>Canvas绘图</li> <li>SVG绘图</li> <li>地理定位</li> <li>拖拽API</li> <li>WebWorker</li> <li>WebStorage</li> <li>WebSocket</li> </ol> <h2 id="语义标签">语义标签</h2> <p>语义化标签使得页面的内容结构化，可以使开发者更方便清晰地构建页面的布局</p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>&lt;header&gt;</code></td> <td>定义了文档的头部区域</td> </tr> <tr> <td><code>&lt;footer&gt;</code></td> <td>定义了文档的尾部区域</td> </tr> <tr> <td><code>&lt;nav&gt;</code></td> <td>定义文档的导航</td> </tr> <tr> <td><code>&lt;section&gt;</code></td> <td>定义文档中的书</td> </tr> <tr> <td><code>&lt;acticle&gt;</code></td> <td>定义页面独立的内容区域</td> </tr> <tr> <td><code>&lt;aside&gt;</code></td> <td>定义页面侧边栏内容</td> </tr> <tr> <td><code>&lt;details&gt;</code></td> <td>定义用户可以看到或隐藏的额外细节</td> </tr> <tr> <td><code>&lt;summary&gt;</code></td> <td>标签包含details元素的标题</td> </tr> <tr> <td><code>&lt;dialog&gt;</code></td> <td>定义对话框</td> </tr> <tr> <td><code>&lt;figure&gt;</code></td> <td>定义自包含内容，如图表</td> </tr> <tr> <td><code>&lt;main&gt;</code></td> <td>定义文档主内容</td> </tr> </tbody> </table> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/html/html-001/image-01.webp"></p> <h2 id="增强型表单">增强型表单</h2> <p>HTML5新增input输入特性，改善更好的输入控制和验证</p> <table> <thead> <tr> <th>输入类型</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>color</td> <td>主要用于选取颜色</td> </tr> <tr> <td>date</td> <td>选取日期</td> </tr> <tr> <td>datetime</td> <td>选取日期（UTC时间）</td> </tr> <tr> <td>datetime-local</td> <td>选取日期（无时区）</td> </tr> <tr> <td>month</td> <td>选择一个月份</td> </tr> <tr> <td>week</td> <td>选择周和年</td> </tr> <tr> <td>time</td> <td>选择一个时间</td> </tr> <tr> <td>email</td> <td>包含email地址的输入域</td> </tr> <tr> <td>number</td> <td>数值的输入域</td> </tr> <tr> <td>url</td> <td>url地址的输入域</td> </tr> <tr> <td>tel</td> <td>定义输入电话号码的字段</td> </tr> <tr> <td>search</td> <td>用于搜索域</td> </tr> <tr> <td>range</td> <td>一个范围内数字值的输入域</td> </tr> </tbody> </table> <p>HTML5也新增了五个表单元素</p>