ps: 可以使用css的 **display**属性改变元素的显示类型和布局行为

一.块级元素(Block-level Elements):

块级元素(Block-level elements)是一类占据其父元素整个可用宽度的元素，通常会在其前后创建换行，使它们在页面上呈现为独立的块。

主要特点:

默认情况下，会独占一行或一整段空间可以设置宽度(width)和高度(height)属性可以设置 margin(外边距)和 padding(内边距)的各个方向值宽度默认是其父元素的 100%

常见块级元素:

标签名说明标签名说明

~

标题

交互表单

段落

表格

容器

---

水平分割线

有序列表目录列表
无序列表

块级引用

自定义列表

地址…

1.

~

(标题)

标题元素，用于定义不同级别的标题，从最高级别的

到最低级别的

特点:

字体大小逐级递减(h1 最大，h6 最小)自动在前后添加换行通常用于页面结构和内容层级划分

示例:

主标题 - 页面主题

二级标题 - 主要章节

三级标题 - 章节小节

四级标题

五级标题

六级标题

效果:

主标题 - 页面主题

二级标题 - 主要章节

三级标题 - 章节小节

四级标题

五级标题

六级标题

2.

(段落)

用于定义文本段落，是最常用的文本容器之一。

特点:

自动在段落前后添加空白(换行和间距)通常用于组织连续的文本内容不能包含块级元素，只能包含行内元素

示例:

这是一个段落。段落元素会自动在前后创建空白，使文本内容更易读。

这是第二个段落，与第一个段落之间会有适当的间距。

效果:

这是一个段落。段落元素会自动在前后创建空白，使文本内容更易读。

这是第二个段落，与第一个段落之间会有适当的间距。

3.

(容器)

通用的块级容器元素，没有特定的语义，主要用于布局和样式化。

特点:

本身没有任何默认样式主要用于组合其他元素，方便 CSS 样式应用和 JavaScript 操作可以包含任何其他元素，包括块级和行内元素

示例:

网站标题

网站副标题

这里是主要内容...

效果:

网站标题

网站副标题

这里是主要内容...

4.

,
,

(列表)

(有序列表)

用于创建有编号的列表，列表项使用

1. 标签定义。

   示例:

   1. 第一步
   2. 第二步
   3. 第三步

   效果:

   第一步第二步第三步

   (无序列表)

   用于创建无编号的列表，通常用项目符号表示，列表项同样使用

   • 标签。

     示例:

     • 苹果
     • 香蕉
     • 橙子

     效果:

     苹果香蕉橙子

     (定义列表)

     用于创建术语及其定义的列表，包含

     (术语)和

     (定义)子元素。

     示例:

     HTML

     超文本标记语言，用于创建网页结构

     CSS

     层叠样式表，用于设计网页外观

     效果:

     HTML

     超文本标记语言，用于创建网页结构

     CSS

     层叠样式表，用于设计网页外观

     二.行块级元素(Inline-block elements):

     行内块级元素(Inline-block elements)是介于行内元素和块级元素之间的一种元素类型，兼具两者的部分特性。

     主要特点:

     不会独占一行，能与其他行内元素或行内块元素在同一行显示可以设置宽度(width)和高度(height)可以设置 margin(外边距)和 padding(内边距)的各个方向值元素的顶部和底部会与其他行内元素的基线对齐

     常见行内块级元素:

     标签名说明标签名说明图像元素

表格表头单元格表单输入控件

