HTML+CSS+JS复习回顾

天生不爱笑

已于 2024-04-25 11:00:38 修改

阅读量951

点赞数 9

文章标签： html css javascript

于 2024-04-09 22:57:54 首次发布

原文链接：https://blog.csdn.net/zheshiyangyang/article/details/137175166

版权

环境搭建

下载VScode，依次下载插件：HTML CSS support、Live Server、Auto Rename Tag

一、HTML篇

HTML通过一系列的标签（元素）来定义文本、图像、链接等。HTML标签是由尖括号包围的关键字。标签通常成对出现，包括开始标签和结束标签（双标签），内容位于两个标签之间。除双标签之外，还有单标签。

单标签用于没有内容的元素，双标签用于有内容的元素。

1、HTML文件结构

<!DOCTYPE html>

<html>

<head>

<title>前端练习项目</title>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="style.css">

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

</head>

<body>

<h1>这是一级标题</h1>

<h6>这是六级标题</h6>

<a href="https://www.baidu.com">这是一个超链接</a>

</body>

</html>

以上为一个HTML项目的大致框架，可以在空白页面打出一个！来快速生成大致框架。

2、常用标签

标题标签：

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

段落标签：

<p>这是段落标签</p>

超链接标签：

<a href=" " target=" "></a>

水平线标签：

<hr>

图片标签：

<img src=" " alt=" ">

加粗：

<b></b>

<strong></strong>

换行标签：

<br>

斜体：

<i></i>

下划线：

<u></u>

删除线：

<s></s>

无序列表：

<ul>

<li></li>

<li></li>

</ul>

有序列表：

<ol>

<li></li>

<li></li>

</ol>

表格标签：

<table border="1"> 

<th>列标题1</th> 

<th>列标题2</th>

<tr> 

<td>列1</td> 

<td>列2</td>

</tr>

</table>

3、HTML属性

基本语法：

<开始标签属性名=“属性值”>

属性名称不区分大小写，属性值区分大小写

4、HTML区块

块元素与行内元素

块元素通常用于组织和布局页面，例如段落、标题、列表、表格等。将内容分割成内容块。

块级元素包括：

<div></div>

<p></p>

<h1></h1>到<h6></h6>

<ul></ul>

<ol></ol>

<li></li>

<table></table>

<form action=""></form>

行内元素通常用于添加文本样式或为文本中的一部分应用样式，可以在文本中插入小元素。

行内元素包括：

<span></span>

<a href=""></a>

<strong></strong>

<em></em> 

<img src="" alt="">

<br>

<input type="text">

<span></span> 内联样式化文本标签

<div></div> 块级标签

5、HTML表单

<form></form>标签

<label for="">用户名：</label>

<input type="text" placeholder="请输入用户名">

label只能与input搭配使用

二、CSS篇

CSS即层叠样式表，用于定义网页样式和布局的样式表语言。

CSS语法：通常由选择器、属性和属性值组成。

选择器{

属性1:属性值1;

属性2:属性值2;

}

选择器的声明中可以写无数条属性，声明的每一行需要以英文分号结尾，声明中的所有属性和值都是以键值对的形式出现的。

1、样式表

三种样式表的导入方式的优先级：优先级高的会覆盖掉优先级低的

内联样式 > 内部样式表 > 外部样式表

内部样式：

<h2 style="color: brown;font-size: 25px;">这是一个二级标签，应用了内部样式表</h2>

将属性与属性值的键值对，直接写在标签中

内联样式表：将属性与属性值的键值对写在<style></style>标签中，不用对标签进行属性修改

外联样式表：将属性与属性值的键值对写在外部CSS文件中，<head></head>标签中使用<link>标签进行引用。

2、选择器

元素选择器：选择标签

类选择器

.类名 {

}

ID选择器

#ID名 {

}

通用选择器：选择所有元素

* {

}

子元素选择器

.类名1 > .类名2 {

}

后代选择器(包含选择器)

.类名1 标签 {

}

并集选择器(兄弟选择器)

标签1 + 标签2{

}

伪类选择器：选中特定状态

