HTML CSS JS基础_css版权符号-CSDN博客

本文链接：https://blog.csdn.net/m0_54797663/article/details/120148667

本文介绍了HTML的基本结构和常见标签，包括标题、段落、列表、图像、链接等，强调了XHTML的严谨性。接着讲解了网页布局的行内元素和块级元素，以及浮动和定位的概念。此外，还涵盖了CSS的基础用法，如颜色、字体、背景、边框和定位。最后提到了JavaScript的基础操作，包括DOM操作、事件处理和简单的动画效果。

摘要由CSDN通过智能技术生成

HTML

1、初识HTML

<!DOCTYPE html>                                    <!--DOCTYPE：告诉浏览器使用什么规范（默认是html）-->
<html lang="zh">                                   <!--语言 zh中文 en英文-->
<head>                                             <!--head标签代表网页头部-->
    
    <meta charset="UTF-8">                         <!--meta 描述性标签，表示用来描述网站的一些信息-->
    <meta name="keywords" content="java学习">       <!--为搜索引擎定义关键词-->
    <meta name="description" content="学习java">    <!--为网页定义描述内容:-->
    <meta name="author" content="Runoob">          <!--定义网页作者:-->
    <meta http-equiv="refresh" content="30">       <!--每30秒钟刷新当前页面:-->
    
    <tile>Title</title>                            <!--网站标题-->
</head>
<body>                                             <!--body代表主体-->
Hello World！
</body>
</html>

早期发布的 HTML 规范当中， <br> 与 <img> 等元素是不用封闭自身的。但是这种元素造成了 HTML 规范的不严谨。

在之后发布的 XHTML 语言中，在这些不用自身封闭的元素后加 /（ <br/>）来表示自行封闭，在逻辑上来讲等同于 <br>… </br>（但是没有这种写法），这样一来保证了较少的代码量，二来保证了规范的严谨。

2、网页基本标签

标题

<h1>一级标签</h1> <!--由大到小  -->
<h2>二级标签</h2> <!--搜索引擎会使用标题为您的网页的结构和内容编制索引  -->
<h3>三级标签</h3> <!--用户可以通过标题来快速浏览您的网页  -->
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

粗体斜体

粗体：<strong>I love you </strong><br/> <!--这些标签的含义是不同的  -->
     <b>I love you</b><br/>            <!--<b> </b>与<i> </i>定义粗体或斜体文本。  -->
斜体：<em>I love you </em><br/>         <!--<strong> </strong>或者 </em> <em>意味着你要呈现的文本是重要的  -->
     <i>I love you</i>
下标字：<sub>I love you </sub><br/>
上标字：<sup>I love you</sup><br/>
插入字：<ins>I love you</ins><br/>
删除字：<del>I love you</del><br/>

段落

<p>p换行1</p> <!--段落标签有明显段间距-->

水平线标签

<hr/>

换行标签

 <br/> <!--换行标签比较紧凑，段落标签有明显段间距-->

特殊符号：&开头;结尾

空格

空格：1&nbsp;2&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;4<br/>
空格：1 2  3   4<br/><!--浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。-->

大于号小于号版权符号

大于号&gt;<br/>
小于号&lt;<br/>
版权符号&copy;<br/>

图像标签

<!--src:资源地址
    相对地址，绝对地址 ../上级地址
    alt：在图片加载失败的时候，就会用文字代替
    title:鼠标悬停在图片上时，所显示的名字
    width height 图片的高和宽-->
<img src="../xxx.jpg" alt="oops!图像不见了" title="123">

链接标签

<!--href：跳转页面的地址
    a标签内文字：即显示的文字
    可以把图片放在a标签内，点击图片跳转网页
    target:表示在哪打开新网页_self:当前标签打开 _blank:新的页面中打开-->
<a href="https://www.baidu.com" target="_blank" title="123">你xxxx不会百度吗</a>
<a href="https://www.baidu.com" target="_self"><img src="../xxx.jpg" alt="oops!图像不见了"></a>

锚链接

<!--跳转到页面的指定位置-->
<a name="top"></a>
<p>11</p>
  ....
<p>11</p>
<a href="#top">回到顶部</a>
<br/>
<!--也可以在网址后添加#号跳到对应网站的对应位置-->
<a href="https://www.baidu.com#down">百度底部</a> <br/>

<base> 元素

<!--<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接-->
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<%
    String scheme = request.getScheme();
    String serverName = request.getServerName();
    int serverPort = request.getServerPort();
    String contextPath = request.getContextPath();
    String basePath=scheme+"://"+serverName+":"+serverPort+contextPath+"/";
%>
<base href="<%=basePath%>">

行内元素和块元素

块元素：无论内容多少，该元素独占一行

例如：<div> <p></p><hr/> <h1>...<h6>

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

例如：<span> <a><strong><em>

有序列表

<ol>
    <li>1</li>            <!--li：列表内容 -->
    <li>2</li>
    <li>3</li>
</ol>

无序列表

<ul>
    <li>123               <!--li：列表内容 -->
        <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        </ul>
    </li>
    <li>2</li>
    <li>3</li>
</ul>

定义列表

