HTML学习阶段总结

原创 于 2022-09-04 19:36:33 发布 · 378 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #学习 #前端 #css #javascript

本文是HTML学习阶段的总结，涵盖了HTML的基本结构、文档声明与字符编码、常用标签、表格与表单、CSS语法规范及样式设置、JavaScript基础及事件处理，以及jQuery的简介和使用。通过学习，读者将对HTML有更深入的理解，能够创建和美化网页。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于HTML

  • HTML文件

    1. 网页是网站中的单独页面，而网页文件的格式通常是HTML；
    2. 网页是构成网站的基本元素，它通常是由图片、链接、文字、声音、视频等元素组成；
    3. 网页通常格式以 .htm 或者 .html 后缀结尾的文件，通常也叫HTML文件

  • HTML 是超文本标记语言（Hyper Text Markup Language）

    HTML是描述网页的一种语言，不是编程语言，而是一种标记语言，用于创建文本与编写网页图片等

    超文本：

    1. 呈现内容上超越了传统文本能够表示的范围，有图片、声音、多媒体等内容；
    2. 可以从一个文件跳转到另一个文件；

  • 网页加载过程

    前端人员开发代码 -> 浏览器显示代码（解析、渲染）-> 生成Web页面

  • 网页标准的组成

主要包括结构、表现、行为

标准说明
结构结构用于对网页元素进行整理和分类，现阶段主要学习的是HTML
表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为行为是指网页模型的定义以及交互的编写，现阶段主要学习为JavaScript

Web标准的最佳方案就是 结构、表现和行为相互分离（各自在对应文件中编写代码）

概述

  • 基本语法概述

    1. HTML标签是由尖括号包围的关键词，例如；

    2. HTML标签通常是成对出现的，例如 和 ,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签；

    3. 也有部分特殊标签必须是单个标签，例如<br />,我们称为单标签。

  • 标签关系

    包含关系、并列关系

  • 基本结构

<html>
    <head>
        <title>Hello页面</title>
    </head>
    <body>
        专业Hello 语句
    </body>
</html>

每一个网页都有结构标签（骨架标签），页面内容也是在这些基本标签上书写的

标签名定义说明
html标签HTML标签页面中最大标签，我们称为根标签
head标签文档的头部在head标签中必须设置的标签为title
title标签文档的标题让页面拥有一个属于自己的网页标题
body标签文档的主体元素包含文档的所有内容，页面内容基本都是放到body中的

文档声明与字符编码

  • 文档声明

<! DOCTYPE> 文档类型声明，告诉浏览器该用哪种HTML版本来显示网页

<! DOCTYPE html>

**注意：**该代码含义为当前采用HTML5版本来显示网页，该代码必须放置在文档最前面，即之前，且它不是一个标签，仅仅是一个声明

<html lang="en">

lang用来定义当前文档显示语言的种类，en为英语，如果是中文则为zh-CN

<meta charset="utf-8">

charset是字符集设置，规定HTML文档该用那种字符进行编码

charset常用的值有 GB2312、BIG5、GBK、UTF-8

HTML常用标签

  • 文本格式化标签
语义标签说明
加粗<strong>或者<b>更推荐使用<strong> 标签加粗 语义更强烈
倾斜<em>或者<i>更推荐使用<em> 标签倾斜 语义更强烈
删除线<del>或者<s>更推荐使用<del> 标签删除线 语义更强烈
下划线<ins>或者<u>更推荐使用<ins> 标签下划线语义更强烈

  • 图像标签的属性：

  • 在HTML标签中, img 标签用于定义HTML 页面中的图像

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- img是图像标签 是单标签 -->
    <!-- 一个标签的属性 通常写在标签名称之后，用空格隔开 -->
    <!-- <img src="file:///C:/Users/Administrator/Desktop/cat.png" /> -->
    <!-- 绝对路径 file:///C:/Users/Administrator/Desktop/cat.png -->
    <!-- 本地连接前 加上 file:/// -->
	<!-- <img src="图像URL"/> -->	
    <img src="../../images/cat.png" />
    <!-- 相对路径 : 相对于当前文件所在目录的位置 的相对相对位置关系  -->

    <!-- 绝对路径：从根文件出发  相对路径： 从所在的当前文件出发 -->
</body>
</html>

    src是img标签必须的属性，用于指定图像文件的路径和文件名

属性属性值说明
src图片路径必须属性
alt文本替换文本。图像不能显示的文字
title文本提示文本。鼠标放到图像上，显示文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细

注意：

  1. 图像标签可以拥有多个属性，必须写在标签名的后面；

  2. 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开

  3. 属性采取键值对的格式，即key =“value” 的格式，属性=“属性值”

  • 超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 链接的作用 ：1、跳转到其它网页（html文件） -->
    <!--             2、下载文件 -->
    <!--             3、导航 （滚动到指定位置）-->

    <!-- 跳转到指定的网页 -->
    <!-- 按下时是红色 未点击时是蓝色 点击后是紫色 -->
    <a href="https://www.baidu.com">百度一下</a>
    <a href="https://www.sina.com">新浪网页</a>

    <!-- 跳转到本地的网页 采用相对路径写法 -->
    <a href="01-第一个网页.html">跳转到第一个网页</a>

    <!-- target属性有两个属性值  _self 当前网页中打开链接 
        _blank 新建的网页中打开链接 -->
    <a href="https://www.baidu.com" target="_self">百度</a>
    <a href="https://www.baidu.com" target="_blank">百度</a>

    <!-- 空链接  自刷新、自跳转-->
    <a href="#">这是一个空链接</a>

    <!-- 下载链接 -->
    <a href="./images/cat.png">点击展示图片</a>
    <a href="./sizer334.zip">点击下载文件</a>
</body>
</html>

链接的语法格式：

<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
  • 锚点设置（anchor 锚）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 链接中的导航功能 ： 锚点 -->
    <!-- 功能 ： 从目录导航到指定位置; 回到网页顶部 -->

    <!-- 锚点设置的步骤 -->
    <!-- 1、给需要导航的标记 设置id属性 id值必须唯一 -->
    <!-- 2、在对应链接标记中的href属性 设置属性值为" #id值 " -->

    <!-- Ctrl + / 快捷注释 -->
    <!-- 标记语言注释  -->

    <h1 id="top">萌宠</h1>
    <h2>目录</h2>
    <a href="#a">1 萌宠简介</a> <br />
    <a href="#b">2 萌宠种类</a> <br />
    <a href="#c">3 猫的生活习性</a>

    <h2 id="a">萌宠简介</h2>
    内容...
    <h2 id="b">萌宠种类</h2>
    内容...
    <h3 id="c">猫的生活习性</h3>
    内容...
<br />
<a href="#top">返回到顶部</a>
</body>
</html>

属性作用

属性作用
href用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

链接的分类：

  1. 外部链接：外部网络地址 https://www.baidu.com

  2. 内部链接: index.html

  3. 空链接： #

  4. 下载链接： 链接中带文件或者压缩包

  5. 网页元素：网页中的各种元素，文本、图像、表格、音频、视频等都可以添加超链接

  6. 锚点链接：通过链接可以快速定位到页面中的指定位置 （href = “#元素id属性”）比如百度百科

表格标签

表格的基本语法

<table>
    <tr>
        <td>单元格中的文字</td>
        ......
    </tr>
</table>

  1. <table></table>是用于定义表格的标签；

  2. <tr></tr> 标签用于定义表格中的行，必须嵌套在table中；

  3. <td></td> 用于定义表格中的单元格，必须嵌套在tr中。

表格属性

属性名属性值描述
alignleft、center、right规定表格相对于周围元素的对齐方式
border数字值规定表格单元是否拥有边框，默认为0，表示没有边框，其余值越大外边界越宽。
cellpadding像素值规定单元边缘与内容之间的空白，默认1像素
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table的属性 -->
    <!-- align 设置表格的水平位置 left 靠左  center 居中 right 靠右 -->
    <!-- border 设置表格的边框 边框为0时，没有单元格边框  边框为1时，就有单元格 -->
    <!-- cellpadding 设置内容 和单元格边界之间的举例 -->
    <!-- cellspacing 设置（单元格边界——表格外边界) 
        (单元格边界-单元格边界)，之间的距离  -->
    <!-- width 设置表格的宽度 属性值： 数字、
        百分比（相对于父元素的宽度值的百分数，父元素改变时，table也随之改变） -->

    <!-- 注意： border的内容就是数字没有单位，其余 width\cell...\cell.. 以像素为单位 -->
    <table width="50%" 
    align="center" 
    border="1" 
    cellpadding="10" 
    cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>12</td>
        </tr>
    </table>

    <table align="center" border="1" cellpadding="0">
        <tr>
            <th>姓名</th>
            <th>年龄111111111111111</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>12</td>
        </tr>
    </table>
</body>
</html>

注意：

  1. <thead></thead> ：用于定义表格的头部，<thead>内部必须有<tr>标签,一般是位于第一行;

  2. <tbody></tbody> : 用于定义表格的主体，主要用于放数据本体

  3. 以上的标签都需要在table标签中方能生效

合并单元格方式

  • 跨行合并：rowspan = “合并单元格的数量”

  • 跨列合并：colspan = “合并单元格的数量”

  • 合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0">
        <tr>
            <th>项目</th>
            <th></th>
            <th>照片</th>
        </tr>
        <tr>
            <td>姓名</td>
            <td>张三</td>
            <!-- 1、判断是合并 行，还是合并 列 -->
            <!-- 2、需要合并的数量 （合并的本质不是将三个td合并，而且将设置rowspan或者colspan的大小给单元格） -->
            <!-- 3、删除掉多余的单元格 -->
            <td rowspan="3"></td>
        </tr>
        <tr>
            <td>年龄</td>
            <td>12</td>
            <!-- 删除多余的单元格 -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td colspan="2">地址:重庆沙坪坝</td>
            <!-- <td></td> -->

            <!-- 删除多余的单元格 -->
            <!-- <td></td> -->
        </tr>
    </table>
</body>
</html>

表格标签

  1. 无序列表

标签是HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用

  • 符号来定义。
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
   ……
</ul>

