快速入门 HTML CSS JS （附带简单案例）

快速入门HTML + CSS + JS

HTML

HTML是网页内容的标准标记语言，用于定义网页的结构和内容。它由一系列的元素（elements）组成，这些元素可以包含文本、图片、链接以及其他媒体内容。

1. 简单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello Html!</h1>
</body>
</html>

在这里插入图片描述

2. 常用标签

标题标签：

<h1>我是一个一级标题</h1>
<h2>我是一个二级标题</h2>
<h3>我是一个三级标题</h3>
<h4>我是一个四级标题</h4>
<h5>我是一个五级标题</h5>
<h6>我是一个六级标题</h6>

在这里插入图片描述

修饰标签

<b>我是b标签，用于加粗</b>
<br>    <!-- br标签用于换行 -->
<i>我是i标签，用于斜体</i>
<br>
<u>我是u标签，用于下划线</u>
<hr>    <!-- hr标签用于分割 -->
<strong>我是strong标签，用于强调</strong>
<br>
<em>我是em标签，用于斜体</em>

在这里插入图片描述

列表标签

<ul>
    <li>无序列表</li>
    <li>元素1</li>
    <li>元素2</li>
</ul>

<ol>
    <li>有序列表</li>
    <li>元素1</li>
    <li>元素2</li>
</ol>

在这里插入图片描述

表格属性

<table border="1">	<!-- border 表示边框粗细 -->
    <tr>	<!--tr 表示行标签 --> 
        <th>标题1</th>	<!-- th 表示列标签 -->
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    <tr>
        <td>元素11</td>
        <td>元素12</td>
        <td>元素13</td>
    </tr>
    <tr>
        <td>元素21</td>
        <td>元素22</td>
        <td>元素23</td>
    </tr>
</table>

在这里插入图片描述

链接标签

<a href="https://www.baidu.com/" target="_blank">点击链接到 => 百度</a>
<!-- herf属性表示要链接到的地址，target表示链接的方式：_blank表示新标签页打开，_self表示当前页打开 -->

在这里插入图片描述

图片标签

<img src="./Forest.png" alt="很抱歉，图片无法显示" width="960px">
<!-- src属性表示图片地址，可以是本地图片地址，也可以是网络图片地址，alt属性用于当图片无法显示的时候显示的文字，width属性表示图片的宽度，如果不设定height属性，则表示等比缩放图片大小，px表示像素单位 -->

在这里插入图片描述

容器标签

<div id="10" class="div-class" style="color: aqua;">	<!-- div标签是一个容器容器标签，用于装载标签 -->
    <p>我是一个段落标签</p>		<!-- p标签是一个段落标签，用于装载段落 -->
    <p>我会自动分段</p>
</div>
<div>
    <p><b>我在第二个容器中</b></p>
</div>
<!-- 
id，class，style表示通用的属性，几乎所有标签都可以使用。
id属性：用于唯一标识标签，其值是唯一的。
class属性：用于标识标签所属类别。
style属性：用于定义标签样式。
-->

在这里插入图片描述

行内容器标签

<span>我是一个行内容器，用于将部分行内元素进行包裹，以便进行统一管理。</span>
<span>我是第二个行内容器，行内元素之间不会分段</span>

在这里插入图片描述

表单容器

<form action="#">	<!-- from表单标签， action表示点击提交按钮所作出的反映 -->
    <label for="username">用户名称：</label>		<!-- label标签型标签，其for属性与其他标签的id值对应 -->
    <input id="username" type="text">
    <br>
    <label for="password">用户密码：</label>		<!-- password属性用于隐藏输入密码 -->
    <input id="password" type="password">
    <br>

    <input type="text" placeholder="我是隐式提示">	<!-- placeholder用于隐式的提示信息 -->
    <br>
    <input type="text" value="我是显示提示">		<!-- value用于显示的提示信息 -->
    <br>
    <input type="radio" name="fix1" id="option1">	<!-- radio表示单选框，每一个单选框的id值要一致，否则会变为复选框-->
    <label for="option1">选项1</label>
    <input type="radio" name="fix1" id="option2">
    <label for="option2">选项2</label>
    <input type="radio" name="fix1" id="option2">
    <label for="option3">选项2</label>

    <br>
    <input type="checkbox" name="fix2" id="checkopt1">	<!-- checkbox表示复选框，id值可以不同 -->
    <label for="checkopt1">选项1</label>
    <input type="checkbox" name="fix2" id="checkopt2">
    <label for="checkopt1">选项2</label>
    <input type="checkbox" name="fix2" id="checkopt3">
    <label for="checkopt1">选项3</label>

    <br>
    <input type="submit" value="提交按钮">	<!-- submit表示提交按钮 -->

