当前位置：前端开发 >  快速入门 HTML + CSS + JS （附带简单案例）

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

Cooku Black 2024-10-01 16:03:02 阅读 92

快速入门HTML + CSS + JS

HTML

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

1. 简单案例

<code><!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

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

<title>Document</title>

</head>

<body>

<h1>Hello Html!</h1>

</body>

</html>

在这里插入图片描述

2. 常用标签

标题标签：

<code><h1>我是一个一级标题</h1>

<h2>我是一个二级标题</h2>

<h3>我是一个三级标题</h3>

<h4>我是一个四级标题</h4>

<h5>我是一个五级标题</h5>

<h6>我是一个六级标题</h6>

在这里插入图片描述

修饰标签

<code><b>我是b标签，用于加粗</b>

<br> <!-- br标签用于换行 -->

<i>我是i标签，用于斜体</i>

<br>

<u>我是u标签，用于下划线</u>

<hr> <!-- hr标签用于分割 -->

<strong>我是strong标签，用于强调</strong>

<br>

<em>我是em标签，用于斜体</em>

在这里插入图片描述

列表标签

<code><ul>

<li>无序列表</li>

<li>元素1</li>

<li>元素2</li>

</ul>

<ol>

<li>有序列表</li>

<li>元素1</li>

<li>元素2</li>

</ol>

在这里插入图片描述

表格属性

<code><table border="1"><!-- border 表示边框粗细 -->code>

<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>

在这里插入图片描述

链接标签

<code><a href="https://www.baidu.com/" target="_blank">点击链接到 => 百度</a>code>

<!-- herf属性表示要链接到的地址，target表示链接的方式：_blank表示新标签页打开，_self表示当前页打开 -->

在这里插入图片描述

图片标签

<code><img src="./Forest.png" alt="很抱歉，图片无法显示" width="960px">code>

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

在这里插入图片描述

容器标签

<code><div id="10" class="div-class" style="color: aqua;"><!-- div标签是一个容器容器标签，用于装载标签 -->code>

<p>我是一个段落标签</p><!-- p标签是一个段落标签，用于装载段落 -->

<p>我会自动分段</p>

</div>

<div>

<p><b>我在第二个容器中</b></p>

</div>

<!--

id，class，style表示通用的属性，几乎所有标签都可以使用。

id属性：用于唯一标识标签，其值是唯一的。

class属性：用于标识标签所属类别。

style属性：用于定义标签样式。

-->

在这里插入图片描述

行内容器标签

<code><span>我是一个行内容器，用于将部分行内元素进行包裹，以便进行统一管理。</span>

<span>我是第二个行内容器，行内元素之间不会分段</span>

在这里插入图片描述

表单容器

<code><form action="#"><!-- from表单标签， action表示点击提交按钮所作出的反映 -->code>

<label for="username">用户名称：</label><!-- label标签型标签，其for属性与其他标签的id值对应 -->code>

<input id="username" type="text">code>

<br>

<label for="password">用户密码：</label><!-- password属性用于隐藏输入密码 -->code>

<input id="password" type="password">code>

<br>

<input type="text" placeholder="我是隐式提示"><!-- placeholder用于隐式的提示信息 -->code>

<br>

<input type="text" value="我是显示提示"><!-- value用于显示的提示信息 -->code>

<br>

<input type="radio" name="fix1" id="option1"><!-- radio表示单选框，每一个单选框的id值要一致，否则会变为复选框-->code>

<label for="option1">选项1</label>code>

<input type="radio" name="fix1" id="option2">code>

<label for="option2">选项2</label>code>

<input type="radio" name="fix1" id="option2">code>

<label for="option3">选项2</label>code>

<br>

<input type="checkbox" name="fix2" id="checkopt1"><!-- checkbox表示复选框，id值可以不同 -->code>

<label for="checkopt1">选项1</label>code>

<input type="checkbox" name="fix2" id="checkopt2">code>

<label for="checkopt1">选项2</label>code>

<input type="checkbox" name="fix2" id="checkopt3">code>

