基本的HTML5的文档格式

基本的HTML5的文档格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

基本文档中的 5 对标记关系

  • <html> 与 </html>
  • <head> 与 </head>
  • <meta> 自闭合标签
  • <title> 与 </title>
  • <body> 与 </body>

HTML、CSS、JS 三者的关系

1. 通过外部样式文件，设置网页的背景颜色为红色

  • 应用场景：定义项目中 80% 以上的通用样式

  • 语法：

    html

    <link rel="stylesheet" type="text/css" href="css/xxx.css">

    ​

    ​

2. 通过内部样式文件定义

  • 应用场景：定义本文件内部使用的样式

  • 语法：

    html

    <style type="text/css">
    /* 样式内容 */
</style>

    ​

    ​

3. 行内样式（内联样式）

  • 应用场景：针对单个元素的特殊样式，优先级最高

  • 语法：

    html

    <h1 style="color: #fff;">我是使用行内样式定义的标题一</h1>

    ​

    ​

三种 CSS 样式引入方式对比

类型 语法 作用范围 优先级 适用场景
外部样式 <link rel="stylesheet" href="xxx.css"> 多个页面共享 低 全局通用样式
内部样式 <style>...</style> 当前页面 中 页面独有样式
行内样式 style="..." 单个元素 高 临时调试或特殊覆盖

优先级规则（由低到高）：外部样式 < 内部样式 < 行内样式（前提是选择器权重相同）。

HTML、CSS、JavaScript 三者关系总结

技术 作用 示例
HTML 网页的结构层，负责内容与语义 <h1>标题</h1>
CSS 网页的表现层，负责样式与布局 h1 { color: red; }
JavaScript 网页的行为层，负责交互与动态效果 document.querySelector('h1').style.color = 'blue';

三者相互配合，共同构成网页的结构、表现、行为三层分离的设计模式，利于维护与协作。

posted @ 2026-03-23 10:24  liu123wz  阅读(20)  评论(0)    收藏  举报