</form>

在这里插入图片描述

3. 案例练习 — — 爱好选择表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱好选择表单</title>
</head>
<body>

    <h1>爱好选择表单</h1>
    
    <!-- 使用 <p> 标签添加说明文本 -->
    <p>请在下方选择或填写您的爱好。</p>
    
    <!-- 使用 <form> 标签创建表单 -->
    <form action="#" method="post">
        
        <!-- 使用 <fieldset> 和 <legend> 将复选框分组 -->
        <fieldset>
            <legend>请选择您的爱好（可多选）：</legend>
            
            <!-- 使用 <label> 和 <input type="checkbox"> 创建复选框 -->
            <label>
                <input type="checkbox" name="hobby" value="reading">
                阅读
            </label>
            <br>
            
            <label>
                <input type="checkbox" name="hobby" value="sports">
                运动
            </label>
            <br>
            
            <label>
                <input type="checkbox" name="hobby" value="music">
                音乐
            </label>
            <br>
            
            <label>
                <input type="checkbox" name="hobby" value="art">
                艺术
            </label>
        </fieldset>
        
        <!-- 使用 <br> 标签添加额外的垂直空间 -->
        <br>
        
        <!-- 添加其他爱好的输入框 -->
        <label for="other_hobby">其他爱好：</label>
        <input type="text" id="other_hobby" name="other_hobby" placeholder="请输入其他爱好">
        <br>
        
        <!-- 使用 <fieldset> 和 <legend> 将单选按钮分组 -->
        <fieldset>
            <legend>选择您的主要爱好：</legend>
            
            <!-- 使用 <label> 和 <input type="radio"> 创建单选按钮 -->
            <label>
                <input type="radio" name="main_hobby" value="reading">
                阅读
            </label>
            <br>
            
            <label>
                <input type="radio" name="main_hobby" value="sports">
                运动
            </label>
            <br>
            
            <label>
                <input type="radio" name="main_hobby" value="music">
                音乐
            </label>
        </fieldset>
        
        <!-- 添加提交按钮 -->
        <input type="submit" value="提交">
    </form>

    <!-- 使用 <footer> 标签添加页脚信息 -->
    <footer>
        <p>&copy; 2024 爱好选择表单</p>    <!-- &copy 标识版权符号©-->
    </footer>

</body>
</html>

在这里插入图片描述

CSS

CSS用于设置HTML元素的样式和布局，它不是编程语言，而是一种样式表语言，用于描述HTML文档的呈现方式。

CSS语法

选择器 {
    属性1: 属性值1;
    属性2: 属性值2;
}

实例：

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

CSS的三种导入方式

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

优先级：内联样式 > 内部样式表 > 外部样式表

1. 内联样式

<h1 style="clolr: red;">红色的一级标题</h1>

2. 内部样式表

通常在<head></head>标签里添加<style></style>标签，并在<style>标签里定义样式：

<head>
    <style>
        h2 {	<!-- 这样就为h2标签添加了样式，在使用h2标签的时候就会显示绿色 -->
            color: green;
        }
    </style>
</head>

3. 外部样式表

创建CSS文件，如：test.css
在test.css文件中编写样式：
```
h3 {
    color: purple;
}
```
在html文件中进行导入：
- 在<head>标签中添加<link>标签：<link rel="stylesheet" href="./test.css">
<body>标签下编写<h3>标签即可应用该样式。

