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

HTML-CSS-JS入门学习笔记

HTML

1. 标题段落换行

标题标签

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

html 复制代码

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

html 复制代码

<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>：水平分割线，用于内容分隔

整场比赛看下来，快船的实力还是更胜一筹，在后场发动机哈登的穿针引线下，耍的湖人团团转，浓眉多次被调出禁区，祖巴茨在湖人禁区翻江倒海，抢了19个篮板球，其中前场篮板就抢了8个，
还得到了21分，正负值+18；浓眉在他面前都不敢投篮，更没勇气往内线打，投篮14次只命中5球，第四节更是由于体力不支，3投0中，全场仅得到16分10篮板的数据，正负值-18。没有对比就没有伤害，不知道湖人后悔没?

带刀侍卫鲍威尔依然稳定输出，17中9，三分8中2，砍下22分4篮板3抢断。
哈登带病坚持比赛，打满第三节和第四节的前10分钟，一直打到剩下2分钟垃圾时间方才下场，真的累坏了，全场出战全队最高的39分47秒，19中7，其中三分9中4，罚球3中3，砍下21分4篮板12助攻的两双数据。登哥打球太聪明了，把湖人整条防线剪的七零八落，球队大脑当之无愧！同时也祝贺登哥得分超越"大O"罗伯特森（26710分），升至NBA历史得分榜第14位。

2. 有序和无序列表

无序列表 `<ul>`

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

html 复制代码

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

有序列表 `<ol>`

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

html 复制代码

<ol start="50">  <!-- 从50开始编号 -->
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

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

列表嵌套

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

html 复制代码

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

html 复制代码

<!--
无序列表 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. 超链接

基本语法

html 复制代码

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

href属性（目标地址）

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

target属性（打开方式）

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

_blank：在新窗口打开

html 复制代码

<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. 图片标签

基本语法

html 复制代码

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

属性说明

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

html 复制代码

<!-- 相对路径-->
<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. 表格标签

表格结构

html 复制代码

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

表格合并

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

html 复制代码

<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. 表单标签

表单结构

html 复制代码

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

method属性（提交方式）

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

常用表单项

html 复制代码

<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：默认选中（单选/复选）

html 复制代码

<!--
        form 表单标签
            action   定义表单数据的提交地址
                1 url
                2 绝对路径
                3 相对路径
            method   定义表单数据的提交方式
                GET
                    1 参数会以键值对形式放在url后提交 url?name=value&name=value
                    2 数据直接暴露在地址栏上，相对不安全
                    3 地址栏长度有限制，所以提交的数据量不大
                    4 地址栏上只能是字符，不能提交文件
                    5 相比于POST，效率高一些
                POST
                    1 参数不会放到url后
                    2 数据不会直接暴露在地址栏上，相对安全
                    3 数据是单独打包通过请求体发送，提交的数据量比较大
                    4 请求体中，可以是字符，也可以是字节，可以提交文件
                    5 相比于get效率略低一些

                PUT
                DELETE
                ....
         表单项标签
         表单项标签一定要定义name属性，该属性用于明确提交时的参数名
         表单项还需要定义value属性，该属性用于定义提交时的参数值
         input
                type 输入信息的表单项类型
                    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样式设置

html 复制代码

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

常用样式：

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

html 复制代码

<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="样式名:样式值;样式名:样式值;..."

html 复制代码

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

缺点：

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

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

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

html 复制代码

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

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

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

html 复制代码

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

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

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. 标签选择器（元素选择器）

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

css 复制代码

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

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

2. ID选择器

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

css 复制代码

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

html 复制代码

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

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

3. 类选择器（最常用）

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

css 复制代码

.shape {
    width: 100px;
    height: 50px;
    border-radius: 10px;
}

.color {
    background-color: blueviolet;
    color: white;
}

.font {
    font-size: 20px;
    font-family: "Courier New";
}

html 复制代码

<!-- 单个类 -->
<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浮动

浮动特性

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

