直接在HTML标签中使用style属性设置内联样式，可快速生效但不利于维护；2. 通过JavaScript操作元素的style属性实现动态控制，需使用驼峰命名法；3. 内联样式优先级高，适合动态场景但应避免重复代码和安全风险；4. 可结合模板字符串动态生成带样式的HTML内容，适用于组件化开发。
在HTML中直接设置元素样式，通常通过内联样式（inline style）实现，也就是使用元素的 style 属性。虽然严格来说这不是“HTML函数”，但可以通过JavaScript操作HTML元素的样式，或者在HTML标签中直接写样式。下面介绍几种结合CSS内联技巧的方法。
1. 在HTML标签中使用内联样式
直接在HTML元素上使用 style 属性设置样式，是最简单的内联方式。
这是一段红色文字，有背景色和字体大小设置。
优点是优先级高、生效快；缺点是难以维护，不利于样式复用。
2. 使用JavaScript动态设置样式属性
通过JavaScript可以操作DOM元素的 style 属性，实现动态样式控制。
立即学习“前端免费学习笔记（深入）”；
例如：
注意：JavaScript中样式属性使用驼峰命名法，如 fontSize 而不是 font-size。
3. 内联样式的CSS技巧与注意事项
尽管内联样式方便，但合理使用才能避免问题。
- 优先级高：内联样式优先级高于外部CSS文件和内部样式表，调试时需留意。
- 避免重复代码：大量使用内联样式会导致HTML臃肿，建议复杂样式写在CSS中。
- 动态生成场景适用：比如根据用户操作实时改变颜色或位置，适合用JS修改style属性。
- 安全考虑：避免将用户输入直接拼接到style中，防止CSS注入风险。
4. 结合模板字符串动态设置样式（现代JS技巧）
在JavaScript中，可以用模板字符串构造带样式的HTML片段。
const color = 'green';const size = '20px';
document.getElementById('output').innerHTML = `
动态样式文本
`;这种方式适合在组件或单页应用中动态生成内容。
基本上就这些。内联样式适合简单、个性化的样式控制，复杂项目建议结合外部CSS管理。灵活运用style属性和JavaScript，能让页面更动态且可控。
