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

快速入门HTML + CSS + JS

HTML

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

1. 简单案例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><i>我是i标签，用于斜体</i><br><u>我是u标签，用于下划线</u><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>

在这里插入图片描述

表格属性<tableborder="1"><tr><th>标题1</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>
链接标签<ahref="https://www.baidu.com/"target="_blank">点击链接到 => 百度</a>
图片标签<imgsrc="./Forest.png"alt="很抱歉，图片无法显示"width="960px">

在这里插入图片描述

容器标签<divid="10"class="div-class"style="color: aqua;"><p>我是一个段落标签</p><p>我会自动分段</p></div><div><p><b>我在第二个容器中</b></p></div>

在这里插入图片描述

行内容器标签<span>我是一个行内容器，用于将部分行内元素进行包裹，以便进行统一管理。</span><span>我是第二个行内容器，行内元素之间不会分段</span>
表单容器<formaction="#"><labelfor="username">用户名称：</label><inputid="username"type="text"><br><labelfor="password">用户密码：</label><inputid="password"type="password"><br><inputtype="text"placeholder="我是隐式提示"><br><inputtype="text"value="我是显示提示"><br><inputtype="radio"name="fix1"id="option1"><labelfor="option1">选项1</label><inputtype="radio"name="fix1"id="option2"><labelfor="option2">选项2</label><inputtype="radio"name="fix1"id="option2"><labelfor="option3">选项2</label><br><inputtype="checkbox"name="fix2"id="checkopt1"><labelfor="checkopt1">选项1</label><inputtype="checkbox"name="fix2"id="checkopt2"><labelfor="checkopt1">选项2</label><inputtype="checkbox"name="fix2"id="checkopt3"><labelfor="checkopt1">选项3</label><br><inputtype="submit"value="提交按钮"></form>

在这里插入图片描述

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>爱好选择表单</title></head><body><h1>爱好选择表单</h1><!-- 使用 <p> 标签添加说明文本 --><p>请在下方选择或填写您的爱好。</p><!-- 使用 <form> 标签创建表单 --><formaction="#"method="post"><!-- 使用 <fieldset> 和 <legend> 将复选框分组 --><fieldset><legend>请选择您的爱好（可多选）：</legend><!-- 使用 <label> 和 <input type="checkbox"> 创建复选框 --><label><inputtype="checkbox"name="hobby"value="reading">
                阅读
            </label><br><label><inputtype="checkbox"name="hobby"value="sports">
                运动
            </label><br><label><inputtype="checkbox"name="hobby"value="music">
                音乐
            </label><br><label><inputtype="checkbox"name="hobby"value="art">
                艺术
            </label></fieldset><!-- 使用 <br> 标签添加额外的垂直空间 --><br><!-- 添加其他爱好的输入框 --><labelfor="other_hobby">其他爱好：</label><inputtype="text"id="other_hobby"name="other_hobby"placeholder="请输入其他爱好"><br><!-- 使用 <fieldset> 和 <legend> 将单选按钮分组 --><fieldset><legend>选择您的主要爱好：</legend><!-- 使用 <label> 和 <input type="radio"> 创建单选按钮 --><label><inputtype="radio"name="main_hobby"value="reading">
                阅读
            </label><br><label><inputtype="radio"name="main_hobby"value="sports">
                运动
            </label><br><label><inputtype="radio"name="main_hobby"value="music">
                音乐
            </label></fieldset><!-- 添加提交按钮 --><inputtype="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. 内联样式

<h1style="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复合属性<h1style="font: bolder 50px 'KaiTi';">样式一级标题</h1>
行高属性<pstyle="line-height: 40px">行高为40px</p>

行内元素：不会换行的标签，不能设置宽度和高度，不能包含其他元素，如：<a>、<img>标签。

块元素：默认换行的标签，能设置宽度和高度，可以包含行内元素，如：<h1>、<p>、<div>标签。

行内块元素：水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性。行内块元素可以包含其他行内元素或块级元素。

转换属性<divsytle="display: inline-block;"></div>

盒子模型

在这里插入图片描述

