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

qiyuwang 2025-03-14 20:09 6 浏览 0 评论

大家好，我是大澈！

今天又是一起复盘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> <div class="clearfix mb10"> <div class="share fr"> <div class="social-share mb20 ta-c" data-initialized="true"> <a href="#" class="social-share-icon iconfont icon-weibo"></a> <a href="#" class="social-share-icon iconfont icon-qq"></a> <a href="#" class="social-share-icon iconfont icon-wechat"></a> <a href="#" class="social-share-icon iconfont icon-qzone"></a> </div> <script src="http://www.qiyu68.com/zb_users/theme/tx_hao/script/social-share.min.js"></script> </div> <div class="info-tag"> <a href="http://www.qiyu68.com/tags-368.html" title="查看更多css第二个元素内容" rel="tag" target="_blank">css第二个元素</a> </div> </div> <div class="info-next"> <ul class="row"> <li class="col-12 col-m-24 mb10">上一篇：<a href="http://www.qiyu68.com/post/10149.html" title="快来看看:CSS3实现动画的三种方式">快来看看:CSS3实现动画的三种方式</a></li> <li class="col-12 col-m-24 ta-r mb10">下一篇：<a href="http://www.qiyu68.com/post/10151.html" title="平滑升级!一文掌握CSS过渡与动画属性，让你的网页动起来!">平滑升级!一文掌握CSS过渡与动画属性，让你的网页动起来!</a></li> </ul> </div> </div> <h2 class="tx-title">相关推荐</h2> <div class="home-news"> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10940.html" title="别再乱找了!这才是 Alist 本地安装挂载的正确打开方式" class="f-black" target="_blank">别再乱找了!这才是 Alist 本地安装挂载的正确打开方式</a></dt> <dd class="news-txt"> 一、探秘Alist的神奇世界在这个数据爆炸的时代，我们的生活里充斥着各种各样的网盘服务，百度网盘、阿里云盘、腾讯微云等等，它们成了我们存储资料的得力助手。但随着网盘数量的增多，管理这些分散在不同平... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10939.html" title="如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道!" class="f-black" target="_blank">如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道!</a></dt> <dd class="news-txt"> 前不久，苹果发布了备受期待的iPhone16系列，新机型搭载了更强大的芯片、更流畅的操作体验，还有备受热议的全新摄像系统。无论你是冲着A18仿生芯片，还是更丰富的动态岛功能，相信很多果粉早已跃跃欲试... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10938.html" title="大数据传输的定义与大数据传输解决方案的选择" class="f-black" target="_blank">大数据传输的定义与大数据传输解决方案的选择</a></dt> <dd class="news-txt"> 当我们需要处理大量的数据时，我们就要把数据从一个地方移动到另一个地方。这个过程就叫做大数据传输。它通常需要用到高速的网络连接、分散的存储系统和数据传输协议，以保证数据的快速、可靠和安全的移动。常用的大... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10937.html" title="【工具】在线传输文件工具（在线文件互传）" class="f-black" target="_blank">【工具】在线传输文件工具（在线文件互传）</a></dt> <dd class="news-txt"> 前言在线传输文件工具主要是用于在不同的设备之间，如手机、电脑、平板等快速便捷地传送文件。告别使用USB传统传输文件的方式。... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10936.html" title="如何使用 CAN-FD 在 LPC5500 上传输数据" class="f-black" target="_blank">如何使用 CAN-FD 在 LPC5500 上传输数据</a></dt> <dd class="news-txt"> 目录1引言2CAN-FD3示例演示1引言... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10935.html" title="轻松同步:将照片从三星手机传输到iPad的简便方法" class="f-black" target="_blank">轻松同步:将照片从三星手机传输到iPad的简便方法</a></dt> <dd class="news-txt"> 概括想要在新iPad上查看三星照片吗？但是，如果您不知道如何将照片从三星手机传输到iPad，则无法在iPad上查看图片。为此，本文分享了7个有用的方法，以便您可以使用它们在不同操作系统之... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10934.html" title="常见又地道的网络缩写:美剧中常说的SFW到底是个啥?" class="f-black" target="_blank">常见又地道的网络缩写:美剧中常说的SFW到底是个啥?</a></dt> <dd class="news-txt"> 在这堂课中，让我们来学习更多在数字网络世界中常用的有趣网络用语。7shifts/unsplashhttp,https“http”和“https”是万维网（www）传输文件用的协议。“http”是hy... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10933.html" title="每天学会一个计算机网络协议之FTP" class="f-black" target="_blank">每天学会一个计算机网络协议之FTP</a></dt> <dd class="news-txt"> 开始行文之前提出一个问题，相信大家在看完本文后一定可以回答当我们在网站上填写注册信息的时候，需要我们上传照片，上传的过程发生了什么？下面引入我们的主角，FTP文件传输协议FTPFileTransf... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10932.html" title="即用即走，这3款文件分享工具真香" class="f-black" target="_blank">即用即走，这3款文件分享工具真香</a></dt> <dd class="news-txt"> 打工人的日常，免不了「文件分享存储服务」的需求。我们一般会选择不同的网盘，但是大家也知道，网盘不是限速就是叫你充值。今天跟大家简单推荐3款文件分享工具，既可以免登录匿名使用，而且操作简单稳定性也不错。... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10931.html" title="安卓手机里的文件和照片与Mac互传的办法" class="f-black" target="_blank">安卓手机里的文件和照片与Mac互传的办法</a></dt> <dd class="news-txt"> 因为HandShake一段时间未更新，似乎目前不可操作。我一时间未找到更好的「传输」办法，经实践操作，向大家介绍一下「安卓手机」，包括「一加」、「索尼」，都可用此方法，来进行文件传输到Mac的... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10930.html" title="软网推荐:同一个平台选择不同的传输方法" class="f-black" target="_blank">软网推荐:同一个平台选择不同的传输方法</a></dt> <dd class="news-txt"> 平时上网的时候，我们经常要分享一些文件给其他朋友，一般通过云服务平台来实现。今天笔者给大家介绍的Worksphere传输服务，它提供了两种不同的分享方式，方便我们根据实际需要进行选择。一个链接分享所有... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10929.html" title="跨平台不限速的免费文件传输网站（跨平台不限速的免费文件传输网站是什么）" class="f-black" target="_blank">跨平台不限速的免费文件传输网站（跨平台不限速的免费文件传输网站是什么）</a></dt> <dd class="news-txt"> 大家好，欢迎来到天天惠分享，不知道各位平时都是用什么方法来进行文件跨平台传输的呢？是百度网盘?微信还是QQ?亦或是有线传输。虽然这些方法都可以达到传输的目的，但都有各自的缺陷，使用起来一言难尽。比如百... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10928.html" title="全网最全最详细的全平台文件传输方法，解决你文件传输问题(一)" class="f-black" target="_blank">全网最全最详细的全平台文件传输方法，解决你文件传输问题(一)</a></dt> <dd class="news-txt"> 前言想必现在大多数人文件传输的方法还是使用qq微信，但是qq微信的文件传输有时候真是，... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10927.html" title="文件传输工具有哪些?这3款堪称办公必备!" class="f-black" target="_blank">文件传输工具有哪些?这3款堪称办公必备!</a></dt> <dd class="news-txt"> 在不同设备间，想把文件从一台设备传输到另一台，尤其是大体积文件，更是免不了用到文件传输工具，可以说文件传输工具已成为提升效率的关键载体。面对海量文档、设计素材、会议纪要的流转需求，传统邮件附件、U盘拷... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10926.html" title="小白也能用的跨网文件交换系统!10款简单易上手的文件摆渡工具" class="f-black" target="_blank">小白也能用的跨网文件交换系统!10款简单易上手的文件摆渡工具</a></dt> <dd class="news-txt"> 跨网文件交换系统对于需要频繁在不同网络环境中进行文件共享的用户来说至关重要。以下是10款简单易上手的文件摆渡工具，适合小白用户使用，帮助他们高效地分享和传输文件。10款简单易上手的跨网文件交换工具1.... </dd> </dl> </div> <div class="pd15"> <div class="tx-comments mb20"> <label id="AjaxCommentBegin"></label> <label id="AjaxCommentEnd"></label> </div>  <div class="post tx-comment" id="divCommentPost"> <h3><a id="cancel-reply" href="#divCommentPost" class="fr hide">取消回复</a>欢迎 你 发表评论:</h3> <form id="frmSumbit" target="_self" method="post" action="http://www.qiyu68.com/zb_system/cmd.php?act=cmt&postid=10150&key=e34d42d4fd2dd52b6d4e11ae78584b7e" class="clearfix"> <input type="hidden" name="inpId" id="inpId" value="10150"> <input type="hidden" name="inpRevID" id="inpRevID" value="0"> <div class="tx-comment-box tx-comment-ul3"><input type="text" name="inpName" id="inpName" class="text" value="访客" size="28" tabindex="1" placeholder="名称(*)"> </div> <div class="tx-comment-box tx-comment-ul3 tx-comment-ul3-2"><input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" placeholder="邮箱"></div> <div class="tx-comment-box tx-comment-ul3"><input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="28" tabindex="3" placeholder="网站"></div> <div class="tx-comment-box tx-comment-textarea"> <textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="欢迎你的交流评论，但是垃圾评论不受欢迎">