<dl>                          <!--dl：标签 -->
    <dt>学科</dt>              <!--dt：列表名称 -->
      <dd>语文</dd>            <!--dd：列表内容 -->
      <dd>数学</dd>
      <dd>英语</dd>
    <dt>语言</dt>
      <dd>中文</dd>
      <dd>英语</dd>
      <dd>日语</dd>
</dl>

表格

<!--表格table
   行 tr
   列 td
   -->
<table border="1px">
    <tr><!--跨列-->
        <td colspan="3">1-1</td>
    </tr>
    <tr><!--跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

视频和音频

<!--视频
        controls 控制面板
        autoplay 自动播放
        -->
<video src="xxx/xxx/xxx" controls autoplay></video>
<!--音频-->
<audio src="xxx/xxx/xxx" controls autoplay></audio>

页面结构

元素名	描述
header	标题头部区域的内容（用于页面或者页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用
nav	导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<!--页面头部-->
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

iframe内联框架

<!--ifram标签  必须要有src属性即引用页面的地址
               给标签加上name属性后，可以做a标签的target属性，即在内联窗口中打开链接
-->
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

from表单语法(重点)

action属性为所提交的目的地址。
method选择提交方式可以选择使用post或者get方式提交

get效率高，但在url中可以看到提交的内容，不安全，不能提交大文件
post比较安全且可以提交大文件

标签	说明
input标签	大部分表单元素对应的标签有text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text。
select标签	下拉选择框
textarea标签	文本域

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称（提交时所对应的key）
value	元素的初始值，radio必须提供
size	指定表单元素的初始宽度。当type为text或者password时，以字符为单位；其他type以像素为单位
maxlength	type为text或者password时，输入的最大字符数
checked	type为radio或者checkbox时，指定按钮是否被选中

属性	说明
readonly	只读，不可更改
disable	禁用
hidden	隐藏，虽然不可见但是会提交
id	标识符，可以配合label的for属性增加鼠标的可用性
placehoder	text 文字域等输入框内的提示信息
required	不能为空
patten	正则表达式验证

<!--表单from
        action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
        method：post get请求方式-->
<form action="xxx/xxx" method="get">
    <!--文本输入框：input type="text"-->
    <p>用户名：<input type="text" name="username" value="请输入用户名" maxlength="10" size="20"></p>
    <p>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" placeholder="请输入密码" required="required"></p>
    <!--    submit提交表单，reset清空-->
    <p><input type="submit"> <input type="reset">
    </p>
    <!--    radio单选框标签 value即单选框的值，在提交时对应value
    name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
    checked:默认被选中
    -->
    <p>性别：<input type="radio" value="boy" name="sex"/>
        <input type="radio" value="girl" name="sex"/>
    </p>
    <p>爱好：
        <input type="checkbox" value="b" name="hobby">打篮球
        <input type="checkbox" value="s" name="hobby">唱rap
        <input type="checkbox" value="d" name="hobby">跳舞
    </p>
    <p><input type="button" name="btn1" value="按钮上文字"><!--按钮-->

        <input type="image" src="xxx/xxx"><!--图片按钮默认是提交：和submit类似-->
    </p>
    <p><!--下拉框：selected:默认选项-->
        你来自：
        <select name="location">
            <option value="china">中国</option>
            <option value="us" selected>美国</option>
            <option value="japan">日本</option>
        </select>
    </p>

    <p><!--文本域-->
        反馈：
        <textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea>
    </p>
    <p><!--文件域-->
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
    <!--邮件：会简单验证是否是邮箱地址
		url：会简单验证是否是网络地址
        number：数字验证-->
    <p>邮箱：<input type="email" name="email">
        url：<input type="url"></p>

    <!--数字验证
           max最大数量
           min 最小数量
           step 每次点击增加或减少的数量-->
    <p>商品数量<input type="number" name="num" max="100" min="1" step="1"></p>
    <!--滑块-->
    <p>音量：<input type="range" min="0" max="100" name="voice" step="2"></p>
    <!--搜索框-->
    <p>搜索：<input type="search"></p>

    <p><!--增强鼠标可用性-->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
</form>

CSS

CSS：Cascading Style Sheet 层叠样式表。

表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动，圆角、阴影、动画…
优势：

内容和表现分离；
网页结构表现统一，可以实现复用
样式十分的丰富

CSS的3种常用导入方式

优先级：就近原则行内样式 > 内部样式、外部样式（谁近选谁）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>                                        <!-- 内部样式--> 
        h1{
            color: green;
        }
    </style>
    <link rel="stylesheet" href="css/style.css" />  <!--外部样式-->
</head>
<body>
<h1 style="color: red">这是标签</h1>                 <!--行内样式：编写一个style属性，编写样式即可-->
</body>
</html>

基本选择器

优先级：id选择器 > class类选择器 > 标签选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo1{               /* id选择器：#id名称{} id必须保证全局唯一 */
            color: red;
        }
        .demo2{               /* 类选择器class：.类名{} 选择所有class一致的标签，跨标签 */
            color: green;
        }
        #demo2{               /* id选择器：#id名称{} id必须保证全局唯一 */
            color: orange;
        }
        h1{                  /* 标签选择器：标签 { } 选择所有该标签 */
            color: blue;
        }
    </style>
