主题
常用标签介绍
在 HTML 中,可以通过一些特定的标签将 CSS 和 JavaScript 文件与网页进行关联,实现页面的样式设计和功能增强。以下是最常用的标签及其用途。
1. <link>
:引入外部 CSS
<link>
标签用于在 HTML 中加载外部样式表,通常放置在 <head>
区域中。
html
<link rel="stylesheet" href="styles.css" />
属性说明:
rel="stylesheet"
:表示关系是样式表href
:外部 CSS 文件路径
2. <style>
:内部 CSS
<style>
标签用于在 HTML 页面内部定义样式,适用于页面较小或临时样式。
html
<style>
body {
background-color: #f0f0f0;
}
</style>
3. <script>
:引入 JavaScript
<script>
标签用于定义或加载 JavaScript 脚本。可以写在页面底部或通过 src
属性加载外部文件。
内部脚本示例:
html
<script>
console.log("Hello World!");
</script>
外部脚本示例:
html
<script src="main.js"></script>
常用属性:
src
:外部脚本路径defer
:延迟执行直到文档解析完毕async
:异步加载脚本,适合独立脚本文件
小结
标签 | 功能 | 典型用途 |
---|---|---|
<link> | 引入外部 CSS | 加载统一的页面样式 |
<style> | 定义页面内部样式 | 快速测试或页面局部样式 |
<script> | 引入或编写 JS | 实现交互功能与动态控制 |
合理地使用这些标签,是实现网页样式与行为分离、提升开发效率的关键。