当前位置：首页 > news >正文

HTML-CSS-JS-入门学习笔记

news 2025/10/8 5:23:35

HTML-CSS-JS入门学习笔记

HTML

1. 标题段落换行

标题标签

HTML提供了6级标题标签：<h1>到<h6>
<h1>字号最大，<h6>字号最小
<h7>及以上的标签无效，会被当作普通文本处理

<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>

<h1>祖巴茨21+19血虐戴维斯，不知道湖人后悔没?</h1>
<h2>祖巴茨21+19血虐戴维斯，不知道湖人后悔没?</h2>
<h3>祖巴茨21+19血虐戴维斯，不知道湖人后悔没?</h3>
<h4>祖巴茨21+19血虐戴维斯，不知道湖人后悔没?</h4>
<h5>祖巴茨21+19血虐戴维斯，不知道湖人后悔没?</h5>
<h6>祖巴茨21+19血虐戴维斯，不知道湖人后悔没?</h6>
<h7>祖巴茨21+19血虐戴维斯，不知道湖人后悔没?</h7>

在这里插入图片描述

段落标签

<p>标签用于定义段落
段落前后会自动添加空白间距

换行标签

<br/>：单标签，用于强制换行
<hr>：水平分割线，用于内容分隔

<p>整场比赛看下来，快船的实力还是更胜一筹，在后场发动机哈登的穿针引线下，耍的湖人团团转，浓眉多次被调出禁区，祖巴茨在湖人禁区翻江倒海，抢了19个篮板球，其中前场篮板就抢了8个，<br/>还得到了21分，正负值+18；浓眉在他面前都不敢投篮，更没勇气往内线打，投篮14次只命中5球，第四节更是由于体力不支，3投0中，全场仅得到16分10篮板的数据，正负值-18。没有对比就没有伤害，不知道湖人后悔没?
</p><hr><p>带刀侍卫鲍威尔依然稳定输出，17中9，三分8中2，砍下22分4篮板3抢断。<br/>哈登带病坚持比赛，打满第三节和第四节的前10分钟，一直打到剩下2分钟垃圾时间方才下场，真的累坏了，全场出战全队最高的39分47秒，19中7，其中三分9中4，罚球3中3，砍下21分4篮板12助攻的两双数据。登哥打球太聪明了，把湖人整条防线剪的七零八落，球队大脑当之无愧！同时也祝贺登哥得分超越“大O”罗伯特森（26710分），升至NBA历史得分榜第14位。
</p>

在这里插入图片描述

2. 有序和无序列表

无序列表 `<ul>`

列表项前显示项目符号（默认圆点）
每个列表项使用<li>标签

<ul><li>列表项1</li><li>列表项2</li>
</ul>

有序列表 `<ol>`

列表项前显示数字序号
可以设置起始值和类型

<ol start="50">  <!-- 从50开始编号 --><li>列表项1</li><li>列表项2</li>
</ol><ol type="A">  <!-- 使用大写字母编号 --><li>列表项1</li><li>列表项2</li>
</ol>

列表嵌套

可以在列表项中嵌套其他列表

<ul><li>一级项<ul><li>二级项</li></ul></li>
</ul>

<!--
无序列表 ul
有序列表 ol
列表项 li
-->
<h4>一个无序列表：</h4>
<ul><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul><h4>一个有序列表：</h4>
<ol><li>咖啡</li><li>牛奶</li><li>茶</li>
</ol><ol start="50"><li>咖啡</li><li>牛奶</li><li>茶</li>
</ol><ol type="A"><li>咖啡</li><li>牛奶</li><li>茶</li>
</ol><!--套娃-->
<h4>一个套娃列表：</h4>
<ul><li>咖啡</li><li>茶<ul><li>红茶</li><li>绿茶</li></ul></li><li>牛奶<ol><li>黑牛奶</li><li>奶绿</li></ol></li>
</ul>

在这里插入图片描述

3. 超链接

基本语法

<a href="目标地址" target="打开方式">链接文本</a>

href属性（目标地址）

完整URL：https://www.baidu.com
相对路径：
- ./表示当前目录（可省略）
- ../表示上级目录
绝对路径：以/开头，从根目录开始

target属性（打开方式）

_self：在当前窗口打开（默认）

_blank：在新窗口打开

<a href="https://www.baidu.com" target="_blank">百度一下,你就知道</a> <br />
<!-- 相对路径-->
<a href="./01标题段落换行.html">01标题段落换行-相对路径</a> <br /><!--绝对路径-->
<a href="/01标题段落换行.html">01标题段落换行-绝对路径</a> <br />

4. 图片标签

基本语法

<img src="图片路径" title="提示文字" alt="替代文本" width="宽度"/>

属性说明

src：图片路径（支持URL、相对路径、绝对路径）
title：鼠标悬停时显示的文字
alt：图片加载失败时显示的文字
width/height：设置图片尺寸