</head>
<body>
    <h1 id="demo1" class="demo2">id选择器：demo1</h1>
    <h1 class="demo2" id = "demo2">id选择器：demo2</h1>
    <h1 class="demo2">类选择器：demo3</h1>
    <h1 >标签选择器：demo4</h1>
    <h1>标签选择器：demo5</h1>
</body>

高级选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body h1{                           /*后代选择器：选择body所有的后代h1和后代的后代h1*/
            background:red;
        }

        body>p{                            /*子选择器：选择body所有的后代h1，只有第一代 */
            background:orange;
        }

        .active+h2{                        /*相邻兄弟选择器：只选择一个active相邻（向下）的h2。会循环查找*/
            background: lightcoral;
        }

        .active~h3{                        /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
            background:rebeccapurple;
        }

    </style>

</head>
<body>

<h1 >后代选择器一代选中：demo1</h1>
<h1 >后代选择器一代选中：demo2</h1>
<div>
    <h1 class="demo2">后代选择器二代选中：demo3</h1>
</div>
<hr/>

<P>子选择器一代选中：demo4</p>
<P>子选择器一代选中：demo4</p>
<div>
    <P>子选择器二代未选中：demo5</P>
</div>
<hr/>

<h2 >相邻兄弟选择器未选中：demo1</h2>
<h2 class="active">相邻兄弟选择器：demo3</h2>
<h2 class="active" >相邻兄弟选择器选中：demo2</h2>
<h2 >相邻兄弟选择器选中：demo2</h2>
<h2 >相邻兄弟选择器未选中：demo2</h2>
<hr/>

<h3 >通用兄弟选择器未选中：demo1</h3>
<h3 class="active1">通用兄弟选择器未选中：demo3</h3>
<h3 >通用兄弟选择器选中：demo2</h3>
<h3 >通用兄弟选择器选中：demo2</h3>
<hr/>

</body>

结构伪类选择器

<style>
    ul li:first-child{            /*选择ul的第一个子元素*/
        background: aqua;
    }
    ul li:last-child{             /*选择ul的最后一个子元素*/
        background: blue;
    } 
    p:nth-child(2){               /*选择p元素的父级元素第2个元素，并且是p元素才生效！*/
        background: orange;
    }
    p:nth-of-type(2){             /*选择p元素的父级元素下的，第2个p元素*/
        background: red;
    }
    a:hover{
        color: red;
    }
</style>
</head>
<body>
<a href="">123</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h3>h3</h3>
<ul>
    <li>1li1</li>
    <li>1li2</li>
    <li>1li3</li>
</ul>
<ul>
    <li>2li1</li>
    <li>2li2</li>
    <li>2li3</li>
</ul>
<a href="www.baidu.com">百度</a>
</body>

:nth-child(n)和nth-of-type(n)的详细用法

n 可以是数字、关键词或公式。如：

nth-child(3)：表示选择列表中的第三个元素。
nth-child(2n)：表示列表中的偶数标签，即选择第2、第4、第6……标签
nth-child(2n-1) ：表示选择列表中的奇数标签，即选择第1、第3、第5、第7……标签
nth-child(n+3)：表示选择列表中的标签从第3个开始到最后（>=3）
nth-child(-n+3) ：表示选择列表中的标签从0到3，即小于3的标签(<=3)
nth-last-child(3)：表示选择列表中的倒数第3个标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7sFoONtm-1630970545226)(Pictures/20200819164835859.png)]

属性选择器（常用）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性名，属性名=属性值（正则）
         = 表示绝对等于
         *= 表示包含
         ^= 表示以...开头
         $= 表示以...结尾
         存在id属性的元素
            a[]{}
         */
        a[id]{
            background: yellow;
        }
        a[id=first]{                        /*id=first的元素*/
            background: green;
        }

        a[class*="links"]{                 /*class 中有links的元素*/
            background: bisque;
        }

        a[href^=http]{                     /*选中href中以http开头的元素*/
            background: aquamarine;
        }
        a[href$=pdf]{                      /*选中href中以http结尾的元素*/
            background: aquamarine;
        }
    </style>
</head>
<body>
<p >
    <a href="http:www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank " title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/1.png" class="links item">4</a>
    <a href="images/1.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>

字体样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            p{
                font-family:"Arial Black",楷体;       /*font-family：字体*/
                font-size: small;                    /*font-size：字体大小*/
                font-weight: 600;                    /*font-weight：字体粗细*/
                font-style:italic;                   /* font-style：文本的字体样式*/
                font-variant:small-caps;             /* font-variant：设置小型大写字母的字体显示文本*/
                color: gray;                         /*color：字体颜色*/
            }
        </style>
    </head>
<body>
<p>i love study java</p>
</body>

常用写法：

（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”

font:  bold  italic  12px  "楷体"; /*font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，*/

属性	说明
font-style :字体样式	normal:默认值。标准字体。italic: 斜体的字体。oblique:倾斜的字体。 inherit:继承父元素字体。
font-variant:大写字母样式	normal:默认值。标准字体。 small-caps:小型大写字母的字体,小写字母均会被转换为大写。

文本样式

