网站前端设计三件套html css和javaScript简明教程

原创

zzh-dahai

发布于 2025-07-03 16:16:14

6730

HTML 语言简明教程

1. HTML 简介

HTML (HyperText Markup Language) 是用于创建网页的标准标记语言。

HTML 不是编程语言，而是标记语言
使用标签来描述网页内容
文件扩展名为 .html 或 .htm
由浏览器解析并渲染成可视化页面

2. 基本结构

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 页面内容放在这里 -->
</body>
</html>

<!DOCTYPE html> 声明文档类型
<html> 根元素
<head> 包含元信息(标题、字符集、样式等)
<body> 包含可见内容

3. 常用标签

文本标签

<h1>一级标题</h1>  <!-- 标题h1-h6 -->
<p>段落文本</p>
<strong>加粗文本</strong>
<em>斜体文本</em>
<br>  <!-- 换行 -->
<hr>  <!-- 水平线 -->

链接与图片

<a href="https://example.com">链接文本</a>
<img src="image.jpg" alt="图片描述" width="200">

列表

<ul>  <!-- 无序列表 -->
    <li>项目1</li>
    <li>项目2</li>
</ul>

<ol>  <!-- 有序列表 -->
    <li>第一项</li>
    <li>第二项</li>
</ol>

表格

<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

表单

<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br>
    
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email"><br>
    
    <input type="submit" value="提交">
</form>

4. 常用表单元素

<input type="text">  <!-- 文本输入 -->
<input type="password">  <!-- 密码输入 -->
<input type="checkbox">  <!-- 复选框 -->
<input type="radio">  <!-- 单选按钮 -->
<input type="file">  <!-- 文件上传 -->
<select>  <!-- 下拉列表 -->
    <option>选项1</option>
    <option>选项2</option>
</select>
<textarea rows="4" cols="50"></textarea>  <!-- 多行文本 -->

5. 块级与行内元素

块级元素：独占一行，可设置宽高
- <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <table>
行内元素：不独占一行，不可设置宽高
- <span>, <a>, <strong>, <em>, <img>, <input>

6. HTML5 新增元素

<header>页眉</header>
<nav>导航</nav>
<section>文档章节</section>
<article>独立内容</article>
<aside>侧边栏</aside>
<footer>页脚</footer>

<video width="320" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

7. 全局属性

id - 唯一标识
class - 类名(可重复)
style - 内联样式
title - 提示文本
data-* - 自定义数据属性

8. 注释与特殊字符

<!-- 这是HTML注释 -->

<!-- 特殊字符 -->
&amp; &lt; &gt; &quot; &nbsp;

9. 最佳实践

使用语义化标签
保持代码缩进和格式一致
为图片添加alt属性
使用小写标签和属性
始终闭合标签
使用UTF-8字符编码

10. 下一步学习

掌握HTML基础后，可以学习：

CSS - 样式设计
JavaScript - 交互功能
响应式设计 - 适应不同设备
HTML5 API - 地理位置、本地存储等

示例完整页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
        <nav>
            <a href="#home">首页</a> |
            <a href="#about">关于</a> |
            <a href="#contact">联系</a>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>主页内容</h2>
            <p>这是我的第一个HTML页面。</p>
            <img src="image.jpg" alt="示例图片" width="300">
        </section>
        
        <section id="about">
            <h2>关于我们</h2>
            <p>我们是一个学习HTML的团队。</p>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2023 我的网站. 保留所有权利.</p>
    </footer>
</body>
</html>

CSS 语言简明教程

1. CSS 简介

CSS (Cascading Style Sheets) 是用于描述HTML文档样式的样式表语言。

控制网页的外观和布局
实现内容与表现的分离
支持响应式设计
与HTML和JavaScript并称网页开发三大核心技术

2. 基本语法

selector {
    property: value;
    property: value;
}

p {
    color: blue;
    font-size: 16px;
}

3. 引入CSS的三种方式

内联样式 (不推荐)

<p style="color: red;">红色文字</p>

内部样式表

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

外部样式表 (推荐)

<head>
    <link rel="stylesheet" href="styles.css">
</head>

4. 选择器

基本选择器

/* 元素选择器 */
p { color: red; }

