每天一个技术知识:“高手”的Html元素分类

发布时间：2025-03-23 20:54:28

7 阅读

0 评论

文章标签：下拉框html

大家好，我是大澈！

今天又是一起复盘Html基础的一天，兄弟们，走起。

一、按语义分类

根据元素的语义定义，HTML元素可以分为：文档结构元素、文本内容元素、多媒体元素、表单元素、表格元素。

主要是记住元素分类，元素了解即可，并记住几个典型常用的。

1、文档结构元素：用于定义页面的整体结构。

：根元素，包含整个 HTML 文档。
：包含元数据（如标题、样式表、脚本等）。
：包含页面的可见内容。
：页眉，通常包含导航或标题。
：页脚，通常包含版权信息或联系方式。
：页面的主要内容区域。
：定义文档中的独立部分。
：定义独立的内容块（如博客文章）。
：定义与主要内容相关但独立的内容（如侧边栏）。
：定义导航链接。

2、文本内容元素：用于定义文本内容的结构。

：通用文本容器，无语义。
到
：标题标签，
是最高级标题。
：段落。
：行内文本容器，无语义。
：加粗文本，表示重要性。
：斜体文本，表示强调。
：长引用。
：短引用。
：预格式化文本，保留空格和换行。
：内联代码。
3、多媒体元素：用于嵌入多媒体内容。
：嵌入图片。
4、表单元素：用于创建用户输入表单。
：定义表单。：输入字段（如文本、密码、复选框等）。：多行文本输入。<button>：按钮。<label>：表单控件的标签。<select> 和 <option>：下拉菜单。<fieldset> 和 <legend>：分组表单元素。</blockquote>5、表格元素：用于创建表格。<blockquote><table>：定义表格。<tr>：定义表格行。<td>：定义表格单元格。<th>：定义表头单元格。<thead>、<tbody>、<tfoot>：表格的分组部分。</blockquote>二、按显示行为分类根据元素在页面中的显示行为，HTML元素可以分为：块级元素、行内元素、行内块元素。主要是记住元素分类，元素了解即可，并记住几个典型常用的。1、块级元素独占一行，默认宽度为父元素的 100%。可以设置宽度、高度、内外边距。常用于构建页面布局。<blockquote><div>：通用块级容器。：段落。<h1> 到 <h6>：标题。<ul>、<ol>、<li>：列表。<header>、<footer>、<section> 等语义化标签。</blockquote>2、行内元素不独占一行，与其他行内元素共享一行。宽度和高度由内容决定，不能直接设置。常用于包裹文本或小部分内容。<blockquote>：通用行内容器。<a>：超链接。、：强调文本。<img>：图片。<input>：输入框。</blockquote>3、行内块元素结合了块级和行内元素的特性。不独占一行，但可以设置宽度、高度和内外边距。<blockquote><button>：按钮。<select>：下拉菜单。<textarea>：多行文本输入。</blockquote>三、Html5 新元素HTML5 引入了许多新元素，有必要了解一下，并每类记忆几个常用的。一般在小厂面试基础中常问，这里单独拎出来，提升基础广度。1、语义化元素用于更好地描述网页内容的结构和意义，提升代码的可读性和 SEO 优化。2、多媒体元素3、表单增强元素4、图形嵌入元素5、其它元素四、自闭合元素自闭合元素不需要闭合标签，通常以 / 结尾（尽管在 HTML5 中 / 是可选的）。一般在小厂面试基础中常问，这里单独拎出来，提升基础广度。- end -承接产品推广/软件开发/bug修复，联系和更多内容在绿色App搜@程序员大澈：专注于前后端技术知识分享，最后感谢兄弟们给个点赞、分享、推荐！</div> </article> </div> </div> </div> </div> </div> </main> <footer class="footer"> <div class="container"> </div> </footer> <script src="https://www.yolihui.com/zb_users/theme/light/lib/sticky-sidebar.min.js"></script> <script src="https://www.yolihui.com/zb_users/theme/light/script/main.js?v=1.0.6" type="module"></script> </body> </html>