<head>
  <style>
     p{
        color:#26fff2;                     /*颜色*/
        text-indent:2em;                   /*首行缩进*/
        line-height: 23px;                 /*行高*/
        text-align: left;                  /*文本对齐方式*/
        text-decoration:underline;     /*:下划线。line-through:中划线。overline:上划线。none:超链接去下划线*/
            }
  </style>
</head>
<body>
<p>i love study java</p>
</body>

图片、文字水平对齐

img,span{vetical-align:middle}

列表风格

ul li{
    list-style-type: none;           /*disc 默认实心圆。 non 去掉实心圆。 circle 空心圆。 square 正方形。*/
}
 ol li{
    list-style-type: lower-roman;    /*decimal 数字。 decimal-leading-zero 0开头的数字。(01, 02…… 等。) */
                                     /*lower-roman 小写罗马数字。upper-roman小写罗马数字。*/
                                     /*lower-alpha 小写英文字母。 upper-alpha 大写英文字母。*/   
} 
<ol type="1" >                       /*1 数字。A 大写英文字母。 a 小写英文字母 i 小写罗马数字。 I小写罗马数字。*/ 
    <li>ni</li>
    <li>hao </li>
    <li>a</li>
</ol>

背景

background-image:url("");              /*默认是全部平铺的*/
background-repeat:repeat-x             /* repeat-x 水平平铺。 repeat-y 垂直平铺。no-repeat 不平铺*/

盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1GoFfqYN-1630970545231)(Pictures/20201030095724647.png)]

/* margin 外边距*/
margin:0 0 0 0                  /*分别表示上、右、下、左；从上开始顺时针*/
margin:0 auto                   /*auto表示左右自动*/
margin:4px                      /*表示上、右、下、左都为4px*/
margin:10px 20px 30px           /*表示上为10px，左右为20px，下为30px*/
/* padding：内边距*/
padding:0 0 0 0                 /*和margin一样的用法*/
/* border：边框*/
border: solid  5px red ;         /*border 复合写法*/ 
border-style: dotted solid double dashed;   /*上边框dotted 点状。 右边框solid 实线。*/     
                                            /*下边框double 双线。 左边框dashed 虚线。*/
border-width: 5px;
border-color: #4effdf;

圆角边框

 div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    /*一个border-radius只管一个圆的1/4*/
    border-radius: 50px 20px 20px 30px;/*左上 右上 右下 左下 ,顺时针方向*/
 }

阴影

text-shadow:5px 5px 5px black;       /*文本阴影 参数1：水平偏移。参数2：垂直偏移。参数3：模糊半径。参数4：颜色*/
box-shadow: 10px 10px 1px black;     /*盒子阴影 参数1：水平偏移。参数2：垂直偏移。参数3：模糊半径。参数4：颜色*/

浮动

display（重要）

块级元素：独占一行 h1~h6 、p、div、列表…
行内元素：不独占一行 span、a、img、strong

注：行内元素可以包含在块级元素中，反之则不可以

<head>
    <style>
      div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;  /*block 块元素。inline 行内元素。 inline-block 是块元素，但是可以内联，在一行*/
       }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>

float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.left{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;              /* left 左浮动*/
        }
        div.right{
            width: 100px;
            height: 150px;
            border: 1px solid red;
            float: right;              /*right 右浮动*/
        }
         /*父级边框塌陷问题。1.增加父级元素高度。2.增加 一个空的div标签 ，清除浮动。*/ 
         /*               3.在父级元素中增加一个: overflow:hidden; 4.父类添加一个伪类：after（推荐）*/
      
        div.father{
            height: 150px;           /*1.增加父级元素高度。*/
            border: 1px solid red;
            overflow:hidden;         /* 3.在父级元素中增加一个: overflow:hidden;*/
        }
       
        /*2.增加 一个空的div标签 ，清除浮动。*/
        div.both{
            margin:0;
            padding:0;
            clear: both;              /*清除浮动 right：右侧不允许有浮动元素。left：左侧不允许有浮动元素。*/                                             /*both：两侧不允许有浮动元素 none：两侧允许有浮动元素*/
            border: 1px solid red;   
        }
         /*4.父类添加一个伪类：after（推荐）*/
       div.father:after{
          content:'';
          display:block;
          clear:both;
        }

    </style>
</head>
<body>
<div class="father">
<div class="left">div块元素</div>
<div class="left"> div块元素</div>
<div class="right">div块元素</div>
<div class="both"> </div>
</div>
</body>
</html>

display与float对比

display：方向不可以控制
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

定位

相对定位：相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留

top:-20px;/*向上偏移20px*/
left:20px;/*向右偏移20px*/
bottom:10px;/*向上偏移10px*/
right:20px;/*向左偏移20px*/

<head>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: #ffa538 1px solid;
            padding: 0;
        }
        #first{
            border: #b3ff38 1px solid;
            background-color: #ffa538;
            position: relative;             /*通常偏移量只需要使用水平和垂直方向各一个偏移量就可以对一个元素定位*/
            top:-20px;                      /*向上偏移20px*/
            left:20px;!                     /*向右偏移20px*!*/
            /*bottom:10px;向上偏移10px*!*/
            /*right:20px;!*向左偏移20px*!*/

        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