/* 类选择器 */
.classname { color: blue; }

/* ID选择器 */
#idname { color: green; }

/* 通用选择器 */
* { margin: 0; }

组合选择器

/* 后代选择器 */
div p { color: red; }

/* 子元素选择器 */
div > p { color: blue; }

/* 相邻兄弟选择器 */
h1 + p { color: green; }

/* 通用兄弟选择器 */
h1 ~ p { color: purple; }

属性选择器

/* 存在属性 */
a[target] { color: red; }

/* 精确匹配 */
a[target="_blank"] { color: blue; }

/* 包含字符串 */
[class*="example"] { color: green; }

伪类选择器

a:hover { color: orange; }
li:nth-child(2) { color: red; }
input:focus { background: yellow; }

伪元素选择器

p::first-line { color: blue; }
p::before { content: "→ "; }
p::after { content: " ←"; }

5. 常用属性

文本样式

p {
    color: #333333;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    line-height: 1.5;
}

背景样式

div {
    background-color: #f0f0f0;
    background-image: url("image.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

盒模型

.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
    box-sizing: border-box; /* 包括padding和border在内计算宽度 */
}

定位

.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

.absolute {
    position: absolute;
    top: 0;
    right: 0;
}

.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
}

.sticky {
    position: sticky;
    top: 0;
}

弹性布局 (Flexbox)

.container {
    display: flex;
    justify-content: center; /* 主轴对齐 */
    align-items: center; /* 交叉轴对齐 */
    flex-direction: row; /* 主轴方向 */
    flex-wrap: wrap; /* 换行 */
}

.item {
    flex: 1; /* 弹性比例 */
    order: 2; /* 顺序 */
    align-self: flex-end; /* 单个项目对齐 */
}

网格布局 (Grid)

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px auto;
    gap: 10px;
}

.item {
    grid-column: 1 / 3;
    grid-row: 1;
}

6. 过渡与动画

.button {
    transition: all 0.3s ease;
}

.button:hover {
    background: blue;
    transform: scale(1.1);
}

关键帧动画