<!-- 相对路径-->
<img src="./img/白熊.png" title="白熊-相对路径" alt="白熊-相对路径-加载失败" width="100px"/>
<hr/>
<!-- alt-->
<img src="./img/白熊c.png" title="白熊-相对路径" alt="白熊-相对路径-加载失败" width="100px"/>
<hr/>
<!-- 绝对路径-->
<img src="/img/白熊.png" title="白熊-绝对路径" alt="白熊-绝对路径-加载失败" width="100px"/>

在这里插入图片描述

5. 表格标签

表格结构

<table>          <!-- 定义表格 --><tr>         <!-- 表格行 --><th>     <!-- 表头单元格，加粗居中 --><td>     <!-- 普通单元格 -->

表格合并

rowspan：跨行合并
colspan：跨列合并

<h3 style="text-align: center">员工技能竞赛评分表</h3>
<table border="1px" style="width: 400px ;margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分数</th><th>备注</th></tr><tr><td>1</td><td>张三</td><td>100</td><td rowspan="6">前三名获得优秀奖</td></tr><tr><td>2</td><td>李四</td><td>90</td></tr><tr><td>3</td><td>王五</td><td>80</td></tr><tr><td>总人数</td><td colspan="2">200</td></tr><tr><td>平均分</td><td colspan="2">80</td></tr><tr><td>及格率</td><td colspan="2">80%</td></tr>
</table>

在这里插入图片描述

6. 表单标签

表单结构

<form action="提交地址" method="提交方式"><!-- 表单项 -->
</form>

method属性（提交方式）

GET：
- 参数显示在URL中
- 有长度限制，不安全
- 不能上传文件
POST：
- 参数不显示在URL中
- 无长度限制，相对安全
- 可以上传文件

常用表单项

<input type="text">        <!-- 文本框 -->
<input type="password">    <!-- 密码框 -->
<input type="radio">       <!-- 单选框 -->
<input type="checkbox">    <!-- 复选框 -->
<input type="file">        <!-- 文件上传 -->
<input type="hidden">      <!-- 隐藏域 -->
<textarea></textarea>      <!-- 多行文本域 -->
<select><option></select>  <!-- 下拉框 -->

重要属性

name：参数名称（必须设置）
value：参数值
readonly：只读
disabled：禁用
checked：默认选中（单选/复选）

<!--form 表单标签action   定义表单数据的提交地址1 url2 绝对路径3 相对路径method   定义表单数据的提交方式GET1 参数会以键值对形式放在url后提交 url?name=value&name=value2 数据直接暴露在地址栏上，相对不安全3 地址栏长度有限制，所以提交的数据量不大4 地址栏上只能是字符，不能提交文件5 相比于POST，效率高一些POST1 参数不会放到url后2 数据不会直接暴露在地址栏上，相对安全3 数据是单独打包通过请求体发送，提交的数据量比较大4 请求体中，可以是字符，也可以是字节，可以提交文件5 相比于get效率略低一些PUTDELETE....表单项标签表单项标签一定要定义name属性，该属性用于明确提交时的参数名表单项还需要定义value属性，该属性用于定义提交时的参数值inputtype 输入信息的表单项类型text      单行普通文本框password  密码框submit    提交按钮reset     重置按钮radio     单选框  多个选项只能选一个多个单选框使用相同的name属性值，则会有互斥效果checkbox  复选框  多个选项选多个hidden    隐藏域  不显示在页面上，提交时会携带file      文件上传textarea   文本域，多行文本框select     下拉框option  选项
-->
<!--http://localhost:63342/HTML-CSS-JS/index.html?
id=123&rid=456&username=admin&password=123456&gender=1&
hobby=1&hobby=2&hobby=3&intro=%E4%BD%A0%E5%A5%BD&province=10&
avatar=%E7%99%BD%E7%86%8A.png-->
<form action="index.html" method="get">
<!--    添加表单项标签，用户输入信息的标签--><input type="hidden" name="id" value="123"><br><input type="text" name="rid" value="456" readonly><br><input type="text" name="did" value="789" disabled><br>用户名：<input type="text" name="username" value="admin"> <br>密码：<input type="password" name="password" value="123456">  <br>性别：<input type="radio" name="gender" value="1" checked> 男<input type="radio" name="gender" value="0" > 女 <br>爱好：<input type="checkbox" name="hobby" value="1"> 篮球<input type="checkbox" name="hobby" value="2"> 足球<input type="checkbox" name="hobby" value="3"> 羽毛球<input type="checkbox" name="hobby" value="4"> 乒乓球<input type="checkbox" name="hobby" value="5"> 网球 <br>个人简介：<textarea name="intro" style="width: 300px; height: 100px;">请输入个人简介</textarea> <br>籍贯：<select name="province"><option value="1">北京</option><option value="2">天津</option><option value="3">河北</option><option value="4">山西</option><option value="5">内蒙古</option><option value="6">辽宁</option><option value="7">吉林</option><option value="8">黑龙江</option><option value="9">上海</option><option value="10">江苏</option><option value="11">浙江</option><option value="12">安徽</option><option value="13">福建</option><option value="14">江西</option><option value="15">山东</option><option value="16">河南</option><option value="17">湖北</option><option value="18">湖南</option><option value="19">广东</option><option value="20">广西</option><option value="21">海南</option><option value="22">重庆</option><option value="23">四川</option><option value="24">贵州</option><option value="25">云南</option><option value="26">西藏</option><option value="27">陕西</option><option value="28">甘肃</option><option value="29">青海</option><option value="30">宁夏</option><option value="31">新疆</option><option value="32">香港</option><option value="33">澳门</option><option value="34">台湾</option><option value="35">国外</option></select> <br>选择头像：<input type="file" name="avatar"><br><input type="submit" value="登录"/><input type="reset" value="重置"/>
</form>