<label for="checkopt1">选项3</label>code>

<br>

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

</form>

在这里插入图片描述

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

<code><!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

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

<title>爱好选择表单</title>

</head>

<body>

<h1>爱好选择表单</h1>

<!-- 使用 <p> 标签添加说明文本 -->

<p>请在下方选择或填写您的爱好。</p>

<!-- 使用 <form> 标签创建表单 -->

<form action="#" method="post">code>

<!-- 使用 <fieldset> 和 <legend> 将复选框分组 -->

<fieldset>

<legend>请选择您的爱好（可多选）：</legend>

<!-- 使用 <label> 和 <input type="checkbox"> 创建复选框 -->code>

<label>

<input type="checkbox" name="hobby" value="reading">code>

阅读

</label>

<br>

<label>

<input type="checkbox" name="hobby" value="sports">code>

运动

</label>

<br>

<label>

<input type="checkbox" name="hobby" value="music">code>

音乐

</label>

<br>

<label>

<input type="checkbox" name="hobby" value="art">code>

艺术

</label>

</fieldset>

<!-- 使用 <br> 标签添加额外的垂直空间 -->

<br>

<!-- 添加其他爱好的输入框 -->

<label for="other_hobby">其他爱好：</label>code>

<input type="text" id="other_hobby" name="other_hobby" placeholder="请输入其他爱好">code>

<br>

<!-- 使用 <fieldset> 和 <legend> 将单选按钮分组 -->

<fieldset>

<legend>选择您的主要爱好：</legend>

<!-- 使用 <label> 和 <input type="radio"> 创建单选按钮 -->code>

<label>

<input type="radio" name="main_hobby" value="reading">code>

阅读

</label>

<br>

<label>

<input type="radio" name="main_hobby" value="sports">code>

运动

</label>

<br>

<label>

<input type="radio" name="main_hobby" value="music">code>

音乐

</label>

</fieldset>

<!-- 添加提交按钮 -->

<input type="submit" value="提交">code>

</form>

<!-- 使用 <footer> 标签添加页脚信息 -->

<footer>

<p>&copy; 2024 爱好选择表单</p> <!-- &copy 标识版权符号©-->

</footer>

</body>

</html>

在这里插入图片描述

CSS

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

CSS语法

<code>选择器 { -- -->

属性1: 属性值1;

属性2: 属性值2;

}

实例：

p{

color: blue;

font-size: 16px;

}

CSS的三种导入方式

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

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

1. 内联样式

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

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">code>

<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>code>

<!-- bolder表示粗体， 50px表示字体的大小，'KaiTi'表示字体的样式 -->

行高属性

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

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

转换属性

<div sytle="display: inline-block;"></div>code>

<!--

这可以将块元素转换为行内块元素

display的值还可以是：inline（行内元素），block（块元素），none（不显示）

-->

盒子模型

在这里插入图片描述

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

例：

<code>.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属性

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

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

用于决定换行方式

属性值 含义
<code>nowrap(默认值) 不换行或列
<code>wrap 主轴为横向时，从上到下换行

主轴为纵向时，从左到右换行
<code>wrap-reverse 主轴为横向时，从下到上换行

主轴为纵向时，从右到左换行

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

3. justify-content属性

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

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

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

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

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

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

<code>.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">code>

<head>

<meta charset="UTF-8">code>

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

<title>Personal Blog</title>

<link rel="stylesheet" href="blog.css">code>

</head>

<body>

<header class="site-header">code>

<nav class="main-nav">code>

<ul>

<li><a href="#home">Home</a></li>code>

<li><a href="#about">About</a></li>code>

<li><a href="#archive">Archive</a></li>code>

<li><a href="#contact">Contact</a></li>code>

</ul>

</nav>

</header>

<section class="hero">code>

<div class="hero-content">code>

<h1>Welcome to My Blog</h1>

<p>A place to share thoughts, ideas, and experiences.</p>

<a href="#posts" class="btn">Explore Posts</a>code>

</div>

</section>

