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

qiyuwang 2025-03-14 20:09 5 浏览 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/10693.html" title="# 安装打开 ubuntu-22.04.3-LTS 报错解决方案" class="f-black" target="_blank"># 安装打开 ubuntu-22.04.3-LTS 报错解决方案</a></dt> <dd class="news-txt"> #安装打开ubuntu-22.04.3-LTS报错解决方案WslRegisterDistributionfailedwitherror:0x800701bcError:0x80070... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10692.html" title="利用阿里云镜像在ubuntu上安装Docker" class="f-black" target="_blank">利用阿里云镜像在ubuntu上安装Docker</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/10691.html" title="如何将Ubuntu Kylin(优麒麟)19.10系统升级到20.04版本" class="f-black" target="_blank">如何将Ubuntu Kylin(优麒麟)19.10系统升级到20.04版本</a></dt> <dd class="news-txt"> UbuntuKylin系统使用一段时间后，有新的版本发布，如何将现有的UbuntuKylin系统升级到最新版本？可以通过下面的方法进行升级。1.先查看相关的UbuntuKylin系统版本情况。使... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10690.html" title="Ubuntu 16.10内部代号确认为Yakkety Yak" class="f-black" target="_blank">Ubuntu 16.10内部代号确认为Yakkety Yak</a></dt> <dd class="news-txt"> 在正式宣布Ubuntu16.04LTS(XenialXerus)的当天，Canonical创始人MarkShuttleworth还非常开心的在个人微博上宣布Ubuntu下个版本16.10的内... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10689.html" title="如何在win11的wsl上装ubuntu（怎么在windows上安装ubuntu）" class="f-black" target="_blank">如何在win11的wsl上装ubuntu（怎么在windows上安装ubuntu）</a></dt> <dd class="news-txt"> 在Windows11的WSL（WindowsSubsystemforLinux）上安装Ubuntu非常简单。以下是详细的步骤：---... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10688.html" title="Win11学院:如何在Windows 11上使用WSL安装Ubuntu" class="f-black" target="_blank">Win11学院:如何在Windows 11上使用WSL安装Ubuntu</a></dt> <dd class="news-txt"> IT之家2月18日消息，科技媒体pureinfotech昨日（2月17日）发布博文，介绍了3中简便的方法，让你轻松在Windows11系统中，使用WindowsSubs... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10687.html" title="如何查看Linux的IP地址（如何查看Linux的ip地址）" class="f-black" target="_blank">如何查看Linux的IP地址（如何查看Linux的ip地址）</a></dt> <dd class="news-txt"> 本头条号每天坚持更新原创干货技术文章，欢迎关注本头条号"Linux学习教程"，公众号名称“Linux入门学习教程"。... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10686.html" title="怎么看电脑系统?（怎么看电脑系统配置）" class="f-black" target="_blank">怎么看电脑系统?（怎么看电脑系统配置）</a></dt> <dd class="news-txt"> 要查看电脑的操作系统信息，可以按照以下步骤操作，根据不同的操作系统选择对应的方法：一、Windows系统通过系统属性查看右键点击桌面上的“此电脑”（或“我的电脑”）图标，选择“属性”。在打开的... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10685.html" title="如何查询 Linux 内核版本?这些命令一定要会!" class="f-black" target="_blank">如何查询 Linux 内核版本?这些命令一定要会!</a></dt> <dd class="news-txt"> Linux内核是操作系统的核心，负责管理硬件资源、调度进程、处理系统调用等关键任务。不同的内核版本可能支持不同的硬件特性、提供新的功能，或者修复了已知的安全漏洞。以下是查询内核版本的几个常见场景：... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10684.html" title="深度剖析:Linux下查看系统版本与CPU架构" class="f-black" target="_blank">深度剖析:Linux下查看系统版本与CPU架构</a></dt> <dd class="news-txt"> 在Linux系统管理、维护以及软件部署的过程中，精准掌握系统版本和CPU架构是极为关键的基础操作。这些信息不仅有助于我们深入了解系统特性、判断软件兼容性，还能为后续的软件安装、性能优化提供重要依据。接... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10683.html" title="504 错误代码解析与应对策略（504错误咋解决）" class="f-black" target="_blank">504 错误代码解析与应对策略（504错误咋解决）</a></dt> <dd class="news-txt"> 在互联网的使用过程中，用户偶尔会遭遇各种错误提示，其中504错误代码是较为常见的一种。504错误并非意味着网站被屏蔽，它实际上是指服务器在规定时间内未能从上游服务器获取响应，专业术语称为“Ga... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10682.html" title="猎聘APP和官网崩了?回应:正对部分职位整改，临时域名可登录" class="f-black" target="_blank">猎聘APP和官网崩了?回应:正对部分职位整改，临时域名可登录</a></dt> <dd class="news-txt"> 10月12日，有网友反映猎聘网无法打开，猎聘APP无法登录。截至10月14日，仍有网友不断向猎聘官方微博下反映该情况，而猎聘官方微博未发布相关情况说明，只是在微博内对反映该情况的用户进行回复，“抱歉，... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10681.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/10680.html" title="Linux无法解析域名的解决办法（linux 不能解析域名）" class="f-black" target="_blank">Linux无法解析域名的解决办法（linux 不能解析域名）</a></dt> <dd class="news-txt"> 如果由于误操作，删除了系统原有的dhcp相关设置就无法正常解析域名。　　此时，需要手动修改配置文件：　　/etc/resolv.conf　　将域名解析服务器手动添加到配置文件中　　该文件是DNS域名解... </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.qiyu68.com/post/10679.html" title="域名劫持是什么?（域名劫持是什么）" class="f-black" target="_blank">域名劫持是什么?（域名劫持是什么）</a></dt> <dd class="news-txt"> 域名劫持是互联网攻击的一种方式，通过攻击域名解析服务器（DNS），或伪造域名解析服务器（DNS）的方法，把目标网站域名解析到错误的地址从而实现用户无法访问目标网站的目的。说的直白些，域名劫持，就是把互... </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=68e6bc3daa226c05379b187c8aeb8294" 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音乐播放软件，源码输出信号给家庭功放机解码直通教程 UG常见错误解决大全 ug12.0-8错误佳明手表无法导入轨迹文件的解决办法新手入门技能:如何将微信文件保存到 iPhone 里? 关于AutoCAD软件安装成功，打开提示许可证无效的解决办法最近发表 # 安装打开 ubuntu-22.04.3-LTS 报错解决方案利用阿里云镜像在ubuntu上安装Docker 如何将Ubuntu Kylin(优麒麟)19.10系统升级到20.04版本 Ubuntu 16.10内部代号确认为Yakkety Yak 如何在win11的wsl上装ubuntu（怎么在windows上安装ubuntu） Win11学院:如何在Windows 11上使用WSL安装Ubuntu 如何查看Linux的IP地址（如何查看Linux的ip地址）怎么看电脑系统?（怎么看电脑系统配置）如何查询 Linux 内核版本?这些命令一定要会! 深度剖析:Linux下查看系统版本与CPU架构标签列表 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)