在这里插入图片描述

7. 布局

块级元素 vs 行内元素

特性	块级元素	行内元素
显示	独占一行	同行显示
尺寸设置	有效	通常无效
示例	`<div>`, `<h1>-<h6>`, `<p>`	`<span>`, `<a>`, `<img>`

CSS样式设置

<div style="属性:值; 属性:值;">内容</div>

常用样式：

border：边框
width/height：宽高
background-color：背景色
margin：外边距
color：文字颜色
font-size：字体大小

<div style="border: 1px solid red;width: 500px;height: 300px;background-color: bisque;margin: 10px auto;">123</div>
<div style="border: 1px solid red;width: 500px;height: 300px;background-color: blueviolet;margin: 10px auto">456</div>
<div style="border: 1px solid red;width: 500px;height: 300px;background-color: cadetblue;margin: 10px auto"><span style="font-size: 30px;color: chartreuse;font-weight: bold">北京时间9月24日凌晨</span>，西甲第6轮，皇马客场挑战莱万特。凭借斯坦托诺、维尼修斯以及姆巴佩的进球，皇马最终4-1大胜对手。新赛季，皇马已疯狂7连胜。
</div>
<span style="border: 1px solid greenyellow;width: 100px;height: 100px">1234567890</span>

在这里插入图片描述

8. 特殊字符

