前端基础知识详解：HTML CSS JavaScript

结构之间的关系构成一个DOM 树。

建议使用现代代码编辑器（如 VS Code）进行开发，功能丰富且支持多平台。

HTML 常用标签

段落标签：p

原本内容不会自动换行，可以使用 p 进行换行。

<p>这是一个段落</p>
<p>这是一个段落</p>

1. p 标签描述的段落，没有缩进。
2. 内容首尾部出换行，这里空格是无效的。
3. html 里面换行不是真的换行，换行需要使用对应标签。

换行标签：br

br 是一个单标签，间隙没有 p 标签大。

换行标签<br/>
<p>这是一个段落</p>
<p>这是一个段落</p>

p 是段落标签，换行以后每一段之间有一行间距；br 换行标签，所以行之间没有间距隔开。

图片标签：img

<img src="../xingye.jpg" alt="这是一个人物" width="500px" height="500px" style="border: 2px solid black;">

src 表示图片路径，alt 表示图片未正常显示时显示的内容。 可以使用绝对路径或相对路径（../ 表示上一级目录）。以 html 所在位置为基准查找图片。

超链接：a

href：点击后跳转哪个页面。 target：打开方式。默认是 _self。如果是 _blank 则用新标签页打开。

外部链接：

<a href="https://wap.baidu.com/">百度</a>

内部连接：网站内部之间的链接，写相对路径即可。

<a href="demo1.html" target="_blank">点击后会跳转到 demo1.html</a>

空链接：使用 # 在 href 中占位。

<a href="#">空链接</a>

表格标签 table

table 标签：表示整个表格。 tr：表示表格的一行。 td：表示一个单元格。 thead：表格的头部区域。 tbody：表格的主体区域。

align：表格对齐方式。 border：边框。 cellpadding：内容距离边框的距离。 cellspacing：单元格之间的距离。 width/height：设置尺寸。 rowspan：占据多少行。 colspan：占据多少列。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="500">
    <tr><td>名字</td><td>性别</td><td>年龄</td></tr>
    <tr><td>张三</td><td>男</td><td rowspan="2">18</td></tr>
    <tr><td>李四</td><td>女</td></tr>
    <tr><td colspan="2">李四</td></tr>
</table>

表单标签

form

<form action="test.html">
    <!-- form 内容 -->
</form>

input & label

各种输入控制，文本框，按钮，单选框，复选框。 type：text, button, checkbox, file, radio 等。 name：给 input 起个名字，尤其是单选按钮，必须有相同名字才可以是单选。 value：input 中的默认值。 checked：默认被选中，用于单选和复选按钮中。

<form action="test.html">
    账号：<input type="text" name="Users" id="">
    密码：<input type="password" name="password" id="">
    性别：
    <input type="radio" name="sex" id="male" value="0"><label for="male">男</label>
    <input type="radio" name="sex" id="female" value="1"><label for="female">女</label>
</form>

checkbox

复选框。

<input type="checkbox" name="chec">吃饭
<input type="checkbox" name="chec">睡觉
<input type="checkbox" name="chec">打游戏

select 标签

<select name="sel" id="">
    <option value="0">小学</option>
    <option value="1">初中</option>
    <option value="2">高中</option>
    <option value="3" selected="selected">高中及以上</option>
</select>

textarea & button

文本域和按钮。

简介：<textarea rows="10" cols="100"></textarea>
注册：<input type="button" value="注册">
<input type="submit" value="注册">

button 按钮没有提交功能，submit 会提交。

案例：用户注册表格

<h1>用户注册</h1>
<table>
    <tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr>
    <tr><td>手机号</td><td><input type="number" placeholder="请输入手机号"></td></tr>
    <tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr>
</table>
<div>
    <input type="submit" value="注册">
    <span>已有账号?</span>
    <a href="#">登录</a>
</div>

CSS

CSS (Cascading Style Sheet)，层叠样式表，用于控制页面的样式。 CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。

CSS 引入方式

选择器 + { 声明 }。选择器确定修改谁，声明决定修改成啥。

1. 内部样式

通常放到 head 中。

<style>
p{color: red}
div{color: rgb(180, 220, 22)}
span{color: blue}
</style>

2. 外部样式

将 style 放到一个 css 文件中，然后引用。

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

3. 行内样式

在标签里面进行样式控制。

<p style="color: red;">一个段落</p>

CSS 选择器

1. 标签选择器

a{color: red;}
div{color: green;}

2. 类选择器

.red{color: red;}
.blue{color: blue;}

使用 class 调用。

3. ID 选择器

#div1{font-size: 32px;}

4. 通配符