</div>
</body>

绝对定位：父级存在相对于父级，父级不存在相对于浏览器的位置，进行指定的偏移。绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

固定定位：和绝对定位基本一致，区别在于不会随父级元素一起移动。

图层-z-index：默认是0，最高无限~999。高的图层会覆盖低图层

透明opacity：范围0-1。 0 表示完全透明。1 表示完全不透明。0.5 表示半透明。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div.div1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;              /*absolute 绝对定位 相对于浏览器的位置*/
            right: 0;
            bottom: 0;
            z-index: 1;                      /* z-index 图层1*/
        }
        div.div2{
            width: 50px;
            height: 50px;
            background-color: #b3ff38;
            position: fixed;                 /*fixed 固定定位 相对于浏览器的位置*/
            right: 0;
            bottom: 0;
            z-index: 2;                      /* z-index 图层2 会覆盖图层1*/
        }
        div.div3{
            width: 50px;
            height: 50px;
            background-color: #ff66fa;
            position: absolute;               /*absolute 绝对定位 相对于div4的位置*/
            right: 0;
            bottom: 0;
            opacity: 0.5;                    /*opacity 透明 范围0-1。0.5表示半透明。*/
        }
        div.div4{
            width: 200px;
            height: 200px;
            background-color: #5395ff;
            position: absolute;              /*absolute 绝对定位 相对于浏览器的位置*/
            right: 300px;
            bottom: 300px;
        }
    </style>
</head>
<body>
<div class="div2">div2</div>
<div class="div1">div1</div>
<div class="div4">div4
    <div class="div3">div3</div>
</div>
</body>

JavaScript

JavaScript的3种常用导入方式

优先级：就近原则行内 > 内部、外部（谁近选谁）

行内

<input type="button" value="按钮" onclick="alert('Hello World')" />

内部

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

外部

<script src="main.js"></script>

数据类型

Number：数值。数值判断：NaN：not a number不是数值
String：字符串字符串的长度：length属性。字符串拼接: + 连接
Boolean：布尔
Undefined：声明了但没有赋值的变量
Null：变量的值为null 。注意：typeof(null)返回的是Object
Object 对象包含 function、Array、Date

ES6 中新增

Symbol：这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。
bigInt：指安全存储、操作大整数。

数据类型转换

转换成字符串类型

toString()

var num = 5;
console.log(num.toString());

String()

String(null)              //函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null

拼接字符串方式

num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

转换成数值类型

Number()

Number('12')                        //可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN
Number(new Date())                  //Date类型 返回时间戳。
Number(true)                        //true 返回 1 
Number(false)                       //false 返回 0
Number('888 999')                   //返回 NaN 如果要转换的字符串中有一个不是数值的字符，返回NaN
Number(12)                          //返回 12

parseInt()

var num1 = parseInt("12.3abc");  // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN

parseFloat()

parseFloat("12.3abc")            //返回12.3 把字符串转换成浮点数。它会解析第一个. 遇到第二个.或者非数字结束。

+，-0等运算

var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取负
console.log(str - 0);

转换成布尔类型

Boolean()

Boolean()               //0 ‘’(空字符串) null undefined NaN 会转换成false 其它都会转换成true

运算符

和Java中的几乎一样。这里只列举js中特别的运算符

var result = '55' == 55;  	// true ==只进行值得比较
var result = '55' === 55; 	// false 值相等，类型不相等。===类型和值同时相等，则相等
var result = 55 === 55; 	// true

函数

函数声明

function 函数名(){
  // 函数体
}
var fn = function() {
  // 函数体
}

函数的用法和Java中的类似。这里就不在赘述了。

数组

通过数组字面量创建数组

// 创建一个空数组
var arr1 = []; 
// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4]; 
//获取数组元素
arr2[0];	// 1
arr[3];     // 这个数组的最大下标为2,因此返回undefined
// 把1替换成了2
arr[0] = 2;
// 给数组新增加了一个5的值
arr[3] = 5;
// 可以通过数组的length属性获取数组的长度
console.log(arr2.length);
// 可以设置length属性改变数组中元素的个数
arr2.length = 0;

在Java中数组中的数值必须是相同类型的对象，而在js中不是必须的。

var arr2 = [1, 3, 4,"ter"];

数组中的常用函数

var arr = [1, 3, 4]; 
arr.indexOf(3)           //indexOf，通过元素获得下标索引。返回 1 
var a=arr.slice(1,2)     //slice(1,2) 截取Array的一部分，返回一个新数组。返回 [3,4]
arr.push(12,'12')        //push：压入到尾部
arr.pop()                //pop：弹出尾部的一个元素  弹出’12‘
arr.shift(1)             //shift:弹出头部的一个元素。 弹出 1
arr.unshift(1,2)         //unshift:压入到头部
arr.sort()               //排序 默认是按照字符编码的顺序进行排序。 返回 [1, 12, 2, 3, 4]
arr.sort(function(a,b){  //如果想按照其他规则进行排序，就需要提供比较函数。返回 [1, 2, 3, 4, 12]
			return a - b; //返回a-b 升序，返回b-a 降序
		})