..............................................................

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--无序列表 双标签  -->
    <!-- ul中的li标签（列表项）没有顺序 -->
    <!-- ul中除了li标签外，不能防止任何文字或者元素标签 -->
    <!-- li中可以定义任意元素。 -->
    水果：
    <ul>
        <li>
            苹果
            <img src="./images/电影_movie.png" width="16px" height="16px">
        </li>
        <li>
            香蕉
            <!-- 二级列表 ：一级列表的选项中嵌套一个列表 -->
            <ul>
                <li>台湾香蕉</li>
                <li>云南香蕉</li>
            </ul>
        </li>
        <li>西瓜</li>
    </ul>
</body>
</html>
  1. 有序列表

有序列表即拥有排列顺序的列表，在HTML标签中， <ol></ol>标签用于定义有序列表，列表排序以数字来显示。

  1. 自定义列表

在HTML中，<dl></dl> 标签用于定义描述列表（或定义列表），该标签会与<dt></dt>(定义项目/名称)和<dd></dd>（描 述每一个项目/名称）一起使用。

  • 列表总结
标签名定义说明
<ul></ul>无序列表里面只包含li，没有顺序，使用较多。 li里面可以包含任何标签
<ol></ol>有序列表里面只能包含li 有顺序，使用相对较少， li里面可以包含任何标签
<dl></dl>自定义列表里面只能包含dt和dd， dt和dd里面可以放任何标签

表单标签

  • 表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

  • 表单域
  1. 表单域是一个包含表单元素的区域 ；
  2. 在HTML标签中， 标签用于定义表单域，实现用户信息的收集和传递；
  3. 会把它范围内的表单元素信息提交给服务器
  • 表单域认识
<form action=" url地址" method="提交方式" name="表单域名称">
   各种表单元素
</form>

..........................................................

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- form 表单域 ：表单域中可以定义“表单元素” -->
    <!-- action="服务器地址" http链接 或者 链接地址 -->
    <!-- method="" 可选值 GET和 POST  get ：得到，从服务
        器获取信息，比如下载  post：上传，给服务器信息，比如：微信发朋友圈  -->
    <!-- name="" 表单的名字 当网页中存在多个form表单域时，可以通过name区分表单域 -->
    <form action="" method="" name="登录">

    </form>
    <form name="注册">

    </form>
</body>
</html>
  • 常用属性
属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址
methodget/post用于设置表单数据的提交方式，其取值为get和post
name名称用于指定表单的名称，以区分同一个页面中的多个表单域

  • 表单元素：

  • input输入表单元素

input是用于收集用户信息的表单元素，在其标签中包含一个type属性，根据不同的属性值，输入字段可以有多种形式（可以是文本，复选框，掩码后的文本，单选按钮，按钮等）。

<input type="属性值">

...............................................................

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 重要 ： input表单元素 必须放置在表单域中 -->
    <form>
        <!-- 单标签：br hr -->
        <!-- 输入标签 -->
        <!-- input默认是一个输入框标签  input一行可以存在多个 -->
        <!-- <input /> -->

        <!-- input中type属性可以决定表单输入内容的类型 -->
        <!-- type="button" 按钮 可点击-->
        <!-- value="" 按钮的名称 -->
        <input type="button" value="这是一个按钮"/> <br />

        <!-- 复选框（多选框） -->
        <!-- type="checkbox" 例如：记住密码 -->
        <!-- 表单输入内容：键值对 name="" value="" -->
        <!-- <input type="checkbox" />记住密码 -->

        <!-- ArrayList add remove -->
        <!-- menu 集合 = ["红烧肉"] -->
        <input type="checkbox" name="menu" value="宫保鸡丁"/>宫保鸡丁<br />
        <input type="checkbox" name="menu" value="红烧肉"/>红烧肉<br />
        <input type="checkbox" name="menu" value="青椒肉丝"/>青椒肉丝<br />

        <!-- 单选框 -->
        <!-- type="radio" 例如：性别 -->
        <!-- 表单输入内容：键值对 name="" value="" -->
        <!-- sex = "female" -->
        <input type="radio" name="sex" value="male"/>男<br />
        <input type="radio" name="sex" value="female"/>女<br />

        <!-- 文件选择 -->
        <!-- type="file" 例如：文件上传 -->
        <!--  upload = 文件路径（文件） -->
        <input type="file" name="upload"/><br />

        <!-- 文本输入 -->
        <!-- type="text" input的默认type值就是text -->
        <!-- 表单输入内容：键值对 name="" value="" -->
        <!-- value实际上就是输入框输入的内容 -->
        <!-- content = "输入的内容" -->
        <input type="text" name="content" value=""/><br />

        <!-- type="password" 基本与text一样 输入格式为密码 -->
        <input type="password" name="password" value=""/><br />
        <!-- type="number" 输入格式为数字 -->
        <input type="number" name="number" value=""/><br />
    </form>
  
</body>
</html>
属性值描述
button定义点击按钮（多数情况下是由JavaScript启动脚本）
checkbox定义复选框
file定义输入字段和“浏览”按钮，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段。该字段中的字符被掩码。
radio定义单选按钮
reset定义重制按钮，重制按钮会使表单中的所有数据被清除
submit定义提交按钮，提交按钮会把表单中的所有数据发送到服务器
text定义单行的输入字段，用户可在其中输入文本。默认为20个字符宽度
  • 表单标签的其他属性
属性属性值描述
name由用户自定义定义input元素的名称
value由用户自定义规定input元素的值
checkedchecked规定此input元素首次加载时应当被选中
maxlength正整数规定输入字段中的字符的最大长度
  • 表单标签

为input元素定义标注。

标签用于绑定一个表单元素，当点击标签内的文件时，浏览器就会自动将焦点（光标）转到对应的表单元素上。

  • lable标签
<label for="sex"></label>
<input type="radio" name="sex" id="sex"></input>

..............................................................

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>登录界面</h2>
    <form action="服务器地址" method="post">
        <!-- label 用for属性，指向对应表单元素input中的id属性 -->
        <!-- 当用户点击对应的label，它的for属性指向的id属性所在输入框就能获取焦点 -->
        <label for="user">账号：</label><input type="text" id="user"/><br />
        密码：<input type="password"/><br />
        <input type="submit" value="登录"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>
  • select下拉表单标签
<select>
    <option>选项 1</option>
    <option>选项 2</option>
    <option>选项 3</option>
   ……
</select>
  • textarea表单域标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- textarea  举例 ：评论框 -->
    <!-- <input type="text" /> -->

    <!-- textarea 专门处理多行输入 -->
    <textarea rows="10" cols="40"> 请输入文字 </textarea>
</body>
</html>

CSS的介绍

CSS语法规范

CSS的规则主要有两个部分，选择器 和 一个或多个声明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XxpgACoK-1662291151108)(C:\Users\M\AppData\Roaming\Typora\typora-user-images\image-20220904155614988.png)]

  • 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式；

  • 属性和属性值以 “键值对” 的形式出现；

  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等等。

  • 选择器的分类

  1. 基础选择器是由单个选择器组成的；
  2. 基础选择器包括：标签选择器、类选择器、 id选择器和通配符选择器。
  • 标签选择器（元素选择器）

以HTML标签名称作为选择器，按标签名称分类，为页面中的某一类标签指定统一的CSS样式。

标签名称{  
	属性名1 :属性值1;  
	属性名2 :属性值2 ;  
	属性名3 :属性值3 ;   
	…… 
}

作用：将某一类标签全部选择出来；

优点：能快速为页面中的同类型标签设置样式；

缺点：不能设计差异化样式，只能选择全部的当前标签。

  • 类选择器

如果要差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器。

.类名{
   属性名1 :属性值1;
   属性名2 :属性值2 ;
   属性名3 :属性值3;
    ……    
}

.................................................................

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 使用类选择器的第二步，通过“.class属性名称”设置对应的选择器样式 */
        /* 差异化：可以给任意元素特定的样式 */
        .apple{
            color: red;
        }
        .banana{
            color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <!-- 使用类选择器的第一步，设置对应标记的class属性 -->
        <li class="apple">苹果</li>
        <li class="banana">香蕉</li>
        <!-- 当class属性值比较长，可以采用“-”进行断句 -->
        <li class="xinjiang-watermelon">西瓜</li>
        <li class="grape">葡萄
            <ol>
                <li>A级葡萄</li>
                <li>B级葡萄</li>
            </ol>
        </li>
    </ul>
</body>
</html>

CSS字体属性

  • font-style 定义文本的字体样式
p {
    font-style: normal;
}

font-style - CSS（层叠样式表） | MDN (mozilla.org)

  • 字体复合属性

字体复合属性可以把上述的所有文字样式综合写，节省代码。

body{
    font: font-style font-weight font-size/line-height font-family;
}
  1. 使用font属性时，必须按照上述语法格式书写，不能更改顺序，每个属性以空格隔开；
  2. 不需要设置的属性可以省略，但必须保留 font-size 和font-family属性，否则font将不起作用。

文本属性

颜色表示属性值
预定义颜色值red、 green、 blue 等
十六进制#FF0000， #ff600
RGB代码rgb(255,0,0) 或 rgb(1 00%, 0%, 0%)
  • 文本对其text-align
div{
	text-align: center;
}
属性值描述
left左对齐
right右对齐
center居中对齐
  • 文本装饰text-decoration

给文本添加下划线、删除线、上划线

div{
    text-desoration: underline;
}
属性值描述
none默认。没有装饰线（最常用）
underline下划线，链接自带下划线（常用）
overline上划线。（几乎不用）
line-through删除线。（不常用）
  • 文本缩进text-indent
  1. 指定第一行文本的缩进，通常为段落首行缩进；
div{
	text-index: 10px;
}
  1. 设置该属性后， div的首行文字就会缩进1 0px的长度。
div{
	text-index: 2em;
}

em 是一个相对单位，就是当前元素（font-size） 1个文字的大小，如果当前元素没有设置大小，则会按 照父元素的1个文字大小。

  • 行间距line-height

设置文字行与行之间的距离

  • id选择器

id选择器可以为标有特定id的HTML元素指定特定样式；

HTML元素以id属性 来设置id选择器， css中选择器以”#“来定义

#id名{
   属性名1:属性值1;
   属性名2:属性值2;
   属性名3:属性值3;
   ……    
}