一周热门 UG软件许可证错误，如何解决的实力干货! Mac软件打开时闪退怎么办?苹果电脑软件崩溃解决办法如何在 Mac 上设置和使用快捷方式? Switch内存卡迁移数据，看这一篇就够了教程-如何将两步路轨迹导入至Garmin(佳明)? 不锈钢为什么也会带磁性?磁铁吸附不锈钢验真伪，是错的 foobar2000音乐播放软件，源码输出信号给家庭功放机解码直通教程新手入门技能:如何将微信文件保存到 iPhone 里? UG常见错误解决大全 ug12.0-8错误佳明手表无法导入轨迹文件的解决办法最近发表别再乱找了!这才是 Alist 本地安装挂载的正确打开方式如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道! 大数据传输的定义与大数据传输解决方案的选择【工具】在线传输文件工具（在线文件互传）如何使用 CAN-FD 在 LPC5500 上传输数据轻松同步:将照片从三星手机传输到iPad的简便方法常见又地道的网络缩写:美剧中常说的SFW到底是个啥? 每天学会一个计算机网络协议之FTP 即用即走，这3款文件分享工具真香安卓手机里的文件和照片与Mac互传的办法标签列表 navicat无法连接mysql服务器 (65) 下横线怎么打 (71) flash插件怎么安装 (60) lol体验服怎么进 (66) ae插件怎么安装 (62) yum卸载 (75) .key文件 (63) cad一打开就致命错误是怎么回事 (61) rpm文件怎么安装 (66) linux取消挂载 (81) ie代理配置错误 (61) ajax error (67) centos7 重启网络 (67) centos6下载 (58) mysql 外网访问权限 (69) centos查看内核版本 (61) ps错误16 (66) nodejs读取json文件 (64) centos7 1810 (59) 加载com加载项时运行错误 (67) php打乱数组顺序 (68) cad安装失败怎么解决 (58) 因文件头错误而不能打开怎么解决 (68) js判断字符串为空 (62) centos查看端口 (64)