选择器

元素选择器
类选择器
ID选择器
通用选择器
子元素选择器
后代选择器（又称：包容选择器）
并集选择器（又称：兄弟选择器）
伪选择器

1. 元素选择器

h2 {
    color: aqua;
}

2. 类选择器

.highlight {
    background-color: yellow;
}
/* 这会将highlight类的标签添加样式 */

3. ID选择器

#header{
    font-size: larger;
}
/* 为ID值为header的标签添加样式 */

4. 通用选择器

* {
    font-family: 'KaiTi';
}
/* 为所有标签添加样式 */

5. 子元素选择器

.father > .son{
    color: yellowgreen;
}
/* 为father类标签下的所有子代标签（仅限于子代），并且在所有子代标签中仅限于类属性为son的标签添加样式 */

6. 后代选择器

.father p{
    color: brown;
    font-size: larger;
}
/* 为father类标签下的所有代的<p>标签添加样式 */

7. 并集选择器

h3 + p {
    background-color: red;
}
/* 为<h3>标签后紧跟的一个<p>标签添加样式 */

8. 伪选择器

#element: hover {
    background-color: blueviolet;
}
/* 为id=element的标签添加为伪样式，当鼠标悬停时显示该样式 */

常用的还有：

first-child：选中第一个子元素
nth-child()：选中第n个元素
active：链接状态

伪元素选择器：

创建一个虚拟元素样式化，而不是选择实际存在的元素

例：

::after：选中元素后插入虚拟内容
::befor：选中元素前插入虚拟内容

CSS常用属性

font复合属性

<h1 style="font: bolder 50px 'KaiTi';">样式一级标题</h1>
<!-- bolder表示粗体， 50px表示字体的大小，'KaiTi'表示字体的样式 -->

行高属性

<p style="line-height: 40px">行高为40px</p>

行内元素：不会换行的标签，不能设置宽度和高度，不能包含其他元素，如：<a>、<img>标签。
块元素：默认换行的标签，能设置宽度和高度，可以包含行内元素，如：<h1>、<p>、<div>标签。
行内块元素：水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性。行内块元素可以包含其他行内元素或块级元素。

转换属性

<div sytle="display: inline-block;"></div>
<!-- 
    这可以将块元素转换为行内块元素 
    display的值还可以是：inline（行内元素），block（块元素），none（不显示）
-->

盒子模型

在这里插入图片描述

内容（content）：盒子包含的实际内容，比如文本、图片等。
内边距（padding）：围绕在内容的内部，是内容与边框之间的空间。可以使用padding属性来设置。
边框（border）：围绕在内边距的外部，是盒子的边界。可以使用border属性来设置。
外边距（margin）：围绕在边框的外部，是盒子与其他元素之间的空间。可以使用margin属性来设置。

例：

.demo {
    border: 5px solid yellowgreen;
}
/* 
5px表示边框
solid表示实线，还可以有：dashed（虚线），dotted（点线），double（双实线）
yellowgreen表示颜色
*/

.border-demo {
    border-style: solid;
    border-width: 10px 0 20px 40px;
    border-color: blueviolet;
}
/* 
border-width是一个复合属性，遵循上右下左的顺序，如果没有左就找右，如果没有下就找上，如果左右都没有那么左右为空。
border-style与border-color也是符合属性，同样遵循上右下左的顺序。

border属性还有：
border-left: 10px solid brown;	这只会对左边框添加样式，是一个复合属性
border-left-color: brown;	单一属性
*/

.fs{
    padding: 50px;
    margin: 40px;
}
/* padding 与 margin 都是复合属性 */

定位

相对定位：相对于元素在文档流中的正常位置进行定位。
绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流。
固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动二移动。

例：

.box-relative {
    width: 100px;
    height: 100px;
    background-color: pink;
    position: relative;		/* 定位方式为相对定位 */
    left: 120px;		/* 右移120px */
    top: 40px;		/* 下移40px， 还可以设置移动的属性有：right, bottom */
}