*{color: #ff0000;}

5. 复合选择器

ul a{color: red;} /* 子孙 */
li > a{color: red;} /* 直接子元素 */

常用的 CSS

颜色与字体

.text{color: red;}
.text{font-size: 32px;}

border 边框

border-width：设置边框粗细。 border-style：设置边框类型（dotted, solid, double, dashed）。 border-color：设置边框颜色。

div{border: red solid 1px;}

width / height

只有块级元素（h1-h6, p, div 等）独占一行，才可以设置宽高。 行内元素（a, span）不独占一行，不可以设置宽高。

span{display: block;}

可以将行内元素修改为块级元素。

padding

设置内容和边框之间的距离。

margin

外边距，设置元素和元素之间的距离。

JavaScript

JavaScript (简称 JS)，是一个脚本语言，解释型或即时编译型的编程语言。 HTML：网页的结构 (骨)。 CSS：网页的表现 (皮)。 JavaScript：网页的行为 (魂)。

引入方式

1. 行内样式：onclick 等事件属性。
2. 内部样式：script 标签放在 body 或 head 中。
3. 外部样式：script src="js.js"。

基础语法

数据类型

命名规则：组成字符可以是任何字母、数字、下划线 (_) 或美元符号 ($)。 数字不能开头，建议使用大驼峰。 JavaScript 是一门动态弱类型语言，var 类型可以放不同类型的值。

var name = 'zhangsan';
console.log(typeof name);
name = 12;
console.log(typeof name);

运算符

== 比较相等，会进行隐式类型转化。 === 比较相等，不会进行隐式类型转化。

JavaScript 对象

数组

var arr = new Array();
var arr2 = [];
var arr3 = [1, 2, 'hello', true];

增删查改：

// 查找
arr3.length
// 增
arr3[4] = 123;
// 改
arr3[3] = false;
// 删
arr3.splice(3, 1);

函数

function hello(){
    console.log('hello');
}
hello();

参数匹配问题：参数少会出现未定义，参数多会截取。

对象

var student = {
    name: '张三',
    age: 18,
    sayHello: function(){
        console.log("hello");
    }
};

JQuery

JQuery 是一个快速、简洁且功能丰富的 JavaScript 框架，提供了选择器和 DOM 操作。

<script src="jquery-3.7.1.js"></script>

$( ) 是 JQuery 提供的一个全局函数，用于选择和操作 HTML 元素。

$(document).ready(function() {
    $('button').click(function() {
        $(this).hide();
    });
});

JQuery 选择器

以$开头，可以通过标签、class、id 进行选择。

JQuery 事件

事件组成：事件源、事件类型、事件处理程序。

操作元素

获取和修改元素内容：

$('#div').html(); // 获取/设置 HTML
$('#input').val(); // 获取/设置表单值
$('#div').text(); // 获取/设置文本

获取/设置元素属性：

$('#jd').attr("href");
$('#jd').attr("href", "https://www.baidu.com/");

获取/设置 CSS 属性：

$('div').css('color');
$('div').css('color', 'blue');

添加元素

append()：尾部插入。 prepend()：头部插入。 after()：之后插入。 before()：之前插入。

删除元素

remove()：删除被选元素及其子元素。 empty()：删除被选元素的子元素。

猜数字案例

每次要输入猜的数字，点击猜这个按钮，就会猜的次数++，结果显示猜大了还是猜小了。 点击重新开始就会重新生成 1~100 之间的数字，猜的次数重置为 0。

逻辑：

1. 先生成一个随机数。
2. 获取其输入框中内容进行比较输出结果。
3. 猜对了以后，可以点击重新开始游戏进行将一些数据重置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>
    <script src="jquery-3.7.1.js"></script>
</head>
<body>
    <div style="margin: 0 auto; width: 500px;">
        <button id="reset">从新开始游戏</button><br/>
        请输入要猜的数字：<input type="number" id="inputNum"><br/>
        <button id="guess">猜</button><br/>
        已经猜的次数：<span id="count"> 0 </span><br/>
        结果：<span id="result"></span>
    </div>
    <script>
        let randNum = Math.floor(Math.random()*100)+1;
        let count = 0;
        $('#guess').click(function(){
            count++;
            $('#count').text(count);
            let inputNum = $('#inputNum').val();
            if(inputNum < randNum){
                $('#result').text("猜小了");
                $('#result').css('color','red');
            } else if(inputNum > randNum){
                $('#result').text("猜大了");
                $('#result').css('color','red');
            } else {
                $('#result').text("猜对了");
                $('#result').css('color','green');
            }
        });
        $('#reset').click(function(){
            count = 0;
            randNum = Math.floor(Math.random()*100)+;
            $().();
            $().(count);
            $().();
        });
    </script>
</body>
</html>