HTML中的元素(elements)

HTML(HyperText Markup Language)中的元素(elements)定义了网页的结构和内容。以下是一些常见的HTML元素及其各自的作用:

文档结构元素:

  • <html>:根元素,包裹所有其他HTML元素。
  • <head>:包含文档的元数据,如标题、字符集声明、样式表链接、脚本等。
  • <title>:定义文档的标题,显示在浏览器标签页上。
  • <body>:包含文档的所有可见内容,如文本、图片、视频、游戏、可播放的音频等。

文本内容元素:

  • <h1> - <h6>:标题元素,<h1> 表示最高的标题级别,<h6> 表示最低的。
  • <p>:段落元素,用于定义文本段落。
  • <br>:换行元素,强制文本换行。
  • <hr>:水平线元素,用于创建主题分隔。
  • <em>:强调元素,通常呈现为斜体。
  • <strong>:加粗元素,通常呈现为粗体。
  • <small>:小号字体元素,用于呈现小号字体文本。
  • <mark>:标记元素,用于突出显示文本。
  • <del>:删除线元素,表示文本已被删除。
  • <ins>:下划线元素,表示文本已被插入。
  • <sub>:下标元素。
  • <sup>:上标元素。

链接和导航元素:

  • <a>:锚元素,用于创建超链接。
  • <nav>:导航元素,用于包含页面主导航链接。
  • <ul>:无序列表元素。
  • <ol>:有序列表元素。
  • <li>:列表项元素,用于<ul><ol>中。

图片和媒体元素:

  • <img>:图像元素,用于嵌入图像。
  • <video>:视频元素,用于嵌入视频内容。
  • <audio>:音频元素,用于嵌入音频内容。
  • <source>:源元素,为<video><audio>提供多种媒体源。
  • <iframe>:内联框架元素,用于嵌入另一个HTML页面。

表格元素:

  • <table>:表格元素,用于创建表格。
  • <tr>:表格行元素。
  • <th>:表格头元素,用于表头单元格。
  • <td>:表格数据元素,用于表格单元格。

表单和输入元素:

  • <form>:表单元素,用于收集用户输入。
  • <input>:输入元素,根据type属性的不同,可以是文本框、密码框、单选框、复选框等。
  • <label>:标签元素,定义输入字段的描述标签。
  • <button>:按钮元素。
  • <select>:选择元素,用于创建下拉列表。
  • <option>:选项元素,用于<select><optgroup><datalist>中定义选项。
  • <textarea>:多行文本输入元素。

分组和划分元素:

  • <div>:分区元素,用于划分页面上的区域或节。
  • <span>:跨度元素,用于对文档中的行内元素进行分组。
  • <header>:头部元素,用于包含介绍性内容或导航链接。
  • <footer>:页脚元素,用于包含页面的页脚信息。
  • <section>:节元素,用于定义文档中的一个独立部分。
  • <article>:文章元素,用于包含独立的内容。
  • <aside>:旁白元素,用于包含与页面内容关联度较低的内容。

元数据元素:

  • <meta>:元数据元素,用于提供关于HTML文档的元数据。
  • <link>:链接元素,用于链接外部样式表等资源。
    这些只是HTML中可用元素的一部分。每个元素都有其特定的语义和用途,合理使用这些元素可以创建结构良好、易于理解和访问的网页。
相关推荐
不写八个3 小时前
Vue3.0教程004:ref和reactive对比
前端·javascript·vue.js
梅羽落5 小时前
JavaScript_03 超简计算器
前端·javascript
前端 贾公子6 小时前
axios如何利用promise无痛刷新token
前端
新生派7 小时前
HTML<hgroup>标签
前端·html
timer_0178 小时前
Tailwind CSS 正式发布了 4.0 版本
前端·css
答题卡上的情书9 小时前
uniapp版本升级
前端·javascript·uni-app
枫叶丹410 小时前
【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(三)
开发语言·前端·javascript·华为·harmonyos
酷爱码10 小时前
HTML5+SVG+CSS3实现雪中点亮的圣诞树动画效果源码
前端·css3·html5
有杨既安然10 小时前
Vue.js组件开发深度指南:从零到可复用的艺术
前端·javascript·vue.js·npm
步、步、为营12 小时前
C#牵手Blazor,解锁跨平台Web应用开发新姿势
开发语言·前端·c#