🧐

large picture of the cover

DotNetASP前置知识_前端入门(暂时完结)更具需求学习vue

前端开发笔记

目录

  1. HTML基础

  2. CSS样式

  3. JavaScript编程

  4. 移动端适配

  5. Flex弹性布局

  6. 表格增删改查项目

一、HTML基础

1. HTML简介

HTML（超文本标记语言）是构建网页的标准标记语言，由一系列标签组成，定义了网页的内容结构。

2. 常用文本标签

  • <h1>到<h6>：标题标签

  • <p>：段落文本

  • <strong>：加粗文本（语义化强调）

  • <em>：斜体文本（语义化强调）

  • <span>：行内容器

  • <a>：超链接

  • <img>：图像

  • <ul>/<ol>/<li>：列表

3. 标签属性

属性提供标签的附加信息：

html

<a href="https://example.com" target="_blank">链接</a>
<img src="image.jpg" alt="描述文字">

4. 块元素和行内元素

块元素

行内元素

独占一行

可与其他元素同行

可设置宽高

宽高由内容决定

可包含块/行内元素

只能包含行内元素

如：div, h1, p, ul

如：span, a, strong

5. HTML表单

用于用户输入数据：

html

<form action="/submit" method="POST">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="pwd">
  <input type="submit" value="提交">
</form>

二、CSS样式

1. CSS简介和导入方式

层叠样式表用于控制网页表现：

  • 内联样式：<p style="color:red;">

  • 内部样式表：<style> p {color:red;} </style>

  • 外部样式表：<link rel="stylesheet" href="styles.css">

2. CSS选择器

选择器类型

示例

描述

元素选择器

p

选择所有<p>元素

类选择器

.intro

选择class="intro"的元素

ID选择器

#header

选择id="header"的元素

属性选择器

[type="text"]

选择特定属性的元素

伪类选择器

:hover

鼠标悬停状态

3. CSS常用属性

css

/* 文本属性 */
color: #333;
font-size: 16px;
text-align: center;

/* 背景属性 */
background-color: #f0f0f0;
background-image: url("bg.jpg");

/* 盒子模型 */
width: 200px;
height: 100px;
margin: 10px auto;
padding: 20px;
border: 1px solid #ddd;

4. 盒子模型

https://www.w3schools.com/css/box-model.png

  • Content：实际内容

  • Padding：内边距

  • Border：边框

  • Margin：外边距

5. 浮动

使元素向左/右浮动，常用于布局：

css

.img-float {
  float: left;
  margin-right: 15px;
}

清除浮动：clear: both;

6. 定位

  • static：默认定位

  • relative：相对自身定位

  • absolute：相对最近定位父元素

  • fixed：相对视口定位

  • sticky：滚动定位

三、JavaScript编程

1. JS简介

JavaScript 是网页的脚本语言，用于实现交互功能。

2. 变量和数据类型

javascript

// 变量声明
let name = "Decade";
const PI = 3.14;

// 数据类型
typeof "Hello";    // string
typeof 42;         // number
typeof true;       // boolean
typeof undefined;  // undefined

3. 分支循环语句

javascript

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

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

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

4. 函数定义使用

javascript

// 函数定义
function sum(a, b) {
  return a + b;
}

// 函数调用
sum(3, 5); // 返回8

5. 事件

常见事件：

  • onclick：点击事件

  • onmouseover：鼠标移入

  • onkeydown：键盘按下

  • onload：页面加载完成

6. DOM操作

文档对象模型（DOM）是HTML文档的编程接口：

javascript

// 获取元素
document.getElementById("myId");

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

// 修改内容
element.innerHTML = "新内容";

// 添加事件
element.addEventListener("click", myFunction);

四、移动端适配

rem适配方案

  1. 设置视口标签：

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  1. 根元素字体大小：

css

html {
  font-size: 16px; /* 基准值 */
}

/* 媒体查询适配 */
@media screen and (max-width: 480px) {
  html {
    font-size: 14px;
  }
}

  1. 使用rem单位：

css

.box {
  width: 10rem; /* 10 × 根字体大小 */
  padding: 1.5rem;
}

五、Flex弹性布局

容器属性

css

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

项目属性

css

.item {
  flex: 1; /* 分配剩余空间 */
  order: 2; /* 排列顺序 */
  align-self: flex-end; /* 单独对齐方式 */
}

六、表格增删改查项目

HTML结构

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格增删改查</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #dddddd;
            text-align: center;
            padding: 10px;
        }
        th {
            background-color: #f2f2f2;
        }
        button {
            padding: 5px 10px;
            margin: 0 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">表格的增删改查</h1>
    <button id="addData" onclick="addData()">新增数据</button>
    <table id="dataTable">
        <tr>
            <th>姓名</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>Decade</td>
            <td>12231</td>
            <td>
                <button onclick="editRow(this)">编辑</button>
                <button onclick="deleteRow(this)">删除</button>
            </td>
        </tr>
    </table>
    <script src="script.js"></script>
</body>
</html>

JavaScript功能实现

javascript

// 新增数据行
function addData() {
    const table = document.getElementById('dataTable');
    const newRow = table.insertRow(table.rows.length);
    
    const nameCell = newRow.insertCell(0);
    const telCell = newRow.insertCell(1);
    const actionCell = newRow.insertCell(2);
    
    nameCell.textContent = "未命名";
    telCell.textContent = "未知联系方式";
    actionCell.innerHTML = `
        <button onclick="editRow(this)">编辑</button>
        <button onclick="deleteRow(this)">删除</button>
    `;
}

// 删除行
function deleteRow(button) {
    const row = button.parentNode.parentNode;
    row.parentNode.removeChild(row);
}

// 编辑行内容
function editRow(button) {
    const row = button.parentNode.parentNode;
    const name = row.cells[0];
    const tel = row.cells[1];
    
    const newName = prompt('请输入姓名:', name.textContent);
    if (newName !== null) name.textContent = newName;
    
    const newTel = prompt('请输入电话:', tel.textContent);
    if (newTel !== null) tel.textContent = newTel;
}

功能说明

  1. 新增数据：点击"新增数据"按钮添加空行

  2. 编辑数据：点击"编辑"按钮修改姓名和电话

  3. 删除数据：点击"删除"按钮移除当前行

  4. 响应式设计：表格自动适应屏幕宽度

  5. 用户友好：使用确认对话框防止误操作


不会做游戏

site logo

Hi,Friend

© 2025 🧐