Web前端基础01

fuyi980531

已于 2022-04-27 19:24:45 修改

阅读量1.3k

点赞数

文章标签： java

于 2022-04-22 23:02:57 首次发布

本文链接：https://blog.csdn.net/fuyi980531/article/details/124356430

版权

1、三个阶段：

web前端

数据库

SpringBoot

Web前端-HTML

HTML作用：负责搭建页面结构和内容（盖房子）
学习HTML主要学习的就是有哪些标签

文本相关标签

h1-h6 文本标题, 特点: 独占一行, 自带上下间距, 字体加粗

p 段落标签, 特点: 独占一行,自带上下间距

hr 水平分割线

br 换行

b 加粗

i 斜体

u 下划线

s 删除线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--特点：字体加粗 独占一行 自带上下间距 -->
<h1 align="center">内容标题1</h1>
<h2 align="right">内容标题2</h2>
<h3>内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<h6>内容<br>标题6</h6>
<hr>
<!--段落标签p 特点：独占一行 自带上下间距-->
<p>段落1</p>
<p>段落2</p><p>段落3</p>
加粗<b>标签</b>
斜体<i>标签</i>
下划线<u>标签</u>
删除线<s>标签</s>
<hr>
<h3>列表标签</h3>
<h4>无序列表</h4>
<ul>
  <li>刘备</li>
  <li>孙尚香</li>
  <li>孙悟空</li>
  <li>猪八戒</li>
  <li>刘禅</li>
</ul>
<h4>有序列表</h4>
<ol>
    <li>可井</li>
    <li>传奇</li>
    <li>我</li>
    <li>程恒</li>
    <li>好烂</li>
</ol>
<h4>列表嵌套</h4>
<ul>
    <li>凉菜
        <ol>
            <li>拍黄瓜</li>
            <li>东北大拉皮</li>
        </ol>
    </li>
    <li>炒菜
        <ol>
            <li>宫保鸡丁</li>
            <li>木须肉</li>
        </ol>
    </li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 align="center">个人简历</h1>
<hr>
<h2>基本信息</h2>
<p>姓名：<b>苍老师</b></p>
<p>性别：<i>男</i></p>
<p>爱好：<s>摄影</s></p>
<h2>个人经历</h2>
<ul>
    <li>小学9年</li>
    <li>中学6年</li>
    <li>高中12年</li>
</ul>
<h2>获得荣誉</h2>
<ol>
    <li>知名度最高奖</li>
    <li>达内体重达人</li>
</ol>
</body>
</html>

列表标签

无序列表: ul和li 组合 unordered list list item 列表项

有序列表: ol和li 组合 ordered list

列表嵌套: 有序列表和无序列表可以任意无限嵌套 .

图片标签：

src: 资源路径

相对路径: 访问站内资源

绝对路径: 访问站外资源, 图片盗链, 有找不到图片的风险

alt: 图片不能正常显示时显示的文本

title: 图片标题

width/height: 设置宽高 , 只设置宽度时高度会自动等比例缩放

1.像素 2.上级元素百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--src资源路径
    1.相对路径：一般访问站内资源时使用
      - 图片和页面在同一目录：直接写图片名
      - 图片在页面的上级目录：../图片名
      - 图片在页面的下级目录：文件夹名/图片名
    2.绝对路径：一般访问站外资源，图片盗链
-->
<!--ait：当图片不能显示时 显示的文本-->
<!--title: 图片标题-->
<!--width/height
两种赋值方式：1.像素 2.上级元素的百分比
只设置宽度时 高度会自动等比例缩放
-->
<img src="a.jpg" title="校徽" width="200" alt="学校校徽">
<img src="../b.jpg" width="200" alt="">
<img src="abc/c.jpg" width="50%" alt="">
<img src="https://cdn.tmooc.cn/bsfile//imgad///8D4204DFC45C40BCBF68150E442E1D18.png" width="200" alt="">
</body>
</html>

超链接a

href: 资源路径, 作用类似图片标签的src

a标签包裹文本为文本超链接, 包裹图片为图片超链接

页面内部跳转, 在目的地的元素里面添加id=xxx 然后在超链接里面添加href="#xxx"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a id="top" href="http://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="a.jpg">超链接3</a>
<a href="http://www.tmooc.cn"><img src="a.jpg" width="100"></a>
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<img src="a.jpg" alt="">
<a href="#top">回到顶部</a>
</body>
</html>

表格table

相关标签: table tr表示行 td表示列 th表头 caption标题

