HTML元素标签
什么是标签？
在HTML页面中，带有“< >”符号的元素被称为HTML标签（元素==标签）
标签分为：单标签和双标签
HTML中标签元素一般会分成三种不同类型，分别为：块状元素（块盒），行内元素（行盒），行内块状元素。
这三种类型元素的特点以及用处
块状元素的特点：
1、独占一行，每一个块状元素都会从新的一行重新开始，从上到下排布
2、可以直接控制宽度、高度以及盒子模型的相关css属性（元素的高度、宽度、行高以及内和外边距都可设置）
3、在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
常用的块状元素：
1、普通元素
div（常用块状容器，也是csslayout的主要标签）、p（段落）、hr（水平分隔线）、table（表格）、form（交互表单）
2、标题元素：
h1（大标题）、h2（副标题）、h3（三级标题）、h4（四级标题）、h5（五级标题）、h6（六级标题）
3、列表元素
menu（菜单列表）、ol（有序列表）、ul（无序列表）、li（列表项）、dl（定义列表）、dt（定义术语）、dd（定义描述）
4、其他元素
<address></address>（一般用于显示网站上的公司地、电子邮件地址、签名、文档作者身份等信息，浏览器对其的默认样式是’斜体‘。）
<blockquote></blockquote>（作用是引用别人的文本。但它不同于’<q>引用短文本</q>‘是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。浏览器对其的默认样式是’两边缩进‘。）
<pre></pre>（在网页上显示一段计算机编程代码，不同于’<code>加入一行编程代码</code>‘是加入多行代码）
行内元素的特点：
1、总是和相邻的行内元素在同一行上（物以类聚）
2、设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
3、默认宽度是他自身内容的宽度。
4、行内元素只能容纳其他行内元素或者文本。
特殊：a比较特殊，可以放块级元素，但是链接里面不能再放链接。
<label></label>为input元素定义标注
for属性：表示label标签要绑定的html元素，你点击label标签时，绑定的html元素将获的焦点。（绑定的必须是Id值）
accesskey属性：表访问label标签的for元素指定的html元素的快捷键，当按下快捷键时指定的元素将获得焦点。
<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text"> 按下N或单击’姓名‘ ，inputBox获取焦点
行内块元素的特点：
1、和相邻行内元素在同一行，但是之间会有空白缝隙。
2、默认宽度是他本身内容的宽度。（适应内容）
3、宽度、高度、行高、外边距以及内边距都可以手动设置。
行内块元素综合了块元素和行内元素的不同特点。
常用的行内块元素：
1.<img>（图片）
2、<input>（文本框）
3、<td>（列）
HTML标签的关系
针对双标签的相互关系分2种：嵌套关系、并列关系
1、嵌套关系 =======(父子关系)
<head>
<title> </title>
</head>
2、并列关系=======(兄弟关系)
<body>
<p>1</p>
<p>2</p>
</body>
标签显示模式转换（display）
既然标签有不同的显示模式，就会有相应的转换办法以应对各种需要。
display正是我们想要的。
块元素——>行内元素 ： display:inline;
行内元素——>块： display:block;
块、行内元素——>行内块： display: inline-block;
2021-01-11
本文作者：HuangBingQuan
本文链接：https://www.cnblogs.com/bingquan1/p/14260260.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具