HTML_CSS_JavaScript学习笔记（只是浅浅地了解）

mckl

已于 2024-03-13 16:30:46 修改

阅读量719

点赞数 29

分类专栏： Web前端浅尝辄止文章标签： html css javascript

于 2024-03-13 16:25:03 首次发布

本文链接：https://blog.csdn.net/m0_53190754/article/details/136683932

版权

Web前端浅尝辄止专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端三大件

HTML（网页主体结构搭建），CSS（主要用于页面元素美化），JavaScript（主要用于页面元素的动态处理）

HTML

超文本标记语言，HTML文件本身是文本文件，但是可以通过HTML标签把其他网页、图片、音视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现。

HTML是一种标记语言
什么是标记语言？
对比java这样的编程语言，它是由一系列标签组成的，没有常量、变量。HTML很简单，每个标签都带有它去定的含义和页面展示效果。

HTML文件是浏览器负责解析和展示的。
HTML文件时纯文本文件，普通编辑工具都可以编辑。

单标签：<标签名 />like:<input type = "text" name = "username"/>,注意/
双标签:like:<p>my name is mc <p/> <标签名>...<标签名/>开始标签与结束标签成对出现
属性：<a href = "http://www.baidu.com">show detail</a>href是属性名，网址是属性值，一般出现在开始标签里

HTML基础结构

文档声明：HTML5的文档声明：<!DOCTYPE HTML>（一般IDE会自动生成）（HTML文件第一行的内容，告诉浏览器文档遵循的语法标准;HTML4的写法复杂一些；
主流的技术框架都是使用HTML5，以前的版本基本不用）
根标签：<HTML>...</HTML>是整个文档的标签，其他所有标签都必须放在其内，以下的head以及body都是HTML跟标签下的以及子标签
头部元素:head标签用于定义文档的头部，其他头部元素都放在head标签里，包括title标签（标签页的名称<title>MIM存在过的页面</title>），script标签，style标签，link标签，meta标签等
（字符集<meta charset = "utf-8"/>，css引入，js引入，等等）
主题元素：body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签里
like：<h1>mc秋招一定赢!!!</h1>
注释：HTML注释的写法

details：

根标签有且只能有一组
无论双标签还是单标签都需要正确关闭:/
标签可以嵌套但是不可以交叉：<i><big>张三</big></i>
注释不可以嵌套
属性必须有值，值必须加引号；H5中属性名和值相同时可以省略属性值（见后）
HTML中不严格区分大小写，但大小写不能混用
HTML中不严格区分字符串使用单双引号，但要配对->嵌套字符串要单双交替（x）
HTML中不允许自定义标签名，自定义的相当于不加标签

HTML术语

标签：代码中的一个<>叫做一个标签，有些标签成对出现，有些标签单独出现，称之为单标签
属性：一般在开始标签中，用于定义标签的一些特征
文本：双标签之间的内容，包含空格，换行等。
元素：标签括起来的完整文本即为一个元素，开始标签+属性+文本+结束标签

vscode相关配置

见本文件目录下另一个md文件

HTML常见标签

标题：<h1>一级标题</h1>到<h6>六级标题</h6>最大六级
段落：<p>自然段</p>HTML文件中光回车没用
换行：段内换行，单标签<br/>，但是浏览器宽松点<br>也好使
分隔线：<hr/>同换行

题外话：
在线帮助文档

列表：（像md中的’- '无序列表和’1. '有序列表）
ol，ul，li(ordered,unordered,列表项list item)，例子如下，且可以嵌套

<ol>
  <li>数据类型</li>
  <li>变量</li>
  <li>流程控制</li>
</ol>
<ul>
        <li>HTML</li>
        <li>css</li>
        <li>vue</li>
        <li><!--这里可以不要这个li-->
            <ol>
                <li>秋招一定赢</li>
                <li>秋招一定赢</li>
                <li>秋招一定赢</li>
            </ol>
        </li>
    </ul>

超链接：a标签，双标签，like<a href = "https://www.baidu.com/">百度</href>
target属性用于定义目标资源的打开方式（_self,_blank在开启新窗口打开目标资源）
href用于定义要跳转的目标资源的地址（完整url,相对路径，绝对路径）
图片：<img/>，单标签
src 定义图片路径（url，相对路径，绝对路径）
title 定义鼠标悬停是提示的文字
alt 定义图片加载失败时提示的文字
表格：table，like：
视频：双标签<vidio>属性src：url。controls="controls"播放显示控件，可以胜率为controls;width，height属性只调整一项，另一项等比例缩放。
音频：<audio>src,controls
加粗：<b>/<strong>，strong有强调作用。

