Web前端三件套基础知识点

lastHertz
148 阅读4分钟

一、HTML基础

1. HTML文档结构

在开始HTML代码之前，我们首先来了解一个HTML文档的基本结构。以下是一个简单的HTML文档：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML文档结构</title>
</head>
<body>
    <h1>欢迎来到HTML学习</h1>
</body>
</html>

2. 标签基础

HTML使用标签来定义页面的内容。标签通常成对出现，有开始标签和结束标签，例如：<p>...</p> 表示一个段落。

二、文本内容标记

1. 标题标签

HTML提供了六种标题标签，分别是<h1>到<h6>。<h1>最大，<h6>最小。

<h1>主标题</h1>
<h2>副标题</h2>

2. 段落和换行

段落使用<p>标签，换行使用<br>标签：

<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>在这里换行<br>新的一行。</p>

3. 文本格式化标签

用于文本格式化的标签有<strong>、<em>等。例如：

<p><strong>加粗文本</strong> 和 <em>斜体文本</em></p>

4. 列表标签

HTML支持无序列表<ul>、有序列表<ol>和列表项<li>：

<ul>
    <li>无序项1</li>
    <li>无序项2</li>
</ul>
<ol>
    <li>有序项1</li>
    <li>有序项2</li>
</ol>

三、链接与图像

1. 超链接

链接使用<a>标签，并通过href属性指定链接地址：

<a href="https://www.example.com">访问示例网站</a>

2. 图像标签

使用<img>标签来插入图像，并通过src指定图像地址：

<img src="https://www.example.com/image.jpg" alt="示例图片">

四、表格

1. 表格基础结构

HTML表格使用<table>、<tr>、<td>标签构建：

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

2. 表格属性与样式

通过border属性添加边框：

<table border="1">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

五、表单

1. 表单基础

表单通过<form>、<input>等标签构建：

<form action="/submit" method="post">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

2. 表单验证与提交

在HTML中可以通过required属性进行简单的验证：

<form action="/submit" method="post">
    <input type="email" name="email" required>
    <input type="submit" value="提交">
</form>

六、HTML5新特性

1. 语义化标签

例如<header>、<footer>等标签：

<header>
    <h1>这是页头</h1>
</header>

2. 多媒体标签

HTML5提供了<audio>和<video>标签：

<video src="video.mp4" controls></video>

CSS基础

一、CSS基础

1. 引入方式

CSS可以使用<style>标签嵌入在HTML中，或通过<link>外部引用：

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

2. 语法规则

CSS使用选择器和属性-值对来定义样式：

p {
    color: red;
    font-size: 14px;
}

二、选择器

1. 基本选择器

常见的选择器包括标签选择器、类选择器和ID选择器：

/* 标签选择器 */
p {
    color: blue;
}

/* 类选择器 */
.intro {
    font-size: 18px;
}

/* ID选择器 */
#main {
    border: 1px solid black;
}

2. 组合选择器

组合选择器可以定义多个选择器的样式：

h1, h2, p {
    color: green;
}

3. 伪类选择器

伪类选择器用于定义元素的特定状态，如:hover：

a:hover {
    color: red;
}

三、盒模型

1. 内容（Content）

盒模型的核心是内容区域：

div {
    width: 100px;
    height: 100px;
}

2. 内边距（Padding）

内边距控制内容和边框之间的距离：

div {
    padding: 10px;
}

3. 边框（Border）

边框定义在内边距外部：

div {
    border: 1px solid black;
}

4. 外边距（Margin）

外边距控制元素和相邻元素之间的距离：

div {
    margin: 20px;
}

四、布局

1. display属性

display决定元素的显示方式，例如block、inline、flex等：

div {
    display: flex;
}

2. 浮动（float）

float用于图像环绕文本等：

img {
    float: left;
}

3. 定位（position）

position用于设置元素的定位方式，如absolute和relative：

div {
    position: absolute;
    top: 10px;
}

五、文本样式

1. 字体（Font）

通过font-family指定字体：

p {
    font-family: Arial, sans-serif;
}

2. 文本对齐和装饰

设置文本对齐方式和装饰：

p {
    text-align: center;
    text-decoration: underline;
}

六、背景（Background）

1. 背景颜色（Background-color）

为元素设置背景颜色：

div {
    background-color: lightblue;
}

2. 背景图像（Background-image）

通过background-image设置背景图像：

div {
    background-image: url('bg.jpg');
}

七、CSS3新特性

1. 圆角（Border-radius）

使用border-radius创建圆角效果：

div {
    border-radius: 10px;
}

2. 阴影（Box-shadow和Text-shadow）

box-shadow用于元素阴影，text-shadow用于文本阴影：

div {
    box-shadow: 5px 5px 5px gray;
}
p {
    text-shadow: 2px 2px red;
}

JavaScript基础

一、JavaScript基础

1. 引入方式

可以直接在HTML中通过<script>标签引用：

<script src="script.js"></script>

2. 语法基础

JavaScript的基本语法包括变量定义、操作符等：

let name = "小明";
console.log(name);

二、函数

1. 函数定义和调用

函数通过function关键字定义：

function greet() {
    console.log("你好！");
}
greet();

2. 作用域和闭包

JavaScript支持全局作用域和局部作用域：

function outer() {
    let a = 5;
    function inner() {
        console.log(a);
    }
    return inner;
}
let closure = outer();
closure(); // 输出5

三、对象和数组

1. 对象

对象通过键值对存储数据：

let person = {
    name: "小明",
    age: 25
};
console.log(person.name);

2. 数组

数组用来存储一组有序的数据：

let fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits[0]);

四、DOM操作

1. 获取DOM元素

通过document.getElementById、querySelector等方法获取元素：

let element = document.getElementById("myElement");

2. 修改DOM元素

可以更改元素的内容或样式：

element.innerHTML = "新内容";
element.style.color = "red";

五、事件处理

1. 事件绑定

使用addEventListener为元素添加事件处理程序：

button.addEventListener("click", function() {
    console.log("按钮被点击了！");
});

2. 常见事件类型

常见事件有click、mouseover等：

button.onclick = function() {
    console.log("按钮被点击了！");
};

课后练习作业

支付宝首页

要求：

  1. 输入账号 admin 密码 123 可以给出验证成功的提示框，然后跳转到我们博客的首页
  2. 若账号密码不符合，给出失败的提示框，并且清空文本框
avatar
文章
阅读
粉丝