id选择器和类选择器的区别：

  1. 类选择器好比人名，一个人可以有多个名字，同时一个名字也可以有多个人用；

  2. id选择器好比身份证，全国唯一，不能重复；

  3. id选择器与类选择器最大不同在于使用次数；

  4. 类选择器在修改样式中用的最多， id选择器一般用于页面唯一元素中，和JavaScript配合使用。

  • 基础选择器总结
基础选择器作用特点使用情况
标签选择器可以选出所有相同的标签不能差异化选择较多
类选择器可以选出1个或者多个标签可以根据需求选择非常多
id选择器依次只能选择1个标签id属性只能在每个HTML出现 一次一般和js搭 配
通配符选择 器选择所有的标签选择的太多，有部分不需要特殊情况

CSS背景

​ 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

  • 背景设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 400px;
            height: 400px;
            border: 1px solid black;
            /* background-color 设置背景颜色 */
            /* background-color: rgb(255,0,0); */
            /* background-color: rgb(100%,0%,0%); */
            /* background-color: red; */
            /* background-color: #ff0000; */

            /* background-image 设置背景图 */
            background-image: url('./images/cat.png');
            /* background-repeat 设置背景的平铺模式 */
            /* background-repeat: repeat-x; 横向平铺*/
            /* background-repeat: repeat-y; 纵向平铺*/
            /* background-repeat: repeat; 横纵平铺*/
            /* 不平铺 */
            background-repeat:no-repeat;
            /* 设置背景在区域中的比例大小 */
            background-size: 50%;

            /* background-position: x坐标 y坐标 (像素) */
            /* background-position: 50px 50px; */
            /* 方位词 left左 right右 top上 bottom下 center居中 */
            background-position: center center;
        }
        .b{
            width: 20px;
            height: 20px;
            background-image: url('./images/a.jpeg');
            background-position: -20px 0 ;
        }
        .c{
            margin-top: -300px;
            width: 200px;
            height: 200px;
            /* background复合写法 */
            /* 设置背景颜色 */
            background:rgb(255, 0, 0) ;
            /* 最后的a就是alpha 透明度 0 ~ 1之间的数  1不透明 */
            background: rgba(255, 0, 0, 0.5);
            /* 设置背景图片 */
            /* background: url('./images/b.jpeg'); */
            /* 设置背景图片 平铺模式 */
            /* background: url('./images/b.jpeg') no-repeat; */
            /* 设置背景图片 平铺模式 方位*/
            /* background: url('./images/b.jpeg') no-repeat center center; */
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <!-- <img src="./images/cat.png" width="400px" height="400px" /> -->
    <div class="b"></div>
    <div class="c"></div>
</body>
</html>
  • background-color 属性定义元素的背景颜色
  • background-image 属性描述了元素的背景图像。
background-image: none | url
参数值作用
none无背景图
url使用绝对或相对地址指定背景图像
  • background-repeat 属性定义了背景图片的平铺方式。
参数值作用
repeat背景图像在纵向和横向上平铺（默认）
no-repeat背景图像不平铺
repeat-x背景图像横向平铺
repeat-y背景图像纵向平铺
  • background-position属性可以改变图片在背景中的位置。

参数代表的意思是，x坐标和y坐标。可以使用方位名词或者精确单位

参数值说明
length百分数|由浮点数字和单位标识符组成的长度值
positiontop|center|bottom|left|center|right 方位词
  • 参数是方位名词

如果两个值都是方位名词，则两个值前后顺序无关，拨入left top 和 top left 效果一致；

如果只指定了一个方位词，另一个值省略，则第二个值默认居中对齐。

background-postion:20px 30px;
  • 背景位置混合单位
background-postion:20px center;
  • 背景固定

  1. background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动;

  2. background-attachment 可以作为视觉差滚动

background-attachment:scroll | fixed;

scroll 背景图像是否滚动

fixed 背景图像固定

背景属性复合写法

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置

background:transparent url(image.jpg) repeat-y fixed top;

最后一个参数是alpha透明度，取值范围在0~1之间，习惯写法为 background:rgba(0,0,0,.3)，不用为小数写0，背景半透明不会影响原有的盒子内容，只会对背景有影响，CSS3 新增属性，对IE9+支持。

CSS三大特性

层叠性

​ 相同选择器给设置相同的样式，此时样式就会覆盖（层叠）另一个冲突样式。层叠样式主要解决样式冲 突。

层叠性原则：

  • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式；
  • 样式不冲突，不会层叠

继承性

​ 子标签会继承父标签的某些样式，如文本颜色和字号，简单的理解就是：子承父业。

  • 使用继承可以简化代码，将CSS样式的复杂性减低 ；
  • 子元素可以继承父元素的样式（text-,font-,line- 这些元素开头的可以继承，以及color属性）

优先级

​ 当同一个元素指定多个选择器，就会优先级的产生。

  • 选择器相同，则执行层叠性；

  • 选择器不同，则根据选择器权重执行

  • 选择器权重

选择器选择器权重简单权重值
继承 或者*0，0，0，00
元素选择器0，0，0，11
类选择器，伪类选择器0，0，1，010
ID选择器0，1，0，0100
行内样式style=“”1，0，0，01000
!important重要的∞无穷大∞无穷大
  • 优先级注意的问题：

  1. 权重是有四个数字组成，但是不会有进位;

  2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推;

  3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值;

  4. 简单记忆（参考简单权重值）;

  5. 继承权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

CSS元素显示模式

元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个可以设置宽高容器100%任何标签
行内元素一行可以放多个不可以设置宽高本身内容宽文本、行内标签
行内块元素一行可以放多个可以设置宽高本身内容宽
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            /* 块标记 可以设置宽高度 */
            /* width: 200px; 用像素值设置宽度 */
            /* width: 100%; 该元素的宽度所占它的父元素的宽度的百分比 div.width = body.width * 100% */
            /* 快标记 默认独占一行，且在不设置宽度的情况下 宽度为100% (width:100%;) */
            height: 100px;
            /* 设置背景颜色 */
            background-color: orange;
        }
        /* 在块元素中，可以继续包含任意的元素 */
        .b{
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        /* 行内元素不会独占一行 */
        /* 行内元素不能设置宽高 width和height属性对于行内标记无效 */
        /* 行内元素会因为窗口大小，自动换行 */
        /* 行内元素中尽量只用行内元素或者文字，不要使用块元素 */
        span{
            width: 200px;
            height: 100px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <!--  块元素 -->
    <div class="a">
        <div class="b"></div>
    </div>

    <!-- 段落标签 -->
    <!-- 块标记 不要在文字标记中使用 -->
    <p><div class="b"></div></p>

    <!-- 行内元素 -->
    <!-- 行内元素不会独占一行 -->
    <span>床前明月光</span>
    <span>疑是地上霜,举头望明月，低头思故乡</span>
    <span>床前明月光</span>
    <span>疑是地上霜</span>
    <span>床前明月光</span>
    <span>疑是地上霜</span>

    <!-- 链接中不能有链接 -->
    <a href="">
        <a href=""></a>
    </a>

    <!-- 将图片设置为链接，点击图像链接到百度网站 -->
    <!-- 如果想要将某个区域或者组件设置为链接，直接用a标记包裹 -->
    <a href="https://www.baidu.com">
        <img src="./images/cat.png" width="100px" height="100px"/>
    </a>
</body>
</html>

复合选择器

选择器作用特征使用情况隔开符号及用法
后代选择器用来选择后代元素子孙后代较多空格
子代选择器选择最近一级元素亲儿子较少>
并集选择器选择某些相同样式的元素集体较多,
链接伪类选择器选择不同状态的链接链接相关较多hover、visited、link、active
:focus选择器选择获得光标的表单表单相关较少
  • 链接标签伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  链接的伪类选择器· */
        /* 当鼠标悬浮在链接标记上，会出发该效果 */
        .link01:hover{
            font-size: 40px;
            color: cornflowerblue;
        }

        /* 当访问的链接，没有被鼠标点击或者访问过，呈现的效果 */
        /* 当该链接被访问过，则效果不会生效， */
        /* 浏览器中有cookies 清除数据缓存既可 */
        .link02:link{
            font-size: 40px;
            color: orange;
        }

        /* 当该访问链接，被浏览过或者点击过，呈现的效果 */
        .link03:visited{
            color: red;
        }

        /* 当鼠标点击按住链接，不松开时，呈现的效果 */
        .link04:active{
            color: greenyellow;
        }



        
    </style>
</head>
<body>
    <a class="link01" href="#">链接地址</a>
    <a class="link02" href="#">链接地址</a>
    <a class="link03" href="#">链接地址</a>
    <a class="link04" href="#">链接地址</a>
</body>
</html>
  • 表单的伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 当输入框获取焦点，会触发该效果 */
        input:focus{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <input type="text" value="表单元素1"/><br>
    <input type="text" value="表单元素2"/>
</body>
</html>

盒子模型

属性作用
border-width定义变宽粗细
border-style边框的样式
border-color边框颜色
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

浮动和定位

  • 浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 2px solid black;
        }
        .a,.b{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /* 在盒子模型中设置margin 会影响其它元素标记的位置 */
        /* 浮动特性 将元素通过“脱离文档流”的方式，移动到指定位置 */
        .a{
            /* margin-left: 200px; */
            /* float 浮动的属性 left左浮动 right右浮动 none不浮动 */
            float: right;
        }
        .b{
            /* margin-top: -100px; */
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <!-- 浮动 -->
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
    </div>
</body>
</html>
  • 脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 2px solid black;
        }
        .a{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 浮动设置 */
            /* 向左浮动 */
            /* 脱离文档流 1、元素浮动后呈现的位置，已经高于原本的层级 */
            /*           2、浮动之后的元素都在同一层级，所以会相互排列 */
            /*           3、当块元素设置浮动属性 会变成行内块标记 */
            /*              行内元素设置浮动属性 会变成行内快标记 */
            /*           4、 当一个元素在没有浮动属性的前面元素下，设置浮
                             动属性后，不能高于这个前面的元素  */
            float: left;
        }
        
        .b{
            width: 200px;
            height: 200px;
            /* margin-top: -100px; */
            background-color: yellowgreen;
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 设置浮动 */
            float: left;
        }
    </style>
</head>
<body>
    <!-- 浮动 -->
    <div class="box">
        <div class="b"></div>
        <div class="a"></div>
        <div class="c"></div>
    </div>
</body>
</html>
  • 清除浮动的影响
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box div{
            width: 100px;
            height: 100px;
        }
        .a{
            /* 设置向左浮动 */
            float: left;
            background-color: red;
        }
        .b{
            /* 因为浮动的影响，导致元素不能正常显示 */
            /* 清除浮动带来的影响 */
            /* 回到前面的元素没有设置浮动之前的状态 */
            clear: left;
            background-color: orange;
        }
        .c{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>
</html>
  • 高度坍塌
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            /* 设置边界 */
            border: 10px solid red;
            /* height: 200px; */

            /* overflow:auto; */
        }
        .b{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 设置浮动 */
            /* 当a标记中的b标记设置浮动之后，导致高度丢失，叫做高度坍塌 */
            float: left;
            /* 解决高度坍塌的办法 */
            /* 1、父元素设置高度, 该方法还要设置消除浮动的属性 */
            /* 2、父元素设置overflow:auto 可以解决高度坍塌的问题 IE6 zoom:1; */
            /* 3、父元素中设置一个伪类标签after */

            /* 浮动 不能超过前面的元素 */
        }
        /* 在class为a的元素新建一个内容 */
        .a::after{
            /* 插入一个内容（必须的） */
            content: "";
            display: block;
            clear: both;
        }
        .c{
            height: 300px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="a">
        <!-- 设置一个元素 -->
        <div class="b"></div>
        <!-- <div class="d" style="clear: left;"></div> -->
    </div>
    
    </div>
    <div class="c"></div>
</body>
</html>

  • 相对定位：position:relative

  • 绝对定位：position:absolute

  • 绝对定位的特征

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 300px;
            height: 300px;
            border: 2px solid black;
            /* 在祖父中设置定位级 设置定位级的元素就会以祖父为定位的起点*/
            /* position: relative; */
        }
        .b{
            width: 200px;
            height: 200px;
            border: 2px solid red;
            margin: 100px;
            /* 父级中设置定位 定位级元素就会以父级为起点*/
            position: fixed;
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            /* 绝对定位 */
            position: absolute;
            /* 绝对定位设置完成后，只有设置top/left属性才能生效 */
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <!-- /* 绝对定位中，如果父级没有定位属性，就会往父级的上一级查找 */ -->
    <div class="a">
        <div class="b">
            <div class="c"></div>
        </div>
    </div>
</body>
</html>
  • 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置了background-attachment: fixed; 当前该元素的背景不会被移动 */
        /* body{
            height: 2000px;
            background-image: url("./images/b.jpeg");
            background-size: 100%;
            background-attachment: fixed;
        }
        .a{
            width: 200px;
            height: 160px;
            background-image: url("./images/b.jpeg");
            background-size: 100%;
        } */

        /* 固定定位，特殊的绝对定位 */
        body{
            height: 2000px;
            background-image: url("./images/b.jpeg");
            background-size: 100%;
        }
        .a{
            /* 设置固定定位 */
            position: fixed;
            /* 设置 top/left/bottom/right */
            bottom:100px;
            right: 100px;

            width: 200px;
            height: 160px;
            background-image: url("./images/b.jpeg");
            background-size: 100%;
        }
    </style>
</head>
<body>
    <div class="a"></div>
</body>
</html>

常见的设置与效果

  • 居中的设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* margina:auto 只能将块标记，进行水平居中 */
        /* 绝对定位 居中 */
        .a{
            width: 300px;
            height: 200px;
            background-color: red;
            /* margin: auto; */
            position: absolute;
            top: calc(50% - 100px);
            left: calc(50% - 150px);
        }
    </style>
</head>
<body>
    <div class="a"></div>
</body>
</html>
  • 圆角border-radius
  • 阴影的设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 200px;
            height: 200px;
            background-color: blanchedalmond;
            margin: auto;
            /* 设置阴影 */
            /* box-shadow 阴影的坐标位置 */
            /* 0 0 是元素的中心点位置 */
            /* box-shadow: 30px 30px 10px gray; */
        }
        .a:hover{
            box-shadow: 0 0 10px #CCCCCC;
        }
    </style>
</head>
<body>
    <div class="a"></div>
</body>
</html>
  • 背景渐变
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 200px;
            height: 200px;
            /* 设置渐变色 */
            /* linear-gradient 线性渐变 */
            /* background-image: linear-gradient(red,green); */
            /* background-image: linear-gradient(red,green,yellow); */
            /* background-image: linear-gradient(10deg,red,green); */

            /* background-image: radial-gradient(red,green); */
        }
    </style>
</head>
<body>
    <div class="a"></div>
</body>
</html>

JavaScript

JavaScript简称js，是一门轻量级、弱类型、面向对象的解释型脚本语言。

弱类型：没有数据类型的限制、变量可以不用定义就使用

解释型：无需编译，通过解释器解释运行。浏览器就是一个JS的解释器。

脚本script：一系列指令。

JS用于控制HTML元素的行为。

HTML+CSS+JS就是前端的三要素。

  • 可以在页面中动态嵌入HTML元素

  • 可以操作浏览器

  • 与用户进行数据交互

    …

  • js写在标签事件中

事件，如鼠标单击事件onclick，鼠标移入事件onmouseenter等

<button onclick="alert('hello js!')">点击按钮</button>

通常用于调用函数。

  • 写在<script></script>标签中

该标签可以放在页面的任意位置，通常放在head中或body结束之前。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--放在head中-->
		<script></script>
	</head>
	<body>
		<!-- 放在body结束前 -->
		<script>
			// js代码，默认页面加载时就会执行
			console.log("在控制台中输出");
		</script>
	</body>
</html>
  • 将js写到一个独立的.js文件中，再通过<script>标签导入

新建一个.js文件，在其中编写js代码

  • 在页面中

    <html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <script src=".js文件的路径" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
	</body>
</html>

js中的输出语句

  • 弹出警告框
alert("hello");
  • 控制台输出
console.log("hello");
  • 页面中输出
document.write("hello");

ECMAScript

数据类型

基本类型和引用类型。

由于JS是弱类型语言，定义变量时不需要指定数据类型，所以这些类型作为了解既可。

基本类型

基本类型说明
数值型number整数、小数都称为数值型
字符串string用引号引起来的都是字符串
布尔型booleantrue/false
空null某个引用类型变量通过null设置为空
未定义undefined当某个变量没有声明或没有值时

引用类型

数组、对象、函数等都是引用类型

JS中定义变量

var 变量名;  
//或
let 变量名;  

var stu_name,age;
let sex;

JS中标识符的命名规则

标识符：变量名、方法名、类名统称为标识符

  • 由字母、数字、下划线和$符号组成
  • 不能以数字开头
  • 不能使用JS中的关键字
  • 命名时尽量使用单词或拼音，达到"见名知意"

变量的初始化

与java不同的是，JS中给某个变量赋什么值，它就是什么类型。

//先定义后赋值
var name;
name="小米";
//定义的同时赋值
var age=20,sex="男";

运算符的优先级

  • 运算符
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<script type="text/javascript">
			// 算术运算符+ - * / %
			var a = 5,
				b = 3.2;
			//+两端都是数值当做相加，有一端为字符串当做拼接 
			console.log(a + b);
			console.log("" + a + b);
			console.log(a + b + "");
			console.log("xxx" + (a + b) + "xxx");
			// - * / % 必须是两个数值之间进行运算，如果有非数字参与运算，结果为NaN
			console.log(a / "a"); //NaN  not a number
			console.log("5" / "2"); //2.5
			// 除法正常显示结果
			console.log(4 / 2.0);
			// a%b  a<b  结果为a
			console.log(4 % 7);
			// 1352
			// 1352 /1 % 10  2
			// 1352 /10 % 10 5
			// num/位%10=该位上的数
			// 水仙花数  每一位上的数的三次方之和等于它本身
			for (var i = 100; i < 1000; i++) {
				var g = i % 10;
				var s = Math.floor(i / 10) % 10;
				var b = Math.floor(i / 100);
				if (Math.pow(g, 3) + Math.pow(s, 3) + Math.pow(b, 3) == i) {
					console.log(i);
				}
			}

			console.log("123" == 123); //比较字面值 true
			console.log("123" === 123); //比较数据类型和字面值 false
			console.log("123" === "123"); //比较数据类型和字面值 true

			console.log("123" !== 123); //比较数据类型和字面值 true

			console.log(true + 1);

			
			console.log(a *= b + c); //a=a*(b+c)  a=3*(3+3)  18

			// 定义一个变量保存一个数，将这个数倒序输出
			//如52634，输出43625
			//得到最后一位，去掉最后一位。。。。
			var num = 45670892;
			//如果更新的num还没有到第一位
			while (num > 0) {
				//得到最后一位
				console.log(num % 10);
				// 去掉最后一位,更新num
				num = Math.floor(num / 10);
				//java中可以写为num/=10;
			}

			var n = 10;
			// n++;
			// ++n;
			// console.log(++n);
			// console.log(n);
			// console.log(n++ + n); //10 + 11
			// console.log(++n + n); //11 + 11
			console.log(n++ + ++n); //10 + 12
			console.log(n-- - --n); //12-10	

			//定义变量保存年份，输出是闰年还平年

			//闰年：4的倍数且不是100的倍数或是400的倍数 
			var year = 2020;
			var res = year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ? "是闰年" : "是平年";
			console.log(res);
		</script>
	</body>
</html>

小括号>>>单目运算符(++ – !)>>>算术运算符>>>关系运算符>>>逻辑运算符>>>条件运算符>>>复合赋值/赋值运算符

  • switch流程控制语句

js中的switch语句的小括号可以判断任意类型的变量，case后数据的类型也可以不同。其它特性同java

switch(变量){
    case 可能的情况:
        break;
    case 可能的情况:
        break;
    case 可能的情况:
        break;
    default:
        没有任何case匹配时
        break;
}

break和continue

  • continue表示停止本次循环，直接执行下一次循环

    循环中遇到continue，不再执行后续代码，直接进入下次循环

    var i=0;
while(i++<=100){
    if(i%2==0){
        continue;
    }
    console.log(i);
}
//打印0~100以内的奇数

  • break表示停止整个循环

    var i=0;
while(true){
    if(i++==50){
        break;
    }
    console.log(i);
}
//打印0~49

数组

一组有序的数据集合，可以保存不同类型的数据，数组大小可变。

类似于Java中的ArrayList。以对象的形式存在。

  • 可以保存不同类型的数据
  • 可以改变数组大小
  • 数组中的元素默认为undefined
  • 定义数组
//创建一个指定大小的数组：var 数组名 = new Array(数组大小);
//这里的数组大小可以省略
var list1 = new Array(10);
//创建一个空数组：var list2 = [];
var list2 = [];
//创建一个拥有初始元素的数组
var list3 = new Array(元素1,元素2...);
var list4 = [元素1,元素2...];

遍历数组

  • 普通for循环

    遍历数组中的所有元素，包含undefined

for(var i=0;i<数组.length;i++){
    var obj=数组[i];
}
var list=new Array(5,"hello",true);
list[10]="xxx";
//这时会打印11个元素，没有赋值的元素输出undefined
for(var i=0;i<list.length;i++){
	console.log(list[i]);    
}

  • “增强for循环”

    遍历数组中的非undefined元素

for(索引 in 数组名){
    var obj= 数组[索引];
}
var list=new Array(5,"hello",true);
list[10]="xxx";
//这时会打印4个实际存在的元素
for(index in list){
	console.log(list[index]);    
}
  • 冒泡排序
//外层循环比较的轮数
for (var i = 1; i <= list.length - 1; i++) {
    //内层循环每轮比较的次数
    for (var j = 1; j <= list.length - i; j++) {
        //如果不满足排序要求。升序用>，降序用<
        if (list[j - 1] > list[j]) {
            //交换位置
            var temp = list[j - 1];
            list[j - 1] = list[j];
            list[j] = temp;
        }
    }
}

常用函数

函数作用
pop()移除最后一个元素
push(object)添加元素到末尾
shift()移除第一个元素
unshift(object)添加元素到头部
sort() /sort(function)无参表示将元素视为string，按第一个字符的ascii码升序排序。
有参时参数为指定的排序方式。
every(function)验证数组中的元素是否都满足指定函数的要求
some(function)检测数组中是否存在满足指定函数要求的元素
indexOf(object)/lastIndexOf(object)得到指定元素第一次/最后一次出现的索引
splice(start,length)从start开始截取length个元素
join(string)使用指定的字符将所有元素拼接成一个整体字符串
reverse()将数组中的元素倒序

Math

是一个包含了很多处理数学相关问题的对象。

如使用π、计算三角函数等方法。这些属性和方法直接通过Math调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			console.log(Math.PI);
			console.log(Math.E);
			console.log(Math.abs(-5));

			console.log(Math.ceil(5.1));
			console.log(Math.floor(5.9));
			console.log(Math.round(5.5));
			console.log(Math.sqrt(9));
			console.log(Math.cbrt(64));
			// 生成[0,1)范围内的随机数
			console.log(Math.random());
			// 得到[0,10)范围内的随机数
			// 得到[3,10)范围内的随机数

			// 得到[a,b)区间内的随机整数数：
			//Math.floor(Math.random()*Math.abs(b-a)+Math.min(a,b));

			var num = Math.floor(Math.random() * 16 + 1);
			console.log(num);
		</script>
	</body>
</html>

Math对象的常用函数

常用属性和函数作用
Math.PI得到圆周率
Math.E得到自然常数
Math.abs(num)得到num的绝对值
Math.pow(a,b)得到a的b次幂
Math.max(a,b)得到a和b之间的 最大值
Math.sqrt(num)得到num的平方根
Math.cbrt(num)得到num的立方根
Math.ceil(num)向上取整
Math.floor(num)向下取整
Math.round(num)四舍五入
Math.random()得到[0,1)之间的随机数
  • 得到[min,max)区间内的随机整数：
var num = Math.floor(Math.random() * Math.abs(max - min) + Math.min(max,min));

Date

用于表示日期时间的一个对象。

通过new关键字创建Date对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//创建Date对象，无参数表示当前时间
			var now = new Date();
			var birth = new Date();
			// 设置生日1999,7,2
			birth.setFullYear(1999);
			birth.setMonth(6);
			birth.setDate(2);

			// 将生日对应的时间戳和今天的时间戳相减
			var res = Math.abs(birth.getTime() - now.getTime());

			// 毫秒转换为天
			alert(Math.ceil(res / 1000 / 3600 / 24));
			/*
						// 将日期时间转换为本地形式的字符串
						console.log(now.toLocaleString());
						// 将日期转换为本地形式的字符串
						console.log(now.toLocaleDateString());
						// 将时间转换为本地形式的字符串
						console.log(now.toLocaleTimeString());


						// 得到正确的四位数年份
						console.log(now.getFullYear());
						// 用0~11表示1~12月
						console.log(now.getMonth());
						// 得到日期
						console.log(now.getDate());
						// 用0~6表示周天到周六      
						console.log(now.getDay());
						console.log(now.getHours());
						console.log(now.getMinutes());
						console.log(now.getSeconds());

						// 时间戳：从1970年1月1日 8:00至今经过了多少毫秒
						console.log(now.getTime());
			*/
			// 计算你活了多少天
			// 1000毫秒=1秒
		</script>
	</body>

</html>

Date对象的常用函数

常用函数作用
toLocaleString()将日期时间转换为本地形式的字符串
toLocaleDateString()将日期转换为本地形式的字符串
toLocaleTimeString()将时间转换为本地形式的字符串
get/setFullYear()获取/设置年份
get/setMonth()获取/设置月份(011表示112月)
get/setDate()获取/设置日期
get/setDay()获取/设置星期(0~6表示周天到周六)
get/setHours()获取/设置小时
get/setMinutes()获取/设置分钟
get/setSeconds()获取/设置秒
get/setTime()获取/设置时间戳(1970年1月1日至指定时间经过了多少毫秒)

字符串

JS中的字符串实际是一个字符数组，可以通过下标获取指定索引上的字符。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<script type="text/javascript">
			// JS中的字符串是一个字符数组，可以通过下标获取对应的字符
			var str = " 334 Hello 123 World 4545";
			console.log(str[1]);
			// 获取字符串长度
			console.log(str.length);
			// 转换为小写
			document.write(str.toLowerCase() + "<br>");
			// 转换为大写
			document.write(str.toUpperCase() + "<br>");
			// 去字符串首尾空格
			document.write(str.trim() + "<br>");
			// 文字下标
			document.write("H" + "2".sub() + "O" + "<br>");
			// 文字上标
			document.write("3" + "2".sup() + "<br>");
			// 得到指定下标对应的字符
			document.write(str.charAt(2) + "<br>");
			// 得到指定子字符串第一次出现的索引，如果不存在，返回-1
			document.write(str.indexOf("l") + "<br>");
			// 得到指定子字符串最后一次出现的索引，如果不存在，返回-1
			document.write(str.lastIndexOf("llo") + "<br>");
			// 从指定索引开始得到指定长度的子字符串
			document.write(str.substr(4, 3) + "<br>"); //这里表示从下标4开始取3个字符
			// 得到指定区间内的子字符串[a,b)
			document.write(str.substring(2, 5) + "<br>"); //这里表示从下标2开始取到下标4
			// 这两个截取的方法都有一个参数的用法，表示从指定下标开始截取至末尾
			document.write(str.substring(2) + "<br>");
			document.write(str.substr(2) + "<br>");
			// 根据指定字符进行切分，得到切分后的字符串数组
			console.log(str.split("o").length);
			/*
			// 给定一个字符串，检测其中某个字出现的次数
			var test = "菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识";
			//判断"的"出现的次数
			var i = test.split("的").length;
			alert(test+"中,\n\"的\"出现了"+(i-1)+"次");
			*/
			// 替换满足要求的第一个字符串
			document.write(str.replace("l", "x") + "<br>");
			document.write(str.replaceAll("l", "x") + "<br>");
			
			// 所有的数字替换成*
			var reg=/[0-9]/g;
			document.write(str.replace(reg, "x") + "<br>");
			
			var myreg=/a{3,5}/;
			console.log(myreg.test("aaaaaaa"));
			
			
			
			//验证一个邮箱是否为qq邮箱
			// qq邮箱要求：
			// www忽略大小写可有可无
			// qq号至少5位，最多10位，不能0开头  
			// @qq.com必须存在，忽略大小写
			var email="123456@Qq.cOm";
			
			//定义正则表达式制定QQ邮箱的验证规则
			var qqReg=/^(w{3}\.)?[1-9]\d{4,9}@qq\.com$/i;
			
			
			alert(qqReg.test(email));
		</script>
	</body>
</html>

字符串常用函数

常用函数作用
toUpperCase()/toLowerCase()转换为大写/小写
trim()去掉首尾空格
sub()/sup()文字下标/上标
charAt(index)得到index索引对应的字符
indexOf(string)/lastIndexOf(string)得到string第一次/最后一次出现的索引，如果不存在，返回-1
substr(index)/substring(index)从下标index开始截取至字符串末尾
substr(start,length)从下标start开始截取length个字符
substring(from,to)截取[from,to)区间内的字符
split(string)根据string切分字符串，得到字符串数组
replace(旧字符,新字符)替换满足要求的第一个字符串
replaceAll(旧字符,新字符)替换满足要求的所有字符串
replace(正则表达式,新字符)按正则表达式替换

正则表达式

一套自定义规则。用于检索、修改满足规则的字符串。

//创建一个正则表达式
var reg=/规则/;
//reg.test(参数)//验证参数是否满足正则表达式的规则
规则说明举例
/a/匹配指定字符匹配字母"a"
/abc/匹配指定字符匹配字符"abc"整体
/[abc]/匹配指定范围内的字符匹配"a"或"b"或"c"
/[a-z]/匹配指定范围内的字符匹配所有的小写字母
/[^a]/匹配除指定字符之外的字符匹配除字母"a"以外的字符
/[^0-9]/匹配除指定数字之外的字符匹配非数字
/\d/匹配数字匹配0-9
/\D/匹配非数字匹配除0-9以外的字符
/\w/匹配字母、数字和下划线相当于[a-zA-Z0-9_]
/\W/匹配非字母、数字和下划线相当于[^a-zA-Z0-9_]
/\s/匹配空格
/\S/匹配非空格
规则说明举例
/q{2}/匹配2个指定字符匹配qq
/q{2,5}/匹配2-5个指定字符匹配2个、3个、4个或5个q
/q{2,}/匹配至少2个指定字符
/q+/匹配至少1个指定字符相当于q{1,}
/q?/匹配0个或1个指定字符相当于q{0,1}
/q*/匹配0个或多个指定字符相当于q{0,}
^从头开始匹配
$匹配到结尾
g全局匹配
i忽略大小写匹配
  • DOM获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .a{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .a:nth-of-type(3){
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="a"></div>
    <div class="a"></div>

    <div id="b"></div>
</body>
<script>
    // 如何获取body中的标签 根据选择器决定的

    // document.querySelector(选择器的名称)
    // document DOM中的主要对象  document就是整个HTML文档
    // querySelector 根据选择器名称查询
    var box = document.querySelector('.box')

    //插入内容的函数 标签对象.innerHTML(插入的文本内容)
    box.innerHTML = '显示插入内容的区域'

    //innerHTML还可以插入标签的内容
    box.innerHTML = '<h2>显示插入内容的区域</h2>'

    //注意：innerHTML 前面的内容被后面内容覆盖掉
    //      querySelector 只能选择对应选择器的第一个标签
    var box1 = document.querySelector('.a')
    box1.innerHTML = '这是被选中的box1的元素'

    // var box2 = document.querySelector('.a:nth-of-type(3)')
    // box2.innerHTML = '这是选择的另外的元素'

    //document.querySelectorAll()
    //由于all 是查询所有的符合选择器条件的元素，因此最终的结果都是一个数组
    var boxs = document.querySelectorAll('.a')
    console.log(boxs)
    //如果要区分元素，就用[下标]
    boxs[0].innerHTML = '第一号元素'
    boxs[1].innerHTML = '第二号元素' 

    //根据id名称获取标记
    // document.getElementById('b')
    // 根据class名称获取标记,返回结果是一个数组
    // document.getElementsByClassName('a')
    // 根据标签名称获取标记，返回结果是一个数组
    // document.getElementsByTagName('div')
</script>
</html>
  • 常用的监听事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 100px;
            height: 100px;
            border: 10px solid black;
        }
    </style>
</head>
<body>
    <div class="a">鼠标移入事件</div>
</body>
<script>
    // 获取标记对象
    var a = document.querySelector('.a');
    //鼠标移入事件 onmouseover
    // 标记对象.事件名称 = function(){ 执行代码 }
    // :hover 伪类标签 
    // a.onmouseover = function(){
    //     a.innerHTML = '鼠标在里面了'
    //     a.style.background = 'orange'
    // }
    // 鼠标移出事件 onmouseout
    // a.onmouseout = function(){
    //     a.innerHTML = '鼠标不在里面了'
    //     a.style.background = 'yellowgreen'
    // }
    // hover效果 对比 onmouseXXX 的事件
    //1、hover = 移入 + 移出; 
    //2、hover 伪类标记只能控制样式，而onmouseXXX可以控制全部逻辑

    //onmousedown 鼠标左键按下
    a.onmousedown = function(){
        a.innerHTML = '鼠标按下'
        a.style.background = 'red'
    }

    //onmouseup 鼠标左键松开
    a.onmouseup = function(){
        a.innerHTML = '鼠标松开'
        a.style.background = 'blue'
    }

    //onclick 鼠标点击事件
    // 点击 = 按下 + 松开

    //总结： 
    //鼠标事件 ： onmouseover onmouseout onmousedown onmouseup onclick
</script>
</html>
  • value属性的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="user" type="text" placeholder="请输入账号" /><br>
    <input class="pwd" type="password" placeholder="请输入密码" /><br>
    <select class="site">
        <option>学生</option>
        <option>教师</option>
    </select><br>
    <input class="remember" type="checkbox" value="remember" />记住密码<br>
    <input class="load" type="button" value="登录" />
    <hr>
    <div class="box"></div>
</body>
<script>
    //value的使用
    // 功能描述： 输入所有信息，点击登录，将登录信息显示到div中
    //1、获取所有标记
    let user = document.querySelector('.user')
    let pwd = document.querySelector('.pwd')
    let site = document.querySelector('.site')
    let remember = document.querySelector('.remember')
    let load = document.querySelector('.load')
    let box = document.querySelector('.box')

    
    load.onclick = function(){
        //2、获取里面的信息
        //输入框的value值 用户输入的内容
        let user_val = user.value

        let pwd_val = pwd.value
        //选择框的value值 选中的option中的内容
        let site_val = site.value
        //checkbox 与radio的value值，必须提前定义value在属性中
        //因为只有在表单的提交过程中才会有复选框的value效果
        let remember_val = remember.value
        //按钮的value值就是按钮上的文字


        // box.innerHTML = user_val + '<br>' + pwd_val+ '<br>' + site_val+ '<br>' + remember_val

        // ``格式化字符串 
        // ${} 定义需要插入值的位置
        box.innerHTML = `${user_val}<br>${pwd_val}<br>${site_val}<br>${remember_val}`

        // 清空输入框的内容
        user.value = ''
        // select 的value赋值无法修改option中的内容
        //要恢复到默认值，需要到option中设置seleted属性
        site_val.value = '学生'
    }

</script>
</html>
  • 函数的封装
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
<script>
    document.querySelector('.box')

    //关于函数的形参
    function test(a,b){
        console.log(a + b)
    }
    test(1,2) //打印3
    test(1) // undefined 因为第二个未赋值
    test(1,2,3) //打印3 因为第三个值赋值没有形参

    //函数的封装
    //可以将复杂的函数简化
    //利用函数以及返回值将获取元素对象的操作简化
    function $(seletor){
        return document.querySelector(seletor)
    }
    $('.box').innerHTML = "插入的文本"


    // 函数的预解析
    // 当浏览器解析JS文件，会将里面的变量和函数直接先解析到内存中
    // 而函数的调用过程就是在上述内容之后
    test02() //函数前调用，可以执行
    function test02(){
        console.log("函数执行")
    }
    test02() //函数后调用，可以执行

    // java void和return
    // js 只有return或者没有，不需要定义返回值
    function test03(){
        // 如果return没有值的定义 则相当于return undefined
    }


</script>
</html>
  • 函数的重载
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 重载

    function test(a){
        console.log('一个参数的函数')
    }

    function test(a,b){
        console.log('两个参数的函数')
    }

    //JS判断一个函数，只要是同名均为一个函数，没有重载
    //同名函数的定义，以该函数的最后一次为准
    test(1)
    test(1,2)

    //arguments 可以接受任意长度的形参，最终都是一个数组
    function test01(){
        console.log(arguments)
    }

    test01(1)
    test01(1,2)

    //案例：接受两个参数，使其相加，三个参数使其相减
    function caculate(){
        //任意函数都有arguments参数
        if(arguments.length == 2){
            return arguments[0] + arguments[1]
        }else if(arguments.length == 3){
            return arguments[0] - arguments[1] - arguments[2]
        }
    }
</script>
</html>
  • 预解析的原理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //预解析 将所有定义函数前置
        function test(){
            console.log(123)
        }
        function test(){
            console.log(456)
        }
        test()

        //var a = undefined (变量提升)
        a = 1
        console.log(a)    

    </script>
</body>
</html>
  • js对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //定义一个对象 Object
        //通过属性和方法定义对象 
        // 对象使用 {}
        let student = {
            // 属性
            name:'张三',
            age:12,
            //方法
            // eat:function(){
            //     console.log("吃饭")
            // },
            //强制写法
            eat(){//vue框架中常用写法
                console.log("吃饭")
            },
            walk:function(){
                console.log("走路")
            }
        }
        // JSON对象
        // 对象调用属性和方法
        console.log(student)
         console.log(student.age)
         student.eat()


    </script>
</body>
</html>
  • 使用Object创建对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box"></div>
    <script>
        let obj = new Object()
        //对象属性
        obj.name = "张三"
        obj['age'] = 12
        obj[1] = 14

        //对象方法
        obj['eat'] = function(){
            console.log(123)
        }

        console.log(obj)

        // 实际上任何标记对象我们都认为是一个Object
        let box = document.querySelector('.box')
        box.index = 10
        console.log(box.index)

        //JS中每个对象都拥有一个“原型”
    </script>
</body>
</html>
  • 定时器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // setInterval(函数,间隔时间（毫秒） );
        // 每个多少毫秒执行一次函数

        // setInterval(function(){
        //     document.body.innerHTML = `<h1>${new Date()}</h1>`
        // },1000)

        let box = document.querySelector('.box')
        let n = 0;
        setInterval(function(){
            n += 0.01;
            // box.style.marginTop = n + 'px' 
            //box.style.backgroundColor = `rgba(255,0,0,${n})`
        },100)

        //定时刷新、定时接受...


    </script>
</body>
</html>
  • 定时器的停止
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>开始</button>
    <h1></h1>
</body>
<script>
    let h1 = document.querySelector('h1')
    let button = document.querySelector('button')
    let isStart = false
    let timer

    button.onclick = function(){
        if(isStart){
            //已经开始 点击按钮恢复到开始
            button.innerHTML = '开始'
            //停止计时器
            clearInterval(timer)
        }else{
            //点击后开始 停止状态
            button.innerHTML = '停止'
            //setInterval 返回值为计时器的对象
            timer = setInterval(function(){
                h1.innerHTML = new Date()
            }, 1000);
            //开始前也会间隔一秒钟
        }
        isStart = !isStart
    }
</script>
</html>
  • 关于DOM节点树
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 树形结构 html标签-->
    <ul class="list">
        <li>选项1</li>
        <li class="active">选项2</li>
        <li>选项3
            <input type="button" />
        </li>
        <li>选项4</li>
        <li>选项5</li>
        <li>选项6</li>
        <li>选项7</li>
    </ul>
</body>
<script>
    // 父标签获取所有的子标签

    let list = document.querySelector('.list')

    //Node : 节点树中的一个节点，节点（文本、元素、属性）
    // list.childNodes 得到所有的子节点
    // list.children 得到所有的子标签

    //text + li + text + li + text + ...
    console.log(list.childNodes.length)
    //li + li + ...
    console.log(list.children.length)

    //将第一个li的背景颜色设置为红色
    list.children[0].style.background = 'red'

    //父标签获取子标签的其它方式
    //firstChild 获取第一个子节点
    console.log(list.firstChild)
    //firstElementChild 获取第一个子标签
    console.log(list.firstElementChild)
    //lastChild 获取最后一个子节点
    console.log(list.lastChild)
    //lastElementChild 获取最后一个子标签
    console.log(list.lastElementChild)

    // 子标签获取父标签
    let input = document.querySelector('input')
    // 无论是父节点还是父标签都是同一个内容
    console.log(input.parentNode)
    console.log(input.parentElement)

    // 兄弟标签
    //第二个li
    let li2 = document.querySelector('.active')
    // 获取它的下一个相邻节点
    console.log(li2.nextSibling)
    // 获取它的下一个相邻元素
    console.log(li2.nextElementSibling)

    // 获取它的上一个相邻节点
    console.log(li2.previousSibling)
    // 获取它的下一个相邻元素
    console.log(li2.previousElementSibling)
</script>
</html>
  • 表格的删除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th></th>
        </tr>
        <tr>
            <td>张三</td>
            <td>12</td>
            <td><input class="del" type="button" value="删除"></td>
        </tr>
        <tr>
            <td>李四</td>
            <td>13</td>
            <td><input class="del" type="button" value="删除"></td>
        </tr>
        <tr>
            <td>王五</td>
            <td>14</td>
            <td><input class="del" type="button" value="删除"></td>
        </tr>
    </table>
</body>
<script>
    // 层级 tr -> td -> input
    //获取所有input
    let dels = document.querySelectorAll('.del')

    //设置所有的input的点击事件
    // for（条件1;条件2;条件3） 循环
    // for...in... 遍历下标
    //for(let...of...) 像Java forEach  获取每个数组元素
    for(let i = 0; i < dels.length;i++){
        dels[i].onclick = function(){
            //删表格的一行数据
            //删除的实质  通过input将他的父级（td）的父级（tr）删除
            //删除函数 remove()
            // dels[i].parentNode.parentNode.remove()
            dels[i].parentElement.parentElement.remove()
        }
    }
</script>
</html>
  • 关于事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height:100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body style="height:1000px;">
    <div class="box"></div>
    <button class="btn">点击按钮</button>
    <script>
        //onclick onmouseover onmouseout onmousedown onmouseup
        // 事件 event 就像arguments在每一个函数中 ，也存在每一个事件中
        let btn = document.querySelector('.btn')
        //所谓的event 就是因触发条件而形成的一系列的内容
        btn.onclick = function(event){
            //event中有 相关的X和Y的坐标  clientX,clientY offsetX,offsetY
            // type 事件的名称 click
            console.log(event.type)
        }


        let box = document.querySelector('.box')
        // onmousemove 鼠标移动事件
        document.body.onmousemove = function(event){
            //鼠标在body中的位置
            console.log(event.clientX + ':' + event.clientY)
            box.style.left = event.clientX + 'px'
            box.style.top = event.clientY + 'px'
        }
    </script>
</body>
</html>
  • 监听事件

onmousedown up over out move

onkeypress

onclick

  • 事件的设置方式（绑定事件的方式）

  1. div.onclick = function(){}

  2. div.addEventListener(‘click’,function(){})

  • windows对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //BOM 浏览器对象模型 ：浏览器不同BOM中的内容也不同
        // window ：浏览器窗口对象

        // window.alert(123) //弹窗
        // window.confirm("请确认") //确认、取消弹窗
        // window.prompt("请输入内容") //输入弹窗

        //window常见的功能
        // window.close() //关闭窗口
        // window.open('http://www.baidu.com') //打开链接在新的网页
        
        //localStorage 浏览器本地储存 （存在会话中，关闭网页后就会被清除）
        window.localStorage.setItem('name','张三')
        let name = window.localStorage.getItem('name')
        console.log(name)
    </script>
</body>
</html>

jquery

jquery的基本使用

$(document).ready(function(){
   //代码内容
});
//也可以简化为
$(function(){ 
	// 开始写 jQuery 代码...
});

jquery顶级对象$

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）“查询"和"查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

实例:

  • $(this).hide() - 隐藏当前元素

  • $(“p”).hide() - 隐藏所有

    元素

  • $(“p.test”).hide() - 隐藏所有 class=“test” 的

    元素

  • $(“#test”).hide() - 隐藏 id=“test” 的元素

DOM对象和jQuery对象

  1. jQuery获取的对象，不能直接使用DOM中的方法

  2. JQuery获取的对象加上[] 后可以使用DOM中的内容（包括使用get() 方式）

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
  • 同一函数实现set和get
$("#msg").html();                      //  返回id 为msg 的元素节点的html 内容。
$("#msg").html("<b>new content</b>");  // 将“<b>new content</b>” 作为html 串写入id 为msg 的元素节点内容中, 页面显示粗体的new content
$("#msg").text();                      //  返回id 为msg 的元素节点的文本内容。
$("#msg").text("<b>new content</b>");  // 将“<b>new content</b>” 作为普通文本串写入id 为msg 的元素节点内容中, 页面显示<b>new content</b>
$("#msg").height();                    // 返回id 为msg 的元素的高度
$("#msg").height("300");             // 将id 为msg 的元素的高度设为300
$("#msg").width();                     // 返回id 为msg 的元素的宽度
$("#msg").width("300");              // 将id 为msg 的元素的宽度设为300
$("input").val(");                       //  返回表单输入框的value 值
$("input").val("test");                 // 将表单输入框的value 值设为test
$("#msg").click();                     //  触发id 为msg 的元素的单击事件
$("#msg").click(fn);                   // 为id 为msg 的元素单击事件添加函数
  • 元素操作
$("#msg").css("background");          // 返回元素的背景颜色
$("#msg").css("background","#ccc") // 设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");      // 设定宽高
$("#msg").css({ color: "red", background: "blue" });// 以名值对的形式设定样式
$("#msg").addClass("select");        // 为元素增加名称为select 的class
$("#msg").removeClass("select");   // 删除元素名称为select 的class
$("#msg").toggleClass("select");    // 如果存在（不存在）就删除（添加）名称为select 的class

jQuery筛选选择器

属性筛选选择器
[att=val] 选取att属性等于val的标记

[att] 选择有att属性的标记

[att|=val] 选取att中以val开头的属性

[att~=val] 选取att中包含val的属性

[att^=val] 选取att中以val开头的属性

[att*=val] 选取att中包含val的属性

[att$=val] 选取att中以val结尾的属性

[att!=val] 选取att中不包含val的属性

jQuery筛选方法-选取父子元素

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，
比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),
但是是查找所有祖先元素，不限于父元素

jQuery.children(expr).返回所有子节点，这个方法只
会返回直接的孩子节点，不会返回所有的子孙节点

jQuery对象返回，children()则只会返回节点

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()，返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()，返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点，不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是
从初始的jQuery对象集合中筛选出一部分，而jQuery.find()
的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从

p元素开始找,等同于$("p span")

jQuery修改样式操作类

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

jQuery属性操作

方法描述
attr()设置或返回匹配元素的属性和值。
removeAttr()从所有匹配的元素中移除指定的属性。

事件方法

方法描述
bind()向匹配元素附加一个或更多事件处理器
blur()触发、或将函数绑定到指定元素的 blur 事件
change()触发、或将函数绑定到指定元素的 change 事件
click()触发、或将函数绑定到指定元素的 click 事件
dblclick()触发、或将函数绑定到指定元素的 double click 事件
delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()移除所有通过 live() 函数添加的事件处理程序。
error()触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()返回 event 对象上是否调用了 event.preventDefault()。
event.pageX相对于文档左边缘的鼠标位置。
event.pageY相对于文档上边缘的鼠标位置。
event.preventDefault()阻止事件的默认动作。
event.result包含由被指定事件触发的事件处理器返回的最后一个值。
event.target触发该事件的 DOM 元素。
event.timeStamp该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type描述事件的类型。
event.which指示按了哪个键或按钮。
focus()触发、或将函数绑定到指定元素的 focus 事件
keydown()触发、或将函数绑定到指定元素的 key down 事件
keypress()触发、或将函数绑定到指定元素的 key press 事件
keyup()触发、或将函数绑定到指定元素的 key up 事件
live()为当前或未来的匹配元素添加一个或多个事件处理器
load()触发、或将函数绑定到指定元素的 load 事件
mousedown()触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()触发、或将函数绑定到指定元素的 mouse up 事件
one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()文档就绪事件（当 HTML 文档就绪可用时）
resize()触发、或将函数绑定到指定元素的 resize 事件
scroll()触发、或将函数绑定到指定元素的 scroll 事件
select()触发、或将函数绑定到指定元素的 select 事件
submit()触发、或将函数绑定到指定元素的 submit 事件
toggle()绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()所有匹配元素的指定事件
triggerHandler()第一个被匹配元素的指定事件
unbind()从匹配元素移除一个被添加的事件处理器
undelegate()从匹配元素移除一个被添加的事件处理器，现在或将来
unload()触发、或将函数绑定到指定元素的 unload 事件

事件处理on绑定一个或者多个事件

  • jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法

  • 语法格式：$(selector).on( events [, selector ] [, data ], handler )

  • 参数介绍：

    • 第一个参数：events，事件名

    • 第二个参数：selector,类似delegate

    • 第三个参数: 传递给事件响应方法的参数

    • 第四个参数：handler，事件处理方法

      例如：
      //绑定一个方法
      $( “#dataTable tbody tr” ).on( “click”, function() {
      console.log( $( this ).text() );
      });
      //给子元素绑定事件
      $( “#dataTable tbody” ).on( “click”, “tr”, function() {
      console.log( $( this ).text() );
      });
      //绑定多个事件的方式
      $( “div.test” ).on({
      click: function() {

      $( this ).toggleClass( "active" );

      }, mouseenter: function() {

      $( this ).addClass( "inside" );

      }, mouseleave: function() {

      $( this ).removeClass( "inside" );

      }
      });

      **one绑定一次事件的方式**

  • .one( events [, data ], handler )

    例如：

    $( "p" ).one( "click", function() {

     alert( $( this ).text() );

});

    delegate方式（推荐，性能高，支持动态创建的元素）

    • 语法格式：$(selector).delegate( selector, eventType, handler )

    • 语法说明：

      • 第一个参数:selector， 子选择器

      • 第二个参数：事件类型

      • 第三个参数：事件响应方法

        例如：

          
$(".parentBox").delegate("p", "click", function(){

//为 .parentBox下面的所有的p标签绑定事件

});

    *优势：效率较高

off解绑事件

$("button").click(function(){
    $("p").off("click");
});

$(selector).undelegate(selector,event,function)

jQuery自动触发事件

<div class="login-btn">
    <input type="button" value=“登录” onclick="checkLogin"/>
</div>
$("login-btn input").trigger("click")

网络请求和AJAX

认识AJAX协议

  1. http协议 是一种常见的网络协议，可以传输大量的数据内容；
  2. http 分为 get 和 post 协议；
  3. 如果表单标记在form的表单域中，必须定义name和value属性
  • AJAX异步请求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- AJAX核心就是 不同用户可以在任意时段请求，不需要等待 -->
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    $(function(){

    //     $.ajax({
    //         url:'请求的目标域名地址 或者 IP地址端口号',
    //         method:'post 或者 get',
    //         data:{
    //             user:"张三",
    //             password:"zhangsan"
    //         },
    //         // 请求成功
    //         success(data,status){
    //             console.log("返回的数据:" + data)
    //             console.log("返回的请求状态:" + status)
    //         },
    //         // 请求失败
    //          error(data,status){
    //             console.log("返回失败的数据:" + data)
    //             console.log("返回失败的请求状态:" + status)
    //          }
    //     })

        //代码中请求 网站访问模式需要使用代理机制
        $.ajax({
            url:'https://www.baidu.com',
            method:'get',
            //Content-Type: text/html;charset=utf-8
            contentType:'text/html;charset=utf-8',
            success(data,status){
                console.log("返回的数据:" + data)
                console.log("返回的请求状态:" + status)
            },
            error(data,status){
                console.log("失败返回的数据:" + data)
                console.log("返回的请求状态:" + status)
            }
        })

        //$.get
        $.get({
            url:'地址',
            data:{
                name:'zhangsan'
            },
            contentType:'text/html;charset=utf-8',
            success(data,status){
                console.log("返回的数据:" + data)
                console.log("返回的请求状态:" + status)
            },
            error(data,status){
                console.log("失败返回的数据:" + data)
                console.log("返回的请求状态:" + status)
            }
        })

        //$.post
        $.post({
            url:'地址',
            data:{
                name:'zhangsan'
            },
            contentType:'text/html;charset=utf-8',
            success(data,status){
                console.log("返回的数据:" + data)
                console.log("返回的请求状态:" + status)
            },
            error(data,status){
                console.log("失败返回的数据:" + data)
                console.log("返回的请求状态:" + status)
            }
        })
    })
</script>
</html>

+关于jQuery中的其他函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
        .box1{
            width: 200px;
            height: 200px;
            background: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    $(function(){
        //fadeIn(过渡时间毫秒，效果完成后的函数) 淡出效果
        //fadeOut(过渡时间毫秒，效果完成后的函数) 淡入效果
        $('.box').click(function(){
            //淡出
            $(this).fadeOut(2000,function(){
                //淡入
                $(this).fadeIn(2000)
            })
        })

        //slideDown(过渡时间毫秒，效果完成后的函数) 下滑
        //slideUp(过渡时间毫秒，效果完成后的函数) 上滑
        $('.box1').click(function(){
            $(this).slideUp(2000,function(){
                $(this).slideDown(2000)
            })
        })

    })
</script>
</html>
  • 事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: orange;
        }
        .box1{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>    
</body>
<script>
    let box = document.querySelector('.box')
    let box1 = document.querySelector('.box1')

    box.onclick = function(){
        alert('父元素被点击')
    }
    box1.onclick = function(event){
        //阻止事件冒泡
        event.cancelBubble = true
        alert('子元素被点击')
    }
</script>
</html>
HTML阶段性总结
Yaooo2的博客
07-14 283
1、HTML是什么？ HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言，是一种标识性的语言。 2、HTML的基本结构？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> 3、标签是
html重点总结
前端萌新一枚
07-18 6239
关于html的重点总结 块元素、行内元素、行内块状元素 HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种 使用display属性能够将三者任意转换 块状元素自动换行 转换方法 (1)display:inline;转换为行内元素 (2)display:block;转换为块状元素 (3)display:inline-block;转换为行内块状元...
html学习篇—阶段性总结
10-12
html的学习笔记，用于未来复习使用的参考标志。涉及HTML的表单、列表、实体、超链接。。。
Web开发阶段总结
星.云计算
01-28 170
Web开发的学习，整整两个月，每天都耗在这上面：HTML，XML，CSS，Javascript，Jquery，AJAX，ASP.NET这些东西反过来倒过去的。兴奋加呕吐，也折腾得差不多了。下面是总结的关系图： 还没完！！进一步整理中...
html阶段性总结（一）
u014197854的专栏
03-29 416
HTML 是用来描述网页的一种语言 HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 与 之间的文本描述网页 与 之间的文本是可见的页面内容 与 之间的文本被显示为标题 与 之间的文本被显示为段落HTML 链接是通过 标签进行定义的。 This is a link HTML 图像是通过 标签进行定义的。
对于HTML学习的一些阶段总结
qq_45129167的博客
12-28 307
WEB标准的三层结构 分别是结构（html）、表现（css）和行为（javascript） 介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？ 五大主流浏览器内核的源起以及国内各大浏览器内核总结 浏览器内核包括两部分，渲染引擎和js引擎。渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面，js引擎是解析执行js获取网页的动态效果。 后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。 IE：Trident firefox：Gecko chrom、safari：webkit Opera：
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
10-31
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
张孝祥JavaScript学习阶段性总结(2)–(X)HTML学习
12-09
这两天读完了张孝祥JavaScript–HTML部份，对于HTML的重点进行了总结。 在读HTML这两章时遇到不会的不必深究，有些是动态才用到的，有些是过时（被淘汰的用法和语法）的东东。 (1) 书中介绍的HTML版本是HTML4.01...
HTML5学习、总结、实践
06-25
HTML5学习、总结、实践 ## 阶段一 HTML以及HTML5系统全面的学习 ## 阶段二 CSS以及CSS3系统全面的学习 ## 阶段三 JavaScript基础到深入学习 ## 阶段四 jQuery基础到深入学习 ## 阶段五 Canvas系统全面学习，...
web学习阶段性总结.zip
03-02
"web学习阶段性总结.zip"这个压缩包文件显然包含了一份关于HTML和CSS学习的总结，这将有助于巩固和复习相关知识。以下是这两门技术的核心要点： HTML（HyperText Markup Language）是网页内容的结构标准，它定义了...
html+css阶段总结
panerge_666的博客
11-21 438
元素定位 Value (position属性) Description static 默认值。没有定位，元素出现在正常的流中。 absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 inherit 规定应...
sizer-分辨率设定工具
10-10
不用安装 打开 在浏览器标题头右键即可设定 有需要的可以下来试试
千锋李学员HTML5 阶段学习总结
DLQFHL的博客
10-12 1527
转眼来千锋已经一个月了，整个的思想变化还是挺大的。我本科在学校学的是计算机科学与技术专业，这个专业学习的面还是挺广的，但是每个方向都没有学的很深入。出来找工作的话还是需要在某一方面有稍微深入了解的比较好，所以就有了想要来培训的想法，之所以来到千锋是因为千锋一直以来和河大都有合作，相对于其他机构来说了解的更多，而且学长学姐以及同班同学来这边的也挺多，并且之后发展的也都挺好的。 来这边上课之前想象了...
前端总结HTML+CSS
qq_34194159的博客
04-17 467
html html是什么？ html 超文本标记语言，用来描述网页的语言。不是编程语言而是一种标记语言。 web标准： Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。 web 标准的构成： 结构：用于对网页元素进行整理和分类 ---- html 表现：用于对网页元素的板式，颜色，大小等外观设置 ---- css 行为：网页模型的定义和交互 ---- Java...
2020-08-18 前端html与css学习笔记总结篇(超详细)
fanhl的博客
08-18 394
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师web网站架构师自己创业转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求最多的人才结合最新的html5抢占移动端的市场自己创业做老板随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标： 第一、梳理知识架构 负责内容的HTML负责外观的css（层叠样式表）负责行为的jsps切图 ...
各种的web页的格式
jinbo317的专栏
08-20 2871
每一个网页或者说是web页都有其固定的后缀名，不同的后缀名对应着不同的文件格式和不同的规则、协议、用法，最常见的web页的后缀名是.html和.htm，但这只是web页最基本的两种文件格式，今天我们来介绍一下web页的其它一些文件格式。 首先介绍一下html与htm 关于HTML，HTML(HyperTextMark-upLanguage)即超文本标记语言，是WWW的描述语言。设计HTML语言的目
大数据WEB阶段总结
chou_out_man的博客
12-15 1476
一、概述 HTTP协议 web容器 - Tomcat 静态web资源 - 本质上是文件 html css js 图片 音频 视频 flash… 动态web资源 - 本质上是程序 Servelt JSP 数据库 - sql mysql JDBC 二、HTML CSS JS JQUERY 看的懂 基本的使用 略 三、WEB容器 - Tomcat 常见的web服务器 Tomcat - 开发 测试 部分网
对CSS盒子模型的理解？
小草莓的博客
07-13 475
1、盒子模型的类型 2、标准盒子模型 3、IE盒子模型 4、如何互相转换 5、浏览器兼容性及其他
HTML，CSS学习报告总结
qq_59738304的博客
07-09 2053
1.HTML 2.HTML5 3.CSSHtml1.html的标题2.文本格式3.超链接a4.图面及其文件路径5.还有文件路径6.表格Table7.列表List:8.表单form9.其他Css1.颜色, 尺寸, 对齐2.盒子模型3.边框与边距4.定位5.溢出6.组合选择器7.伪类和伪元素三．总结 一．对其html,css的基本认识：HTMLHTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 通常
HTML第5周学习内容总结
在HTML的学习过程中，“第5周”可能代表了一个阶段性学习的里程碑，学习者可能已经掌握了基础的HTML结构、文本处理、链接、图像、列表和表格等内容。在这一阶段，学生可能会学习更高级的主题，例如： 1. **表单...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

深夜食堂℃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值