HTML5教程之标签7

JAY.LIN 收录于 Html

2025-03-11 约 3241 字预计阅读 7 分钟

https://bing.ee123.net/img/rand?artid=146190457

HTML5 标签
HTML5 标签</a><ul><li><a href=#实例-1>实例</a></li><li><a href=#浏览器支持-1>浏览器支持</a></li><li><a href=#标签定义及使用说明-1>标签定义及使用说明</a></li><li><a href=#提示和注释>提示和注释</a></li><li><a href=#html-401-与-html5之间的差异-1>HTML 4.01 与 HTML5之间的差异</a></li><li><a href=#html-与-xhtml-之间的差异>HTML 与 XHTML 之间的差异</a></li><li><a href=#属性>属性</a></li><li><a href=#全局属性-1>全局属性</a></li><li><a href=#事件属性-1>事件属性</a></li><li><a href=#相关文章>相关文章</a></li></ul></li><li><a href=#html5--标签-2>HTML5 <input> 标签</a><ul><li><a href=#实例-2>实例</a></li><li><a href=#浏览器支持-2>浏览器支持</a></li><li><a href=#标签定义及使用说明-2>标签定义及使用说明</a></li><li><a href=#提示和注释-1>提示和注释</a></li><li><a href=#html-401-与-html5之间的差异-2>HTML 4.01 与 HTML5之间的差异</a></li><li><a href=#html-与-xhtml-之间的差异-1>HTML 与 XHTML 之间的差异</a></li><li><a href=#属性-1>属性</a></li><li><a href=#全局属性-2>全局属性</a></li><li><a href=#事件属性-2>事件属性</a></li><li><a href=#相关阅读>相关阅读</a></li></ul></li><li><a href=#html5--标签-3>HTML5 <img> 标签</a><ul><li><a href=#实例-3>实例</a></li><li><a href=#浏览器支持-3>浏览器支持</a></li><li><a href=#标签定义及使用说明-3>标签定义及使用说明</a></li><li><a href=#html-401-与-html5之间的差异-3>HTML 4.01 与 HTML5之间的差异</a></li><li><a href=#html-与-xhtml-之间的差异-2>HTML 与 XHTML 之间的差异</a></li><li><a href=#属性-2>属性</a></li><li><a href=#全局属性-3>全局属性</a></li><li><a href=#事件属性-3>事件属性</a></li><li><a href=#尝试一下---实例>尝试一下 - 实例</a></li><li><a href=#支持的图像格式>支持的图像格式</a></li><li><a href=#与css的交互>与 CSS 的交互</a></li><li><a href=#相关文章-1>相关文章</a></li></ul></li><li><a href=#html5--标签-4>HTML5 <ins>标签</a><ul><li><a href=#实例-4>实例</a></li><li><a href=#浏览器支持-4>浏览器支持</a></li><li><a href=#标签定义及使用说明-4>标签定义及使用说明</a></li><li><a href=#提示和注释-2>提示和注释</a></li><li><a href=#html-401-与-html5之间的差异-4>HTML 4.01 与 HTML5之间的差异</a></li><li><a href=#属性-3>属性</a></li><li><a href=#全局属性-4>全局属性</a></li><li><a href=#事件属性-4>事件属性</a></li></ul></li></ul></nav></div></div><div class=content id=content><h1 id=html5教程之标签7>HTML5教程之标签（7）</h1><p><strong>原文见：</strong></p><h2 id=html5--标签>HTML5 <i>标签</h2><h3 id=实例>实例</h3><div class="code-block code-line-numbers open" style="counter-reset:code-block 0"><div class="code-header language-bash"><span class=code-title><i class="arrow fas fa-chevron-right fa-fw" aria-hidden=true></i></span> <span class=ellipses><i class="fas fa-ellipsis-h fa-fw" aria-hidden=true></i></span> <span class=copy title=复制到剪贴板><i class="far fa-copy fa-fw" aria-hidden=true></i></span></div><pre tabindex=0><code><p>He named his car <i>The lightning</i>, because it was very fast.</p></code></pre></div><p></p><hr><h3 id=浏览器支持>浏览器支持</h3><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/2451d6b4e68383466269e8c81802d535.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/2451d6b4e68383466269e8c81802d535.gif, https://i-blog.csdnimg.cn/img_convert/2451d6b4e68383466269e8c81802d535.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/2451d6b4e68383466269e8c81802d535.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/2451d6b4e68383466269e8c81802d535.gif title="Internet Explorer"></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/b5483584da10eda6d05d98820b2a839a.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/b5483584da10eda6d05d98820b2a839a.gif, https://i-blog.csdnimg.cn/img_convert/b5483584da10eda6d05d98820b2a839a.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/b5483584da10eda6d05d98820b2a839a.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/b5483584da10eda6d05d98820b2a839a.gif title=Firefox></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/a29ba34b6d96c71f29feee0672b81aa0.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/a29ba34b6d96c71f29feee0672b81aa0.gif, https://i-blog.csdnimg.cn/img_convert/a29ba34b6d96c71f29feee0672b81aa0.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/a29ba34b6d96c71f29feee0672b81aa0.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/a29ba34b6d96c71f29feee0672b81aa0.gif title=Opera></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/40304519fa49cc553c404f5b11570bc3.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/40304519fa49cc553c404f5b11570bc3.gif, https://i-blog.csdnimg.cn/img_convert/40304519fa49cc553c404f5b11570bc3.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/40304519fa49cc553c404f5b11570bc3.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/40304519fa49cc553c404f5b11570bc3.gif title="Google Chrome"></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/21627b13a1f5c38e2f9da6ba794ee505.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/21627b13a1f5c38e2f9da6ba794ee505.gif, https://i-blog.csdnimg.cn/img_convert/21627b13a1f5c38e2f9da6ba794ee505.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/21627b13a1f5c38e2f9da6ba794ee505.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/21627b13a1f5c38e2f9da6ba794ee505.gif title=Safari></p><p>所有主流浏览器都支持 <i>标签。</p><hr><h3 id=标签定义及使用说明>标签定义及使用说明</h3><p><i>定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。</p><p><i>标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。</p><p>在没有其他适当语义的元素可以使用时，请使用 <i>元素。其他语义的元素如下：</p><ul><li>（被强调的文本）</li><li>（重要的文本）</li><li>（被标记的/高亮显示的文本）</li><li>（作品的标题）</li><li>（一个定义项目）</li></ul><hr><h3 id=html-401-与-html5之间的差异>HTML 4.01 与 HTML5之间的差异</h3><p>在 HTML 4.01 中，<i> 标签呈现斜体的文本。然而，在 HTML5 中没有必要这么做，可以使用样式表来格式化 <i>元素中的文本。</p><hr><h3 id=全局属性>全局属性</h3><p><i>标签支持。</p><hr><h3 id=事件属性>事件属性</h3><p><i>标签支持。</p><h2 id=html5--标签-1>HTML5 <iframe>标签</h2><h3 id=实例-1>实例</h3><p>使用HTML5 <iframe>标签来标记一个内联框架：</p><div class="code-block code-line-numbers open" style="counter-reset:code-block 0"><div class="code-header language-bash"><span class=code-title><i class="arrow fas fa-chevron-right fa-fw" aria-hidden=true></i></span> <span class=ellipses><i class="fas fa-ellipsis-h fa-fw" aria-hidden=true></i></span> <span class=copy title=复制到剪贴板><i class="far fa-copy fa-fw" aria-hidden=true></i></span></div><pre tabindex=0><code><iframe src="http://www.w3cschool.cn"></iframe></code></pre></div><p></p><hr><h3 id=浏览器支持-1>浏览器支持</h3><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/ec369f208f1d44ffafbeea167784fa26.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/ec369f208f1d44ffafbeea167784fa26.gif, https://i-blog.csdnimg.cn/img_convert/ec369f208f1d44ffafbeea167784fa26.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/ec369f208f1d44ffafbeea167784fa26.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/ec369f208f1d44ffafbeea167784fa26.gif title="Internet Explorer"></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/c4b9925af6840a45d4c7b195c7ee25e7.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/c4b9925af6840a45d4c7b195c7ee25e7.gif, https://i-blog.csdnimg.cn/img_convert/c4b9925af6840a45d4c7b195c7ee25e7.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/c4b9925af6840a45d4c7b195c7ee25e7.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/c4b9925af6840a45d4c7b195c7ee25e7.gif title=Firefox></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/3308f3dad9e7f2d415b884267036f2f5.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/3308f3dad9e7f2d415b884267036f2f5.gif, https://i-blog.csdnimg.cn/img_convert/3308f3dad9e7f2d415b884267036f2f5.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/3308f3dad9e7f2d415b884267036f2f5.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/3308f3dad9e7f2d415b884267036f2f5.gif title=Opera></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/4f71930afa12f61069be7d9a18bcd7eb.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/4f71930afa12f61069be7d9a18bcd7eb.gif, https://i-blog.csdnimg.cn/img_convert/4f71930afa12f61069be7d9a18bcd7eb.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/4f71930afa12f61069be7d9a18bcd7eb.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/4f71930afa12f61069be7d9a18bcd7eb.gif title="Google Chrome"></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/ca8f4174017fca13769e604d92ff3c10.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/ca8f4174017fca13769e604d92ff3c10.gif, https://i-blog.csdnimg.cn/img_convert/ca8f4174017fca13769e604d92ff3c10.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/ca8f4174017fca13769e604d92ff3c10.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/ca8f4174017fca13769e604d92ff3c10.gif title=Safari></p><p>所有主流浏览器都支持 <iframe>标签。</p><hr><h3 id=标签定义及使用说明-1>标签定义及使用说明</h3><iframe>标签规定一个内联框架。<p>一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。</p><hr><h3 id=提示和注释>提示和注释</h3><p><strong>提示：</strong> 您可以把需要的文本放置在 <iframe>和之间，这样就可以应对不支持的浏览器。</p><p><strong>提示：</strong> 使用 CSS 为 <iframe>（包括滚动条）定义样式。</p><hr><h3 id=html-401-与-html5之间的差异-1>HTML 4.01 与 HTML5之间的差异</h3><p>HTML5 新增了一些新的属性，同时去掉了 HTML 4.01 中的一些属性。</p><hr><h3 id=html-与-xhtml-之间的差异>HTML 与 XHTML 之间的差异</h3><p>在 XHTML 中，name 属性已被废弃，并将被去掉。请使用代替。</p><hr><h3 id=属性>属性</h3><p>New ：HTML5 中的新属性。</p><table><thead><tr><th>属性</th><th>值</th><th>描述</th></tr></thead><tbody><tr><td>(已废弃)</td><td>left right top middle bottom</td><td>HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐 <iframe>。</td></tr><tr><td></td><td>1 0</td><td>HTML5 不支持。规定是否显示 <iframe>周围的边框。</td></tr><tr><td></td><td><em>pixels</em></td><td>规定 <iframe>的高度。</td></tr><tr><td></td><td><em>URL</em></td><td>HTML5 不支持。规定一个页面，该页面包含了有关 <iframe>的较长描述。</td></tr><tr><td></td><td><em>pixels</em></td><td>HTML5 不支持。规定 <iframe>的顶部和底部的边距。</td></tr><tr><td></td><td><em>pixels</em></td><td>HTML5 不支持。规定 <iframe>的左侧和右侧的边距。</td></tr><tr><td></td><td><em>name</em></td><td>规定 <iframe>的名称。</td></tr><tr><td>New</td><td>"" allow-forms allow-same-origin allow-scripts allow-top-navigation</td><td>对 <iframe>的内容定义一系列额外的限制。</td></tr><tr><td></td><td>yes no auto</td><td>HTML5 不支持。规定是否在 <iframe>中显示滚动条。</td></tr><tr><td>New</td><td>seamless</td><td>规定 <iframe>看起来像是父文档中的一部分。</td></tr><tr><td></td><td><em>URL</em></td><td>规定在 <iframe>中显示的文档的 URL。</td></tr><tr><td>New</td><td><em>HTML_code</em></td><td>规定页面中的 HTML 内容显示在 <iframe>中。</td></tr><tr><td></td><td><em>pixels</em></td><td>规定 <iframe>的宽度。</td></tr></tbody></table><hr><h3 id=全局属性-1>全局属性</h3><iframe>标签支持 [HTML 的全局属性](https://www.w3cschool.cn/htmltags/ref-standardattributes.html "HTML 的全局属性") 。<hr><h3 id=事件属性-1>事件属性</h3><iframe>标签支持 [HTML 的事件属性](https://www.w3cschool.cn/htmltags/ref-eventattributes.html "HTML 的事件属性") 。<hr><h3 id=相关文章>相关文章</h3><p>HTML 教程：</p><p>HTML DOM 参考手册：</p><h2 id=html5--标签-2>HTML5 <input> 标签</h2><h3 id=实例-2>实例</h3><p>一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮：</p><div class="code-block code-line-numbers open" style="counter-reset:code-block 0"><div class="code-header language-bash"><span class=code-title><i class="arrow fas fa-chevron-right fa-fw" aria-hidden=true></i></span> <span class=ellipses><i class="fas fa-ellipsis-h fa-fw" aria-hidden=true></i></span> <span class=copy title=复制到剪贴板><i class="far fa-copy fa-fw" aria-hidden=true></i></span></div><pre tabindex=0><code><form action="demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="提交"> </form> </code></pre></div><p></p><p>(本页底部可以查看更多实例)</p><hr><h3 id=浏览器支持-2>浏览器支持</h3><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/11df365e53a36e271716ddcfb51fd04a.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/11df365e53a36e271716ddcfb51fd04a.gif, https://i-blog.csdnimg.cn/img_convert/11df365e53a36e271716ddcfb51fd04a.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/11df365e53a36e271716ddcfb51fd04a.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/11df365e53a36e271716ddcfb51fd04a.gif title="Internet Explorer"></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/3d9a7e3dda5796be38eab463900f584b.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/3d9a7e3dda5796be38eab463900f584b.gif, https://i-blog.csdnimg.cn/img_convert/3d9a7e3dda5796be38eab463900f584b.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/3d9a7e3dda5796be38eab463900f584b.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/3d9a7e3dda5796be38eab463900f584b.gif title=Firefox></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/a50b7600525df0cf6bb3a48676daa9dd.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/a50b7600525df0cf6bb3a48676daa9dd.gif, https://i-blog.csdnimg.cn/img_convert/a50b7600525df0cf6bb3a48676daa9dd.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/a50b7600525df0cf6bb3a48676daa9dd.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/a50b7600525df0cf6bb3a48676daa9dd.gif title=Opera></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/bb52c5e746efe27000dac72151e1cbf8.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/bb52c5e746efe27000dac72151e1cbf8.gif, https://i-blog.csdnimg.cn/img_convert/bb52c5e746efe27000dac72151e1cbf8.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/bb52c5e746efe27000dac72151e1cbf8.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/bb52c5e746efe27000dac72151e1cbf8.gif title="Google Chrome"></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/cf4f2b843eb86827c3f2a4a073dc6b82.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/cf4f2b843eb86827c3f2a4a073dc6b82.gif, https://i-blog.csdnimg.cn/img_convert/cf4f2b843eb86827c3f2a4a073dc6b82.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/cf4f2b843eb86827c3f2a4a073dc6b82.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/cf4f2b843eb86827c3f2a4a073dc6b82.gif title=Safari></p><p>目前大多数浏览器支持 <input>标签。</p><hr><h3 id=标签定义及使用说明-2>标签定义及使用说明</h3><p><input> 标签规定了用户可以在其中输入数据的输入字段。</p><p><input> 元素在中使用，用来声明允许用户输入数据的 input 控件。</p><p>输入字段可通过多种方式改变，取决于 type 属性。</p><hr><h3 id=提示和注释-1>提示和注释</h3><p><strong>注意:</strong> <input> 元素是空的,它只包含标签属性。</p><p><strong>提示:</strong> 你可以使用元素来定义 <input> 元素的标注。</p><hr><h3 id=html-401-与-html5之间的差异-2>HTML 4.01 与 HTML5之间的差异</h3><p>在 HTML 4.01 中, “align” 数据已经不再使用。HTML5 中不支持该属性。可以使用CSS来定义 <input> 元素的对齐方式。</p><p>在 HTML5中, <input> 添加了几个属性，并且添加了对应的值。</p><hr><h3 id=html-与-xhtml-之间的差异-1>HTML 与 XHTML 之间的差异</h3><p>在 HTML 中，<input> 标签没有结束标签。</p><p>在 XHTML 中，<input> 标签必须被正确地关闭。</p><hr><h3 id=属性-1>属性</h3><p>New : HTML5新标签。</p><table><thead><tr><th>属性</th><th>值</th><th>描述</th></tr></thead><tbody><tr><td></td><td>audio/*video/<em>image/</em> <em>MIME_type</em></td><td>规定通过文件上传来提交的文件的类型。(只针对type=“file”)</td></tr><tr><td></td><td>leftrighttopmiddlebottom</td><td>HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type=“image”)</td></tr><tr><td></td><td><em>text</em></td><td>定义图像输入的替代文本。 (只针对type=“image”)</td></tr><tr><td>New</td><td>onoff</td><td>autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。</td></tr><tr><td>New</td><td>autofocus</td><td>属性规定当页面加载时 <input> 元素应该自动获得焦点。</td></tr><tr><td></td><td>checked</td><td>checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type=“checkbox” 或者 type=“radio”)</td></tr><tr><td></td><td>disabled</td><td>disabled 属性规定应该禁用的 <input> 元素。</td></tr><tr><td>New</td><td><em>form_id</em></td><td>form 属性规定 <input> 元素所属的一个或多个表单。</td></tr><tr><td>New</td><td><em>URL</em></td><td>属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=“submit” 和 type=“image”)</td></tr><tr><td>New</td><td>application/x-www-form-urlencodedmultipart/form-datatext/plain</td><td>属性规定当表单数据提交到服务器时如何编码(只适合 type=“submit” 和 type=“image”)。</td></tr><tr><td>New</td><td>getpost</td><td>定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=“submit” 和 type=“image”)</td></tr><tr><td>New</td><td>formnovalidate</td><td>formnovalidate 属性覆盖<form>元素的 novalidate 属性。</td></tr><tr><td>New</td><td>_blank_self_parent_top <em>framename</em></td><td>规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=“submit” 和 type=“image”)</td></tr><tr><td>New</td><td><em>pixels</em></td><td>规定 <input>元素的高度。(只针对type=“image”)</td></tr><tr><td>New</td><td><em>datalist_id</em></td><td>属性引用 <datalist>元素，其中包含 <input> 元素的预定义选项。</td></tr><tr><td>New</td><td><em>numberdate</em></td><td>属性规定 <input> 元素的最大值。</td></tr><tr><td></td><td><em>number</em></td><td>属性规定 <input> 元素中允许的最大字符数。</td></tr><tr><td>New</td><td><em>numberdate</em></td><td>属性规定 <input>元素的最小值。</td></tr><tr><td>New</td><td>multiple</td><td>属性规定允许用户输入到 <input> 元素的多个值。</td></tr><tr><td></td><td><em>text</em></td><td>name 属性规定 <input> 元素的名称。</td></tr><tr><td>New</td><td><em>regexp</em></td><td>pattern 属性规定用于验证 <input> 元素的值的正则表达式。</td></tr><tr><td>New</td><td><em>text</em></td><td>placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。</td></tr><tr><td></td><td>readonly</td><td>readonly 属性规定输入字段是只读的。</td></tr><tr><td>New</td><td>required</td><td>属性规定必需在提交表单之前填写输入字段。</td></tr><tr><td></td><td><em>number</em></td><td>size 属性规定以字符数计的 <input> 元素的可见宽度。</td></tr><tr><td></td><td><em>URL</em></td><td>src 属性规定显示为提交按钮的图像的 URL。 (只针对type=“image”)</td></tr><tr><td>New</td><td><em>number</em></td><td>step 属性规定 <input> 元素的合法数字间隔。</td></tr><tr><td></td><td>button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week</td><td>type 属性规定要显示的 <input> 元素的类型。</td></tr><tr><td></td><td><em>text</em></td><td>指定 <input> 元素 value 的值。</td></tr><tr><td>New</td><td><em>pixels</em></td><td>width 属性规定 <input> 元素的宽度。 (只针对type=“image”)</td></tr></tbody></table><hr><h3 id=全局属性-2>全局属性</h3><p><input> 标签支持全局属性，查看完整属性表。</p><hr><h3 id=事件属性-2>事件属性</h3><p><input> 标签支持所有。</p><hr><h3 id=相关阅读>相关阅读</h3><p>HTML DOM参考手册：</p><h2 id=html5--标签-3>HTML5 <img> 标签</h2><h3 id=实例-3>实例</h3><p>HTML5 <img>标签用于向网页中添加相关图片。</p><p>如何插入图像：</p><div class="code-block code-line-numbers open" style="counter-reset:code-block 0"><div class="code-header language-bash"><span class=code-title><i class="arrow fas fa-chevron-right fa-fw" aria-hidden=true></i></span> <span class=ellipses><i class="fas fa-ellipsis-h fa-fw" aria-hidden=true></i></span> <span class=copy title=复制到剪贴板><i class="far fa-copy fa-fw" aria-hidden=true></i></span></div><pre tabindex=0><code><img src="smiley-2.gif" alt="Smiley face" width="42" height="42"></code></pre></div><p></p><p>（更多实例见页面底部）</p><hr><h3 id=浏览器支持-3>浏览器支持</h3><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/3d616b05717d026e7147a36a8fa45e01.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/3d616b05717d026e7147a36a8fa45e01.gif, https://i-blog.csdnimg.cn/img_convert/3d616b05717d026e7147a36a8fa45e01.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/3d616b05717d026e7147a36a8fa45e01.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/3d616b05717d026e7147a36a8fa45e01.gif title="Internet Explorer"></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/fea5671f660d14c92c4e9c853a1f5755.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/fea5671f660d14c92c4e9c853a1f5755.gif, https://i-blog.csdnimg.cn/img_convert/fea5671f660d14c92c4e9c853a1f5755.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/fea5671f660d14c92c4e9c853a1f5755.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/fea5671f660d14c92c4e9c853a1f5755.gif title=Firefox></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/eee109a121722fc3b6572f99f3d30f73.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/eee109a121722fc3b6572f99f3d30f73.gif, https://i-blog.csdnimg.cn/img_convert/eee109a121722fc3b6572f99f3d30f73.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/eee109a121722fc3b6572f99f3d30f73.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/eee109a121722fc3b6572f99f3d30f73.gif title=Opera></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/9fc1df36ece2758f8a7be42cb4f10785.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/9fc1df36ece2758f8a7be42cb4f10785.gif, https://i-blog.csdnimg.cn/img_convert/9fc1df36ece2758f8a7be42cb4f10785.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/9fc1df36ece2758f8a7be42cb4f10785.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/9fc1df36ece2758f8a7be42cb4f10785.gif title="Google Chrome"></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/d77117b344a455c3610bade393a9108f.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/d77117b344a455c3610bade393a9108f.gif, https://i-blog.csdnimg.cn/img_convert/d77117b344a455c3610bade393a9108f.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/d77117b344a455c3610bade393a9108f.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/d77117b344a455c3610bade393a9108f.gif title=Safari></p><p>所有主流浏览器都支持 <img> 标签。</p><hr><h3 id=标签定义及使用说明-3>标签定义及使用说明</h3><p><img> 标签定义 HTML 页面中的图像。</p><p><img> 标签有两个必需的属性：src 和 alt。</p><p><strong>注释：</strong> 从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。</p><p><strong>提示：</strong> 通过在 <a>标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。</p><hr><h3 id=html-401-与-html5之间的差异-3>HTML 4.01 与 HTML5之间的差异</h3><p>HTML5 中不支持以下属性：align、border、hspace、longdesc、vspace。</p><p>在 HTML 4.01 中，以下属性：align、border、hspace、vspace 已废弃。</p><hr><h3 id=html-与-xhtml-之间的差异-2>HTML 与 XHTML 之间的差异</h3><p>在 HTML 中，<img> 标签没有结束标签。</p><p>在 XHTML 中，<img> 标签必须被正确地关闭。</p><hr><h3 id=属性-2>属性</h3><p>New ：HTML5 中的新属性。</p><table><thead><tr><th>属性</th><th>值</th><th>描述</th></tr></thead><tbody><tr><td>(已废弃)</td><td>top bottom middle left right</td><td>HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的文本来排列图像。</td></tr><tr><td></td><td><em>text</em></td><td>规定图像的替代文本。</td></tr><tr><td>(已废弃)</td><td><em>pixels</em></td><td>HTML5 不支持。HTML 4.01 已废弃。规定图像周围的边框。</td></tr><tr><td>crossoriginNew</td><td>anonymous use-credentials</td><td>设置图像的跨域属性</td></tr><tr><td></td><td><em>pixels</em></td><td>规定图像的高度。</td></tr><tr><td>(已废弃)</td><td><em>pixels</em></td><td>HTML5 不支持。HTML 4.01 已废弃。规定图像左侧和右侧的空白。</td></tr><tr><td></td><td>ismap</td><td>将图像规定为服务器端图像映射。</td></tr><tr><td>(已废弃)</td><td><em>URL</em></td><td>HTML5 不支持。HTML 4.01 已废弃。指向包含长的图像描述文档的 URL。</td></tr><tr><td></td><td><em>URL</em></td><td>规定显示图像的 URL。</td></tr><tr><td></td><td><em>#mapname</em></td><td>将图像定义为客户器端图像映射。</td></tr><tr><td>(已废弃)</td><td><em>pixels</em></td><td>HTML5 不支持。HTML 4.01 已废弃。规定图像顶部和底部的空白。</td></tr><tr><td></td><td><em>pixels</em></td><td>规定图像的宽度。</td></tr></tbody></table><hr><h3 id=全局属性-3>全局属性</h3><p><img> 标签支持。</p><hr><h3 id=事件属性-3>事件属性</h3><p><img> 标签支持。</p><hr><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/a79c8aac3cf1e47e650f6847656b916c.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/a79c8aac3cf1e47e650f6847656b916c.gif, https://i-blog.csdnimg.cn/img_convert/a79c8aac3cf1e47e650f6847656b916c.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/a79c8aac3cf1e47e650f6847656b916c.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/a79c8aac3cf1e47e650f6847656b916c.gif title=Examples></p><h3 id=尝试一下---实例>尝试一下 - 实例</h3><p></p><p>本例演示如何将其他文件夹或服务器的图片显示到网页中。</p><p></p><p>本例演示如何将图像作为一个链接使用。</p><p></p><p>本例演示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。</p><h3 id=支持的图像格式>支持的图像格式</h3><p>HTML 标准并没有给出必须支持的图像格式的列表，因此每个用户代理支持一组不同的格式。 Gecko 支持：</p><div class="code-block code-line-numbers open" style="counter-reset:code-block 0"><div class="code-header language-bash"><span class=code-title><i class="arrow fas fa-chevron-right fa-fw" aria-hidden=true></i></span> <span class=ellipses><i class="fas fa-ellipsis-h fa-fw" aria-hidden=true></i></span> <span class=copy title=复制到剪贴板><i class="far fa-copy fa-fw" aria-hidden=true></i></span></div><pre tabindex=0><code>JPEG GIF PNG APNG SVG BMP BMP ICO PNG ICO</code></pre></div><h3 id=与css的交互>与 CSS 的交互</h3><p>关于 CSS，<img> 是一个替换元素。它没有基线，这意味着当在一个行内格式的上下文中使用 vertical-align: baseline 时，图像的底部将会与容器的基线对齐。</p><hr><h3 id=相关文章-1>相关文章</h3><p>HTML 教程：</p><p>HTML DOM 参考手册：</p><h2 id=html5--标签-4>HTML5 <ins>标签</h2><h3 id=实例-4>实例</h3><p>一段带有已删除部分和新插入部分的文本：</p><div class="code-block code-line-numbers open" style="counter-reset:code-block 0"><div class="code-header language-bash"><span class=code-title><i class="arrow fas fa-chevron-right fa-fw" aria-hidden=true></i></span> <span class=ellipses><i class="fas fa-ellipsis-h fa-fw" aria-hidden=true></i></span> <span class=copy title=复制到剪贴板><i class="far fa-copy fa-fw" aria-hidden=true></i></span></div><pre tabindex=0><code><p>My favorite color is <del>blue</del> <ins>red</ins>!</p> </code></pre></div><p></p><hr><h3 id=浏览器支持-4>浏览器支持</h3><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/69cd7767663adbe63cb1e19edb16a465.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/69cd7767663adbe63cb1e19edb16a465.gif, https://i-blog.csdnimg.cn/img_convert/69cd7767663adbe63cb1e19edb16a465.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/69cd7767663adbe63cb1e19edb16a465.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/69cd7767663adbe63cb1e19edb16a465.gif title="Internet Explorer"></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/fcec4142c32a44f57e19343044e4fa54.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/fcec4142c32a44f57e19343044e4fa54.gif, https://i-blog.csdnimg.cn/img_convert/fcec4142c32a44f57e19343044e4fa54.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/fcec4142c32a44f57e19343044e4fa54.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/fcec4142c32a44f57e19343044e4fa54.gif title=Firefox></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/1e42408dfc94da2880af7d055a0c77c0.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/1e42408dfc94da2880af7d055a0c77c0.gif, https://i-blog.csdnimg.cn/img_convert/1e42408dfc94da2880af7d055a0c77c0.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/1e42408dfc94da2880af7d055a0c77c0.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/1e42408dfc94da2880af7d055a0c77c0.gif title=Opera></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/54d67c0f5bdc18d45083f50128840f6c.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/54d67c0f5bdc18d45083f50128840f6c.gif, https://i-blog.csdnimg.cn/img_convert/54d67c0f5bdc18d45083f50128840f6c.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/54d67c0f5bdc18d45083f50128840f6c.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/54d67c0f5bdc18d45083f50128840f6c.gif title="Google Chrome"></p><p><img class=lazyload src=/TechBlog/svg/loading.min.svg data-src=https://i-blog.csdnimg.cn/img_convert/6ccf45fa78b608601b05d0b8aab1d66e.gif data-srcset="https://i-blog.csdnimg.cn/img_convert/6ccf45fa78b608601b05d0b8aab1d66e.gif, https://i-blog.csdnimg.cn/img_convert/6ccf45fa78b608601b05d0b8aab1d66e.gif 1.5x, https://i-blog.csdnimg.cn/img_convert/6ccf45fa78b608601b05d0b8aab1d66e.gif 2x" data-sizes=auto alt=https://i-blog.csdnimg.cn/img_convert/6ccf45fa78b608601b05d0b8aab1d66e.gif title=Safari></p><p>所有主流浏览器都支持 <ins>标签。</p><hr><h3 id=标签定义及使用说明-4>标签定义及使用说明</h3><p><ins>标签定义已经被插入文档中的文本。</p><hr><h3 id=提示和注释-2>提示和注释</h3><p><strong>提示：</strong> 您也可以看看标记已删除文本的标签。</p><p><strong>提示：</strong> <del>和 <ins>一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。</p><hr><h3 id=html-401-与-html5之间的差异-4>HTML 4.01 与 HTML5之间的差异</h3><p>无。</p><hr><h3 id=属性-3>属性</h3><table><thead><tr><th>属性</th><th>值</th><th>描述</th></tr></thead><tbody><tr><td></td><td><em>URL</em></td><td>规定一个文档的 URL，该文档解释了文本被插入的原因。</td></tr><tr><td></td><td><em>YYYY-MM-DDThh:mm:ssTZD</em></td><td>规定文本被插入的日期和时间。</td></tr></tbody></table><hr><h3 id=全局属性-4>全局属性</h3><p><ins>标签支持。</p><hr><h3 id=事件属性-4>事件属性</h3><p><ins>标签支持。</p></div><div class=post-footer id=post-footer><div class=post-info><div class=post-info-line><div class=post-info-mod><span>更新于 2025-03-11</span></div></div><div class=post-info-line><div class=post-info-md></div><div class=post-info-share><span><a href=javascript:void(0); title="分享到 X" data-sharer=x data-url=https://linjonh.github.io/TechBlog/2025-03-11-146190457/ data-title=HTML5教程之标签7 data-hashtags=前端,Html,Html><i class="fab fa-x-twitter fa-fw" aria-hidden=true></i></a><a href=javascript:void(0); title="分享到 Facebook" data-sharer=facebook data-url=https://linjonh.github.io/TechBlog/2025-03-11-146190457/ data-hashtag=前端><i class="fab fa-facebook-square fa-fw" aria-hidden=true></i></a><a href=javascript:void(0); title="分享到 Hacker News" data-sharer=hackernews data-url=https://linjonh.github.io/TechBlog/2025-03-11-146190457/ data-title=HTML5教程之标签7><i class="fab fa-hacker-news fa-fw" aria-hidden=true></i></a><a href=javascript:void(0); title="分享到 Line" data-sharer=line data-url=https://linjonh.github.io/TechBlog/2025-03-11-146190457/ data-title=HTML5教程之标签7><i data-svg-src=https://cdn.jsdelivr.net/npm/simple-icons@14.9.0/icons/line.svg aria-hidden=true></i></a><a href=javascript:void(0); title="分享到微博" data-sharer=weibo data-url=https://linjonh.github.io/TechBlog/2025-03-11-146190457/ data-title=HTML5教程之标签7 data-image="https://bing.ee123.net/img/rand?artid=146190457"><i class="fab fa-weibo fa-fw" aria-hidden=true></i></a></span></div></div></div><div class=post-info-more><section class=post-tags><i class="fas fa-tags fa-fw" aria-hidden=true></i> <a href=/TechBlog/tags/%E5%89%8D%E7%AB%AF/>前端</a>, <a href=/TechBlog/tags/html/>Html</a>, <a href=/TechBlog/tags/html/>Html</a></section><section><span><a href=javascript:void(0); onclick=window.history.back()>返回</a></span> | <span><a href=/TechBlog/>主页</a></span></section></div><div class=post-nav><a href=/TechBlog/2025-03-11-146187450/ class=prev rel=prev title=C语言复习笔记-分支循环上><i class="fas fa-angle-left fa-fw" aria-hidden=true></i>C语言复习笔记-分支循环上</a> <a href=/TechBlog/2025-03-11-146190362/ class=next rel=next title=用-KafkaRabbitMQRocketMQRedis-Nginx等组件优化>用-KafkaRabbitMQRocketMQRedis-Nginx等组件优化<i class="fas fa-angle-right fa-fw" aria-hidden=true></i></a></div></div><div id=comments><div id=giscus class=comment></div><noscript>Please enable JavaScript to view the comments powered by <a href=https://giscus.app>Giscus</a>.</noscript></div></article></div></main><footer class=footer><div class=footer-container><div class=footer-line itemscope itemtype=http://schema.org/CreativeWork><i class="far fa-copyright fa-fw" aria-hidden=true></i><span itemprop=copyrightYear>2018 - 2025</span><span class=author itemprop=copyrightHolder> <a href=/TechBlog/ target=_blank>JAY.LIN</a></span> | <span class=license><a rel="license external nofollow noopener noreffer" href=https://creativecommons.org/licenses/by-nc/4.0/ target=_blank>CC BY-NC 4.0</a></span></div></div></footer></div><div id=fixed-buttons><a href=# id=back-to-top class=fixed-button title=回到顶部><i class="fas fa-arrow-up fa-fw" aria-hidden=true></i></a></div><div id=fixed-buttons-hidden><a href=# id=view-comments class=fixed-button title=查看评论><i class="fas fa-comment fa-fw" aria-hidden=true></i></a></div><script src=https://cdn.jsdelivr.net/npm/autocomplete.js@0.38.1/dist/autocomplete.min.js></script><script src=https://cdn.jsdelivr.net/npm/algoliasearch@5.20.2/dist/lite/builds/browser.umd.min.js></script><script src=https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js></script><script src=https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js></script><script src=https://cdn.jsdelivr.net/npm/sharer.js@0.5.2/sharer.min.js></script><script>window.config={comment:{giscus:{category:"Announcements",categoryId:"DIC_kwDON5YUqc4Cm9Ln",darkTheme:"dark",emitMetadata:"0",inputPosition:"bottom",lang:"zh-CN",lazyLoading:!1,lightTheme:"light",mapping:"pathname",reactionsEnabled:"1",repo:"linjonh/blog_comment_repo",repoId:"R_kgDON5YUqQ"}},search:{algoliaAppID:"LWD9RXY9DT",algoliaIndex:"prod_techblog_index",algoliaSearchKey:"496be2c0d0b37c0789b0c2ffc9602471",highlightTag:"em",maxResultLength:10,noResultsFound:"没有找到结果",snippetLength:50,type:"algolia"}}</script><script src=/TechBlog/js/theme.min.js></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-75ZRFNZ5Y8")</script><script src="https://www.googletagmanager.com/gtag/js?id=G-75ZRFNZ5Y8" async></script><aside id=notification class=toast role=alert aria-live=assertive aria-atomic=true data-bs-animation=true data-bs-autohide=false><div class=toast-header><button type=button class="btn-close ms-auto" data-bs-dismiss=toast aria-label=Close></button></div><div class="toast-body text-center pt-0"><p class="px-2 mb-3">发现新版本的内容。</p><button type=button class="btn btn-primary" aria-label=Update> 更新</button></div></aside></body></html>

目录

HTML5教程之标签7