@keyframes slidein {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.element {
    animation: slidein 1s forwards;
}

7. 响应式设计

媒体查询

/* 小于600px时应用 */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

/* 打印样式 */
@media print {
    nav {
        display: none;
    }
}

视口单位

.header {
    height: 100vh; /* 视口高度的100% */
    width: 100vw; /* 视口宽度的100% */
    font-size: 5vmin; /* 视口较小尺寸的5% */
}

8. CSS变量

:root {
    --main-color: #06c;
    --padding: 15px;
}

.element {
    color: var(--main-color);
    padding: var(--padding);
}

9. 预处理器 (Sass/SCSS)

// 变量
$primary-color: #333;

// 嵌套
nav {
    ul {
        margin: 0;
        li { display: inline-block; }
    }
}

// 混合
@mixin border-radius($radius) {
    border-radius: $radius;
}

.box { @include border-radius(10px); }

10. 最佳实践

使用外部样式表
遵循一致的命名规范 (如BEM)
避免使用!important
合理组织CSS结构
使用CSS重置或标准化
考虑浏览器兼容性
使用开发者工具调试
保持代码简洁和模块化

示例完整样式表

/* 重置和基本样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f4f4f4;
}

/* 布局 */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 导航 */
.navbar {
    background: #333;
    color: white;
    padding: 15px 0;
}

.navbar__list {
    display: flex;
    list-style: none;
}

.navbar__item {
    margin-right: 20px;
}

.navbar__link {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.navbar__link:hover {
    color: #06c;
}

/* 卡片组件 */
.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.card__title {
    color: #06c;
    margin-bottom: 15px;
}

/* 按钮 */
.btn {
    display: inline-block;
    background: #06c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn:hover {
    background: #0056b3;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .navbar__list {
        flex-direction: column;
    }
    
    .navbar__item {
        margin: 10px 0;
    }
}

通过这个教程，您已经掌握了CSS的核心概念。接下来可以通过实践项目来巩固所学知识，并探索更高级的CSS技术和框架如Bootstrap、Tailwind等。

JavaScript 语言简明教程

1. JavaScript 简介

JavaScript 是一种轻量级的解释型编程语言，主要用于网页交互。

与 HTML 和 CSS 并称网页开发三大核心技术
最初由 Netscape 开发，现遵循 ECMAScript 标准
可以在浏览器中直接运行，无需编译
支持面向对象、函数式和命令式编程风格

2. 基本语法

变量声明

let x = 5;          // 可重新赋值
const y = 10;       // 常量，不可重新赋值
var z = 15;         // 旧式声明(避免使用)

数据类型

// 原始类型
let num = 10;       // 数字
let str = "Hello";  // 字符串
let bool = true;    // 布尔值
let n = null;       // null
let u = undefined;  // undefined
let sym = Symbol(); // Symbol (ES6)

// 对象类型
let obj = { name: "John" };  // 对象
let arr = [1, 2, 3];        // 数组
let func = function() {};    // 函数

3. 运算符

// 算术运算符
let sum = 5 + 3;    // 8
let diff = 5 - 3;   // 2
let prod = 5 * 3;   // 15
let quot = 6 / 3;   // 2
let mod = 7 % 3;    // 1
let exp = 2 ** 3;   // 8 (ES6)

// 比较运算符
5 == "5";   // true (宽松相等)
5 === "5";  // false (严格相等)

// 逻辑运算符
true && false;  // AND → false
true || false;  // OR → true
!true;          // NOT → false

4. 控制结构

条件语句

if (age >= 18) {
    console.log("成年人");
} else if (age >= 13) {
    console.log("青少年");
} else {
    console.log("儿童");
}

// 三元运算符
let status = (age >= 18) ? "成年人" : "未成年人";

循环

// for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while 循环
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// for...of (ES6)
for (let item of array) {
    console.log(item);
}

// for...in (遍历对象属性)
for (let key in object) {
    console.log(key, object[key]);
}

5. 函数

函数声明

function greet(name) {
    return "Hello, " + name;
}

// 函数表达式
const greet = function(name) {
    return "Hello, " + name;
};

// 箭头函数 (ES6)
const greet = (name) => "Hello, " + name;

默认参数 (ES6)

function greet(name = "Guest") {
    return "Hello, " + name;
}

剩余参数 (ES6)

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b);
}

6. 对象和数组

对象

const person = {
    name: "John",
    age: 30,
    greet() {
        console.log("Hello");
    }
};

// 访问属性
person.name;        // "John"
person["age"];      // 30
person.greet();     // 调用方法

// 解构赋值 (ES6)
const { name, age } = person;

数组

const fruits = ["Apple", "Banana"];

// 常用方法
fruits.push("Orange");      // 添加元素
fruits.pop();               // 移除最后一个元素
fruits.map(item => item.toUpperCase()); // 映射新数组
fruits.filter(item => item.startsWith("A")); // 过滤

// 解构赋值 (ES6)
const [first, second] = fruits;

7. 面向对象编程

类 (ES6)

class Person {
    constructor(name) {
        this.name = name;
    }
    
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Student extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }
    
    study() {
        console.log(`${this.name} is studying`);
    }
}

const student = new Student("Alice", "A");
student.greet();

8. 异步编程

回调函数

function fetchData(callback) {
    setTimeout(() => {
        callback("Data received");
    }, 1000);
}

fetchData(data => console.log(data));

Promise

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data received");
            // 或 reject("Error occurred");
        }, 1000);
    });
}

fetchData()
    .then(data => console.log(data))
    .catch(error => console.error(error));

async/await (ES8)

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

9. DOM 操作

// 选择元素
const btn = document.getElementById("myButton");
const divs = document.querySelectorAll(".myClass");

// 事件监听
btn.addEventListener("click", function(event) {
    console.log("Button clicked");
});

// 修改内容
document.getElementById("title").textContent = "New Title";

// 创建元素
const newDiv = document.createElement("div");
newDiv.textContent = "Hello";
document.body.appendChild(newDiv);

// 修改样式
element.style.color = "blue";
element.classList.add("active");

10. 现代 JavaScript (ES6+)

模板字符串

const name = "John";
console.log(`Hello, ${name}`);  // Hello, John

展开运算符

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }

模块化