内容（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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Personal Blog</title><linkrel="stylesheet"href="blog.css"></head><body><headerclass="site-header"><navclass="main-nav"><ul><li><ahref="#home">Home</a></li><li><ahref="#about">About</a></li><li><ahref="#archive">Archive</a></li><li><ahref="#contact">Contact</a></li></ul></nav></header><sectionclass="hero"><divclass="hero-content"><h1>Welcome to My Blog</h1><p>A place to share thoughts, ideas, and experiences.</p><ahref="#posts"class="btn">Explore Posts</a></div></section><mainclass="site-content"><sectionclass="posts"><articleclass="post"><imgsrc="Forest.png"alt="Post Image"class="post-img"><h2class="post-title">Post Title Here</h2><pclass="post-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p><ahref="#"class="btn">Read More</a></article><!-- Repeat for more posts --></section><asideclass="sidebar"><divclass="sidebar-widget"><h3>Categories</h3><ul><li><ahref="#">Technology</a></li><li><ahref="#">Lifestyle</a></li><li><ahref="#">Travel</a></li></ul></div><divclass="sidebar-widget"><h3>Latest Posts</h3><ul><li><ahref="#">Post Title One</a></li><li><ahref="#">Post Title Two</a></li><li><ahref="#">Post Title Three</a></li></ul></div><divclass="sidebar-widget"><h3>Tags</h3><divclass="tags"><spanclass="tag">CSS</span><spanclass="tag">HTML</span><spanclass="tag">JavaScript</span><!-- Add more tags as needed --></div></div></aside></main><sectionclass="comments-section"id="comments"><h2>Leave a Comment</h2><formclass="comment-form"><labelfor="name">Name:</label><inputtype="text"id="name"placeholder="Your name"required><labelfor="email">Email:</label><inputtype="email"id="email"placeholder="Your email"required><labelfor="comment">Comment:</label><textareaid="comment"placeholder="Your comment"required></textarea><buttontype="submit"class="btn">Submit Comment</button></form></section><footerclass="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>标签中写入执行语句。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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>1. 外联样式：写一个js文件，然后在js文件中写执行执行语句，然后再在HTML文件中的<head>中使用<script>导入即可。<head><scriptsrc="xxx.js"></script></head>

变量

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

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

条件语句

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

例：

// 条件循环案例：let score =79;if(score >=90){
    console.log("评级为：A");}elseif(80<= score <90){
    console.log("评级为：B");}elseif(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! 阶乘functionfactorial(n){if(n ===0)return1;return n *factorial(n -1);}

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

事件

常用事件

函数名称触发条件

onclick

点击事件

onmouseover

鼠标经过

onchange

文本内容改变事件

onselect

文本框选中

onfocus

光标聚集

onblur

移开光标

onkeydown

键盘按键被按下

onkeyup

键盘按键被释放

<buttononclick="alert('Button was clicked!')">Click Me</button><inputtype="text"onkeydown="alert('Key was pressed!')">

事件绑定

HTML属性
DOM属性
addEventListerner方法

HTML属性

<buttononclick="click_event()">事件</button><script>functionclick_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的属性值functionresetHtmlFontSize(){
        document.documentElement.style.fontSize = screen.width /10+'px';}resetHtmlFontSize();// 绑定事件
    window.onresize = resetHtmlFontSize;</script>

第二种实现方式

<head>

标签中的

viewport

<metaname="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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>计数器</title><linkrel="stylesheet"href="count.css"></head><body><divclass="counter-container"><h1>计数器</h1><divclass="counter"><buttonclass="decrement-btn">-</button><spanclass="counter-value">0</span><buttonclass="increment-btn">+</button></div></div><scriptsrc="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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Todo List App</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"><!-- FontAwesome for icons --><linkrel="stylesheet"href="todo.css"></head><body><divid="todo-app"class="container"><h1>Todo List</h1><divclass="input-container"><inputtype="text"id="new-todo"placeholder="Add a new todo..."/><buttonid="add-todo">Add</button></div><ulid="todo-list"></ul></div><scriptsrc="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 =[];functionloadTodos(){const storedTodos = localStorage.getItem('todos');if(storedTodos){
            todos =JSON.parse(storedTodos);
            todos.forEach(renderTodo);}}functionaddTodo(){const todoText = input.value.trim();if(todoText){const newTodo ={text: todoText,completed:false};
            todos.push(newTodo);renderTodo(newTodo);saveTodos();
            input.value ='';}}functionrenderTodo(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);}functionremoveTodo(element, todo){const index = todos.indexOf(todo);
        todos.splice(index,1);
        element.remove();saveTodos();}functionsaveTodos(){
        localStorage.setItem('todos',JSON.stringify(todos));}

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

在这里插入图片描述

标签： html css javascript

本文转载自: https://blog.csdn.net/qq_73910510/article/details/141087163
版权归原作者 Cooku Black 所有，如有侵权，请联系我们删除。

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