相关属性: border边框 colspan跨列 rowspan跨行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <tr><!--table row 表示行  table data 表示列-->
    <td colspan="2">1-1</td><td>1-3</td><td rowspan="2">1-4</td>
  </tr>
  <tr>
    <td>2-1</td><td>2-2</td><td>2-3</td>
  </tr>
  <tr>
    <td colspan="4" align="center">3-1</td>
  </tr>
</table>
<table border="1">
  <tr>
    <td colspan="2">1-1</td><td rowspan="2">1-3</td>
  </tr>
  <tr>
    <td rowspan="2">2-1</td><td>2-2</td>
  </tr>
  <tr>
    <td colspan="2">3-2</td>
  </tr>
</table>
<table border="1">
  <caption>购物车</caption>
  <!--th：字体加粗且居中-->
  <tr>
    <th>编号</th><th>商品名</th><th>价格</th>
  </tr>
  <tr>
    <td>1</td><td>小米12 pro</td><td>5000</td>
  </tr>
  <tr>
    <td>2</td><td>华为电视</td><td>4000</td>
  </tr>
  <tr>
    <td>总价：</td><td colspan="2">9000</td>
  </tr>
</table>
</body>
</html>

表单form

作用: 获取用户输入的各种信息并提交给服务器

学习form表单主要学习的就是有哪些控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://www.baidu.com">
    <!--maxlength最大字符长度  value表示默认值   readonly表示只读-->
  用户名:<input type="text" name="username" maxlength="5" value="abc" readonly="readonly"><br>
    密码:<input type="password" name="password"><br>
    <!--value是单选框必须添加的属性 否则提交on  checked默认选中-->
    性别:<input type="radio" name="gender" value="m" id="r1">
    <!--label表示点“男”这个字也可以选中  用for和id来关联-->
    <label for="r1">男</label>
    <input type="radio" name="gender" checked value="w" id="r2">
    <label for="r2">女</label><br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    所在地:
    <!--selected默认选中   value设置提交的内容-->
    <select name="city">
        <option>北京</option>
        <option value="sh">上海</option>
        <option selected>广州</option>
    </select><br>
    <input type="submit" value="注册">
</form>
</body>
</html>

分区标签

作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理

块级分区标签div: 特点是独占一行

行内分区标签span: 特点是共占一行

页面区域如何划分? 至少分为三大区(头,体,脚) 每个大的区域再划分n个小的区域

HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签
header头 footer脚 main主体 section区域 nav 导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>块级分区标签1</div>
<div>块级分区标签2</div>
<div>块级分区标签3</div>
<span>行内分区标签1</span>
<span>行内分区标签2</span>
<span>行内分区标签3</span>
</body>
</html>

CSS 层叠样式表

Cascading Style Sheet

作用: 美化页面(装修)

如何在HTML页面中添加CSS样式代码

三种引入方式:

内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用

内部样式: 在head标签里面添加一个style标签, 在标签体内写样式代码, 可以实现复用但是只能本页面复用

外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用, 可以将html代码和css样式代码分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h2{color: blue}
    </style>
    <!--引入外部的css样式文件-->
    <link rel="stylesheet" href="my.css">
</head>
<body>
<h1 style="color: red">内联样式1</h1>
<h1 style="color: red">内联样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>

选择器

标签名选择器: 选取页面中所有同名标签

格式: 标签名{样式代码}

id选择器: 当需要选择页面中某一个元素时使用

格式: #id{样式代码}

类选择器: 当需要选择多个不相关的元素时,给多个元素添加相同的class属性,然后通过类选择器进行选择

格式: .class{样式代码}

分组选择器: 分组选择器可以将多个选择器合并成一个

格式: h4,#id,.class{样式代码}

属性选择器: 通过元素的属性选择元素

格式: 标签名[属性名="属性值"]{样式代码}

任意元素选择器: 选择页面中所有标签

格式: *{样式代码}

子孙后代选择器: 通过元素之间的层级关系选择元素

格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p标签(包括后代)

子元素选择器: 通过元素之间的层级关系选择元素

格式: body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素(不包含后代)

伪类选择器: 选择的是元素的状态, 元素有哪些状态? 包括:未访问状态,访问过状态,悬停状态,点击状态

格式: a:link/visited/hover/active:{样式代码}

选择器练习:

把张学友改成绿色

把刘德华和悟空改成蓝色

修改取经3人和刘备的背景为黄色

修改密码框的背景为红色

给所有元素添加红色的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #l1{color: green}
        .c1{color: blue}
        h1,h2{background-color: yellow}
        input[type="password"]{background-color: red}
        input[type="text"]{color: purple}
        *{border: 1px solid red}
    </style>

</head>
<body>
<ul>
    <li id="l1">张学友</li><li class="c1">刘德华</li><li>郭富城</li>