常用字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'`（IE不支持）	`'`
¢	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

使用场景

显示HTML保留字符（如<, >）
显示特殊符号（如版权符号、货币符号）

CSS

1. CSS引入方式

三种CSS引入方式

方式一：行内式（内联样式）

通过元素的style属性直接设置样式
语法：style="样式名:样式值;样式名:样式值;..."

<input type="button" value="按钮" style="width: 200px; height: 50px; background-color: blueviolet;">

缺点：

代码复用率低，不利于维护
CSS与HTML代码混杂，影响可读性
增加文件大小，影响性能

方式二：内嵌式（内部样式表）

在<head>标签中使用<style>标签定义样式
通过选择器确定样式作用元素

<head><style>input {width: 200px;height: 50px;background-color: blueviolet;}</style>
</head>

方式三：外部样式表（推荐）

将CSS代码保存在独立的.css文件中
通过<link>标签引入

<head><link rel="stylesheet" href="css/09btn.css">
</head>

外部CSS文件示例 (09btn.css)：

input {width: 200px;height: 50px;background-color: blueviolet;color: white;font-size: 20px;font-family: Arial;border: 2px solid red;border-radius: 10px;
}

2. CSS选择器

常用选择器类型

1. 标签选择器（元素选择器）

通过标签名选择元素
语法：标签名 {样式}

input {width: 100px;height: 50px;background-color: red;
}

缺点：无法精确控制特定元素

2. ID选择器

通过元素的id属性选择
语法：#id值 {样式}
ID在页面中必须唯一

#box {width: 500px;height: 500px;background-color: yellow;
}

<div id="box">内容</div>

缺点：只能作用于单个元素

3. 类选择器（最常用）

通过元素的class属性选择
语法：.class值 {样式}
一个元素可以有多个class，用空格分隔

.shape {width: 100px;height: 50px;border-radius: 10px;
}.color {background-color: blueviolet;color: white;
}.font {font-size: 20px;font-family: "Courier New";
}

<!-- 单个类 -->
<input type="button" value="按钮" class="shape"><!-- 多个类组合 -->
<input type="button" value="按钮" class="shape font color">

优点：高度复用，灵活组合

其他选择器类型（补充）

属性选择器：[type="button"]
伪类选择器：:hover, :focus
伪元素选择器：::before, ::after
组合选择器：div p（后代选择器）
子代选择器：div > p
并集选择器：h1, h2, h3
通配符选择器：*

3. CSS浮动

浮动特性

元素浮动后不会遮挡文字
浮动元素会脱离正常文档流
常用于实现多栏布局

浮动属性

.float-left {float: left;    /* 左浮动 */
}.float-right {float: right;   /* 右浮动 */
}.float-none {float: none;    /* 不浮动（默认） */
}

display属性

block：块级元素（默认，可设置宽高）
inline：行内元素（宽高设置可能不生效）
inline-block：行内块元素（兼具两者特性）

浮动布局示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>11CSS浮动</title><style>/* 浮动之后一定不会挡住文字*/.outerDiv{width: 500px;height: 500px;border: 2px solid black;background-color: beige;margin: 100px auto;}.innerDiv{width: 100px;height: 100px;background-color: beige;color: white;font-size: 20px;font-weight: bold;border: 1px solid black;/*如果设置成inline 变成行， 就会失去block块设置宽和高的特性*//*display: block;/*默认值 ：block 块  inline 行内 宽和高的设置可能会不生效  */}.d1{background-color: greenyellow;float: left;}.d2{background-color: darkslateblue;float: right;}.d3{background-color: darkorange;float: left;}</style>
</head>
<body><div class = "outerDiv"><div class = "innerDiv d1">div1</div><div class = "innerDiv d2">div2</div><div class = "innerDiv d3">div3</div></div>
</body>
</html>

在这里插入图片描述

4. CSS定位

定位属性

position取值：

static：默认定位（不定位）
relative：相对定位（相对于自身原位置）
absolute：绝对定位（相对于最近的定位祖先）
fixed：固定定位（相对于浏览器窗口）

偏移属性：

left / right：水平偏移
top / bottom：垂直偏移

定位示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>12CSS定位</title><style>/*position:static   默认fixed    相对定位  相对于视口(浏览器窗口)定位的，这意味着即使滚动页面，它也始终位于同一位置。relative 相对定位  相对于其正常位置进行定位absolute 绝对定位  相对于最近的定位祖先元素进行定位leftrighttopbottom*/.innerDiv{width: 100px;height: 100px;background-color: beige;color: white;font-size: 20px;font-weight: bold;border: 1px solid black;}.d1{background-color: greenyellow;position: absolute;top:100px;right:100px;}.d2{background-color: darkslateblue;}.d3{background-color: darkorange;}</style>
</head>
<body><div class = "innerDiv d1">div1</div><div class = "innerDiv d2">div2</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div><div class = "innerDiv d3">div3</div></body>
</html>

在这里插入图片描述

对position属性进行修改:

position: relative;

在这里插入图片描述

position: fixed;

在这里插入图片描述

定位类型对比

定位类型	参考基准	是否脱离文档流	常用场景
static	正常流	否	默认布局
relative	自身原位置	否（保留原空间）	微调元素位置
absolute	最近定位祖先	是	精确位置控制
fixed	浏览器窗口	是	固定位置元素（如导航栏）

5. CSS盒子模型

盒子模型组成

外边距(margin)||  边框(border)|     ||     |  内边距(padding)|     |     ||     |     |  内容(content)|     |     |     |
[margin][border][padding][content]

在这里插入图片描述

内边距 (padding)

内容与边框之间的间距
设置方式：

/* 单值：四个方向相同 */
padding: 10px;/* 双值：上下 | 左右 */
padding: 10px 20px;/* 三值：上 | 左右 | 下 */
padding: 10px 20px 30px;/* 四值：上 | 右 | 下 | 左（顺时针） */
padding: 10px 20px 30px 40px;/* 单独设置某个方向 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

外边距 (margin)

元素与其他元素之间的间距
设置方式与padding相同

margin: 10px;                    /* 四个方向 */
margin: 10px 20px;               /* 上下 | 左右 */
margin: 10px 20px 30px 40px;     /* 上 | 右 | 下 | 左 */

盒子模型示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>13CSS盒子模型</title><style>/*内边距padding外边距margin*/.outerDiv{width: 500px;height: 500px;border: 2px solid black;background-color: beige;/*margin: 100px auto;*/padding-top: 100px;margin: 0px auto;}.innerDiv{width: 100px;height: 100px;background-color: beige;color: white;font-size: 20px;font-weight: bold;border: 1px solid black;float: left;}.d1{background-color: greenyellow;/*margin-top: 10px;*//*margin-left: 10px;*//*margin-right: 10px;*//*padding: 60px;*//*margin: 10px 20px;*/margin: 10px 20px 30px 40px; /*顺时针， 上 右 下 左*/}.d2{background-color: darkslateblue;margin-top: 10px;margin-right: 10px;}.d3{background-color: darkorange;margin-top: 10px;margin-right: 10px;}</style>
</head>
<body>
<div class = "outerDiv"><div class = "innerDiv d1">div1</div><div class = "innerDiv d2">div2</div><div class = "innerDiv d3">div3</div>
</div>
</body>
</html>

在这里插入图片描述

JavaScript

JS 引入方式

引入方式一：内嵌式

在 <head> 或 <body> 中使用 <script> 标签直接写 JS 代码。

HTML

预览

复制

<script>function sayHello() {alert("Hello, world!");}
</script>

引入方式二：外部脚本文件

使用 <script src="路径"></script> 引入外部 .js 文件。

HTML

预览

复制

<script src="js/14btn.js" type="text/javascript"></script>

注意事项

一个 <script> 标签不能同时引入外部文件又写内部代码。
引入外部文件时，标签内不要写任何内容（包括空格和换行）。
一个 HTML 文件中可以有多个 <script> 标签。

JS 变量与数据类型

变量声明

使用 var 声明变量，弱类型。

var i = 10;
i = "hello";
i = true;

常见数据类型

类型名	示例值	说明
number	`10`, `3.14`	整数或小数
string	`"abc"`	字符串
boolean	`true`, `false`	布尔值
object	`new Object()`	引用类型
function	`function(){}`	函数类型
undefined	`var a;`	声明未赋值
null	`var a = null;`	空对象

判断类型

typeof 变量名;

var 的特点总结

特点编号	描述
1	弱类型，统一用 `var` 声明
2	可重复声明
3	可多次赋不同类型值
4	语句结尾 `;` 可加可不加
5	区分大小写
6	命名规则同 Java
7	使用未声明变量会报错：`ReferenceError`
8	只声明不赋值，值为 `undefined`

常见运算符

算数运算符

+ - * / %

除零 → Infinity
模零 → NaN

复合运算符

+= -= *= /= %=

比较运算符

运算符	说明
`==`	等于，会尝试类型转换
`===`	全等于，类型不同直接 `false`

1 == '1'   // true
1 === '1'  // false

逻辑运算符

||  &&  !

条件运算符

条件 ? 值1 : 值2

位运算符

& | ^ ~ << >> >>>

JS 函数声明与事件绑定

函数声明语法

function 函数名(参数列表) {// 方法体
}

按钮事件绑定方式（行内绑定）

事件名	触发方式	示例代码
`onclick`	单击按钮	`<button onclick="sayHello()">`
`ondblclick`	双击按钮	`<button ondblclick="sayHello()">`

示例

<button onclick="sayHello()">点我</button><script>function sayHello() {alert("Hello, world!");}
</script>

JS 控制结构

分支结构

1.1 `if...else if...else`

var month = Number.parseInt(prompt("请输入月份："));if (month >= 3 && month <= 5) {alert("春眠不觉晓");
} else if (month >= 6 && month <= 8) {alert("吉吉蚊子咬");
} else if (month >= 9 && month <= 11) {alert("蚊子死翘翘");
} else if (month == 12 || month == 2 || month == 1) {alert("冬天皮肤变好了");
} else {alert("客官不可以");
}

注意

prompt() 返回 字符串，需转成数字再比较。
转换函数：Number.parseInt(str) 或 parseInt(str)。

1.2 真假值规则（隐式布尔转换）

非空字符串会判断为true
非空对象会判断为true
非0number 会判断为true

类型	示例值	被 `if` 当作
非空字符串	`'false'`	`true`
非空对象	`{}`, `[]`	`true`
非 0 数字	`-1`, `3.14`	`true`
0	`0`	`false`
空字符串	`''`	`false`
null/undefined	`null`, `undefined`	`false`

if ('false') {      // truealert('true');
} else {alert('false');
}

1.3 `switch...case` 语法（补充）

switch (month) {case 3:case 4:case 5:alert("春");break;case 6:case 7:case 8:alert("夏");break;// ...default:alert("输入有误");
}

循环结构

2.1 `while` 循环

var i = 1;
while (i <= 9) {var j = 1;while (j <= i) {document.write(i + "*" + j + "=" + i * j + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");j++;}document.write("<hr>");i++;
}

2.2 `for` 循环

for (var i = 1; i <= 9; i++) {for (var j = 1; j <= i; j++) {document.write(i + "*" + j + "=" + i * j + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");}document.write("<hr>");
}

2.3 遍历数组

2.3.1 经典 `for` 下标循环

var arr = ["北京", "天津", "上海", ..., "新疆"];
document.write("<ol>");
for (var i = 0; i < arr.length; i++) {document.write("<li>" + arr[i] + "</li>");
}
document.write("</ol>");

2.3.2 `for...in` 循环（索引迭代）

document.write("<ol>");
for (var city in arr) {   // city 是索引，不是元素document.write("<li>" + arr[city] + "</li>");
}
document.write("</ol>");

注意

for...in 拿到的是数组下标（字符串类型），不是值。
推荐数组使用 for...of（ES6）或直接 forEach。

速查表

结构	关键字/语法	适用场景
分支	`if...else if...else`	区间判断
分支	`switch...case`	等值判断
循环	`while`	未知次数循环
循环	`for`	已知次数循环
数组遍历	`for(var i=0;i<len;i++)`	经典下标循环
数组遍历	`for(var idx in arr)`	拿到索引，兼容性高
数组遍历	`for(var val of arr)`	拿到元素，ES6+

JS 函数

1.1 两种声明风格

风格	示例	提升	场景
声明式	`function sum(a,b){}`	✅ 有提升	公用工具、库代码
表达式	`var sum = function(a,b){}`	❌ 无提升	按需赋值、回调、闭包

1.2 与 Java 的 5 大差异（注释原话）

无访问修饰符
无返回值类型 / void，直接 return
无异常列表
实参形参数量可不一致 → 内部通过 arguments 伪数组拿到所有实参
函数是一等公民 → 可作为值传递（高阶函数）

1.3 arguments 实战

function sum1(a, b) {console.log(arguments); // 类数组 {0:5,1:6,2:7...}return a + b;          // 仅前 2 个参与运算
}
sum1(5, 6, 7, 8, 9, 10);   // 14

arguments.length 可获得真实调用个数
与形参是双向绑定关系（非严格模式）

1.4 函数示例

function add(getSum) {          // 形参是函数return getSum(20, 30);
}
var result = add(sum1);         // 把函数当实参传入
console.log(result);            // 50

JS 对象

2.1 两种创建方式

方式	语法	特点
new Object	`var p = new Object(); p.name = '张三';`	动态追加成员
字面量	`var p = {name:'张三', show(){}}`	一次写完，简洁

2.2 成员访问 & 添加

点号 p.name
中括号 p['name']（支持变量键）
不存在即自动添加 → 利用此特性可做“Map”结构

2.3 this 指向

对象方法内的 this → 指向调用时的当前对象

person.show(); // this == person

JSON

3.1 语法硬规则（易错）

项目	要求
键	必须双引号 `" "`
字符串值	必须双引号 `" "`
数字 / 布尔 / null	直接写

3.2 嵌套支持

对象里嵌对象
对象里嵌数组
数组里再嵌对象 → 无限层级

3.3 序列化 ↔ 反序列化

// 字符串 → 对象
var person = JSON.parse(personStr);
// 对象 → 字符串
var str = JSON.stringify(person, null, 2); // 带格式化

3.4 深度访问示例

person.dog.name            // "小狗"
person.friends[1].age      // 19

小技巧：用 可选链 ?.（ES2020）可防止 undefined 报错

JS 数组

4.1 三种构造方式

var a1 = new Array();               // []
var a2 = new Array('Saab','Volvo'); // ['Saab','Volvo']
var a3 = ['Saab','Volvo'];          // 字面量（推荐）

4.2 常用 API 速记

功能	示例	备注
长度	`arr.length`	非只读，手动改大可空位补 undefined
查找索引	`arr.indexOf(item)`	严格相等；找不到 `-1`
增删	`push/pop/shift/unshift/splice`	后续笔记再展开
遍历	`for / for...of / forEach / map`	根据场景选择

4.3 数组即“栈”也“队列”

arr.push('BMW');      // 队尾加
arr.pop();            // 队尾出
arr.shift();          // 队头出
arr.unshift('BMW');   // 队头加

JS 事件

5.1 绑定方式

方式	示例	特点
行内	`<button onclick="f1();f2();">`	快速演示，高耦合
DOM 属性	`btn.onclick = f1;`	一个事件只能绑一个函数（覆盖）
addEventListener	`btn.addEventListener('click',f1);`	一个事件多个函数，推荐

5.2 事件分类大全

① 鼠标事件

名称	触发时机
`onclick`	左键单击
`ondblclick`	左键双击
`onmouseover`	指针移到元素上
`onmousemove`	指针在元素内移动
`onmouseleave`	指针离开元素

② 键盘事件

名称	触发时机
`onkeydown`	按键按下（任意键）
`onkeyup`	按键松开
`onkeypress`	产生字符键（已废弃，了解即可）

③ 表单事件

名称	触发时机
`onfocus`	元素获得焦点
`onblur`	元素失去焦点
`onchange`	内容改变且失焦后触发（`<select>` 立即触发）

④ 页面 / 资源事件

名称	触发时机
`onload`	页面或图片等资源加载完成
`onsubmit`	表单提交按钮被点击
`onreset`	表单重置按钮被点击

5.3 默认行为拦截

onsubmit / onreset 返回 false → 阻止浏览器默认提交/重置

function testSubmit() {return confirm("确定要提交表单吗？");
}

<form onsubmit="return testSubmit()">

同理 <a onclick="return false;"> 可阻止跳转

5.4 多函数同事件

行内直接写多条语句：

<input onclick="click1(); click2();">

DOM 方式：

btn.addEventListener('click', click1);
btn.addEventListener('click', click2);

JS DOM 事件编程

1.1 页面加载完成事件

写法	执行时机	特点
`<body onload="ready()">`	传统行内	HTML/CSS/图片全部加载完触发
`window.onload = function (){ ... }`	推荐脚本内	解耦 HTML，同一窗口只能绑定一次（后面会覆盖）

1.2 完整执行链

window.onload = function () {var btn = document.getElementById("btn");btn.onclick = function () {alert("点击了");var div = document.getElementById("div1");div.style.backgroundColor = "blue";   // 修改内联样式};
};

getElementById 唯一返回元素节点
div.style.* 只能读写内联样式；要获取计算后样式需 getComputedStyle(div)

JS BOM

2.1 window 对象

浏览器自动创建，全局作用域，调用时可省略 window.

alert('hi');            // 等价 window.alert('hi');
confirm('sure?');       // 返回 boolean
prompt('input:');       // 返回 string | null

2.2 定时器

函数	含义	返回	清除
`setTimeout(fn, ms)`	一次延迟	数字 id	`clearTimeout(id)`
`setInterval(fn, ms)`	反复执行	数字 id	`clearInterval(id)`

2.3 history 对象（页面前进后退）

history.back();      // 后退
history.forward();   // 前进
history.go(-2);      // 后退 2 步

2.4 location 对象

location.href = 'https://xxx'; // 跳转并生成历史记录
location.replace('https://xxx'); // 跳转**不**生成历史记录
location.reload();               // 刷新当前页

2.5 本地存储

名称	生命周期	容量	API 四件套
`sessionStorage`	标签页/浏览器关闭即清	~5M	`setItem` `getItem` `removeItem` `clear`
`localStorage`	永久保留，手动清	~5M	同上

   sessionStoragesessionStorage.setItem("key","value")sessionStorage.getItem("key")sessionStorage.removeItem("key")sessionStorage.clear()localStoragelocalStorage.setItem("key","value")localStorage.getItem("key")localStorage.removeItem("key")localStorage.clear()

JS DOM 编程全解

3.1 DOM 是什么

浏览器内存中对 HTML 的树形对象表示
每次修改都可能触发重排/重绘，需批量处理减少性能损耗

3.2 节点类型（nodeType）

常量	值	说明
`ELEMENT_NODE`	1	元素节点（标签）
`ATTRIBUTE_NODE`	2	属性节点（旧模型）
`TEXT_NODE`	3	文本节点（换行、空格也算）

实际开发用 node.nodeType === 1 判断元素节点

3.3 获取元素（直接法）

方法	返回	备注
`getElementById('id')`	单个元素	大小写敏感，唯一
`getElementsByTagName('tag')`	HTMLCollection（类数组）	实时更新
`getElementsByName('name')`	NodeList	常用于表单
`getElementsByClassName('cls')`	HTMLCollection	空格分隔多类

3.4 获取元素（间接法 → 关系导航）

node.childNodes          // 所有子节点（含文本）
node.firstElementChild   // 第一个元素子节点
node.lastElementChild    // 最后一个元素子节点
node.parentElement       // 父元素
node.previousElementSibling // 上一个兄弟元素
node.nextElementSibling     // 下一个兄弟元素

注意：childNodes 会拿到文本节点（换行），通常用 children 只拿元素

3.5 操作元素三件套

① 属性

element.setAttribute('title', 'hello'); // 自定义属性也行
element.getAttribute('title');
element.removeAttribute('title');

② 样式

element.style.color = 'blue';            // 内联样式
element.style.backgroundColor = 'yellow'; // 驼峰命名

批量样式建议加/改 className 或 classList

③ 文本

属性	说明
`innerHTML`	解析标签，可插 HTML
`innerText`	纯文本，自动转义
`textContent`	纯文本，保留格式，性能更高

3.6 创建/插入/替换/删除节点

var li = document.createElement('li');   // 创建
li.id = 'cs';
li.innerText = '长沙';parent.appendChild(li);                  // 尾部追加
parent.insertBefore(new, ref);           // 参考节点前插入
parent.replaceChild(new, old);           // 替换
old.remove();                            // 自删（IE11+）或 parent.removeChild(old)

3.7 清空列表两种写法

ul.innerHTML = '';      // 极速，但会丢失事件监听
// 或循环 removeChild

正则表达式

4.1 两种创建方式

var reg1 = /o/gi;           // 字面量（推荐）
var reg2 = new RegExp('o', 'gi');

4.2 修饰符

修饰符	含义
`g`	全局匹配
`i`	忽略大小写
`m`	多行匹配

4.3 常用方法

方法	说明	示例
`test(str)`	返回布尔	`/cat/i.test('Cat') // true`
`exec(str)`	返回数组或 null	可循环取出所有匹配（g 模式）
`str.match(reg)`	返回数组或 null	常与 g 配合一次性拿全部
`str.replace(reg, newSubStr	function)`	替换	见下例