.box-fixed {
    width: 100px;
    height: 100px;
    background-color: brown;
    position: fixed;		/* 固定定位，相对浏览器窗口进行定位 */
    right: 0;
    top: 300px;
}

.box-absolute {
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    position: absolute;		/* 绝对定位，相对最近父级元素进行定位 */
    left: 120px;
}

网页布局方式：

标准流（普通流、文档流）：网页按照元素的书写顺序依次排序。
浮动
定位
Flexbox和Grid（自适应布局）

浮动

CSS中的浮动（Float）是一种布局技术，用于将元素从文档的正常流动中取出，并将其向左或向右移动，直到它的外边缘碰到父元素的边缘或另一个浮动元素。浮动元素会脱离常规文档流，这意味着它们不会占用文档中的位置，从而允许文本和内联元素环绕它们。

浮动属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。

语法

选择器: {
    float: left/right/none;		/* left：左浮动，right：右浮动，none：不浮动 */
}

注意：浮动是相对于父元素浮动，只会在父元素的内部移动。

浮动的三大特性

脱离文档流：浮动元素会从常规文档流中脱离出来，这意味着它不再占据文档流中的正常位置，周围的元素会根据浮动元素的位置进行布局。
环绕效果：浮动元素允许文本和内联元素环绕在其周围。这种特性使得内容可以更加灵活地布局，例如在图片周围添加文字描述。

清除浮动：当一个元素设置为clear属性时，它会移动到浮动元素的下方，并且不会与浮动元素在同一行。clear属性可以设置为left、right或both，分别表示清除左侧浮动、右侧浮动或两侧的浮动

例：

.father {
    background-color: aquamarine;
    height: 150px;
    border: 3px solid brown;
}

.left-son {
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    float: left;
}

.right-son {
    width: 100px;
    height: 100px;
    background-color: yellow;
    float: right;
}

消除浮动

在父级元素样式中添加：overflow: hidden;

伪元素选择器法：

为父元素添加伪元素选择器

.father::after {
    content: " ";
    display: table;
    clear: both;
}

Flex盒子模型

主要概念：

容器（Container）：使用display: flex;或display: inline-flex;声明的元素，它将变成一个Flex容器。
项目（Item）：容器内的直接子元素，它们自动成为Flex项目。
轴（Axis）：Flexbox有两个轴，一个是主轴（main axis），另一个是交叉轴（cross axis）。主轴的默认方向是行（row），从左到右布局项目；交叉轴垂直于主轴。
对齐（Alignment）：Flexbox提供了丰富的对齐方式，可以对容器内的项目进行水平和垂直对齐

1. `flex-direction`属性

用于决定主轴的方向（即项目的排列方向）

属性值	含义
`row(默认值)`	主轴为水平方向，起点在左端（项目从左往右排列）
`row-reverse`	主轴为水平方向，起点在右端（项目从右往左排列）
`column`	主轴为垂直方向，起点在上沿（项目从上往下排列）
`column-reverse`	主轴为垂直方向，起点在下沿（项目从下往上排列）

2. `flex-wrap`属性

用于决定换行方式

属性值	含义
`nowrap(默认值)`	不换行或列
`wrap`	主轴为横向时，从上到下换行主轴为纵向时，从左到右换行
`wrap-reverse`	主轴为横向时，从下到上换行主轴为纵向时，从右到左换行

flex-flow是一个复合属性，是flex-direction与flex-wrap属性的简写。

3. `justify-content`属性

决定项目在主轴上的对齐方式

属性值	含义
`flex-start(默认值)`	与主轴的起点对齐
`flex-end`	与主轴的终点对齐
`center`	与主轴的中点对齐
`space-betweed`	两端对齐主轴的起点与终点，项目之间的间隔都相等
`space-around`	每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

4. `align-items`属性

用于定义项目在交叉轴上如何对齐

属性值	含义
`flex-start`	交叉轴的起点对齐
`flex-end`	交叉轴的终点对齐
`center`	交叉轴的中点对齐
`baseline`	项目的第一行文字的基线对齐
`stretch(默认值)`	如果项目中未设置高度或设为`auto`，项目将占满整个容器的高度。