#ID名：hover{

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="demo.css">
    <style>
        /*元素选择器*/
        h1 {
            color: aqua;
        }
        /*类选择器*/
        .header {
            font-size: large;
            color: blue;
        }
        /*ID选择器*/
        #elemID {
            font-size: x-large;
            color: burlywood;
        }
        /*通用选择器*/
        
        /*子元素选择器*/
        .header > .header1 {
            font-size: 30px;
            color: blueviolet;
        }
        /*并集选择器*/
        div + h6 {
            font-size: 15px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        /*伪类选择器*/
        #elemID:hover {
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <h1>这是元素选择器</h1>
    <p class="header">这是类选择器</p>
    <div class="header">
        <p class="header1">这是子元素选择器</p>
    </div>
    <div>
        <h6>这是并集选择器</h6>
    </div>
    <p id="elemID">这是ID选择器</p>
</body>
</html>

3、CSS常用属性

详情见菜鸟教程：CSS 教程 | 菜鸟教程

4、盒子模型

盒子实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        .demo {
            height: 200px;
            width: 300px;
            color: aqua;
            background-color: rgb(217, 255, 0);
            border-style: solid;
            border-width: 10px;
        }
        .demo-font {
            display: inline-block;
            color: aquamarine;
            background-color: darkgray;
            height: 600px;
            width: 600px;
            border: 5px;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div class="demo">
        <p style="color: blueviolet;position: absolute;">这是一个盒子</p>
    </div>
    <div class="demo-font">
        这是另一个盒子
    </div>
</body>
</html>

5、浮动

浮动的三大特性：

脱标：脱离标准流

一行显示，顶部对齐

具备行内块元素特性

浮动实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子浮动</title>
    <style>
        .father {
            background-color: aquamarine;
            border: 5px;
            overflow: hidden;
        }
        .left {
            height: 100px;
            width: 100px;
            border: 2px;
            color: blueviolet;
            background-color: aliceblue;
            float: left;
        }
        .right {
            height: 100px;
            width: 100px;
            border: 2px;
            color: bisque;
            background-color: chartreuse;
            float: right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left">盒子1</div>
        <div class="right">盒子2</div>
    </div>
</body>
</html>

6、定位

定位布局可以精准定位，但是缺乏灵活性。

定位方式：

相对定位：相对于元素在文档流中的正常位置进行定位

position: relative;

绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流

position: absolute;

固定定位：相对于浏览器窗口进行定位，不占据文档流，固定在屏幕上的位置，不随滚动而移动。

position: fixed;

定位实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位练习</title>
    <style>
        .box1 {
            height: 350px;
            background-color: aqua;
        }
        .box-normal {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        .box-relative {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            left: 120px;
            top: 40px;
        }
        .box-absolute {
            width: 100px;
            height: 100px;
            background-color:black;
            position: absolute;
            left: 120px;
            top: 50px;
        }

        .box-fixed {
            width: 100px;
            height: 100px;
            background-color:brown;
            position: fixed;
            right: 0;
            top: 300px;
        }
    </style>
</head>
<body>
    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative"></div>
        <div class="box-normal"></div>
    </div>

    <h1>绝对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-absolute"></div>
        <div class="box-normal"></div>
    </div>

    <h1>固定定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-fixed"></div>
        <div class="box-normal"></div>
    </div>
</body>
</html>

三、JavaScript篇

JavaScript是一种轻量级、解释型、面向对象的脚本语言。用于在网页上实现动态效果，增加用户和网页的互动性。JavaScript可以嵌入HTML，并在浏览器执行。

1、JavaScript的作用

客户代表脚本：用于在用户浏览器中执行，实现动态效果和用户交互

网页开发：与HTML和CSS协同工作，使网页具有更强的交互性和动态性

后端开发：使用Node.js、JavaScript可以在服务器端运行，实现服务器端应用开发

JavaScript的导入方式：

内联样式和外联样式

导入实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Js的导入</title>

</head>
<body>
    <script>
        console.log("你好！");
        alert("你好，内联样式！");
    </script>
</body>
    <script src="JavaScript.js"></script>
</html>

/*打印Hello，World*/

console.log("Hello,World!");
alert("你好，外联样式！");

2、JavaScript功能语句

<1>条件语句

if()

else if()

else

<2>循环语句

while循环：

while（）{

}

for循环

for（ 1；2 ；3 ）{

}

基本语法与C语言一样。

continue 与 break 的区别：

continue仅用于跳出本次循环，不再执行continue后的语句，跳出本次循环，执行下次循环的条件判断语句。

break用于永久终止循环，不再执行break后的语句，跳出当前循环。

3、函数

函数是一段可重复使用的代码块，它接受输入（参数）、执行特定任务，并返回输出。

函数声明：

function 函数名（参数表列）{

}

4、事件

事件是文档或浏览器窗口中发生的特定瞬间，例如用户的点击、键盘的按下、页面的加载等。

<1>事件绑定：

JavaScript绑定事件的方法有三种：HTML属性、DOM属性、addEventListener方法

HTML属性下的事件绑定：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML属性事件绑定</title>

    <script src="JavaScript.js"></script>
</head>
<body>
    <button onclick="click_event()">这是一个点击事件按钮</button>
    <input type="text" onfocus="focus_event()" onblur="blur_event()">
</body>
</html>

JS代码：

//点击事件

function click_event(){
    alert("点击事件发生了!");
}

//聚焦事件

function focus_event(){
    console.log("获取焦点");
}

//失去焦点事件

function blur_event(){
    console.log("失去焦点");
}

效果如下：