<!--
        表格标签table，下有三个子标签
            thead 代表表头 可以省略不写
            tbody 
            tfoot
            都不写（浏览器会自动加tbody）
            tr标签代表一行
            td标签代表行内一格
            th标签自带加粗和居中效果的td
            （此处加了一些css样式）
    -->
  <h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table border="1px" style="width:400px;margin: 0px auto;">
      <thead>
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>分数</th>
        </tr>
      </thead>
        <tr>
            <td>1</td>
            <td>马聪</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小明</td>
            <td>37</td>
        </tr>

    </table>

    <!--
      合并行 rowspan属性 = 行数
      合并列 colspan
    -->
    <hr>

    <table border="1px" cellspace="0" style="width:400px;margin: 0px auto;">
        <thead>
          <tr>
              <th>排名</th>
              <th>姓名</th>
              <th>分数</th>
              <th>备注</th>
          </tr>
        </thead>
          <tr>
              <td>1</td>
              <td>马聪</td>
              <td>100</td>
              <td rowspan="2">前两名升职加薪</td>
          </tr>
          <tr>
              <td>2</td>
              <td>小明</td>
              <td>37</td>
          </tr>
          <tfoot>
            <tr>
                <td>总人数</td>
                <td colspan="3">100</td>
            </tr>
            <tr>
                <td>及格率</td>
                <td colspan="3">1%</td>
            </tr>
          </tfoot>

表单标签（重点）

表单标签（重点）可以让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据主要的方式之一。

form 双标签，内部用于另一可以让用户输入信息的表单项标签。

form属性：1.action（定义用户提交的服务器地址,不指定，提交到本页面）；2.method（定义信息的提交方式）

method：

get：（数据会缀到url后，以？作为参数开始的表示，多个参数用&隔开
post：数据会通过请求体发送，不会缀到url之后->大小不限制

表单项标签：

input标签：主要的表单项标签，可以用于定义表单项（用label标签包裹，点击label的包含的区域，都会聚焦到被包裹的标签上）

textarea标签
select标签->option标签定义选项

name:input属性，用于定义提交的参数名，对应value（一定要name才在url后面显示get的内容）
type:input属性，用于定义提交的表单项类型
- text 文本框
- password 密码框
- submit 提交按钮
- reset 重置按钮
- button：没功能，需要绑定js
- radio 单选框（name移植，设置value）
- checkbox 多选框
- hidden 隐藏域，不显示在页面，但提交的时候会携带
- file 文件上传框
- number
- email
value
checked
readonly
disabled

(liveServer不支持post)

<form action="firstPageTest.HTML" method="get">

    <input type="hidden" name="x" value="456">
    <br>
    <input type="text" name="pid" value="123" readonly><!--readonly = readonly-->
    <br>
    tid: <input type="text" name="tid" value="789" disabled><!--不可提交不可修改-->
    <br>

    用户名：<input type="text" name="username"> <br>
    密码：<input type="password" name="password"/>  <br>
    
    性别：
    <input type="radio" name="gender" value="1" checked>男
    <!--name相同则互斥，checked表示默认勾选，checked = "true" or "checked"(default)-->
    <input type="radio" name="gender" value="0">女
    <br>
    爱好：
    <input type="checkbox" name="hobby" value="1" checked>篮球
    <input type="checkbox" name="hobby" value="2">足球
    <input type="checkbox" name="hobby" value="3">排球
    <input type="checkbox" name="hobby" value="4">羽毛球
    <br>
    个人简介：
    <textarea name="intro" style="width:300px;height: 100px;" >123</textarea>
    <br>
    籍贯：
    <select name="base">
        <option value="1">京津冀</option>
        <option value="2">鄂豫皖</option>
        <option value="3">陕甘宁</option>
    </select>
    <hr>
    上传文件：
    <input type="file" name="file">
    
    <br>
    <input type="submit" value="sign in">
    <input type="reset" value="reset">
    
    
</form>

get与post对比
get：

数据参数会以键值对形式移交url?k=v&k=v
数据直接暴露在地址栏不安全
地址栏长度有限制，能提交的数据量不大
地址栏上只能提交字符，不能提交文件
效率相对于post高一些

post：

