在HTML5中定义JavaScript函数需在<script>标签内：一、用function声明命名函数（可提升）；二、赋值匿名函数给变量（不提升）；三、用箭头函数简化表达式；四、挂载到window实现全局调用；五、用DOMContentLoaded确保DOM就绪后执行。
如果您希望在HTML5文档中通过内联脚本定义JavaScript函数，则需将function声明置于<script>标签内部，并确保其位于合适的执行上下文中。以下是具体实现方式：
一、在<script>标签内直接定义命名函数
该方法适用于需要多次调用、具备明确标识符的函数，函数声明会被提升（hoisted），可在定义前调用。
1、在HTML文档的<head>或<body>底部添加<script>标签。
2、在<script>标签内部使用function关键字声明函数，后跟函数名、括号及花括号包裹的函数体。
立即学习“前端免费学习笔记（深入）”；
3、函数体内可包含任意合法JavaScript语句，例如return、变量声明或DOM操作。
4、通过函数名加括号的方式调用该函数，例如myFunction()。
二、在<script>标签内定义匿名函数并赋值给变量
该方法使用函数表达式形式，将匿名函数赋值给一个变量，函数不会被提升，必须在赋值后调用。
1、在<script>标签内声明一个变量，例如const myFunc或let handler。
2、使用= function() { ... }语法将匿名函数赋值给该变量。
3、确保调用语句出现在赋值语句之后，否则会因变量值为undefined而报错。
4、调用时使用变量名加括号，例如myFunc()。
三、使用ES6箭头函数语法定义函数
该方法适用于简短逻辑、无需this绑定或arguments对象的场景，属于函数表达式的一种简洁写法。
1、在<script>标签内声明变量并使用= () => { ... }赋值。
2、若函数体仅含单个表达式，可省略花括号与return关键字，自动返回结果。
3、若需访问外部作用域的this，箭头函数会继承外层函数的this值，不创建自身this上下文。
4、调用方式与变量函数一致，例如calc(2, 3)。
四、将函数定义绑定到全局对象显式暴露
该方法用于确保函数可在任何内联脚本或事件属性（如onclick）中被识别和调用，避免作用域隔离问题。
1、在<script>标签内定义函数后，将其作为属性挂载到window对象上。
2、使用window.functionName = function() { ... }语法完成绑定。
3、在HTML元素的内联事件中直接引用函数名，例如<button onclick="myGlobalHandler()">。
4、注意：未挂载到window的局部函数无法被HTML内联事件调用。
五、使用DOMContentLoaded确保函数在DOM就绪后定义并执行
该方法防止函数操作尚未加载的DOM元素，适用于依赖页面结构初始化的函数定义与调用。
1、在<script>标签内使用document.addEventListener('DOMContentLoaded', () => { ... })包裹函数定义与调用逻辑。
2、在事件回调内部定义函数，并立即调用或绑定到交互元素。
3、确保所有DOM查询（如document.getElementById）均在此回调中进行。
4、此方式下函数定义不会被提升至全局作用域顶部，仅在事件触发后生效。