</ul>
<h1 class="c1">悟空</h1><h1>八戒</h1><h1>沙僧</h1>
<h2>刘备</h2>
<input type="text">
<input type="password">
</body>
</html>

选择器续：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*子孙后代选择器*/
        /*body div div p{
            color: red;
        }*/
        /*子元素选择器*/
        /*如果没有body，div>div>p{}则表示寻找符合爸爸和爷爷都是div的情况*/
        body>div>div>p{
            color: red;
        }
        /*伪类选择器*/
        a:link{color: red}/*未访问*/
        a:visited{color: pink}/*访问过*/
        a:hover{color: green}/*悬停*/
        a:active{color: yellow}/*点击*/
    </style>
</head>
<body>
<a href="http://www.tedu.cn">超链接1</a>
<a href="http://doc.canglaoshi.org">超链接2</a>
<a href="http://www.qq.com">超链接3</a>
<p>p1</p>
<div>
  <p>p2</p>
  <div><p>p3</p></div>
  <div>
    <p>p4</p>
    <div><p>p5</p></div>
  </div>
</div>
</body>
</html>

颜色赋值

三原色: 红绿蓝 ,red green blue rgb ,每个颜色的取值范围0-255

颜色赋值的几种方式:

颜色单词: 常见颜色单词都可以使用

6位16进制赋值: #ff0000

3位16进制赋值: #f00

3位10进制赋值: rgb(255,0,0)

4位10进制赋值: rgba(255,0,0,0-1) a=alpha代表透明度

背景图片

background-image:url("路径") 设置背景图片

background-size:100px 200px 设置背景图片尺寸

background-repeat:no-repeat; 禁止重复

background-position: 横向纵向; 设置背景图片的位置,两种方式: 1像素 2百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    h1{
      /*color: #ff0000;
      color: #f00;
      color: rgb(255,0,0);*/
      color: rgba(255,0,0,0.3);
    }
    #d2{
      width: 200px;
      height: 200px;
      background-color: pink;
      /*设置背景图片*/
      background-image: url("../b.jpg");
      /*设置背景图片尺寸*/
      background-size: 100px,100px;
      /*禁止重复*/
      background-repeat: no-repeat;
      /*控制位置：横向 纵向*/
      /*background-position: 50px,100px;*/
      background-position: 50% 60%;
    }
    #d1{
        width: 611px;
        height: 376px;
        background-color: #e8e8e8;
        background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
        background-repeat: no-repeat;
        background-position: 90% 90%;
        background-size: 318px 319px;
    }
  </style>
</head>
<body>
<div id="d2"></div>
<div id="d1"></div>
<h1>颜色测试</h1>

</body>
</html>

文本和字体相关样式

text-align:left/right/center; 文本水平对齐方式

line-height:20px; 设置行高, 多行文本时可以控制行间距, 单行文本时可以控制垂直居中(因为文本默认是在当前所在行内居中)

text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰

text-shadow:颜色 x偏移值 y偏移值浓度; 阴影

font-size:20px; 设置字体大小

font-weight:bold加粗/normal去掉加粗

font-style:italic; 设置斜体

font-family: xxx,xxx,xxx; 设置字体

font:20px xxx,xxx,xxx; 这只字体大小+字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 200px;
      height: 50px;
      border: 1px solid red;
      /*水平对齐方式*/
      text-align: center;
      /*行高*/
      line-height: 50px;
      /*文本修饰 overline上划线 underline下划线 line-through删除线
      none去掉文本修饰*/
      text-decoration: line-through;
      /*文本阴影:颜色 x偏移值 y偏移值 浓度*/
      text-shadow: red 5px 5px 2px;
      /*字体大小*/
      font-size: 20px;
      /*字体加粗 bold加粗 normal去掉加粗*/
      font-weight: bold;

    }
    a{
        text-decoration: none;/*去掉自带的下划线*/
    }
    h3{
        font-weight: normal;/*去掉自带加粗*/
        /*设置斜体*/
        font-style: italic;
        /*设置字体*/
        font-family: cursive;
        /*字体和大小可以同时改变*/
        font: 30px cursive;
    }
  </style>
</head>
<body>
<h3>这个是h3</h3>
<a href="">超链接</a>
<div>文本和字体测试</div>
</body>
</html>

元素的显示方式display

block: 块级元素的默认值, 特点: 独占一行可以修改宽高, 包括: h1-h6 , p, div

inline: 行内元素的默认值, 特点: 共占一行不可以修改宽高, 包括: span, b,i,s,u,超链接a

inline-block:行内块元素默认值, 特点: 共占一行并且可以修改宽高, 包括: img,input

none: 隐藏元素