4.4 替换示例

var str = "hello world";
str = str.replace(/o/gi, "@"); // "hell@ w@rld"

4.5 元字符速查

符号	意义
`^`	开头
`$`	结尾
`.`	任意字符（除换行）
`\d`	数字 `[0-9]`
`\w`	单词字符 `[A-Za-z0-9_]`
`\s`	空白符
`*`	0 次或多次
`+`	1 次或多次
`?`	0/1 次
`{n,m}`	n 到 m 次

4.6 实战：用户名校验

规则：

字母开头
长度 6-10
后续可字母数字下划线

var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/;
console.log(reg.test('abc_123')); // true

4.7 邮箱正则

var reg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
自删（IE11+）或 parent.removeChild(old)

3.7 清空列表两种写法

ul.innerHTML = '';      // 极速，但会丢失事件监听
// 或循环 removeChild

正则表达式

4.1 两种创建方式

var reg1 = /o/gi;           // 字面量（推荐）
var reg2 = new RegExp('o', 'gi');

4.2 修饰符

修饰符	含义
`g`	全局匹配
`i`	忽略大小写
`m`	多行匹配

4.3 常用方法

方法	说明	示例
`test(str)`	返回布尔	`/cat/i.test('Cat') // true`
`exec(str)`	返回数组或 null	可循环取出所有匹配（g 模式）
`str.match(reg)`	返回数组或 null	常与 g 配合一次性拿全部
`str.replace(reg, newSubStr	function)`	替换	见下例