5. `align-content`属性

该属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

属性值	含义
`flex-start`	与交叉轴的起点对齐
`flex-end`	与交叉轴的终点对齐
`center`	与交叉轴的中点对齐
`space-between`	与交叉轴两端对齐，轴线之间的间隔平均分布
`space-around`	每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍
`stretch(默认值)`	主轴线占满整个交叉轴

示例

.container {
    display: flex;
    background-color: aqua;
    flex-direction: colum;
}

.container {
    display: flex;
    justify-content: space-around; /* 主轴上均匀分布 */
}

.item {
    flex: 1; /* 项目可以放大以填充可用空间 */
}

.container {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 交叉轴上居中对齐 */
}

案例练习 — — 个人博客设计

blog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Blog</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <header class="site-header">
        <nav class="main-nav">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#archive">Archive</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <div class="hero-content">
            <h1>Welcome to My Blog</h1>
            <p>A place to share thoughts, ideas, and experiences.</p>
            <a href="#posts" class="btn">Explore Posts</a>
        </div>
    </section>

    <main class="site-content">
        <section class="posts">
            <article class="post">
                <img src="Forest.png" alt="Post Image" class="post-img">
                <h2 class="post-title">Post Title Here</h2>
                <p class="post-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                <a href="#" class="btn">Read More</a>
            </article>
            <!-- Repeat for more posts -->
        </section>

        <aside class="sidebar">
            <div class="sidebar-widget">
                <h3>Categories</h3>
                <ul>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Lifestyle</a></li>
                    <li><a href="#">Travel</a></li>
                </ul>
            </div>

            <div class="sidebar-widget">
                <h3>Latest Posts</h3>
                <ul>
                    <li><a href="#">Post Title One</a></li>
                    <li><a href="#">Post Title Two</a></li>
                    <li><a href="#">Post Title Three</a></li>
                </ul>
            </div>

            <div class="sidebar-widget">
                <h3>Tags</h3>
                <div class="tags">
                    <span class="tag">CSS</span>
                    <span class="tag">HTML</span>
                    <span class="tag">JavaScript</span>
                    <!-- Add more tags as needed -->
                </div>
            </div>
        </aside>
    </main>

    <section class="comments-section" id="comments">
        <h2>Leave a Comment</h2>
        <form class="comment-form">
            <label for="name">Name:</label>
            <input type="text" id="name" placeholder="Your name" required>

            <label for="email">Email:</label>
            <input type="email" id="email" placeholder="Your email" required>

            <label for="comment">Comment:</label>
            <textarea id="comment" placeholder="Your comment" required></textarea>

            <button type="submit" class="btn">Submit Comment</button>
        </form>
    </section>

    <footer class="site-footer">
        <p>&copy; 2024 Personal Blog. All rights reserved.</p>
    </footer>
</body>
</html>

blog.css

/* styles.css */
body, h1, h2, h3, p, ul, li, figure, figcaption {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

a {
    text-decoration: none;
    color: #333;
}

a.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #007BFF;
    color: #fff;
    border-radius: 5px;
    transition: background 0.3s;
}

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

.site-header {
    background: #fff;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.hero {
    background: url('Forest.png') no-repeat center center/cover;
    color: #fff;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    text-align: center;
}

.site-content {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1rem;
    padding: 2rem;
}