arr.concat([1,2,3])      //链接数组 并不会改变原数组，返回的是一个新数组  [1, 2, 3, 4, 12, 1, 2, 3]
arr.reverse()            // 反转 返回 [12, 4, 3, 2, 1]
arr.join('-')            // 用符号链接数组中的元素。 返回 "12-4-3-2-1"

对象

创建对象

var o = {          //每个属性之间用逗号隔开，最后一个不用 
  name: 'zs',      //所有的键都是字符串，值都是任意对象
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};

new Object()创建对象

var person = new Object();
  person.name = 'lisi';
  person.age = 35;
  person.job = 'actor';
  person.sayHi = function(){
  console.log('Hello,everyBody');
}

自定义构造函数

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(){
  	console.log('Hello,everyBody');
  }
}
var p1 = new Person('张三', 22, 'actor');

获取对象属性的值

o.age
18
o.name
"zs"

ES6创建对象和对象继承(和Java十分相似)

 class Student {
            constructor(name) {
                this.name = name;
            }
            sayHello() {
                console.log("hello: " + this.name);
            }
            sayAge() {
                alert(this.name + " 22岁");
            }
        }

        class PrimaryStudent extends Student {
            constructor(name, grade) {
                super(name);
                this.grade = grade;
            }
            sayGrade() {
                console.log("姓名：" + this.name + "  年级为：" + this.grade);
            }
        }

原型链

Date

var now =new Date()      //Sun Jun 13 2021 09:53:09 GMT+0800 (中国标准时间)
now.getFullYear()        //获取年
2021
now.getMonth()           //获取月    注意月份是0-11月，所以这里返回5   
5
now.getDate()            //获取年日
13
now.getDay()             //获取星期几   0-6 星期天0
0
now.getMinutes()         //获取分
53
now.getSeconds()         //获取秒
9
now.getTime()            //获取时间戳
1623549189828
new Date(1623549189828)  //获取将时间戳转化为标准时间
Sun Jun 13 2021 09:53:09 GMT+0800 (中国标准时间)
now.toLocaleDateString()    //将时间转为本地时间字符串
"2021/6/13"

JSON

var o = {          //每个属性之间用逗号隔开，最后一个不用
  name: '张山',      //所有的键都是字符串，值都是任意对象
  age: 18,
  sex: '男',
};
JSON.stringify(o)    //将Object对象转为Json对象
"{\"name\":\"张山\",\"age\":18,\"sex\":\"男\"}"
JSON.parse("{\"name\":\"张山\",\"age\":18,\"sex\":\"男\"}")  //将Json对象转为Object对象
{name: "张山", age: 18, sex: "男"}

ES6的新特性~

map

var map= new Map([['tom',24],['jack',20],['maam',56]])
map.get('tom')                                        //通过key获取value 返回24
map.set('user',120)                                   //添加或修改元素
map.delete('tom')                                    //删除元素

Set

ar set= new Set        
set.add(1)               //添加
set.add(2)
set.delete(2)           //删除
set.has(2)             //判断是否存在该元素 返回false

iterator

for(var index in set){
    console.log(index);     //for in下标
}
for(var value of set){
    console.log(value);     //for of下标
}

操作BOM对象(重点)

window：浏览器窗口

Window {window: Window, self: Window, document: document, name: "", location: Location, …}

location：当前页面的URL信息

QQ截图20210613112708

assign: ƒ assign()            //页面跳转方法
host: "localhost:63342"       //主机+端口号
hostname: "localhost"         //主机名
href: "http://localhost:63342/untitled/org/example/helo.html?_ijt=6l4cjpqiqaq8v84e2drbmd9ifv" //页面的url
origin: "http://localhost:63342"                 //起源
pathname: "/untitled/org/example/helo.html"      //路径名
port: "63342"                                    //端口号
protocol: "http:"                                //协议
reload: ƒ reload()                               //刷新页面方法

使用

location.host                                 //获取主机
"localhost:63342"
location.href                                 //获取url
"http://localhost:63342/untitled/org/example/helo.html?_ijt=6l4cjpqiqaq8v84e2drbmd9ifv" 
location.reload()                             //刷新页面
location.assign('https://www.baidu.com/')     //跳转到百度

history：历史记录

_proto__: History
back: ƒ back()
forward: ƒ forward()

history.back();//后退
history.forward();//前进

document: 当前页面

QQ截图20210613115308

document.cookie            //获取cookie 
"BIDUPSID=2E17AA9A2DBF3CD91EFD16E08D198737; PSTM=1620198573; BAIDUID=B4CB5CB04C508E190E568F2AB85D1D84:FG=1; BD_UPN=12314753; BAIDUID_BFESS=B4CB5CB04C508E190E568F2AB85D1D84:FG=1; BDRCVFR[rlCQPVAaoab]=mk3SLVN4HKm; BD_HOME=1; H_PS_PSSID=34099_33967_31660_33848_33675_33607_26350_22160; BA_HECTOR=20a0a0a12k2g8ka12h1gcb04d0q"
document.title               //获取title    
"百度一下，你就知道"

获取DOM对象（重点）

document.getElementById('kw')             //通过id获取DOM对象
document.getElementsByClassName('s_ipt')  //通过类获取DOM对象
document.getElementsByTagName('title')    //通过标签获取DOM对象