<main class="site-content">code>

<section class="posts">code>

<article class="post">code>

<img src="Forest.png" alt="Post Image" class="post-img">code>

<h2 class="post-title">Post Title Here</h2>code>

<p class="post-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>code>

<a href="#" class="btn">Read More</a>code>

</article>

<!-- Repeat for more posts -->

</section>

<aside class="sidebar">code>

<div class="sidebar-widget">code>

<h3>Categories</h3>

<ul>

<li><a href="#">Technology</a></li>code>

<li><a href="#">Lifestyle</a></li>code>

<li><a href="#">Travel</a></li>code>

</ul>

</div>

<div class="sidebar-widget">code>

<h3>Latest Posts</h3>

<ul>

<li><a href="#">Post Title One</a></li>code>

<li><a href="#">Post Title Two</a></li>code>

<li><a href="#">Post Title Three</a></li>code>

</ul>

</div>

<div class="sidebar-widget">code>

<h3>Tags</h3>

<div class="tags">code>

<span class="tag">CSS</span>code>

<span class="tag">HTML</span>code>

<span class="tag">JavaScript</span>code>

<!-- Add more tags as needed -->

</div>

</div>

</aside>

</main>

<section class="comments-section" id="comments">code>

<h2>Leave a Comment</h2>

<form class="comment-form">code>

<label for="name">Name:</label>code>

<input type="text" id="name" placeholder="Your name" required>code>

<label for="email">Email:</label>code>

<input type="email" id="email" placeholder="Your email" required>code>

<label for="comment">Comment:</label>code>

<textarea id="comment" placeholder="Your comment" required></textarea>code>

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

</form>

</section>

<footer class="site-footer">code>

<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的作用

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

JS的导入方式

内联样式：

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

<!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

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

<title>Document</title>

</head>

<body>

<script>console.log("Hello, JS!");</script>

<script>alert("你好，内联样式弹窗！");</script>

</body>

</html>

在这里插入图片描述

外联样式：

写一个<code>js文件，然后在js文件中写执行执行语句，然后再在HTML文件中的<head>中使用<script>导入即可。

<head>

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

</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

事件

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

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

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

事件绑定

HTML属性DOM属性addEventListerner方法

HTML属性

<button onclick="click_event()">事件</button>code>

<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对象常用方法
函数名称 含义
<code>appendChild() 把新的子节点添加到指定节点
<code>removeChild() 删除子节点
<code>replaceChile() 替换子节点
<code>insertBefore() 在指定的节点前面插入新的子节点
<code>createAttribute() 创建属性节点
<code>createElement() 创建元素节点
<code>createTexNode() 创建文本节点
<code>getAttribute() 返回指定的属性值

响应式布局实现方式

通过<code>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">code>

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">code>

<head>

<meta charset="UTF-8">code>

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

<title>计数器</title>

<link rel="stylesheet" href="count.css">code>

</head>

<body>

<div class="counter-container">code>

<h1>计数器</h1>

<div class="counter">code>

<button class="decrement-btn">-</button>code>

<span class="counter-value">0</span>code>

<button class="increment-btn">+</button>code>

</div>

</div>

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

</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

<code>index.html

<!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

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

<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 -->code>

<link rel="stylesheet" href="todo.css">code>

</head>

<body>

<div id="todo-app" class="container">code>

<h1>Todo List</h1>

<div class="input-container">code>

<input type="text" id="new-todo" placeholder="Add a new todo..." />code>

<button id="add-todo">Add</button>code>

</div>

<ul id="todo-list"></ul>code>

</div>

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

</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图标code>

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();

});

在这里插入图片描述

上一篇： 前端vue2 项目混淆转码问题

下一篇： uniapp [全端兼容] - 详细实现聊天室IM即时通讯及聊天界面，支持发送图片视频、消息已读未读，集成mqtt会话消息通讯和前端uniapp+后端node.js+数据库设计，仿腾讯云IM、微信聊天

本文标签

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

声明

本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。

相关文章

阅读排行

热门文章