【前端开发】一. html css js 初印象-EW帮帮网

一、HTML 总结（网页骨架）

1. 核心概念

超文本标记语言，用标签定义网页内容（文字、图片、链接等）。

2. 基础结构

<!DOCTYPE html>
<html>
<head>
  <title>页面标题</title> <!-- 显示在浏览器标签页上 -->
  <meta charset="UTF-8"> <!-- 声明字符编码 -->
</head>
<body>
  <!-- 所有可见内容写在这里 -->
</body>
</html>

3. 常用标签详解

标签	作用	示例/注意点
<h1>-<h6>	标题（重要性递减）	<h1>主标题</h1> (一个页面通常只用1个h1)
<p>	段落	<p>这是一个段落</p>
<a>	超链接	<a href="百度一下，你就知道" target="_blank">百度</a> (target="_blank"在新标签页打开)
<img>	图片	<img src="cat.jpg" alt="猫咪图片"> (alt在图片加载失败时显示)
<ul>/<ol>	无序/有序列表	<ul><li>苹果</li><li>香蕉</li></ul>
<div>	块级容器	<div>这是一个分区</div> (用于布局或样式分组)
<span>	行内容器	<span style="color:red">红色文字</span> (用于小范围样式)
<input>	表单输入	<input type="text" placeholder="请输入"> (重点掌握text/password/checkbox/radio)
<button>	按钮	<button οnclick="alert('点击')">按钮</button>

4. 语义化标签（HTML5新增）

<header>网页头部</header>
<nav>导航栏</nav>
<main>主要内容</main>
<section>内容区块</section>
<article>独立文章</article>
<footer>页脚</footer>

✅ 好处：提升SEO、代码可读性、无障碍访问

5. 高频坑点

❌ 忘记闭合标签（如 <p> 必须有 </p>）
❌ 图片路径错误（src 用相对路径 ./images/logo.png 或绝对路径）
❌ 表单忘记加 name 属性（后端接收数据需要）

二、CSS 超详细总结（网页外观）

1. 核心概念

层叠样式表，控制HTML元素的 颜色、大小、位置等。

2. 引入CSS的三种方式

<!-- 1. 内联样式（优先级最高） -->
<p style="color: blue;">蓝色文字</p>

<!-- 2. 内部样式表 -->
<head>
  <style>
    p { color: red; }
  </style>
</head>

<!-- 3. 外部样式表（最推荐！） -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

3. 选择器详解（如何选中元素）

选择器	示例	说明
元素选择器	p { ... }	选中所有<p>标签
类选择器	.intro { ... }	选中class="intro"的元素
ID选择器	#header { ... }	选中id="header"的元素（页面唯一）
后代选择器	div p { ... }	选中div内部所有p
伪类选择器	a:hover { ... }	鼠标悬停在链接时的样式

4. 盒模型（核心！）

div {
  width: 200px;     /* 内容宽度 */
  height: 100px;    /* 内容高度 */
  padding: 20px;    /* 内边距（内容与边框的距离） */
  border: 2px solid black; /* 边框 */
  margin: 10px;     /* 外边距（元素与其他元素的距离） */
}

📐 总宽度 = width + padding-left/right + border-left/right
用 box-sizing: border-box; 可让 width 包含 padding 和 border

5. 布局技术

Flex布局（新手首选）

.container {
  display: flex;          /* 启用Flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
}
.item {
  flex: 1; /* 子元素等分剩余空间 */
}

定位（Position）

.box {
  position: relative; /* 相对定位（相对于自身原位置） */
  top: 10px; 
  left: 20px;
}
.absolute-box {
  position: absolute; /* 绝对定位（相对于最近的非static父元素） */
  top: 0;
  right: 0;
}

6. 高频属性速查

属性	常用值	作用
color	red, #ff0000	文字颜色
background	#eee, url(bg.jpg)	背景颜色或图片
font-size	16px, 1.2rem	字体大小
display	block, inline, none	元素显示方式
border-radius	5px, 50%	圆角

7. 必知技巧

用 margin: 0 auto; 实现水平居中（需设置宽度）
用 :hover 制作悬停效果（如按钮变色）
用 transition: all 0.3s; 添加简单动画

三、JavaScript 超详细总结（网页行为）

1. 核心概念

脚本语言，用于 处理用户交互、动态修改页面。

2. 三种引入方式

<!-- 1. 内部脚本 -->
<script>
  console.log("Hello!");
</script>

<!-- 2. 外部脚本（推荐） -->
<script src="app.js"></script>

<!-- 3. 内联脚本（不推荐） -->
<button onclick="alert('点击')">按钮</button>

3. 基础语法

// 1. 变量声明
let age = 25;         // 可变变量
const PI = 3.14;      // 常量（不可变）

// 2. 数据类型
let name = "小明";     // 字符串 (String)
let score = 95;       // 数字 (Number)
let isStudent = true; // 布尔值 (Boolean)
let person = {        // 对象 (Object)
  name: "小红",
  age: 20
};
let fruits = ["苹果", "香蕉"]; // 数组 (Array)

// 3. 函数
function add(a, b) {
  return a + b;
}
const multiply = (a, b) => a * b; // 箭头函数（ES6）

// 4. 条件语句
if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

// 5. 循环
for (let i = 0; i < 5; i++) {
  console.log(i); // 输出0,1,2,3,4
}

4. DOM操作（核心！）

通过JavaScript访问和修改HTML元素

// 1. 获取元素
const btn = document.getElementById("myBtn"); // 通过ID
const items = document.querySelectorAll(".item"); // 通过CSS选择器

// 2. 修改内容
document.querySelector("h1").textContent = "新标题";

// 3. 修改样式
document.body.style.backgroundColor = "lightblue";

// 4. 事件监听（最重要！）
btn.addEventListener("click", function() {
  alert("按钮被点击了！");
});

// 5. 创建新元素
const newDiv = document.createElement("div");
newDiv.textContent = "我是新创建的div";
document.body.appendChild(newDiv);

5. 常见交互场景代码

// 切换暗色模式
const darkModeBtn = document.getElementById("dark-mode-btn");
darkModeBtn.addEventListener("click", () => {
  document.body.classList.toggle("dark-theme");
});

// 表单验证
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  const input = document.getElementById("email");
  if (!input.value.includes("@")) {
    e.preventDefault(); // 阻止表单提交
    alert("邮箱格式错误！");
  }
});

6. 高频API

API	作用	示例
document.getElementById()	通过ID获取元素	const el = document.getElementById("header");
element.classList	操作CSS类	el.classList.add("active");
element.addEventListener()	绑定事件	btn.addEventListener("click", handleClick);
localStorage	本地存储数据	localStorage.setItem("theme", "dark");
fetch()	发送网络请求（AJAX）	fetch('data.json').then(response => response.json());

【前端开发】一. html css js 初印象

一、HTML 总结（网页骨架）

二、CSS 超详细总结（网页外观）

三、JavaScript 超详细总结（网页行为）

网站公告

今日签到

热门文章

最新发布