快速入门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>© 2024 爱好选择表单</p> <!-- © 标识版权符号©--> </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>© 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(); });