操作DOM对象（重点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var p=document.getElementById('p');
            p.innerHTML="<strong>helloword</strong>";   //可以解析html
            p.innerText="helloword";                    //修改文本的值
            //修改css
            p.style.color='red';
            p.style.fontSize='25px'; 
            //删除节点，先获取父节点，在删除节点
            // 注意，删除多个节点的时刻，children是在时刻变化的，删除节点的时候一定要注意。
            let parentElement = p.parentElement;
            parentElement.removeChild(parentElement.children[1])
        });
    </script>
</head>
<body>
<div>
   <p id="p"></p>
    <p id="p1" style="background-color: red">12</p>
</div>
</body>
</html>

jQuery

jQuery的下载和使用

jQuery的官网： https://jquery.com/ 找到download 下载适合自己的版本。 uncompressed：为未压缩，适用于编译。compressed：为压缩版本。

在新网页或者新标签中打开之后就可以看到jQuery的代码，再Ctrl + S保存到本地就可以了。

jQuery 和原生 js 对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><!--引入 jQuery 库-->
    <script type="text/javascript">

        /*
        window.onload = function () {                   //页面加载之后
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("原生 js 绑定单击事件 代码");
            }
        }
        */

        $(function () {                         //页面加载之后
            var btn = $("#btn");
            btn.click(
                function () {
                    alert("jQuery 绑定单击事件");
                });
        });
    </script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>

DOM 对象和 jQuery 对象互转

DOM 转 jQuery：$(DOM对象); 得到jQuery对象
jQuery 转 DOM：jQuery对象[下标]；得到DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><!--引入 jQuery 库-->
    <script type="text/javascript">
        $(function () {
            var btn = $("#btn");
            btn.click(
                function () {
                    var obj = $("#btn");
                  alert(obj);              //jQuery对象返回[object Object]
                   alert(obj[0] );         //DOM 对象 返回[object HTMLButtonElement] 
                    alert($(obj[0] ))
                });
        });
    </script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>

jQuery 选择器

和css中的选器一模一样的用法，这里就不在赘述了。

jQuery的属性操作

使用attr()

获取: 对象.attr(“属性名”) //返回当前属性值，底层使用的是getAttribute

修改：对象.attr(“属性名”,“属性值”);

删除：removeAttr(“属性名”) ：删除该属性的值

使用prop()

使用方法同attr()一致，底层是property

attr和prop区别

如果操作的是元素的固有属性，则建议使用prop，某些特定属性attr获取不到。元素自定义的属性，则建议使用attr

jQuery的内容操作

获取

html(): 获取元素内的标签体内容，底层调用的innerHTML
text(): 获取元素的标签体纯文本内容，底层调用的innerText
val()：获取元素的value属性值

修改

html(“新的内容”): 新的内容会将原有内容覆盖，HTML标签会被解析执行
text(“新的内容”): 新的内容会将原有内容覆盖，HTML标签不会被解析执行
val(“新的内容”)：设置元素的value属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><!--引入 jQuery 库-->
    <script type="text/javascript">
        $(function () {
            $("p").html("<h1>标签</h1>html()测试");
            $("#p1").text("文本测试<h1>标签</h1>");
            $("input").val("输入框<h1>标签</h1>");
            alert($("div").attr("style"));
            alert($("input").prop("checked",''));
        });
    </script>
</head>
<body>
<p></p>
<p id="p1"></p>
<input type="text"/>
<div style="background:  red">div标签</div>
<input checked="checked" type="checkbox"/>java
</body>
</html>

jQuery的样式操作

1、使用css()
对象.css(“属性名”) //返回当前属性的样式值
对象.css(“属性名”,“属性值”) //增加、修改元素的样式
对象.css({“样式名”:“样式值”,“样式名”:“样式值”……})//使用json传参，提升代码书写效率。
2、使用addClass()
对象.addClass(“类选择器名”) //追加一个类样式
对象.removeClass(“类选择器名”) //删除一个指定的类样式
对象.toggleClass(“类选择器名”): //切换class属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
        .mini {
            width: 55px;
            height: 55px;
            background-color: #ff2e51;
            font-size: 12px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            let d = $("div");
           d.addClass("mini");//为 div 添加样式
            console.log(d.css("width"))
            d.css("width","100px")
            console.log(d.css("width"))
            d.css({"width":"100px","height":"100px"})
        });
    </script>
</head>
<body>
<div>div标签</div>
</body>
</html>

jQuery文档结构操作(了解即可)

内部插入

对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

外部插入

对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
对象1.insertAfter(对象2)：将对象1添加到对象2后边。是兄弟关系
对象1.insertBefore(对象2)：将对象1添加到对象2前边。是兄弟关系

替换

 1.replaceWith(对象|html):将所有匹配的元素(包含内容)替换成指定的HTML或DOM元素
        $("p").replaceWith("<b>hehe</b>");//所有p标签换成加粗的hehe
2.replaceAll(对象|html):用指定的HTML或DOM元素替换所有匹配的元素(包含内容)
         $(".re").replaceAll( $("p"));//所有p标签换成re对象

删除

对象.remove():将对象删除掉
$(“p”).remove($(".a")) 删除所有类名有a的p标签
对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性