行内元素不能直接修改宽高, 如必须修改则先将元素的显示方式改成block或inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
    span{
      border: 1px solid blue;
      /*行内元素不能修改宽高*/
      width: 100px;
      height: 100px;
      /*把行内元素改成了块级元素或行内块元素都可以修改宽高*/
      display: inline-block;
    }
    img{
        width: 100px;
        height: 100px;
        display: none;/*隐藏元素*/
    }
    a{
       width: 132px;
        height: 40px;
        background-color: #0aa1ed;
        /*行内元素不能修改宽高*/
        display: block;
        text-align: center;
        line-height: 40px;
        color: white;
        text-decoration: none;
        font-size: 20px;
        /*圆角 值越大越圆*/
        border-radius: 3px;
    }
  </style>
</head>
<body>
<a href="">查看详情</a>

<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>

盒子模型

盒子模型用来控制元素的显示效果包括: 元素内容content+外边距margin+边框border+内边距padding

元素内容content:控制元素的显示尺寸

外边距margin:控制元素的显示位置

边框border:控制边框效果

内边距padding:控制元素内容的位置

盒子模型之内容content

包括:width和height

赋值方式有两种:

-----像素

-----上级元素的百分比

行内元素不能直接修改宽高

盒子模型之外边距margin

作用: 控制元素的显示位置

赋值方式:

-----margin-left/right/top/bottom:10px; 单独某个方向赋值

-----margin:10px; 四个方向赋值

-----margin:10px 20px; 上下10 左右20

-----margin:10px 20px 30px 40px; 上右下左顺时针赋值

行内元素上下外边距无效

上下相邻彼此添加外边距取最大值

左右相邻彼此添加外边距两者相加

粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决

盒子模型之边框border

赋值方式:

-----border:1px solid red; 给四个方向添加边框

-----border-left/right/top/bottom:1px solid red; 单独给某个方向添加边框

border-radios:10px; 值越大越圆当值超过宽高的一半时为正圆(前提是正方形)

盒子模型之内边距padding

作用: 控制元素内容的位置

赋值方式: 和外边距类似

-----padding-left/right/top/bottom:10px; 单独某个方向赋值

-----padding:10px; 四个方向赋值

-----padding:10px 20px; 上下和左右赋值

-----padding:10px 20px 30px 40px; 上右下左顺时针赋值

给元素添加内边距会影响元素的显示宽高

CSS的三大特性

继承: 元素可以继承上级元素文本和字体相关的样式,部分标签自带的效果不受继承影响, 比如超链接字体颜色

层叠:多个选择器可能选择到同一个元素,如果添加的样式不同则全部层叠有效,如果作用的样式相同则由优先级决定哪个生效

优先级: 指CSS中的选择器具有优先级, 作用范围越小优先级越高, !important>id>class>标签名>继承(属于间接选中)

盒子模型外边距：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      /*margin-left: 100px;
      margin-top: 100px;上面一百个像素不能有东西 所以类似于向下移动*!*/
      /*margin-bottom: 50px;*//*下面一百个像素不能有东西*/
      /**/
      margin: 50px;
    }
    #d2{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      /*上下相邻彼此添加外边距 取最大值*/
      margin-top: 100px;
    }
    #s1{
      /*行内元素上下外边距无效*/
      margin-bottom: 100px;
    }
    #s2{
      /*左右相邻彼此添加外边距 两者相加*/
      margin-left: 50px;
    }
    #big{
        width: 200px;height: 200px;background-color: green;
        overflow: hidden;/*解决粘连问题*/
    }
    #big>div{
        width: 50px;height: 50px;background-color: red;
        margin-left: 50px;
        /*当元素的上边缘和上级元素的上边缘重叠式时，给元素添加上外边距会出现粘连问题*/
        /*粘连问题：可能一块走，也可能都不走*/
        margin-top: 50px;
    }
    #border_div{
        width: 200px;
        height: 200px;
        border: 1px solid blue;
        /*设置圆角 当值超过宽高的一半为正圆*/
        border-radius: 100px;
    }
  </style>
</head>
<body>
<div id="border_div"></div>
<div id="big">
    <div></div>
</div>
<span id="s1">span1</span><span id="s2">span2</span>
<div id="d1">外边距测试</div>
<div id="d2">div2</div>
</body>
</html>

盒子模型内边距：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 150px;
      height: 150px;
      border: 1px solid red;
      padding-top: 50px;
      padding-left: 50px;
    }
  </style>
</head>
<body>
<div>内边距</div>
</body>
</html>