.post {
    background: #fff;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.post-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

.sidebar-widget {
    margin-bottom: 2rem;
}

.tags .tag {
    display: inline-block;
    background: #007BFF;
    color: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: 1rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.comment-form {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.comment-form label {
    display: block;
    margin-bottom: 0.5rem;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
}

@media (max-width: 768px) {
    .site-content {
        grid-template-columns: 1fr;
    }

    .sidebar-widget {
        margin-bottom: 1rem;
    }
}
/* 添加伪元素内容 */
/* Add this to your styles.css */
.post-title::before {
    content: "Post Title Generated by CSS";
}

.post-excerpt::before {
    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
}

.tag::before {
    content: "Tag";
}

在这里插入图片描述

JS（JavaScript）

JavaScript是一种脚本语言，通常用于网页上实现交互功能，也可以用于服务器端（如Node.js）。

JavaScript的作用

客户端脚本：用于再用户浏览器中执行，实现动态效果和用户交互。
网页开发：与HTML和CSS协同工作，使得网页具有更强的交互性和动态性。
后端开发：使用Node.js，JavaScript也可以再服务器端运行，实现服务器端应用的开发

JS的导入方式

内联样式：

直接在<head>或<body>标签中写<script>标签，然后在<script>标签中写入执行语句。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>console.log("Hello, JS!");</script>
    <script>alert("你好，内联样式弹窗！");</script>
</body>
</html>

在这里插入图片描述

外联样式：

写一个js文件，然后在js文件中写执行执行语句，然后再在HTML文件中的<head>中使用<script>导入即可。
```
<head>
    <script src="xxx.js"></script>
</head>
```

变量

var x;			// 声明一个变量
let y = 5;		// 声明一个变量，并且赋值为整数类型
const PI = 3.14;	// 声明一个常量，赋值为3.14
let name = '张三';	// 声明一个变量，并且赋值为字符串类型
let empty_value = null;		// 声明一个变量，并且赋值为空
var bool_1 = false;		// 布尔类型的数据，值为false
var bool_2 = Boolean(1);	// 布尔类型的数据，值为true
var arr = [1, 2, 3];	// 声明一个数组
var obj = {name: "张三"};	// 声明要给对象，name属性值为"张三"

var与let的区别：

var与let都用于声明变量，并且都可以进行赋初值，var与let的主要区别在于作用域，var具有函数作用域，let具有块级作用域，通常定义变量的时候，使用let来声明变量是更安全的。

条件语句

// 语法
if(condition1) {
    ...;
} else if(condition2){
    ...;
} else {
    ...;
}

例：

// 条件循环案例：
let score = 79;

if(score >= 90){
    console.log("评级为：A");
} else if(80 <= score < 90){
    console.log("评级为：B");
} else if(70 <= score < 80){
    console.log("评级为：C");
} else{
    console.log("评级为：D");
}

循环语句

for循环：

for (初始化条件表达式；循环条件；迭代器){
    ...;
}

while循环：
```
while (循环条件) {
    ...;
}
```

break：用于结束循环；

continue：用于跳出当前循环，继续执行下一次的循环；

例：

// 100以内的奇数之和与偶数之和
const number = 100;
let ans_ou = 0;
let ans_ji = 0;
for(let i = 1; i <= number; i++){
    if(i % 2 == 0){
        ans_ou += i;
        continue;
    }
    ans_ji += i;
}
console.log(number,"以及的奇数之和为：", ans_ji);
console.log(number,"以及的偶数之和为：", ans_ou);

// 100以内的质数
const border = 100;
let num = 2;
let ans_z = [2];
while(num <= border){
    let num_sq = Math.ceil(Math.sqrt(num));		// 对num进行开平方，并且在进行向上取整
    let num_i = 2;
    while(num_i <= num_sq){
        if(num % num_i == 0){
            break;
        }
        num_i ++;
    }
    if(num_i > num_sq) ans_z.push(num);
    num ++;
}
console.log(ans_z)

函数

function 函数名 (参数1, 参数2, 参数3, ...) {
    ...;
    return 返回值;
}

例：

// n! 阶乘
function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}

console.log(factorial(5)); 		// 输出: 120

事件

常用事件

函数名称	触发条件
`onclick`	点击事件
`onmouseover`	鼠标经过
`onchange`	文本内容改变事件
`onselect`	文本框选中
`onfocus`	光标聚集
`onblur`	移开光标
`onkeydown`	键盘按键被按下
`onkeyup`	键盘按键被释放

<button onclick="alert('Button was clicked!')">Click Me</button>

<input type="text" onkeydown="alert('Key was pressed!')">

事件绑定

HTML属性
DOM属性
addEventListerner方法

HTML属性

<button onclick="click_event()">事件</button>
<script>
	function click_evnet(){
        alert("点击事件触发了");
    }
</script>

DOM属性

DOM，全称为文档对象模型（Document Object Model），是一种编程接口，用于将网页结构化表示为一个树形结构，从而允许Web页面的脚本（如JavaScript）能够动态地访问和更新网页的内容、结构和样式。

DOM允许开发者通过JS与HTML文档进行交互，动态的改变文档的结构、样式和内容。

<script>
	var element_id = document.getElementById('value');	// 通过id来获取标签
	var element_class = document.getElementByClassName('value');		// 通过class来获取标签
    var element_tag = document.getElementByTagName('value')[n];		// 通过标签名来获取标签，并索引到获取到的标签数组中的第n个位置。
    
    element_id.innerHTML = 'value'; 	// 修改获取到的标签的文本内容，可以解析HTML语义
    element_calss.innerText = 'value';		// 修改获取到的标签的文本内容，会忽略HTML语义，只当作纯文本。
    element_tag.style.color = 'red';		// 修改获取到的标签的颜色为红色
    element_tag.style.fontSize = '20px';	// 修改获取到的标签的字体大小为20px
</script>

DOM绑定事件

// 第一种绑定方式，使用匿名函数
button_element.onclick = function(){
    alert('value');
}

// 第二种绑定方式，使用addEventListerner方法，其中"click"是触发方式，function部分可以是匿名函数也可以是实体函数
button_element.addEventListerner('click', function(){
    alert("value");
})

DOM对象常用方法

函数名称	含义
`appendChild()`	把新的子节点添加到指定节点
`removeChild()`	删除子节点
`replaceChile()`	替换子节点
`insertBefore()`	在指定的节点前面插入新的子节点
`createAttribute()`	创建属性节点
`createElement()`	创建元素节点
`createTexNode()`	创建文本节点
`getAttribute()`	返回指定的属性值

响应式布局实现方式

通过rem，vm/vh等单位，实现在不同设备上显示相同比例而实现适配。
响应式布局，通过媒体查询@media实现一套HTML配合多套CSS实现适配

第一种实现方式

rem是一个倍数单位，它是基于html标签中的font-size属性值的倍数。

<style>
    .box-rem {
        width: 5rem;
        height: 3rem;
        background-color: aqua;
    }
</style>

<script>
	// 根据设备宽度计算HTML标签的font-size的属性值
    function resetHtmlFontSize(){
        document.documentElement.style.fontSize = screen.width / 10 + 'px';
    }
    resetHtmlFontSize();
    // 绑定事件
    window.onresize = resetHtmlFontSize;
</script>

第二种实现方式

<head>标签中的viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale = 1.0, maximun-scale = 1.0, user-scalable = no">

width=device-width：将视口的宽度设置为设备的宽度。这确保网页内容不会被缩放，而是按照设备的实际宽度进行布局。
initial-scale=1.0：设置初始的缩放级别为1.0。这也有助于确保网页在加载时以原始大小显示，而不是被缩放。
minimum-scale = 1.0：最小缩放比例为1.0。
maximun-scale = 1.0：最大缩放比例为1.0。
user-scalable = no：不允许用户缩放。

案例三 — — 计数器

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
    <link rel="stylesheet" href="count.css">
</head>
<body>
    <div class="counter-container">
        <h1>计数器</h1>
        <div class="counter">
            <button class="decrement-btn">-</button>
            <span class="counter-value">0</span>
            <button class="increment-btn">+</button>
        </div>
    </div>
    <script src="count.js"></script>
</body>
</html>

count.css

/* 重置浏览器默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7f7f7;
}

.counter-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

.counter {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px; /* 新增属性，为按钮和文本框之间添加间距 */
}

.counter-value {
    font-size: 2em;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100px;
    text-align: center;
    margin: 0 10px; /* 为文本框添加外边距 */
}

button {
    padding: 10px 20px;
    font-size: 1em;
    color: #fff;
    background-color: #5cb85c;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #4cae4c;
}

button:active {
    background-color: #449d44;
}

.decrement-btn {
    background-color: #d9534f;
}

.decrement-btn:hover {
    background-color: #c9302c;
}

.decrement-btn:active {
    background-color: #ac2925;
}

count.js

document.addEventListener('DOMContentLoaded', function() {
    const counterValue = document.querySelector('.counter-value');
    const incrementBtn = document.querySelector('.increment-btn');
    const decrementBtn = document.querySelector('.decrement-btn');

    let count = 0;

    incrementBtn.addEventListener('click', function() {
        count++;
        counterValue.textContent = count;
    });

    decrementBtn.addEventListener('click', function() {
        count--;
        if (count < 0) {
            count = 0;
        }
        counterValue.textContent = count;
    });
});

在这里插入图片描述

案例四 — — TODO-LIST

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <!-- FontAwesome for icons -->
    <link rel="stylesheet" href="todo.css">
</head>
<body>
    <div id="todo-app" class="container">
        <h1>Todo List</h1>
        <div class="input-container">
            <input type="text" id="new-todo" placeholder="Add a new todo..." />
            <button id="add-todo">Add</button>
        </div>
        <ul id="todo-list"></ul>
    </div>
    <script src="todo.js"></script>
</body>
</html>

todo.css

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: url('Forest.png') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

.input-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

#new-todo {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 75%;
}