复制

clone() ：复制该元素，其他文档操作结果都是剪切效果
$("b").clone().prependTo($("p")); 将b复制一份到p标签前边，原b标签不变

jQuery动画效果

show([speed,[easing],[fn]]) ：显示。

speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000，600, 200)，默认为0
easing：用来指定切换效果，默认是"swing"，可用参数"linear"

swing：动画执行时效果是先慢，中间快，最后又慢

linear：动画执行时速度是匀速的

fn：在动画完成时执行的函数，每个元素执行一次。

hide([speed,[easing],[fn]]) ：隐藏

toggle([speed],[easing],[fn])：切换，隐藏就显示，显示就隐藏。

滑动显示和隐藏方式

slideUp([speed,[easing],[fn]])
slideDown([speed],[easing],[fn])
slideToggle([speed],[easing],[fn])

淡入淡出显示和隐藏方式

fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])
fadeTo([speed,opacity,easing],[fn]]) 将对象调整到指定不透明度

opacity:一个0至1之间表示透明度的数字 0全透明，1不透明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                $("div").hide("slow","linear",function () {
                   alert("隐藏成功")
                });
            });
            $("#btn2").click(function () {
                $("div").show("slow","linear",function () {
                    alert("显示成功")
                });
            });
            $("#btn3").click(function () {
                $("div").toggle("slow","linear",function () {
                    alert("切换成功")
                });
            });
            $("#btn4").click(function () {
                $("div").slideToggle("slow","linear",function () {
                    alert("滑动切换成功")
                });
            });
            $("#btn5").click(function () {
                $("div").fadeToggle("slow","linear",function () {
                    alert("淡入淡出切换成功")
                });
            });
            $("#btn6").click(function () {
                $("div").fadeTo("slow",0.5,"linear",function () {
                    alert("淡到指定透明度")
                });
            });

        });
    </script>
</head>
<body>
<div class="mini">div标签</div>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">切换</button>
<button id="btn4">滑动切换</button>
<button id="btn5">淡入淡出切换</button>
<button id="btn6">淡到指定透明度</button>
</body>
</html>

JQuery事件

click([[data],fn]) 单击事件

dblclick([[data],fn]) 双击事件

blur([[data],fn]) 失焦事件

focusout([data],fn) 失焦事件，子元素失去焦点也会触发

focus([[data],fn]) 得焦事件

focusin([data],fn) 得焦事件，子元素得焦也会触发

change([[data],fn]) 值改变事件，适用于文本、文本域、和select元素

select([[data],fn]) textarea 或文本类型的 input 元素中的文本被选择

submit([[data],fn]) 提交表单时，会发生 submit 事件

scroll([[data],fn]) 滚动可滚动元素(如浏览器窗口，文本域)时

keydown([[data],fn]) 键盘按下

keypress([[data],fn]) 键盘按下

keyup([[data],fn]) 键盘弹起

mouseover([[data],fn]) 鼠标进入元素触发，进入子元素也触发

mouseout([[data],fn]) 鼠标离开触发，离开子元素也触发

mouseenter([[data],fn]) 鼠标进入元素触发，进入子元素不触发

mouseleave([[data],fn]) 鼠标离开触发，离开子元素不触发

mousemove([[data],fn]) 鼠标在该元素上移动

mousedown([[data],fn]) 按下鼠标，不需要松开

mouseup([[data],fn]) 松开鼠标

resize([[data],fn]) 调整浏览器大小时

error([[data],fn]) 错误事件

unload([[data],fn]) 离开页面时，会发生 unload 事件

Ajax

$.ajax()

可选字段：

url：链接地址，字符串表示
data：需发送到服务器的数据，格式为{A: ‘…’, B: ‘…’}
type：请求类型"POST" 或 “GET”。
timeout：请求超时时间，单位为毫秒，数值表示
cache：是否缓存请求结果，布尔表示
contentType：内容类型，默认为"application/x-www-form-urlencoded"
dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
success：请求成功后，服务器回调的函数
error：请求失败后，服务器回调的函数
complete：无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
async：是否异步处理，默认为true；
username：访问认证请求中携带的用户名，字符串表示
password：返回认证请求中携带的密码，字符串表示

$.ajax({
    url: "/greet",
    data: {name: 'jenny'},
    type: "POST",
    dataType: "json",
    success: function(data) {
        // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
        ...
    }
});

$.post()

形式：$.post(url, data, func, dataType);

可选参数：

url：链接地址
data：需要发送到服务器的数据，格式为{A: ‘…’, B: ‘…’}
func：请求成功后，服务器回调的函数；function(data, status, xhr)，其中data为服务器回传的数据，status为响应状态。
dataType：服务器返回数据的格式

$.post(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

$.get()

形式：$.get(url, data, func, dataType);

其各个参数所示意义与$.post()一致，在此不再列出，唯一区别就是请求类型是GET。

$.get(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

$.getJSON()

形式：$.getJSON(url, data, func);

因为确定服务器返回json编码的数据，故相较于$.get()不必再指定dataType。

$.getJSON(
    "/greet",
    {name: 'jenny'},
    function(data) {
        ...
    }
);