盒子模型练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 100px;height: 100px;background-color: red;
            overflow: hidden;
            margin: 25px 0 0 25px;
        }
        #d1>div{
            width: 50px;height: 50px;background-color: blue;
            margin: 25px 0 0 25px;
        }
        #d2{
            width: 50px;height: 50px;border: 4px solid green;
            margin-left: 125px;
            padding: 50px 0 0 50px;
        }
    </style>
</head>
<body>
<div id="d1">
  <div></div>
</div>
<div id="d2">哈喽</div>
</body>
</html>

三大特性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      color: red;
    }
    div{
        /*!important作用是提升了优先级*/
        color: blue !important;
    }
  </style>
</head>
<body>
<div id="d1">
  <p>这是个标签</p>
  <span>这是div里面的span</span>
  <a href="">超链接</a>
</div>
<span>这是div外面的span</span>
</body>
</html>

综合练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      color: #666;
    }
    body>div{
      width: 611px;
      height: 376px;
      background-color: #e8e8e8;
      background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
      background-size: 318px 319px;
      background-repeat: no-repeat;
      background-position: 90% 90%;
      overflow: hidden;
    }
    div>div{
      margin: 68px 0 0 36px;
      width: 245px;
      height: 232px;
    }
    .title_p{
      font-size: 32px;
      color: #333;
      margin-bottom: 12px;
    }
    .price_p{
      font-size: 24px;
      color: #0aa1ed;
      font-weight: bold;
      margin-bottom: 12px;
    }
    a{
      width: 132px;
      height: 40px;
      background-color: #0aa1ed;
      display: block;
      text-align: center;
      line-height: 40px;
      color: white;
      border-radius: 3px;
      font-size: 20px;
      text-decoration: none;
    }
  </style>
</head>
<body>
<div>
  <div>
    <p class="title_p">灵越 燃7000系列</p>
    <p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
      英特尔HD显卡620含共享显卡内存</p>
    <p class="price_p">￥4999.00</p>
    <a href="">查看详情</a>
  </div>
</div>
</body>
</html>

元素的定位方式：

静态定位: position:static;

相对定位: position:relative;

绝对定位: position:absolute;

固定定位: position: fixed;

浮动定位: float:left/right

静态定位(文档流定位)

格式: position:static; (默认的定位方式)

特点: 元素以左上为基准, 块级元素从上往下排列,行内元素从左向右依次排列, 默认情况下无法实现元素的层叠效果

如何控制元素的位置?

通过外边距控制元素的位置

相对定位

格式: position:relative;

特点: 元素不脱离文档流(仍然占着原来的位置) ,可以实现元素的层叠效果

如何控制元素的位置?

通过left/right/top/bottom 控制元素的显示位置,参照物是初始位置

应用场景: 当希望移动某一个元素其它元素不受影响时使用相对定位, 相对定位可以实现元素的层叠

绝对定位

格式: position:absolute;

特点: 元素脱离文档流(不占原来的位置),可以实现元素层叠

如何控制元素的位置?

通过left/right/top/bottom控制位置,参照物为窗口或某一个上级元素(需要在上级元素中添加position:relative作为参照物)

应用场景: 当需要往页面中添加一个元素并且不影响其它元素的显示位置,并且可以实现层叠效果

固定定位

格式: position:fixed;

特点: 脱离文档流

如何控制元素的位置?

通过left/right/top/bottom相对于窗口做偏移

应用场景: 当需要将元素固定在窗口的某个位置时使用

浮动定位

格式: float:left/right;

特点: 脱离文档流, 元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它元素时停止.

浮动元素一行装不下时会自动折行, 折行时有可能被卡住

当元素的所有子元素全部浮动时,自动识别的高度会为0,后面元素会顶上来导致显示异常,通过给元素添加overflow:hidden可以解决此问题

应用场景: 当需要将纵向排列的元素改成横向排列时使用.
当块的高度没有设置时，高度就是内容的高度
当有div浮动导致重叠式，会将重叠的div里面的文本内容留出来
浮动元素一行装不下时会自动折行, 折行时有可能被卡住，会从右边往下走，然后再往左走到头

溢出设置overflow

visible超出部分显示(默认)

hidden超出部分隐藏

scroll 超出部分滚动显示

行内元素垂直对齐方式vertical-align

top 上对齐

middle中间对齐

bottom下对齐

baseline基线对齐(默认)

元素的显示层级

当两个元素非静态定位时可能存在层叠的问题通过z-index样式控制显示层级, 值越大显示越靠前

例子：

div设置居中所有子元素都会继承下去居中但是块级元素是独占一行,元素的文本内容会受继承的居中影响(元素内容居中了,元素自身没居中)