#add-todo {
    padding: 10px 20px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#add-todo:hover {
    background-color: #4cae4c;
}

#todo-list {
    width: 100%; /* 确保列表宽度充满容器 */
    list-style: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e6e6e6;
    background: #f9f9f9;
    margin: 10px 0;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.todo-item:first-child {
    margin-top: 0;
}

.todo-item:last-child {
    border-bottom: none;
}

.todo-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.todo-item button {
    background: #e74c3c;
    color: #ffffff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo-item button:hover {
    background: #c0392b;
    transform: scale(1.1);
}

.todo-item button:active {
    transform: scale(0.9);
}

.todo-item button:focus {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e74c3c;
}

.todo-item button:before {
    content: "Delete";   /* 文本 */
    font-family: 'FontAwesome';
    margin-right: 5px;
}

.completed {
    text-decoration: line-through;
    color: #888;
}

todo.js

document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('new-todo');
    const addBtn = document.getElementById('add-todo');
    const list = document.getElementById('todo-list');
    let todos = [];

    function loadTodos() {
        const storedTodos = localStorage.getItem('todos');
        if (storedTodos) {
            todos = JSON.parse(storedTodos);
            todos.forEach(renderTodo);
        }
    }

    function addTodo() {
        const todoText = input.value.trim();
        if (todoText) {
            const newTodo = {
                text: todoText,
                completed: false
            };
            todos.push(newTodo);
            renderTodo(newTodo);
            saveTodos();
            input.value = '';
        }
    }

    function renderTodo(todo) {
        const listItem = document.createElement('li');
        listItem.className = 'todo-item';
        listItem.textContent = todo.text;

        const deleteBtn = document.createElement('button');
        deleteBtn.className = 'delete-btn';
        deleteBtn.innerHTML = '<i class="fas fa-trash"></i>'; // 使用FontAwesome图标
        deleteBtn.onclick = function() {
            removeTodo(listItem, todo);
        };

        listItem.appendChild(deleteBtn);
        listItem.onclick = function() {
            todo.completed = !todo.completed;
            listItem.classList.toggle('completed');
            saveTodos();
        };

        list.appendChild(listItem);
    }

    function removeTodo(element, todo) {
        const index = todos.indexOf(todo);
        todos.splice(index, 1);
        element.remove();
        saveTodos();
    }

    function saveTodos() {
        localStorage.setItem('todos', JSON.stringify(todos));
    }

    addBtn.addEventListener('click', addTodo);
    input.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') addTodo();
    });

    loadTodos();
});

在这里插入图片描述

快速入门 HTML CSS JS （附带简单案例）