浮动属性

css 复制代码

.float-left {
    float: left;    /* 左浮动 */
}

.float-right {
    float: right;   /* 右浮动 */
}

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

display属性

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

浮动布局示例

css 复制代码

<!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：垂直偏移

定位示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12CSS定位</title>
    <style>
        /*
        position:
            static   默认
            fixed    相对定位  相对于视口(浏览器窗口)定位的，这意味着即使滚动页面，它也始终位于同一位置。
            relative 相对定位  相对于其正常位置进行定位
            absolute 绝对定位  相对于最近的定位祖先元素进行定位
        left
        right
        top
        bottom
        */
        .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盒子模型

盒子模型组成

text 复制代码

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

内边距 (padding)

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

css 复制代码

/* 单值：四个方向相同 */
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相同

css 复制代码

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

盒子模型示例

css 复制代码

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

预览

复制

html 复制代码

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

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

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

HTML

预览

复制

html 复制代码

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

注意事项

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

JS 变量与数据类型

变量声明

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

javascript 复制代码

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;`	空对象

判断类型

javascript 复制代码

typeof 变量名;

var 的特点总结

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

常见运算符

算数运算符

javascript 复制代码

+ - * / %

除零 → Infinity
模零 → NaN

复合运算符

javascript 复制代码

+= -= *= /= %=

比较运算符

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

javascript 复制代码

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

逻辑运算符

javascript 复制代码

||  &&  !

条件运算符

javascript 复制代码

条件 ? 值1 : 值2

位运算符

javascript 复制代码

& | ^ ~ << >> >>>

JS 函数声明与事件绑定

函数声明语法

javascript 复制代码

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

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

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

示例

html 复制代码

<button onclick="sayHello()">点我</button>

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

JS 控制结构

分支结构

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

javascript 复制代码

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`

javascript 复制代码

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

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

javascript 复制代码

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

循环结构

2.1 `while` 循环

javascript 复制代码

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` 循环

javascript 复制代码

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` 下标循环

javascript 复制代码

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` 循环（索引迭代）

javascript 复制代码

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

javascript 复制代码

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 函数示例

javascript 复制代码

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 → 指向调用时的当前对象

javascript 复制代码

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

JSON

3.1 语法硬规则（易错）

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

3.2 嵌套支持

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

3.3 序列化 ↔ 反序列化

javascript 复制代码

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

3.4 深度访问示例

javascript 复制代码

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

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

JS 数组

4.1 三种构造方式

javascript 复制代码

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 数组即"栈"也"队列"

javascript 复制代码

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 → 阻止浏览器默认提交/重置

javascript 复制代码

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

html 复制代码

<form onsubmit="return testSubmit()">

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

5.4 多函数同事件

行内直接写多条语句：

html 复制代码

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

DOM 方式：

javascript 复制代码

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

JS DOM 事件编程

1.1 页面加载完成事件

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

1.2 完整执行链

javascript 复制代码

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.

javascript 复制代码

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 对象（页面前进后退）

javascript 复制代码

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

2.4 location 对象

javascript 复制代码

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

2.5 本地存储

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

javascript 复制代码

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

   localStorage
   localStorage.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 获取元素（间接法 → 关系导航）

javascript 复制代码

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

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

3.5 操作元素三件套

① 属性

javascript 复制代码

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

② 样式

javascript 复制代码

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

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

③ 文本

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

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

javascript 复制代码

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 清空列表两种写法

javascript 复制代码

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

正则表达式

4.1 两种创建方式

javascript 复制代码

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 替换示例

javascript 复制代码

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
后续可字母数字下划线

javascript 复制代码

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

4.7 邮箱正则

javascript 复制代码

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

3.7 清空列表两种写法

javascript 复制代码

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

正则表达式

4.1 两种创建方式

javascript 复制代码

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 替换示例

javascript 复制代码

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
后续可字母数字下划线

javascript 复制代码

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

4.7 邮箱正则

javascript 复制代码

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

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