参数默认不妨到url后
不暴露在地址栏就想对安全
数据会通过请求体发送，能提交的数据量大
请求体中可以是文件，可以是字符
相比较于get效率要低

其实还有put，delete等method

布局

table->no way
div->块元素，自己独占一行 块元素的css样式的宽高等等往往都是生效的，宽度默认父元素宽度，高度默认由内容撑开。双标签
span->行元素，不会自己独占一行 行元素的css样式的宽高等等往往都是不生效的，宽度高度默认由内容撑开。双标签

（用到css->style = “样式名:样式值;样式名:样式值;…”）

like:

    <div 
        style=
        "border:1px solid red;
        width: 500px;
        height:200px;
        margin:10px auto;
        background-color: aqua;">
    123</div>
    <div style="border:1px solid red; width: 500px;height:200px;margin:10px auto;background-color: antiquewhite;">
        <span style="font-size: 30px;color: blueviolet;font-weight: bold;">
            努力且自律
        </span>
        <span 
        style="font-size: 30px;
        color: blueviolet;
        font-weight: bold;">
            fighting
        </span>
    </div>

转义

<!--转义，用编码表示，查文档-->
    &lt;h1&gt;一级标题&lt;/h1&gt;
    <hr>
    &amp;gt;
    &nbsp;<!-- 表示空格 -->

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

CSS

层叠样式表cascading style sheet

引入方式

行内式：style方式引入，style = “样式名:样式值;样式名:样式值;…”
(代码服用度低，css和HTML混用，不利于阅读)
（注释方式为/* */）
内嵌式：通过在head标签中的style标签定义本页面的公共样式，通过选择器（见后）确定样式的作用元素
外部样式表，将css代码单独放在.css文件中

span是没有语义的标签

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*2.内嵌式，
        通过在head标签中的style标签定义本页面的公共样式*/
        h1{
            font-family: '隶书';
        }
    </style>
    <!--3.外部样式表，代码单独放入css文件中-->
    <link href ="css/h2Style.css" rel = "stylesheet">
    <!--rel属性定义了外部文件与当前文件的关系-->
</head>
<body>
    <!--1.行内式引入，复用性低-->
    <input type="button" value="按钮" 
    style="
        width: 60px;
        height: 40px;
        background-color: aqua;
        color:rebeccapurple;
        font-size: 20px;
        font-family: '隶书';
        border: 2px,solid green;
        border-radius: 5px;
    ">
    <h1>且从容</h1>
    <h2>赴秋招</h2>
</body>
</HTML>

/*方式三,外部css文件*/
h2{
    font-size: medium;
    font-family: '宋体';
}

css选择器

用来选取需要设置样式的元素

元素选择器
语法：标签名{}
缺点：某些同名的元素不希望使用某些样式

id选择器
语法：#id名{}
释义：根据标签的id值确定样式的作用元素；一般每个元素都有id属性，但是在每一个页面中，id都不应该相同，id具有唯一性
缺点：只能作用于一个标签上

class选择器
语法：.class名{}
释义：根据元素的class属性值确定样式的作用元素，元素的class属性值可以重复，而且一个元素的class属性可以有多个值
缺点：暂无

冲突
如果冲突的话（同时存在的话），id优先级高于类选择器高于元素选择器

e.g.