行内元素（包括行内块元素）内容受继承的居中影响,并且元素自身受上级元素居中影响后元素本身会居中(元素内容居中了,元素自身也居中了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      color: #666;
    }
    div{
      width: 198px;
      height: 233px;
      background-color: #e8e8e8;
      text-align: center;
        /*div设置居中
        所有子元素都会继承下去居中
        但是块级元素是独占一行,元素的文本内容会受继承的居中影响
        (元素内容居中了,元素自身没居中)

        行内元素内容受继承的居中影响,并且元素自身受上级元素居中影响后元素本身会居中
        (元素内容居中了,元素自身也居中了)
        */
    }
    .title_p{
        margin: 0 0 6px 0;
    }
    .price_p{
        color: #0aa1ed;
        font-weight: bold;
        margin: 6px 0;
    }
    a{
        width: 100px;
        height: 24px;
        background-color: #0aa1ed;
        /*行内块受上级元素居中的影响，元素自身会居中，内容也继承了居中*/
        display: inline-block;
        color: white;
        text-decoration: none;
        line-height: 24px;
        border-radius: 3px;
    }
  </style>
</head>
<body>
<div>
  <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png" alt="">
  <p class="title_p">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
  <p class="price_p">￥4600.00</p>
  <a href="">查看详情</a>
</div>
</body>
</html>

相对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
    div:hover{
      /*margin: 20px 0 0 20px;*/
      /*修改为相对定位*/
      position: relative;
      top: 20px;
      left: 20px;
    }

  </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

绝对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
    #d1{
      /*设置绝对位置*/
      position: absolute;
        right: 0;
        bottom: 0;
    }
    #big{
      width: 200px;
      height: 200px;
      margin: 100px 0 0 100px;
      background-color: green;
      position: relative;/*做参照物*/
    }
    #big>div{
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 50px 0 0 50px;
    }
    #big>div>div{
      width: 50px;
      height: 50px;
      background-color: red;
      /*绝对定位*/
      position: absolute;
      left: 0;
      top: 0;
    }

  </style>
</head>
<body>
<div id="big">
  <div>
    <div></div>
  </div>
</div>
<div id="d1">div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

固定定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 1000px;
      height: 100px;
      background-color: red;
      position: fixed;
      top: 0;
    }
    body{
      padding-top: 100px;;
    }
    #d2{
      width: 50px;
      height: 200px;
      background-color: blue;
      position: fixed;
      right: 20px;
      top: 30%;
    }
  </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
</body>
</html>

浮点定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>div{
            width: 200px;
            border: 1px solid red;
            /*当元素的所有子元素全部浮动时 自动识别的高度为0
            后面的元素会顶上来导致显示异常，添加overflow: hidden解决此异常
            */
            overflow: hidden;/*也是解决黏连问题方法*/
        }
        #d1{
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
        }
        #d2{
            width: 50px;
            height: 50px;
            background-color: green;
            float: left;
        }
        #d3{
            width: 50px;
            height: 50px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
<div>
    <div id="d1">div1</div>
    <div id="d2">div2</div>
    <div id="d3">div3</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      /*去掉某些元素自带的内外边距*/
      p,ul{
          margin: 0;
          padding: 0;
      }
    ul{
      /*去掉图标*/
      list-style-type: none;
    }
    li{
        float: left;
        margin-right: 20px;
    }
  </style>
</head>
<body>
<ul>
  <li>首页</li>
  <li>免费课</li>
  <li>直播课</li>
  <li>精品课</li>
  <li>线上班</li>
  <li>线下班</li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      color: #666;
    }
    p,ul{
      margin: 0;
      padding: 0;
    }
    body>div{
      width: 366px;
      height: 233px;
      background-color: #e8e8e8;
    }
    #top_div{
      height: 35px;
      background-color: #0aa1ed;
      border-radius: 2px;
    }
    #top_div>img{
      margin: 10px 0 0 10px;
    }
    #top_div>span{
      font-size: 16px;
      color: white;
      /*对某个元素位置进行微调 使用相对定位*/
      position: relative;
      bottom: 4px;
    }
    .c_div{
      padding-left: 10px;
    }
    .c_div>p{
      color: #62b5ec;
      margin: 17px 0 9px 0;
    }
    ul{
      list-style-type: none;
      overflow: hidden;
    }
    li{
      float: left;
      margin-right: 10px;
    }
    a{
      text-decoration: none;
      color: #0aa1ed;
    }
    a:hover{
      color: #0a7eb8;
    }

  </style>