// math.js
export const PI = 3.14;
export function sum(a, b) { return a + b; }

// app.js
import { PI, sum } from './math.js';

11. 错误处理

try {
    // 可能出错的代码
    const result = riskyOperation();
    console.log(result);
} catch (error) {
    // 处理错误
    console.error("An error occurred:", error.message);
} finally {
    // 无论是否出错都会执行
    console.log("Operation attempted");
}

12. 最佳实践

使用 const 和 let 代替 var
使用严格模式 ("use strict")
遵循一致的代码风格
使用有意义的变量名
避免全局变量
编写模块化代码
添加适当的注释
使用版本控制 (如 Git)
编写单元测试
持续学习和跟进新特性

示例完整脚本

"use strict";

// 购物车模块
class ShoppingCart {
    constructor() {
        this.items = [];
    }
    
    addItem(product, quantity = 1) {
        const existingItem = this.items.find(item => item.id === product.id);
        
        if (existingItem) {
            existingItem.quantity += quantity;
        } else {
            this.items.push({ ...product, quantity });
        }
        
        this.updateUI();
    }
    
    calculateTotal() {
        return this.items.reduce(
            (total, item) => total + (item.price * item.quantity), 
            0
        );
    }
    
    updateUI() {
        const cartElement = document.getElementById("cart");
        const totalElement = document.getElementById("total");
        
        cartElement.innerHTML = this.items
            .map(item => `
                <div class="cart-item">
                    <span>${item.name}</span>
                    <span>${item.quantity} × $${item.price}</span>
                </div>
            `)
            .join("");
            
        totalElement.textContent = `Total: $${this.calculateTotal().toFixed(2)}`;
    }
}

// 初始化
document.addEventListener("DOMContentLoaded", () => {
    const cart = new ShoppingCart();
    const products = [
        { id: 1, name: "Laptop", price: 999 },
        { id: 2, name: "Phone", price: 699 },
        { id: 3, name: "Tablet", price: 399 }
    ];
    
    // 添加事件监听器
    document.querySelectorAll(".add-to-cart").forEach(button => {
        button.addEventListener("click", function() {
            const productId = parseInt(this.dataset.id);
            const product = products.find(p => p.id === productId);
            cart.addItem(product);
        });
    });
});

通过这个教程，您已经掌握了JavaScript的核心概念。接下来可以通过构建实际项目来巩固所学知识，并探索更高级的主题如框架(React, Vue等)、Node.js后端开发和TypeScript等。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

网页制作

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

网页制作

登录后参与评论

0 条评论

热度

网站前端设计三件套html css和javaScript简明教程

网站前端设计三件套html css和javaScript简明教程

HTML 语言简明教程

1. HTML 简介

2. 基本结构

3. 常用标签

文本标签

链接与图片

列表

表格

表单

4. 常用表单元素

5. 块级与行内元素

6. HTML5 新增元素

7. 全局属性

8. 注释与特殊字符

9. 最佳实践

10. 下一步学习

示例完整页面

CSS 语言简明教程

1. CSS 简介

2. 基本语法

3. 引入CSS的三种方式

内联样式 (不推荐)

内部样式表

外部样式表 (推荐)

4. 选择器

基本选择器

组合选择器

属性选择器

伪类选择器

伪元素选择器

5. 常用属性

文本样式

背景样式

盒模型

定位

弹性布局 (Flexbox)

网格布局 (Grid)

6. 过渡与动画

关键帧动画

7. 响应式设计

媒体查询

视口单位

8. CSS变量

9. 预处理器 (Sass/SCSS)

10. 最佳实践

示例完整样式表

JavaScript 语言简明教程

1. JavaScript 简介

2. 基本语法

变量声明

数据类型

3. 运算符

4. 控制结构

条件语句

循环

5. 函数

函数声明

默认参数 (ES6)

剩余参数 (ES6)

6. 对象和数组

对象

数组

7. 面向对象编程

类 (ES6)

8. 异步编程

回调函数

Promise

async/await (ES8)

9. DOM 操作

10. 现代 JavaScript (ES6+)

模板字符串

展开运算符

模块化

11. 错误处理

12. 最佳实践

示例完整脚本

社区

活动