4.4 替换示例

var str = "hello world";
str = str.replace(/o/gi, "@"); // "hell@ w@rld"

4.5 元字符速查

符号	意义
`^`	开头
`$`	结尾
`.`	任意字符（除换行）
`\d`	数字 `[0-9]`
`\w`	单词字符 `[A-Za-z0-9_]`
`\s`	空白符
`*`	0 次或多次
`+`	1 次或多次
`?`	0/1 次
`{n,m}`	n 到 m 次

4.6 实战：用户名校验

规则：

字母开头
长度 6-10
后续可字母数字下划线

var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/;
console.log(reg.test('abc_123')); // true

4.7 邮箱正则

var reg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;

查看全文

http://www.dtcms.com/a/452929.html

基于 MacOS 的Rokid 开发本地环境搭建指南

以前的计算集群：Beowulf集群（贝奥武夫集群）

软件开发中前端页面、后台管理页面、后端、数据中台的关系与开发流程

政务微网站建设方案wordpress在线版本

TypeScript 循环

【征文计划】JSAR实战：从零开始的空间小程序开发之旅

用A4打印机1:1打印A3试卷（A3 pdf切割）

知识体系_大数据框架环境搭建_虚拟机环境准备

个人网站设计的参考文献网站建设制作解决方案

《什么是Redis?》