</head>
<body>
<div>
  <div id="top_div">
    <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/computer_icon1.png" alt="">
    <span>电脑,办公/1F</span>
  </div>
  <div class="c_div">
    <p>电脑整机</p>
    <ul>
      <li><a href="">笔记本</a></li><li><a href="">游戏机</a></li>
      <li><a href="">台式机</a></li><li><a href="">一体机</a></li>
      <li><a href="">服务器</a></li><li><a href="">联想</a></li>
    </ul>
  </div>
  <br>
  <div class="c_div">
    <p>电脑配件</p>
    <ul>
      <li><a href="">CPU</a></li><li><a href="">SSD硬盘</a></li>
      <li><a href="">显示器</a></li><li><a href="">显卡</a></li>
      <li><a href="">组装电脑</a></li><li><a href="">机箱</a></li>
    </ul>
  </div>
  <br>
  <div class="c_div">
    <p>外设/游戏</p>
    <ul>
      <li><a href="">键盘</a></li><li><a href="">鼠标</a></li>
      <li><a href="">U盘</a></li><li><a href="">移动硬盘</a></li>
      <li><a href="">游戏设备</a></li><li><a href="">智能单车</a></li>
    </ul>
  </div>
</div>
</body>
</html>

溢出设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
      /*设置超出部分的显示方式*/
      overflow: scroll;
    }
    img{
        width: 100px;
        /*设置行内元素的垂直对齐方式
        top上对齐
        middle中间对齐
        bottom下对齐
        baseline基线对齐(默认)
        */
        vertical-align: bottom;
    }
  </style>
</head>
<body>
<input type="text"><img src="../b.jpg" alt="">
<div>
  <img src="../b.jpg" alt="">
</div>
</body>
</html>

元素的显示层级：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 50px;
      height: 100px;
      background-color: red;
      position: absolute;
      /*设置显示层级 值越大显示越靠前
      只对非静态定位的元素有效*/
      z-index: 1;
    }
    #d2{
      width: 100px;
      height: 50px;
      background-color: blue;
      position: absolute;
      z-index: 2;
    }
  </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

JavaScript

作用：负责给页面添加动态效果

语言特点:

属于脚本语言(不需要编译直接由浏览器解析执行)

基于面向对象

属于弱类型语言

java: String name="tom"; int age = 18; int x; x="abc";报错

JS: let name="tom"; let age = 18; let x; x="abc"; age="xyz"

安全性强: JS语言只能访问浏览器内部的数据,浏览器以外电脑上的数据禁止访问.

交互性强: 因为JS语言是嵌入到html页面中最终执行在客户端的语言可以和用户直接进行交互, 而像Java语言是运行在服务器的语言和用户交互需要借助于网络,所有交互性JS语言会更强一些

如何在HTML页面中添加JS语言

三种引入方式:

1、内联: 在标签的事件属性中添加js代码,当事件触发时执行.

事件: 是系统提供的一系列时间点.

点击事件: 当点击元素时触发的时间点

2、内部: 在html页面中的任意位置(推荐写在/body上面)添加script标签,标签体内写js代码

3、外部: 在单独的js文件中写js代码, 然后在html页面中通过script标签的src属性引入到html页面

变量, 数据类型,运算符,各种语句,方法,面向对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--onclick点击事件 alert()弹出提示框-->
<input type="button" value="按钮" onclick="alert('按钮点击了！')">

<!--内部引入JS-->
<script>
    /*在浏览器的控制台输出*/
    console.log("内部引入成功！")
</script>
<!--引入外部JS文件  如果script标签引入了外部JS文件
则不能在标签内写入js代码-->
<script src="my.js"></script>
</body>
</html>

变量

JS属于弱类型语言

java: String name="tom"; int age = 18; int x; x="abc";报错

JS: let name="tom"; let age = 18; let x; x="abc"; age="xyz"

let和var关键字的区别, 作用域有区别

使用let声明的变量,作用域和Java语言的作用域类似

使用var声明的变量,不管在什么位置声明都相当于是一个全局变量

数据类型

1、JavaScript中只有对象类型

2、常见的对象类型包括:

字符串: string 可以用单引号或双引号修饰

数值: number 相当于Java中所有数值类型的综合

布尔值: boolean true和false

未定义: undefined 当变量只声明不赋值时属于未定义

3、获取变量类型的方法 typeof 变量;

运算符

1、算数运算符: + - * / % , JS中的除法会根据结果自动转换整数或小数

Java: int x =5 ; int y = 2; x/y = 2;

JS : let x =5; let y = 2; x/y =2.5; x=6 x/y=3;

2、关系运算符: > < >= <= != ==和===

==: 先统一两个变量的类型再比较值

"666"==666 true

===:先比较类型,类型相同后再比较值

"666"===666 false

3、逻辑运算符: && || !