<!DOCTYPE HTML>
<HTML lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*1.元素选择器*/
      /* input{
            width: 60px;
            height: 40px;
            background-color: aqua;
            color:rebeccapurple;
            font-size: 20px;
            font-family: '隶书';
            border: 2px,solid green;
            border-radius: 5px;
        } 
        a{
            text-decoration:none//规定添加到文本的修饰，none表示超链接不加下划线(标准文字样式)
            color:black
        }
        p{
            text-indent:50px;//收行缩进
            line-height：40px;//行高
        }
        */
      /* 2.id选择器 */
      #btn1 {
        width: 60px;
        height: 40px;
        background-color: aqua;
        color: rebeccapurple;
        font-size: 20px;
        font-family: "隶书";
        border: 2px, solid green;
        border-radius: 5px;
      }
      /* 3.class选择器 */
      .shapeClass {
        width: 80px;
        height: 40px;
        border-radius: 5px;
      }
      .colorClass {
        background-color: aquamarine;
        color: blueviolet;
        border: 3px solid green;
      }
      .fontClass {
        font-size: 20px;
        font-family: "隶书";
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <input id="btn1" "button" value="按钮"> 
    <input id="btn2" "button" value="按钮"class="shapeClass colorClass fontClass"> 
    <input id="btn3" "button" value="按钮" class="shapeClass colorClass fontClass">
    <button>按钮</button>
  </body>
</HTML>

css浮动

div都是独占一行，但是想要排成成行的需求还存在
方式1：在class选择器中加display:inline,问题是无法设置宽和高
方式2：浮动

浮动原理：
css的float使得元素脱离文档流，按照指定的方向移动，知道外边缘碰到包含框或另一个浮动框的边框为止

框1
框2
框3
当框1向右浮动时，它脱离文档流并且持续移动知道其右边配到包含框的右边缘
框2 框1
框3
当框1再向左浮动时，由于它不再处于文档流中，所以它不占据矿建，实际上覆盖住了框2，使框2从视图上消失。
如果把三个框都向左移动，则会出现的效果是:
框1框2框3

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outerClass{
            background-color: antiquewhite;
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .innerClass{
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
        .d1{
            background-color: aquamarine;
            float:left
        }
        .d2{
            background-color: red;
            float:left
        }
        .d3{
            background-color: greenyellow;
            float:left
        }
    </style>
</head>
<body>
    <div class="outerClass">
        <div class="innerClass d1">div1</div>
        <div class="innerClass d2">div2</div>
        <div class="innerClass d3">div3</div>
    </div>
</body>
</HTML>

css定位

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outerClass{
            background-color: antiquewhite;
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .innerClass{
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
        .d1{
            background-color: aquamarine;
            position: absolute;
            top: 10px;
            right: 300px;
        }
        .d2{
            background-color: red;
            position: fixed;
        }
        .d3{
            background-color: greenyellow;
        }
        /*
        position:
            static: 默认
            absolute： 绝对定位 绝对位置（相对浏览器边框，会脱离文档流）
            relative： 相对 （相对于元素原本的位置，但是其他元素不会侵占位置，即不释放文档流）
            fixed：    相对  （相对于浏览器窗口->不会随滚动条移动而移动，会脱离文档流）
        left(right)
        top(bottom)
        
        
        */
    </style>
    
</head>
<body>
    <div class="outerClass">
        <div class="innerClass d1">div1</div>
        <div class="innerClass d2">div2</div>
        <div class="innerClass d3">div3</div>
        br*100<!--100个br-->
    </div>
</body>
</HTML>

css盒子模型

盒子模型：样式以及div相关
容量：width,height
border:1px solid blue;…外部延伸
margin-left,margin-right,…距离外界边框的distance
padding-left,padding-right…内部延伸

从外到内
margin->border->padding->width*height

注意margin auto居中

  <!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outerClass{
            background-color: antiquewhite;
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .innerClass{
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
        .d1{
            background-color: aquamarine;
            margin-left: 10px;
            margin-top: 10px;
            padding-top: 20px ;
            padding-bottom: 10px;
            float:left
        }
        .d2{
            background-color: red;
            float:left;
            /*简写 1个值代表四个相同，四个值分别上右下左（顺时针），两个值上下1个，左右1个*/
            margin: 10px;
            padding: 10px 20px;
        }
        .d3{
            background-color: greenyellow;
            float:left
        }
    </style>
</head>
<body>
    <div class="outerClass">
        <div class="innerClass d1">div1</div>
        <div class="innerClass d2">div2</div>
        <div class="innerClass d3">div3</div>
    </div>
</body>
</HTML>

JavaScript

跨平台，面向对象的脚本语言（不需要编译，所以叫脚本语言）遵循ECMA标准，最新ECMA6；js放在head方便阅读，但是放在body都免运行速度加快。

js引入

script双标签，放在哪都不会报错，但是建议放置在head里

函数和事件绑定（基本逻辑）
如何写函数（在script标签中）
如何绑定（事件属性=“函数名()”->一定要有括号，在控制台报错且不会执行函数）
如何输出函数内容（alert，弹出一个窗口）

方式1：内嵌式；方式2引入外部脚本文件（外部文件不包含script标签，只包含script代码，script要注意不能写成单标签）

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn1{
            width: 150px;
            height: 50px;
            font-size: 24px;
            font-family: '隶书';
            background-color: gold;
            color: rgb(194, 7, 7);/* #ff00ff or #f0f缩写，取色器 */
            border: 3px solid (194, 7, 7);
            border-radius: 5px;
        }
    </style>
    <!--1.内嵌式-->
    <script>
        function surprise(){
            alert("开奖！惊不惊喜意不意外？");
        }
    </script>

    <!--2.引入外部js文件-->
    <script src="js/btn1.js" type="text/javascript"></script>
</head>
<body>
    <button class="btn1" οnclick="surprise()">点我有惊喜</button>
    <button class="btn1" οnclick="surpriseOutside()">suprise?</button>
</body>
</HTML>

注意：
一个HTML中可以有多对script标签，但是一对script标签不能子啊引入外部js文件的同时定义内部脚本（引入外部时中间最好不要有任何字符，包括空格和换行）

js基本语法规范

变量名，函数名等一切区分大小写
这里的分号可加可不加
//单行注释
/**/多行注释
三种输出：
window.alert(“hello js”);
document.write(Hello JavaScript);//写入HTML，在浏览器展示
console.log(“hi js”😉;//写入浏览器控制台

js变量和数据类型

var->弱类型，不是没有类型->声明时不指定类型，赋值确定类型。（数字不能开头，建议驼峰命名）

统统var，且在赋值时可变数据类型（var声明的作用域比较大,即使在代码块中定义->也是全局）
var a = 10;
a = “adjif”;
但是也可以，重复定义：
var b=1;
var b=2;
ECMAScript6中多了一个关键字let来声明变量，该变量只在代码块内有效，且不允许重复定义。以及新增const关键字，const不能改变

JS常见的数据类型
数值 number 整数小数NaN
字符串类型 String
布尔类型 boolean
引用类型 Object
function类型 function
命名未赋值 undefined
赋值null Object（本来是null是一种原始类型，但是技术错误被认为成Object，将错就错被当做Object的占位符）

判断数据类型 typeof i
（console.log控制端输出）

var fun1 = function(){}等价于function func1(){}

details:

弱类型可以同意声明成var
var声明的变量可再次声明
变量可以使用不同的数据类型多次赋值
js语句可以分号结尾，也可以不用
变量表示符严格区分大小写
命名规则参照java
如果使用了一个没有声明的变量，运行时会报uncaught ReferenceError
如果一个变量之生命不赋值，就是undefined

js运算符

算数 +,*,/,-,%
复合算数 ++,–,-=,%=等等
关系 >,<,<=,>=,,=
== 如果两端数据类型不一致，会尝试将两端的数据类型都转换为number进行对比;
=== 如果两端数据类型不一致，直接返回false，相同会继续对比;
逻辑 || &&
条件条件表达式?v1:v2
位 | & ^ << >> >>>

/0是Infinity
%0是NaN ->not a number

js流程控制

分支结构，大部分同java
但是
非空字符串会判断为true
非空对象会判断为true
非0且非NaN的number会判断为true
undefined是false

prompt提示框输入vs提示框输出
document.write(“HTML语句”)

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        var monthStr = prompt("请输入月份")//以string类型返回
        var month = Number.parseInt(monthStr)
        if(month==12||month==1||month==2){
            console.log("winter")
        }else if(month>3&&month<5){
            console.log("Spring")
        }else{
            console.log("Other seasons:")
        }
        /**
         * 非空字符串会判断为true
         * 非空对象会判断为true
         * 非0number会判断为true
         */
        switch(month){
            case 6:
            case 7:
            case 8:
                console.log("summer")
                break
            default:
                console.log("winter or error")
                document.write("<h1>error</h1>")
        }
    </script>
</head>
<body>
</body>
</HTML>

循环结构：

<script>
        //循环结构
        //打印九九乘法表
        var i = 1
        while(i <= 9){
            var j = 1
            while(j <= i){
                document.write(j+"*"+i+"="+(j*i)+"&nbsp;&nbsp;&nbsp;")
                j++
            }
            document.write("<hr>")
            i++
        }

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

//for循环对数组有差异 foreach
var arr = [“北”,“上”,“广”]
for(var i in arr){
console.log(arr[i])
}

js函数声明

var fun1 = function(){}等价于function func1(){}（两种方式）

形参列表不加var
没有访问修饰符
没有返回值类型，也没有void，如果有返回值直接return

function关键字

如果有返回值，可以直接赋值给一个var

js基本常用对象

基础对象：Array，String，JSON等
BOM对象，浏览器组件对象
DOM对象：文档对象模型，HTML标签封装为对象

array

var 变量名 = new Array(元素列表)
var 变量名 = [元素列表]//注意是方括号
arr[索引] = 1//索引从零开始
长度可变，类型可变

var arr = [1,2,3,4]
arr[10] = 121;//其他为undefined

属性length
方法forEach，需要传入一个处理遍历的函数
arr.forEach(function(e){
console.log(e)
})//forEach遍历有值的元素
//ES6（ECMA Script6）支持以下写法箭头函数，类似于lamada表达式
arr.forEach((e)=>(console.log(e)))
arr.push(7,8,9)
arr.splice(start,count)

String

var 变量名 = “”
var 变量名 = new String(“”)

length 属性
方法：
charAt()返回指定位置的字符
indexOf()检索
trim()//去除字符串两边的空格
substring提取字符串中两个指定的索引号之间的字符

JSON

自定义对象：
var 对象名{
f1:v1,
f2:v2,
…
函数名:function(形参列表){}//可以省略：function
}
调用对象名.属性名/函数名()

JSON：JavaScript Object Notation对象标记法
JSON是通过JS对象标记法书写的文本
{
“name”:“Tom”,
“age”:20
}
但是要求属性名是字符串格式，且必须使用双引号。
现在多用于作为数据载体。

value->数字直接写；字符串在双引号中，逻辑值true/false直接写，数组在方括号中，对象卸载花括号中，null直接写
由于是文本，所以是字符串，外层必须用单引号->因为内部有双引号。
var userStr = ‘{“name” = “Tom” }’

JSON字符串JS对象互相转化：
var jsObj = JSON.parse(userStr);
var jsonStr = JSON.stringify(jsObj);

BOM对象

Browser Object Model
主要的BOM对象：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
Histroy：历史记录对象
Location：地址栏对象

只看Window，Location的获取，属性，方法

获取：直接写window.->window.alert(“hello world”)->window.可以省略
属性：history，location，navigator->可以写window.也可以直接省略->用于获取其他BOM对象
方法：
alert
confirm对话框->带有一定消息的取消or确定按钮，有boolean返回值
setInterval：按照指定的周期调用函数(function(){},2000)//2s per func
setTimeout：指定时间到达后运行一遍指定函数

Location对象直接写location或者window.location
属性：href设置或返回完整的url
alert(location.href)->获取
一旦给href赋值，就会跳转href规定的地址。

DOM对象

Document Object Model
就是将标记语言的各个组成部分，封装成对应的对象，具体如下：

Document：整个文档对象
Element：元素对象->每一个标签都是一个元素对象
Attribute：属性对象->标签中的属性封装为属性对象
Text：文本对象->双标签之间的文本or直接的文本
Commet：注释对象

浏览器解析完HTML之后，会封装对象，内存中会生成DOM结构（DOM树）
最上层为文档对象
下面一个孩子是根元素->HTML标签->下面又有body和head

JS通过DOM和网页监听机制来控制网页的行为

通过DOM操作，可以改变HTML的内容，样式，以及对HTML DOM事件做出反应，添加和删除DOM对象等

DOM是W3C的标准，定义了访问HTML和XML文档的标准，分为了3个部分：

DOM核心（任何文档类型的标准模型，之前的5个对象）
XML DOM： XML文档的标准模型
HTML DOM：HTML文档的标准模型->把每个标签封装成对应的对象like：<img>:Image

HTML DOM是关注重点

img = document.getElementById(“h1”);
img.src = “xxx/xxx”

js时间监听

HTML事件：是指发生在HTML元素上的事情。

时间监听：JS可以在事件被侦测到时，执行代码。

事件绑定：

通过html标签中的事件属性进行绑定，like：οnclick=“函数名()”
<input type = "button" onclick="on()" value="按钮1">
<script>function on(){alert('我被点击了');}<\script>
通过dom元素进行绑定
<script>document.getElementById('btn').onclick=function(){alert('我被点击了');}<\script>

常见事件：

onclick:鼠标单击事件
onblur：元素失去焦点（输入框点击->闪动代表聚焦？）
onfocus：元素获得焦点
onload：某个页面或图像被完成加载
onsubmit：表单提交时触发该事件
onkeydown：某个键盘的键被按下
onmouseover：鼠标移到某元素之上
onmouseout：鼠标从某元素移开

完结撒花

ibute：属性对象->标签中的属性封装为属性对象

Text：文本对象->双标签之间的文本or直接的文本
Commet：注释对象