soular入门到实战(4) - 如何通过工作台聚合TikLab所有工具链

解决GitHub大文件推送错误：彻底清理PDB文件并配置.gitignore

76、迁移飞浆PaddlePaddle的PP-LCNet_x1_0_doc_ori到onnx、mnn、ncnn、昇腾平台

从“能看”到“看懂”：多模态大模型如何突破视觉理解的瓶颈

【开题答辩全过程】以爱之家线上动物救助站的设计与实现为例，包含答辩的问题和答案

360搜索网站提交入口基于o2o的旅游网站建设

React Native：快速熟悉react 语法和企业级开发

Qwen-Audio：一种新的大规模音频-语言模型

做教育网站宣传策略湖北三丰建设集团股份网站

《Vuejs设计与实现》第 18 章（同构渲染）（上）

【前端基础】20、CSS属性——transform、translate、transition

ChartStudio: New Chart Types Added for Enhanced Data Visualization

测试用例设计万能公式：功能到安全

做招投标应该了解的网站广州产品网站设计

Apache StreamPark 快速上手从一键安装到跑起第一个 Flink SQL 任务

珠海市手机网站建设公司广州头条新闻最新

多模卫星导航定位与应用-原理与实践（RTKLib）5

【数据结构】汉诺塔问题

AI - 自然语言处理(NLP) - part 2 - 词向量

