一文速通HTML：常见的 HTML 元素及其属性详解-礼包中心-红星游戏活动中心-最新网游动态礼包放送

常见的 HTML 元素及其属性详解

在 Web 开发中，HTML（HyperText Markup Language）是构建网页的基础语言。了解常见的 HTML 元素及其属性，对于创建结构良好、语义清晰、可访问性高的网页至关重要。本文将详细介绍常见的 HTML 元素及其属性。

一、基础文本元素

1. 元素

定义

元素是所有 HTML 文档的根元素，包含了整个页面的内容。

示例

常见属性

lang：指定文档的语言。

2. 元素

定义

元素包含了关于文档的信息（元数据），如标题、样式表、脚本等。

示例

网页标题

常见属性

profile（已废弃）：指定元数据的 URL。

3. 元素</p> <p>定义</p> <p><title> 元素用于定义文档的标题，显示在浏览器的标签栏或标题栏中。</p> <p>示例</p> <p><title>我的网页

注意事项

每个文档只能有一个元素，且必须是 <head> 的子元素。</p> <p>4. <body> 元素</p> <p>定义</p> <p><body> 元素包含了文档的可见内容，即用户在浏览器中看到的部分。</p> <p>示例</p> <p><body></p> <p></p> <p></body></p> <p>常见属性</p> <p>bgcolor（已废弃）：设置背景颜色。background（已废弃）：设置背景图像。</p> <p>二、段落和文本格式化元素</p> <p>1. <p> 段落元素</p> <p>定义</p> <p><p> 元素表示一个段落，用于组织和显示文本内容。</p> <p>示例</p> <p><p>这是一个段落。</p></p> <p>常见属性</p> <p>align（已废弃）：设置文本对齐方式（left、right、center、justify）。</p> <p>2. <h1> - <h6> 标题元素</p> <p>定义</p> <p><h1> 到 <h6> 表示不同级别的标题，<h1> 为最高级别，<h6> 为最低级别。</p> <p>示例</p> <p><h1>一级标题</h1></p> <p><h2>二级标题</h2></p> <p>常见属性</p> <p>align（已废弃）：设置标题的对齐方式。</p> <p>3. <strong> 和 <b> 粗体文本</p> <p>定义</p> <p><strong> 表示语义上的重要性，内容会加粗显示。<b> 仅用于视觉上的加粗，无语义强调。</p> <p>示例</p> <p><p>这是一个 <strong>重要</strong> 的提示。</p></p> <p><p>这是一个 <b>加粗</b> 的文本。</p></p> <p>4. <em> 和 <i> 斜体文本</p> <p>定义</p> <p><em> 表示强调，内容会以斜体显示。<i> 仅用于视觉上的斜体，无语义强调。</p> <p>示例</p> <p><p>请 <em>注意</em> 下面的事项。</p></p> <p><p>这是一个 <i>斜体</i> 文本。</p></p> <p>5. <u> 下划线文本</p> <p>定义</p> <p><u> 元素用于表示下划线文本，一般用于表示非文本注释，如拼写错误。</p> <p>示例</p> <p><p>这是一个 <u>下划线</u> 文本。</p></p> <p>6. <del> 和 <ins> 删除和插入文本</p> <p>定义</p> <p><del> 表示被删除的文本，通常显示为删除线。<ins> 表示插入的文本，通常显示为下划线。</p> <p>示例</p> <p><p>这是一个 <del>旧的</del> 文本。</p></p> <p><p>这是一个 <ins>新的</ins> 文本。</p></p> <p>三、列表元素</p> <p>1. 无序列表 <ul> 和 <li></p> <p>定义</p> <p><ul> 表示一个无序列表，列表项使用 <li> 定义。</p> <p>示例</p> <p><ul></p> <p><li>项目一</li></p> <p><li>项目二</li></p> <p><li>项目三</li></p> <p></ul></p> <p>常见属性</p> <p>type（已废弃）：设置列表项的项目符号类型。</p> <p>2. 有序列表 <ol> 和 <li></p> <p>定义</p> <p><ol> 表示一个有序列表，列表项使用 <li> 定义。</p> <p>示例</p> <p><ol></p> <p><li>第一步</li></p> <p><li>第二步</li></p> <p><li>第三步</li></p> <p></ol></p> <p>常见属性</p> <p>type：设置列表项的编号类型（1、a、A、i、I）。start：设置列表的起始编号。reversed：布尔属性，表示列表逆序。</p> <p>3. 定义列表 <dl>、<dt>、<dd></p> <p>定义</p> <p><dl>：定义列表容器。<dt>：定义术语名称。<dd>：定义术语描述。</p> <p>示例</p> <p><dl></p> <p><dt>HTML</dt></p> <p><dd>超文本标记语言</dd></p> <p><dt>CSS</dt></p> <p><dd>层叠样式表</dd></p> <p></dl></p> <p>四、链接和图像</p> <p>1. 超链接 <a></p> <p>定义</p> <p><a> 元素用于创建超链接，可以链接到其他页面、文件、电子邮件地址等。</p> <p>示例</p> <p><a href="https://www.example.com">访问示例网站</a></p> <p>常见属性</p> <p>href：指定链接目标的 URL。target：指定链接打开的方式（_self、_blank、_parent、_top）。title：提供链接的额外信息，当鼠标悬停时显示。rel：定义当前文档与链接目标之间的关系。</p> <p>2. 图像 <img></p> <p>定义</p> <p><img> 元素用于在页面中嵌入图像。</p> <p>示例</p> <p><img src="image.jpg" alt="示例图片"></p> <p>常见属性</p> <p>src：指定图像文件的路径或 URL。alt：为图像提供替代文本，用于图像无法加载或屏幕阅读器。width 和 height：设置图像的宽度和高度（可使用像素或百分比）。title：提供图像的额外信息。</p> <p>五、表格元素</p> <p>1. 表格 <table></p> <p>定义</p> <p><table> 元素用于创建表格结构。</p> <p>示例</p> <p><table></p> <p></p> <p></table></p> <p>2. 表格行 <tr></p> <p>定义</p> <p><tr> 元素表示表格中的一行。</p> <p>示例</p> <p><tr></p> <p></p> <p></tr></p> <p>3. 表格头 <th> 和表格数据 <td></p> <p>定义</p> <p><th>：定义表格的表头单元格，通常以粗体显示，居中对齐。<td>：定义表格的标准单元格。</p> <p>示例</p> <p><table></p> <p><tr></p> <p><th>姓名</th></p> <p><th>年龄</th></p> <p></tr></p> <p><tr></p> <p><td>张三</td></p> <p><td>28</td></p> <p></tr></p> <p></table></p> <p>常见属性</p> <p>colspan：设置单元格横向跨越的列数。rowspan：设置单元格纵向跨越的行数.headers：关联单元格与表头.</p> <p>4. 表格标题 <caption></p> <p>定义</p> <p><caption> 元素用于为表格提供标题，通常显示在表格的顶部。</p> <p>示例</p> <p><table></p> <p><caption>用户信息表</caption></p> <p></p> <p></table></p> <p>六、表单元素</p> <p>1. 表单 <form></p> <p>定义</p> <p><form> 元素用于创建交互式表单，允许用户提交数据。</p> <p>示例</p> <p><form action="/submit" method="post"></p> <p></p> <p></form></p> <p>常见属性</p> <p>action：指定表单提交的目标 URL。method：指定 HTTP 方法（get 或 post）。enctype：指定表单数据的编码类型。</p> <p>2. 输入 <input></p> <p>定义</p> <p><input> 元素用于创建多种类型的表单控件，如文本框、复选框、单选按钮等。</p> <p>示例</p> <p><input type="text" name="username" placeholder="请输入用户名"></p> <p>常见属性</p> <p>type：指定输入控件的类型（text、password、email、number、checkbox、radio、submit 等）。name：指定控件的名称，用于表单数据的键。value：指定控件的默认值。placeholder：提供提示信息。required：布尔属性，指定控件为必填项。disabled：布尔属性，指定控件为禁用状态。readonly：布尔属性，指定控件为只读。</p> <p>3. 标签 <label></p> <p>定义</p> <p><label> 元素用于为表单控件定义标注，提高可访问性。</p> <p>示例</p> <p><label for="email">邮箱：</label></p> <p><input type="email" id="email" name="email"></p> <p>常见属性</p> <p>for：指定关联的控件的 id。</p> <p>4. 选择列表 <select> 和 <option></p> <p>定义</p> <p><select>：定义一个下拉列表。<option>：定义下拉列表中的选项。</p> <p>示例</p> <p><select name="country"></p> <p><option value="cn">中国</option></p> <p><option value="us">美国</option></p> <p><option value="uk">英国</option></p> <p></select></p> <p>常见属性</p> <p>multiple（<select>）：布尔属性，允许多选。selected（<option>）：布尔属性，指定选项为默认选中。disabled：布尔属性，指定控件或选项为禁用状态。</p> <p>5. 文本区域 <textarea></p> <p>定义</p> <p><textarea> 元素用于多行文本输入。</p> <p>示例</p> <p><textarea name="message" rows="5" cols="30" placeholder="请输入留言"></textarea></p> <p>常见属性</p> <p>rows：指定可见的行数。cols：指定可见的列数。placeholder：提供提示信息。maxlength：限制输入的最大字符数。</p> <p>6. 按钮 <button></p> <p>定义</p> <p><button> 元素用于创建按钮。</p> <p>示例</p> <p><button type="submit">提交</button></p> <p>常见属性</p> <p>type：指定按钮类型（button、submit、reset）。disabled：布尔属性，指定按钮为禁用状态。</p> <p>七、多媒体元素</p> <p>1. 图像 <img></p> <p>（已在第四部分介绍，此处略）</p> <p>2. 音频 <audio></p> <p>定义</p> <p><audio> 元素用于在网页中嵌入音频内容。</p> <p>示例</p> <p><audio controls></p> <p><source src="audio.mp3" type="audio/mpeg"></p> <p>您的浏览器不支持音频播放。</p> <p></audio></p> <p>常见属性</p> <p>src：指定音频文件的 URL。controls：布尔属性，显示音频控件。autoplay：布尔属性，音频自动播放。loop：布尔属性，音频循环播放。muted：布尔属性，音频静音。</p> <p>3. 视频 <video></p> <p>定义</p> <p><video> 元素用于在网页中嵌入视频内容。</p> <p>示例</p> <p><video width="320" height="240" controls></p> <p><source src="video.mp4" type="video/mp4"></p> <p>您的浏览器不支持视频播放。</p> <p></video></p> <p>常见属性</p> <p>src：指定视频文件的 URL。controls：布尔属性，显示视频控件。autoplay：布尔属性，视频自动播放。loop：布尔属性，视频循环播放。muted：布尔属性，视频静音。poster：指定视频未播放时显示的图片。</p> <p>八、语义化元素</p> <p>1. <header> 页眉</p> <p>定义</p> <p><header> 元素表示文档或节的页眉，通常包含标题、导航链接、Logo 等。</p> <p>示例</p> <p><header></p> <p><h1>网站标题</h1></p> <p><nav></p> <p></p> <p></nav></p> <p></header></p> <p>2. <nav> 导航</p> <p>定义</p> <p><nav> 元素用于定义导航链接的区域。</p> <p>示例</p> <p><nav></p> <p><ul></p> <p><li><a href="/">首页</a></li></p> <p><li><a href="/about">关于我们</a></li></p> <p><li><a href="/contact">联系我们</a></li></p> <p></ul></p> <p></nav></p> <p>3. <main> 主要内容</p> <p>定义</p> <p><main> 元素表示文档的主要内容部分，应该是文档中唯一的。</p> <p>示例</p> <p><main></p> <p></p> <p></main></p> <p>4. <section> 区块</p> <p>定义</p> <p><section> 元素表示文档中的一个独立区段，通常带有标题。</p> <p>示例</p> <p><section></p> <p><h2>我们的服务</h2></p> <p></p> <p></section></p> <p>5. <article> 文章</p> <p>定义</p> <p><article> 元素表示一篇独立的内容，如博客文章、新闻报道。</p> <p>示例</p> <p><article></p> <p><h2>文章标题</h2></p> <p><p>文章内容...</p></p> <p></article></p> <p>6. <aside> 侧边栏</p> <p>定义</p> <p><aside> 元素表示与主要内容相关的辅助内容，如侧边栏、广告。</p> <p>示例</p> <p><aside></p> <p><h3>热门文章</h3></p> <p></p> <p></aside></p> <p>7. <footer> 页脚</p> <p>定义</p> <p><footer> 元素表示文档或节的页脚，通常包含版权信息、联系信息等。</p> <p>示例</p> <p><footer></p> <p><p>© 2023 公司名称</p></p> <p></footer></p> <p>九、元数据元素</p> <p>1. 元数据 <meta></p> <p>定义</p> <p><meta> 元素用于提供关于 HTML 文档的元数据，不会显示在页面上。</p> <p>示例</p> <p><meta charset="UTF-8"></p> <p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p> <p>常见属性</p> <p>charset：指定文档的字符编码。name：指定元数据名称，如 description、keywords、author。content：指定元数据的内容。http-equiv：用于设置 HTTP 头信息。</p> <p>2. 外部资源 <link></p> <p>定义</p> <p><link> 元素用于在文档与外部资源之间建立链接，如样式表、图标。</p> <p>示例</p> <p><link rel="stylesheet" href="styles.css"></p> <p><link rel="icon" href="favicon.ico" type="image/x-icon"></p> <p>常见属性</p> <p>rel：指定链接关系类型，如 stylesheet、icon。href：指定外部资源的 URL。type：指定资源的 MIME 类型。</p> <p>3. 脚本 <script></p> <p>定义</p> <p><script> 元素用于嵌入或引用 JavaScript 脚本。</p> <p>示例</p> <p><script src="app.js"></script></p> <p><script></p> <p>console.log('Hello, World!');</p> <p></script></p> <p>常见属性</p> <p>src：指定外部脚本文件的 URL。type：指定脚本的 MIME 类型，默认是 text/javascript。async：布尔属性，异步加载脚本。defer：布尔属性，延迟执行脚本。</p> <p>十、其他常用元素</p> <p>1. <br> 换行</p> <p>定义</p> <p><br> 元素用于在文本中插入换行符。</p> <p>示例</p> <p><p>第一行<br>第二行</p></p> <p>2. <hr> 水平线</p> <p>定义</p> <p><hr> 元素表示主题的分隔线，用于视觉上的分割。</p> <p>示例</p> <p><p>上半部分内容</p></p> <p><hr></p> <p><p>下半部分内容</p></p> <p>3. <span> 行内元素</p> <p>定义</p> <p><span> 元素是一个通用的行内容器，没有特定的语义，用于对部分文本进行分组。</p> <p>示例</p> <p><p>这是一个<span class="highlight">高亮</span>的文本。</p></p> <p>4. <div> 块级元素</p> <p>定义</p> <p><div> 元素是一个通用的块级容器，没有特定的语义，用于对内容进行分组。</p> <p>示例</p> <p><div class="container"></p> <p></p> <p></div></p> <p>十一、全局属性</p> <p>以下属性可用于所有 HTML 元素：</p> <p>id：唯一标识元素的全局属性。class：用于指定元素的一个或多个类名，便于样式和脚本的应用。style：用于直接在元素内定义 CSS 样式。title：提供元素的额外信息，当鼠标悬停时显示。data-*：用于存储页面或应用程序的私有自定义数据。</p> <p>十二、ARIA 属性（可访问性）</p> <p>为了提高网页的可访问性，可以使用 ARIA 属性来增强语义。</p> <p>role：定义元素的语义角色，如 button、navigation、main。aria-label：为元素提供可访问的名称。aria-hidden：指定元素对屏幕阅读器是否可见。</p> <p>示例：</p> <p><button aria-label="关闭窗口" aria-hidden="false">×</button></p> <p>参考资料</p> <p>MDN Web Docs - HTML 元素参考MDN Web Docs - HTML 全局属性W3C HTML 规范Web 内容无障碍指南（WCAG）</p> </p> <div class="clearfix"></div> </div> </section> </div> </div> </div> </div> </div>  <div class="clearfix"></div>  <footer class="footer-area "> <div style="position: fixed;bottom:0;left: 0;width: 100%;text-align: center;"> Copyright © 2088 红星游戏活动中心-最新网游动态礼包放送 All Rights Reserved. <div style="text-align: center;"> 友情链接 <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=gdvpk3plqch"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> </footer>  </div>  <button class="scroll-top scroll-to-target" data-target="html"> <span class="icon-down-arrow"></span> </button> <a href="#" class="trx_addons_scroll_to_top trx_addons_icon-up" title="Scroll to top"></a> <script type="text/javascript" src="/static/js/jquery.magnific-popup.min.js" id="magnific-popup-js"></script> <script type="text/javascript" src="/static/js/appear.js" id="appear-js"></script> <script type="text/javascript" src="/static/js/bootstrap.bundle.min.js" id="bootstrap-bundle-js"></script> <script type="text/javascript" src="/static/js/bootstrap-select.min.js" id="bootstrap-select-js"></script> <script type="text/javascript" src="/static/js/isotope.js" id="isotope-js"></script> <script type="text/javascript" src="/static/js/jquery.bootstrap-touchspin.js" id="jquery-bootstrap-touchspin-js"></script> <script type="text/javascript" src="/static/js/jquery.countTo.js" id="jquery-countto-js"></script> <script type="text/javascript" src="/static/js/jquery.easing.min.js" id="jquery-easing-js"></script> <script type="text/javascript" src="/static/js/jquery.enllax.min.js" id="jquery-enllax-js"></script> <script type="text/javascript" src="/static/js/jquery.fancybox.js" id="jquery-fancybox-js"></script> <script type="text/javascript" src="/static/js/jquery.mixitup.min.js" id="jquery-mixitup-js"></script> <script type="text/javascript" src="/static/js/jquery.paroller.min.js" id="jquery-paroller-js"></script> <script type="text/javascript" src="/static/js/owl.js" id="owl-js"></script> <script type="text/javascript" src="/static/js/wow.js" id="wow-js"></script> <script type="text/javascript" src="/static/js/parallax.min.js" id="parallax-js"></script> <script type="text/javascript" src="/static/js/jquery.mCustomScrollbar.concat.min.js" id="jquery-mcustomscrollbar-js"></script> <script type="text/javascript" src="/static/js/mousemoveparallax.js" id="mousemoveparallax-js"></script> <script type="text/javascript" src="/static/js/aos.js" id="aos-js"></script> <script type="text/javascript" src="/static/js/jquery.countdown.min.js" id="jquery-countdown-js"></script> <script type="text/javascript" src="/static/js/slick.js" id="slick-js"></script> <script type="text/javascript" src="/static/js/util.js" id="util-js"></script> <script type="text/javascript" src="/static/js/TweenMax.min.js" id="tweenmax-js"></script> <script type="text/javascript" src="/static/js/jquery.polyglot.language.switcher.js" id="jquery-polyglot-language-switcher-js"></script> <script type="text/javascript" src="/static/js/timePicker.js" id="timepicker-js"></script> <script type="text/javascript" src="/static/js/like.js" id="like-js"></script> <script type="text/javascript" src="/static/js/custom.js" id="main-custom-js"></script> <script type="text/javascript" src="/static/js/__scripts.js" id="trx_addons-js"></script> <script type="text/javascript" src="/static/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> </body> </html>