HTML offsetHeight 属性用法详解
前端开发小伙伴们在页面布局的时候是不是经常会用到offsetHeight，今天就来讲下用法。
offsetHeight 是 HTML 元素的属性，用于获取元素的物理高度（包括内边距、边框和水平滚动条，但不包括外边距）。它返回一个整数值，表示元素的垂直尺寸。
- element：这是一个指向 HTML 元素的引用。
假设我们有以下 HTML 结构：
在这个例子中，#box 元素的 offsetHeight 属性值是 170。这是因为：
- 元素的高度 (height) 是 150px。
- 上下的内边距 (padding) 各为 10px，总共 20px。
- 上下的边框 (border) 各为 5px，总共 10px。
所以总高度为 150 + 20 + 10 = 180px。
- 包含内容：offsetHeight 包括元素的内容区域、内边距和边框，但不包括外边距。
- 滚动条：如果元素有水平滚动条，offsetHeight 会包含滚动条的高度。
- 隐藏元素：对于隐藏的元素（例如通过 CSS 设置 display: none），offsetHeight 返回 0。
- 计算开销：由于需要计算布局信息，频繁访问 offsetHeight 可能会影响性能，特别是在大量元素或复杂布局的情况下。
- clientHeight：返回元素的高度，包括内边距，但不包括边框和水平滚动条。
- scrollHeight：返回元素的整体高度，包括溢出不可见部分的高度。
- offsetTop：返回元素相对于其 offsetParent 的顶部距离。
- offsetLeft：返回元素相对于其 offsetParent 的左侧距离。
offsetHeight 是一个有用的属性，可以帮助开发者精确地测量和操作元素的物理尺寸。了解它的工作原理和使用场景，可以更好地进行前端开发和调试。
什么是HTML
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
新建一个test.html文件，内容如下
其中：
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset=\”utf-8\”> 定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8）
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
保存后运行，即可在浏览器中打开如下界面
3.1 标题
HTML 标题（Heading）是通过<h1> – <h6> 标签来定义的.
3.2 段落
HTML 段落是通过标签 <p> 来定义的
3.3 链接
HTML 链接是通过标签 <a> 来定义的
3.4 图像
HTML 图像是通过标签 <img> 来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。
3.5 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：
4.1 基本文档
4.2 基本标签
4.3 文本格式化
4.4 链接
4.5 图片
4.6 样式/区块
4.7 无序列表
4.8 有序列表
HTML基础知识
注释：<!– –>
DOCTYPE：就是告诉浏览器，我们要使用什么规范
head：网页头部标签
- title：网页标题
- meta：描述性标签，描述网站的信息，用来做SEO
- charset = \”UTF-8\”
- name = \”keyword\” content = \”\”关键词
- name = \”descrisption\” content = \”\”描述
body：代表网页主题
标题标签
- <h1>一级标签</h1>一直到6级标签
段落标签
- <p>段落标签</p>
换行标签
- <br/> /是闭合的意思，单标签，闭不闭合都行
水平线标签
- <hr/>
字体样式标签
- <strong>粗体</strong>
- <em>斜体</em>
注释
- <!– –>
特殊字符
- 空格 —->一个空格
- 大于号 >
- 小于号<
- 版权符号©
特殊符号就是 & xxx ;
<img src=\”path\” alt=\”文字\” title=\”text\” width=\”x\” heigth=\”y\” />
- src 图像地址 必填
- alt 图像的代替文字(找不到图片的时候显示) 必填
- title 鼠标悬停提示文字
- width 图像的宽度
- height 图像的高度
注意：../ 代表上一级目录
文本链接
<a href=\”path\” target=\”目标窗口位置\”>链接文本或图像</a>
- href 链接路径，要跳转带那个位置 必填
- target链接在哪个窗口打开：常用值_self 当前窗口（默认的）、_blank 新窗口
图像链接：就是嵌套图片标签
页面间链接
- 从一个页面链接到另一个页面
锚链接
- 第一步需要一个标记 使用name做标记
- 第二步跳转到标记 使用#标记
- <a name=\”top\” ></a><a href=\”#top\”></a>上面是页面内的跳转<a name=\”down\”></a><a href=\”第一个页面的path#down\”></a>页面间的跳转
功能性链接
- 邮件链接：mailto： <a href=\”mailto:邮箱\”></a>点击后会打开邮箱
- qq链接：在qq推广工具里面的
块元素
- 无论内容多少，该元素独占一行
- p、h1-h6
行内元素
- 内容撑开宽度、左右都是行内元素的可以排在一起
- a、strong、em…
什么是列表：就是一种展示方式
有序列表
- <ol> <li></li> </ol>
无序列表
- <ul> <li></li> </ul>
自定义列表
为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
跨列：使用colspan=\”夸的列数\” <td colspan=\”4\”>
跨行：使用rowspan=\”夸的行数\” <td rowspan=\”4\”>
视频元素
- video
- <video src=\”path\” controls autoplay></video>
- src:资源路径
- controls控制条
- autoplay自动播放
音频元素
- audio
- <audio src=\”\” controls autoplay></audio>
<iframe src=\”path\” name=\”mainFrame\”></iframe>
- src必填
- width
- heigth
- name标记
- name的使用<iframe src=\”\” name=\”hello\” frameborder=\”0\” width=\”1000px\” heigth=\”800px\”></iframe><a href=\”path\” target=\”hello\”></a>点击超连接后，会在内联框架里显示这个页面
表单：form
- method 规定如何发送表单数据常用psot、get
- action 表示向何处发送表单数据，把表单的数据发送给那个地方
get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
post方式提交：比较安全，可以传输大文件
表单元素格式
单选框
- input type=\”radio\”
- value 单选框的值
- name ：表示组，name一样一次只能选一个，name不一样可以选多个
- checked默认选中的
多选框
- input type=\”checkbox\”
- value = \”sleep\”
- name = \”hooby\”
- checked默认选中的
- <input type=\”checkbox\” name=\”sleep\” value=\”slppe\” checked/>shujiao<input type=\”checkbox\” name=\”sleep\” value=\”slppe\”/>shujiao<input type=\”checkbox\” name=\”sleep\” value=\”slppe\”/>shujiao<input type=\”checkbox\” name=\”sleep\” value=\”slppe\”/>shujiao<input type=\”checkbox\” name=\”sleep\” value=\”slppe\”/>shujiao<input type=\”checkbox\” name=\”sleep\” value=\”slppe\”/>shujiao多选框的结果是以数组的形式返回的
按钮
下拉框
- selected 默认选择
文本域
文件域
邮件验证
URL
数字验证
滑块
搜索
隐藏域 hidden
只读 readonly
禁用 disabled
增强鼠标可用性
为什么要进行表单验证：缓解服务器压力、保证数据安全
提示信息
- placeholder=\”提示信息\” 在输入框上
非空判断
- required
正则表达式验证
- pattern
- <input type=\”text\” name=\”mail\” pattern=\”正则表达式\”>
高级验证使用js
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