焦作做网站最专业的公司滨海新区做网站电话

HTML-CSS-JS入门学习笔记

HTML

1. 标题段落换行

标题标签

段落标签

换行标签

2. 有序和无序列表

无序列表 <ul>

有序列表 <ol>

列表嵌套

3. 超链接

基本语法

href属性（目标地址）

target属性（打开方式）

4. 图片标签

基本语法

属性说明

5. 表格标签

表格结构

表格合并

6. 表单标签

表单结构

method属性（提交方式）

常用表单项

重要属性

7. 布局

块级元素 vs 行内元素

CSS样式设置

8. 特殊字符

常用字符实体

使用场景

CSS

1. CSS引入方式

三种CSS引入方式

方式一：行内式（内联样式）

方式二：内嵌式（内部样式表）

方式三：外部样式表（推荐）

2. CSS选择器

常用选择器类型

1. 标签选择器（元素选择器）

2. ID选择器

3. 类选择器（最常用）

其他选择器类型（补充）

3. CSS浮动

浮动特性

浮动属性

display属性

浮动布局示例

4. CSS定位

定位属性

position取值：

偏移属性：

定位示例

定位类型对比

5. CSS盒子模型

盒子模型组成

内边距 (padding)

外边距 (margin)

盒子模型示例

JavaScript

JS 引入方式

引入方式一：内嵌式

引入方式二：外部脚本文件

注意事项

JS 变量与数据类型

变量声明

常见数据类型

判断类型

var 的特点总结

常见运算符

算数运算符

复合运算符

比较运算符

逻辑运算符

条件运算符

位运算符

JS 函数声明与事件绑定

函数声明语法

按钮事件绑定方式（行内绑定）

示例

无序列表 `<ul>`

有序列表 `<ol>`

1.1 `if...else if...else`

1.3 `switch...case` 语法（补充）

2.1 `while` 循环

2.2 `for` 循环

2.3.1 经典 `for` 下标循环

2.3.2 `for...in` 循环（索引迭代）