表格数据单元格按钮文本域<select>下拉选择框<object>嵌入外部资源元素<label>表单标签…</p> <p>1.<img> (图像元素)</p> <p>用于嵌入图像的元素，不需要闭合标签(属于自闭合标签)，通过属性来定义图像的来源、尺寸等信息。</p> <p>主要特点:</p> <p>是行内块级元素，既可以和其他行内元素在同一行显示，又能设置宽高和边距本身没有内容，通过 src 属性指定图像路径必须包含 alt 属性，用于图像无法显示时提供替代文本</p> <p>常用属性:</p> <p>属性名说明src指定图像的 URL(路径)，可以是相对路径、绝对路径或网络地址alt图像的替代文本，提高可访问性，当图像加载失败时显示width / height设置图像的宽度和高度(单位通常为像素)title鼠标悬停时显示的提示文本loading指定图像加载方式(eager 立即加载，lazy 延迟加载)</p> <p>示例:</p> <p><!-- 基本用法 --></p> <p><img src="Orange.png" alt="在笑的橘子" width="450" height="400"></p> <p><!-- 带提示文本 --></p> <p><img src="Apple.jpg" alt="一个苹果" title="这是一个红苹果" width="300"></p> <p><!-- 网络图片 --></p> <p><img src="https://i-blog.csdnimg.cn/img_convert/0a83022c8aec6c8b395e05ba9bae7aab.jpeg" alt="示例图片" width="400" height="300"></p> <p><!-- 图像无法加载时显示alt文本 --></p> <p><img src="nonexistent.jpg" alt="这张图片无法加载"></p> <p>效果:</p> <p>2.<input> (表单输入控件)</p> <p>最常用的输入控件，通过 type 属性可以创建多种不同类型的输入字段，属于自闭合标签。</p> <p>主要属性:</p> <p>属性名说明type指定输入类型(如 text、password、checkbox 等)name表单提交时的键名value输入字段的初始值placeholder输入框中的提示文本required指定字段为必填项disabled禁用输入控件readonly设置为只读checked加载时默认选中pattern通过正则限制密码格式title验证失败时,弹窗显示的格式提示maxlength输入最大长度</p> <p>type常见值:</p> <p>type 值描述示例用途text默认值，单行文本输入框姓名、地址等普通文本输入password密码输入框，内容以掩码(* 或・)显示登录密码、支付密码输入radio单选按钮，同一 name 组内只能选择一个性别、学历等互斥选项选择checkbox复选框，可单独选中或取消，允许选择多个选项同意条款、兴趣爱好选择submit提交按钮，用于将表单数据发送到服务器提交注册信息、表单内容file文件上传控件，用于选择并上传本地文件上传头像、证件、文档等文件button普通按钮，无默认行为，需配合 JS 使用自定义操作按钮reset重置按钮，将表单所有输入项恢复为默认值清空表单内容重新填写number数字输入框，支持上下箭头调整数值，移动端显示数字键盘年龄、数量身高体重等数值email邮箱输入框浏览器自动验证格式验证(含 @符号等)注册邮箱、联系邮箱输入tel电话号码输入框，移动端自动弹出数字键盘手机号、固定电话输入url网址输入框，浏览器会验证格式(通常需包含 http:// 或 https://)个人网站、链接地址输入search搜索框部分浏览器会显示 “清除” 按钮(输入内容后)网站搜索、内容检索date日期选择器，返回格式为 YYYY-MM-DD生日、预约日期选择time时间选择器， 返回格式为 HH:MM(24 小时制)会议时间闹钟时间选择datetime-local本地日期时间选择器返回格式为 YYYY-MM-DDThh:MM活动开始时间日程安排month年月选择器返回格式为 YYYY-MM信用卡有效期月度报表选择week年周选择器返回格式为 YYYY-Www(如 2023-W32)周计划季度报表周期选择color颜色选择器，点击弹出调色板返回十六进制颜色值(如 #ff0000)主题色设置自定义颜色选择</p> <p>常见类型示例:</p> <p><!-- 文本输入框 --></p> <p><input type="text" name="username" placeholder="请输入用户名" value="admin" required></p> <p><!-- 密码输入框 --></p> <p><input type="password" name="password" placeholder="请输入密码" maxlength="6"></p> <p><!-- 单选按钮 --></p> <p><input type="radio" name="gender" value="male" id="male"></p> <p><input type="radio" name="gender" value="female" id="female"></p> <p><!-- 复选框 --></p> <p><input type="checkbox" name="hobby" id="travel"></p> <p><input type="checkbox" name="hobby" id="eat"></p> <p><!-- 文件上传 --></p> <p><input type="file" name="img"></p> <p><!-- 按钮 --></p> <p><input type="button" value="注册"></p> <p><!-- 重新提交 --></p> <p><input type="reset" value="重新提交"></p> <p><!-- 提交按钮 --></p> <p><input type="submit" value="提交表单"></p> <p>3.<button> (按钮)</p> <p>用于创建可点击的按钮，可包含文本或其他行内元素，比 <input type=“button”> 更灵活。</p> <p>主要属性:</p> <p>属性名说明type按钮类型(button、submit、reset)name按钮名称value按钮值disabled禁用按钮</p> <p>示例:</p> <p><!-- 普通按钮 --></p> <p><button type="button">点击我</button></p> <p><!-- 提交按钮 --></p> <p><button type="submit">提交</button></p> <p><!-- 重置按钮 --></p> <p><button type="reset">重置</button></p> <p><!-- 包含图标和文本的按钮 --></p> <p><button type="button"></p> <p><img src="Apple.jpg" alt="一个苹果" title="这是一个红苹果" width="15">搜索</p> <p></button></p> <p>4.<select> (下拉选择框)</p> <p>创建下拉列表，通常与 <option> 元素配合使用，用于提供一组可选择的选项。</p> <p>主要属性:</p> <p>属性名说明name表单提交时的键名id与 label 关联的标识符multiple允许选择多个选项disabled禁用下拉框</p> <p>示例:</p> <p><select name="city" id="city"></p> <p><option value="">请选择城市</option></p> <p><option value="beijing">北京</option></p> <p><option value="shanghai">上海</option></p> <p><option value="guangzhou">广州</option></p> <p></select></p> <p><!-- 允许多选的下拉框 --></p> <p><select name="hobby" multiple></p> <p><option value="reading">阅读</option></p> <p><option value="sports">运动</option></p> <p><option value="music">音乐</option></p> <p></select></p> <p>5.<label> (表单标签)</p> <p>用于关联表单控件，提升表单的可访问性和用户体验。点击 label 会触发关联控件的交互。</p> <p>关联方式:</p> <p>通过 for 属性与控件的 id 关联将控件包裹在 <label> 内部</p> <p>示例:</p> <p><!-- 通过for属性关联 --></p> <p><label for="username">用户名:</label></p> <p><input type="text" id="username" name="username"></p> <p><!-- 包裹方式关联 --></p> <p><label></p> <p><input type="checkbox" name="remember"> 记住我</p> <p></label></p> <p><!-- 提升复选框可用性 --></p> <p><label for="newsletter"></p> <p><input type="checkbox" id="newsletter" name="newsletter"></p> <p>订阅电子报</p> <p></label></p> <p>三.行内元素(Inline Elements)</p> <p>行内元素(Inline Elements)仅占据自身内容宽度，默认不创建换行，主要用于文本内容的局部格式化或小范围交互。</p> <p>1.<span> (通用行内容器)</p> <p>无默认语义，仅用于包裹小块文本或元素，便于通过 CSS 设置样式或通过 JavaScript 操作。</p> <p>区别于<div>: <div>是块级容器，<span>是行内容器，不独占一行，仅包裹内容区域。</p> <p>示例:</p> <p><p>这是一段文本，其中<span style="color: red; font-weight: bold;">红色加粗部分</span>用span包裹</p></p> <p>效果:</p> <p>这是一段文本，其中红色加粗部分用span包裹</p> <p>2.<a>:超链接元素</p> <p>主要属性:</p> <p>属性名说明href指定链接目标，可是 URL(如https://www.example.com)、页面内锚点(如#section1)、邮箱(如mailto:xxx@xxx.com)或电话(如tel:123456)。target控制链接打开方式，常用值有_blank(新窗口打开)、_self(当前窗口打开，默认)、_parent(父框架打开)、_top(顶级框架打开)。rel指定与目标页面的关系，如noopener(防止新窗口获取当前页面控制权，提升安全性，搭配_blank使用)、nofollow(告诉搜索引擎不追踪该链接)。</p> <p>示例:</p> <p><!-- 外部链接，新窗口打开并添加安全属性 --></p> <p><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">百度(新窗口)</a></p> <p><!-- 页面内锚点，跳转到id为"footer"的区域 --></p> <p><a href="#footer">跳转到页脚</a></p> <p><!-- 邮件链接，点击唤起邮件客户端 --></p> <p><a href="mailto:service@example.com?subject=咨询问题">发送邮件咨询</a></p> <p>效果:</p> <p>百度(新窗口)</p> <p>跳转到页脚</p> <p>发送邮件咨询</p> <p>3.文本格式化行内元素</p> <p>标签语义与功能视觉效果注意事项<strong>表示重要内容，有语义强调作用粗体搜索引擎会识别其重要性，优先于无语义的<em>表示强调内容，有语义(通常隐含语气重读)斜体语义化标签，区别于仅作样式的<b>仅用于设置粗体样式，无实际语义粗体仅推荐用于纯视觉加粗，无重要性强调时使用<i>仅用于设置斜体样式，或表示特殊术语(如品牌名)斜体无语义，纯样式用途<s>表示已删除或过时的内容，有语义删除线语义化标签，区别于 CSS 的text-decoration: line-through<sup>/<sub>上标 / 下标，用于数学公式、日期等文字变小且位置偏移如 “2³”(<sup>3</sup>)、“H₂O”(<sub>2</sub>)<code>表示计算机代码片段，有语义等宽字体通常嵌套在<pre>(预格式化文本)中展示多行代码</p> <p>效果: <strong>: 我是加粗的文字 <em>: 我是倾斜的文字 <b>: 我是加粗的文字 <i>: 我是倾斜的文字 <del>: 我是删除 <s>: 我是删除 <ins>: 我是下划线 <sup>: 我是上标 <sub>: 我是下标 <code>: 我是代码片段</p> <p>ps: 可以使用css的 display属性改变元素的显示类型和布局行为</p> </p> </div> <div class="postbox__details-share-wrapper"> <div class="row"> <div class="col-lg-12"> <div class="postbox__details-tag tagcloud"> </div> </div> </div> </div> </article> </div> </div> </div> </div> </div> </section> <!-- footer area start --> <div style="position: relative;bottom: 10px;margin: 0 auto;left: 0;right: 0;text-align: center;"> Copyright © 2088 极光云巢-多端游戏数据互通平台 All Rights Reserved. <div style="text-align: center;"> 友情链接 <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=gdvpk3plqch"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> <a href="#" class="trx_addons_scroll_to_top trx_addons_icon-up" title="Scroll to top"></a> <script type="text/javascript" src="/static/js/jquery.magnific-popup.min.js" id="magnific-popup-js"></script> <script type="text/javascript" src="/static/js/waypoints.js" id="waypoints-js"></script> <script type="text/javascript" src="/static/js/bootstrap-bundle.js" id="bootstrap-bundle-js"></script> <script type="text/javascript" src="/static/js/meanmenu.js" id="mean-menu-js"></script> <script type="text/javascript" src="/static/js/swiper-bundle.js" id="swiper-bundle-js"></script> <script type="text/javascript" src="/static/js/splide.js" id="splide-js"></script> <script type="text/javascript" src="/static/js/slick.min.js" id="slick-js"></script> <script type="text/javascript" src="/static/js/purecounter.js" id="purecounter-js"></script> <script type="text/javascript" src="/static/js/nouislider.js" id="nouislider-js"></script> <script type="text/javascript" src="/static/js/nice-select.js" id="jquery-nice-select-js"></script> <script type="text/javascript" src="/static/js/wow.js" id="wow-js"></script> <!-- <script type="text/javascript" src="/static/js/gsap.min.js" id="gsap-js"></script> --> <script type="text/javascript" src="/static/js/split-text.min.js" id="split-text-js"></script> <script type="text/javascript" src="/static/js/scrool-triger.js" id="scrool-triger-js"></script> <script type="text/javascript" src="/static/js/scrollMagic.min.js" id="scrollMagic-js"></script> <script type="text/javascript" src="/static/js/parallax-scroll.js" id="parallax-scroll-js"></script> <script type="text/javascript" src="/static/js/imagesloaded.min.js" id="imagesloaded-js"></script> <script type="text/javascript" src="/static/js/isotope-pkgd.js" id="isotope-pkgd-js"></script> <script type="text/javascript" src="/static/js/jquery-appear.js" id="jquery-appear-js"></script> <script type="text/javascript" src="/static/js/jquery-knob.js" id="jquery-knob-js"></script> <script type="text/javascript" src="/static/js/vanilla-tilt.js" id="vanilla-tilt-js"></script> <!-- <script type="text/javascript" src="/static/js/main.js" id="technix-main-js"></script> --> <script type="text/javascript" src="/static/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="/static/js/__scripts.js" id="trx_addons-js"></script> </body> </html>