4、赋值运算符: = += -= *= /= %= ++ --

5、三目运算符: 条件?值1:值2

各种语句:

if else

while

do while

switch case

方法：

1、java: public 返回值类型方法名(参数列表){方法体}

2、JS: function 方法名(参数列表){方法体}

3、常见的四种方法:

无参无返回值

有参无返回值

无参有返回值

有参有返回值

4、三种声明方法的格式:

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

let 方法名 = function (参数列表){方法体}

let 方法名 = new Function("参数1","参数2","方法体");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮" onclick="f1()">
<script>
  /*无参无返回值*/
  function f1(){
    console.log("f1")
  }
  //调用
  f1();
  /*有参无返回值*/
  function f2(name,age){
    console.log(name+"."+age);
  }
  f2("孙尚香",50)
  /*无参有返回值*/
  function f3(){
    return "哈哈哈";
  }
  let info = f3();
  console.log(info);
  /*有参有返回值*/
  function f4(x,y){
    return x*y;
  }
  let result = f4(8,9);
  console.log(result);

  /*第二种声明方法的方式*/
  let f5 = function (name,age){
    console.log(name+":"+age);
  }
  f5("刘备",20)
  /**/
  let f6 = new Function("name","age","console.log(name+':'+age)");
  f6("卢布",66)
</script>
</body>
</html>

和页面相关的方法

通过选择器获取页面中的元素对象

let 元素对象 = document.querySelector("选择器")

获取和修改元素的文本内容

元素对象.innerText = "xxx"; 修改文本内容

元素对象.innerText 获取文本内容

获取和修改input控件的值

控件对象.value="xxx"; 修改

控件对象.value 获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="平方" onclick="f()">
<div>结果：<span></span></div>
<script>
  function f(){
    //得到文本框和div
    let i = document.querySelector("#i1");
    let s = document.querySelector("span");
    //取出文本框的值并赋值给div
      //"5"*"5" 5*5
      //"a"*"a"  NaN*NaN = NaN
      //isNaN()判断变量是否是NaN
      if(isNaN(i.value)){
          s.innerText="输入错误！";
          return;
      }
    //s.innerText = i.value*i.value;
    //当两个字符串进行-*/运算时会自动转成数值,进行+运算时拼接
    //s.innerText = i.value*1+i.value*1;
    //parseFloat()将字符串转成整数或小数
    s.innerText = parseFloat(i.value)+parseFloat(i.value);
  }
</script>
</body>
</html>

简易计算机：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<div>
  结果：<span></span>
</div>
<script>
  function f(x){
      let i1 = document.querySelector("#i1");
      let i2 = document.querySelector("#i2");
      let s = document.querySelector("span");
      if(isNaN(i1.value)||isNaN(i2.value)){
          s.innerText="输入错误！";
          return;
      }
      switch (x){
          case 1:
              s.innerText = i1.value*1+i2.value*1;
              break;
          case 2:
              s.innerText = i1.value*1-i2.value*1;
              break;
          case 3:
              s.innerText = i1.value*1*i2.value*1;
              break;
          case 4:
              s.innerText = i1.value*1/i2.value*1;
              break;
      }
  }
</script>
</body>
</html>

猜数字：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1" placeholder="请输入0-100之间的整数">
<input type="button" value="猜一猜" onclick="f()">
<div>结果：<span></span></div>
<script>
  //得到0-100随机整数
  let i = 1;
  let x = parseInt(Math.random()*101);
  function f() {
    i++;
    let i1 = document.querySelector("#i1");
    let s = document.querySelector("span");
    if (isNaN(i1.value)) {
      s.innerText = "输入错误！";
      return;
    }
    if (i1.value > x) {
      s.innerText = "太大了！";
    } else if (i1.value < x) {
      s.innerText = "太小了！";
    } else{
      s.innerText = i+"次猜中了！";
      //次数清零  生成新的随机数
      i=0;
      x = parseInt(Math.random()*101);
    }
  }
</script>
</body>
</html>

定时器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>0</h1>
<h2>0</h2>
<script>
  let count=0;
  //开启定时器 每隔一秒调用一次方法
  //方法作为参数进行传递时不写()
  setInterval(f,1000);
  function f(){
      count++;
      let h = document.querySelector("h1");
      h.innerText = count;
  }
  let num=0;
  //匿名方法开启定时器
  let timer = setInterval(function (){
    num++;
    let h = document.querySelector("h2");
    h.innerText = num;
    if(num==50){
      //停止定时器
      clearInterval(timer);
    }
  },100);

  //开启只执行一次的定时器
  setTimeout(function (){
    alert("时间到！")
  },3000);

</script>
</body>
</html>

NaN