前端web基础知识

数据库 2023-04-08 11:31:14 阅读次数: 0

HTML

  • 作用： 负责搭建页面结构和内容 （盖房子毛坯房）
  • HyperTextMarkupLanguage： 超文本标记语言
  • 超文本： 指不仅仅是纯文本，还包括字体和多媒体（图片，音频，视频）
  • 标记语言：
  • <开始标签 属性=“xxx”>标签体</结束标签>

创建一个Maven项目,项目名为JSDVN2206,删除src目录

创建Web目录,目录下再创建day01目录,然后创建01文本相关标签.html

<!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>
<!-- br:换行标签 -->
<h6>内容<br>标题6</h6>
<!-- 分割线 -->
<hr>
<!-- 段落标签特点:独占一行,自带上下间距 -->
<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>

创建02简历练习.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>

创建03图片标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- src资源路径:
        1. 相对路径:一般访问站内资源时使用
            - 图片和页面在同一目录: 直接写图片名
            - 图片在页面的上级目录: ../图片名
            - 图片在页面的下级目录: 文件夹名/图片名
        2. 绝对路径: 一般访问站外资源,图片盗链,有找不到图片的风险

        alt: 当图片不能正常显示时,显示的文本
        title: 图片标题

        width/height 两种赋值方式: 1.像素 2.上级元素的百分比
        只设置宽度时,高度也会等比例缩放
        -->
<img src="aa.jpg" alt="这是一张美女图片">
<img src="../b.jpg" title="这是标题" alt="">
<img src="abc/c.jpg" width="50" alt="">
<img src="abc/c.jpg" width="50%" alt="">
<img src="https://cdn.tmooc.cn/bsfile//imgad///047cbbe2ae9d4cb2989b386f5086b551.jpg" alt="">
</body>
</html>

常见的文本标签

  • 内容标题：h1-h6
    特点： 独占一行， 字体加粗， 自带上下间距
  • 水平分割线：hr
  • 段落标签：p
    特点： 独占一行 自带上下间距
  • 换行： br
  • 加粗：b
  • 斜体：i
  • 下划线：u
  • 删除线：s

列表标签

  • 无序列表： ul和 li
  • 有序列表： ol和li
  • 列表嵌套： 有序列表和无序列表可以任意无限嵌套

图片标签img

  • src：资源路径 
    • 相对路径：访问站内资源使用
      • 图片和页面在同级目录： 直接写图片名
      • 图片在页面的上级目录： ../图片名
      • 图片在页面的下级目录： 文件夹名/图片名
    • 绝对路径： 访问站外资源使用, 称为图片盗链,存在找不到图片的风险
  • alt： 当图片不能正常显示时显示的文本
  • title: 鼠标在图片上悬停时显示的文本
  • width/height:设置图片的宽高, 两种赋值方式: 1. 像素 2. 百分比 如果只设置宽度高度会等比例缩放

超链接a

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

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

  • 页面内部跳转, 在目的地元素里面添加id属性, 然后通过超链接href="#id"的方式跳转到目的地元素的位置

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a id="top" href="https://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="a.jpg">超链接3</a>
<a href="https://www.baidu.com"><img src="a.jpg" width="100"></a>
<img src="a.jpg">
<img src="a.jpg">
<img src="a.jpg">
<img src="a.jpg">
<img src="a.jpg">
<img src="a.jpg">
<img src="a.jpg">
<img src="a.jpg">
<img src="a.jpg">
<img src="a.jpg">
<img src="a.jpg">
<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">
        <!-- table row 表示行
             table data 表格数据表示列 -->
        <tr>
            <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="">
        <caption>购物车</caption>
        <tr>
            <th>编号</th>
            <th>商品名</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>1</td>
            <td>华为Mate 40 pro</td>
            <td>6799</td>
        </tr>
        <tr>
            <td>2</td>
            <td>华为Mate 50 pro</td>
            <td>6799</td>
        </tr>
        <tr>
            <td>3</td>
            <td>华为MatePad pro</td>
            <td>4999</td>
        </tr>
        <tr>
            <td>总价:</td>
            <td colspan="2">18,597元</td>
        </tr>
    </table>
</body>
</html>

    表单form

    • 作用:获取用户输入的各种信息并且把这些信息提交给服务器
    • 需要学习form表单中的各种控件, 包括: 文本框,密码框 单选,多选,下拉选,日期选择器,文件选择器, 各种按钮等
    • 相关代码：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- action:提交路径
         maxlength:最大字符长度
         value:设置默认值
         readonly只读 -->
    <form action="https://www.baidu.com">
        用户名:<input type="text" name="username" maxlength="5" value="abc" readonly>
        密码:<input type="password" name="password"></input><br>

        <!-- value是单选框必须添加的属性,否则提交on
             checked默认选中 -->
        性别:<input type="radio" name="gender" checked value="m" id="r1">
        <label for="r1">男</label>
        <input type="radio" name="gender" value="w">女
        <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>

        所在地:
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
            <option value="sjz" selected>石家庄</option>
        </select><br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

    分区标签

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

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

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

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

  • HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签

    1. header头
    2. footer脚
    3. main主体
    4. section区域
    5. 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>

<div>头</div>
<div>体</div>
<div>脚</div>
</body>
</html>

CSS

  • 层叠样式表
  • 作用： 负责美化页面 （装修）

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

  • 内联样式：在标签的style属性中添加样式代码, 弊端:不能复用
  • 内部样式：在head标签里面添加style标签, 通过选择器找到元素后再添加样式代码, 可以复用但是不能多页面复用
  • 外部样式：在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以多页面复用,可以将样式代码和html代码分离开.
  • 工作中外部样式使用的最多, 学习过程中内部样式用的多

08CSS引入方式

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

h3 {
    
    color:green}

选择器

标签名选择器

  • 格式: 标签名{样式代码}
  • 匹配页面中所有同名标签

id选择器

  • 格式: #id{样式代码}
  • 当需要选择页面中某一个元素时使用

类选择器

  • 格式: .class{样式代码}
  • 当需要选择页面中多个不相关元素时, 给多个元素添加相同的class属性值即可

分组选择器

  • 格式: p,#abc,.xyz{样式代码}
  • 将多个选择器合并为一个选择器的写法

属性选择器

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

09选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器 */
        #p1 {
      
      
           color: red;
        }
        /* class选择器 */
        .c1 {
      
      
            color: yellow;
        }
        /* 分组选择器 */
        h4,#p1,.c1 {
      
      
            background-color: blue;
        }
        /* 属性选择器 */
        input[type="text"] {
      
      
            color: red;
        }
        /* 任意元素选择器 */
        * {
      
      
            /*边框  粗细  样式  颜色*/
            border: 1px solid purple;
        }
    </style>
</head>
<body>
<input type="text">
<input type="password">

<p id="p1">苹果</p>
<p class="c1">香蕉</p>
<p>橘子</p>
<h3>冰箱</h3>
<h3 class="c1">洗衣机</h3>
<h3>电视机</h3>
<h4>张三</h4>
</body>
</html>

选择器练习

  1. 把张学友改成绿色

  2. 把刘德华和悟空改成蓝色

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

  4. 修改密码框的背景为红色

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

<!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;
        }
        * {
      
      
            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>

选择器(续)(选择器续.html)

子孙后代选择器

  • 格式: body div div p{样式代码}
  • 上面格式匹配的是body里面的div里面的div里面的所有p(包括子元素和后代元素)

子元素选择器

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

伪类选择器

  • 选择的是元素的状态,包括以下四种状态
  • a:link未访问/visited访问过/hover悬停/active点击{样式代码}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 子孙后代选择器 */
        /*body div div p {
            color: red;
        }*/
        /* 子元素选择器 */
        div>div>p {
      
      
            color: blue;
        }
        /* 伪类选择器 */
        a:link {
      
      color: red} /*未访问状态*/
        a:visited {
      
      color: green} /*访问过状态*/
        a:hover {
      
      color: yellow} /*悬停状态*/
        a:active {
      
      color: pink} /*点击状态*/
    </style>
</head>
<body>
<a href="https://www.tmooc.cn/">超链接1</a>
<a href="https://pvp.qq.com/">超链接2</a>
<a href="https://www.baidu.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>

选择器回顾

  • 标签名 div{}
  • id选择器 #id{}
  • 类选择器 .class{}
  • 分组选择器 div,#id,.class{}
  • 属性选择器 input[属性名=‘值’]{}
  • 任意元素 *{}
  • 子孙后代 div div p{}
  • 子元素选择器 div>div>p{}
  • 伪类选择器 a:link/visited/hover/active

### 选择器练习:

  1. 把刘备改成红色

  2. 张飞和苹果改成绿色

  3. 文本框和所有水果背景黄色

  4. p2 字体粉色

  5. p2和p3背景蓝色

  6. 超链接未访问绿色,访问过红色,悬停黄,点击紫色

    1. 02选择器练习

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #l1{
          
          color: red}
        .c1{
          
          color: green}
        input[type='text'],body>p{
          
          
            background-color: yellow;
        }
        body>div>div>p{
          
          color: pink}
        body div div p{
          
          background-color: blue}
        a:link{
          
          color: green}
        a:visited{
          
          color: red}
        a:hover{
          
          color: yellow}
        a:active{
          
          color: purple}
    </style>
</head>
<body>
    <ul>
        <li id="l1">刘备</li>
        <li>关羽</li>
        <li class="c1">张飞</li>
    </ul>
    <p>香蕉</p>
    <p class="c1">苹果</p>
    <input type="text">
    <input type="password">

    <div>
        <p>p1</p>
        <div><p>p2</p></div>
        <div>
            <div><p>p3</p></div>
        </div>
    </div>
    <a href="http://www.qq.com"></a>
</body>
</html>

    颜色赋值

    • 三原色: 红绿蓝 RGB Red Green Blue , 每个颜色的取值范围0-255
    • 五种颜色赋值方式:
      • 颜色单词: red/blue/yellow
      • 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-repeat:no-repeat; 禁止重复

    • background-size: 100px 200px; 设置背景图片尺寸 宽 高

    • background-position: 横向 纵向; 控制位置, 像素偏移值 和 百分比两种方式

      03颜色和背景

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
          
          
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 设置背景图片 */
            background-image: url("../day01/abc/c.jpg");
            /* 设置背景图片尺寸 */
            background-size: 100px 100px;
            /* 禁止重复 */
            background-repeat: no-repeat;
            /* 控制位置:横向 纵向 */
            /*background-position: 50px 50px;*/
            background-position: 50% 50%;
        }
        #d2 {
          
          
            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;
        }
        h1 {
          
          
            /*color: #ff0000;*/
            /*color: #f00;*/
            /*color: rgb(0,0,255);*/
            color: rgba(255,0,0,0.3);
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>

    <h1>颜色测试</h1>
</body>
</html>

    文本和字体相关样式

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

  • text-decoration: overline/underline/line-through/none 文本修饰

  • line-height:20px; 行高, 多行文本可以控制行间距, 单行文本可以实现垂直居中

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

  • font-weight:bold/normal; 设置加粗或去掉加粗

  • font-style:italic; 设置斜体

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

  • font: 20px xxx,xxx,xxx; 设置字体大小和字体

  • text-shadow: 颜色 x偏移值 y偏移值 浓度（值越大越模糊）

    04文本和字体相关

    <!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删除线 */
            text-decoration: line-through;
            /* 文本阴影   颜色  x偏移值 y偏移值 浓度 */
            text-shadow: red -15px -15px 1px;
            /* 字体大小 */
            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>
<div>文本和字体测试</div>
<a href="">超链接</a>
<h3>这是个h3</h3>
</body>
</html>

综合练习

  1. 刘德华 宽度100 高度30
    绿色背景 红色字体
    横向和纵向居中
  2. 苹果和香蕉 字体大小25px 斜体
  3. 冰箱去掉加粗
  4. 洗衣机添加下划线
  5. 百度去掉下划线字体加粗 字体大小20px

文本和字体相关练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #d1 {
      
      
          width: 100px;
          height: 30px;
          background-color: green;
          color: red;
          text-align: center;
          line-height: 30px;
      }
      span {
      
      
          font-size: 25px;
          font-style: italic;
      }
      #h1_1 {
      
      
          font-weight: normal;
      }
      #h1_2 {
      
      
          text-decoration: underline;
      }
      a {
      
      
         text-decoration: none;
          font-weight: bold;
          font-size: 20px;
      }
  </style>
</head>
<body>
<div id="d1">刘德华</div>
<div>张学友</div>
<span>香蕉</span>
<span>苹果</span>
<h1 id="h1_1">冰箱</h1>
<h1 id="h1_2">洗衣机</h1>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

元素的显示方式display

display :

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

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

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

  • none : 隐藏元素

  • 行内元素不能修改宽高, 如必须修改,则需要先把display改成block或inline-block

    05元素显示方式

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
        
        
            width: 100px;
            height: 100px;
            display: none; /* 隐藏元素 */
        }
        div {
        
        
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        span {
        
        
            border: 1px solid blue;
            width: 100px;
            height: 100px;
            display: inline-block;
        }
        a {
        
        
            background-color: #0aa1ed;
            width: 132px;
            height: 40px;
            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>

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

盒子模型

  • 作用: 控制元素的显示效果 包括 : 尺寸,元素位置,边框,元素内容的位置
  • 盒子模型: 内容+外边距+边框+内边距
  • 内容content
  • 外边距margin
  • 边框border
  • 内边距padding

盒子模型之内容Content

  • width/height
  • 赋值方式,两种 :
    • 像素 : 200px
    • 上级元素的百分比 : 50%
  • 行内元素不能修改宽高

盒子模型之外边距

  • 外边距 : 元素距上级元素或相邻兄弟元素的距离称为外边距

  • 赋值方式 :

    • margin-left/margin-right/margin-top/margin-bottom : 10px; 单独某个方向赋值
    • margin : 10px; 四个方向赋值
    • margin : 10px 20px; 上下10 左右20
    • margin : 10px 20px 30px 40px; 上右下左 顺时针赋值

  • 上下相邻的元素彼此添加外边距取最大值 ,左右相邻的元素外边距相加

  • 行内元素上下外边距无效

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

  • 部分标签会自带外边距,比如 : body ,h1-h6,p,列表标签

盒子模型之边框

  • 赋值方式:
    • border-left/right/top/bottom : 粗细 样式 颜色; 单独某一个方向添加边框
    • border : 粗细 样式 颜色; 四个方向添加边框
    • border-radius : 20px ; 圆角, 值越大越圆, 超过或等于宽高的一半为正圆
<!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;*/
            /* 顺时针,上右下左 */
            margin: 10px 20px 30px 40px;
        }
        #d2 {
      
      
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            /* 上下相邻的元素彼此添加外边距,取最大值 */
            margin-top: 100px;
        }
        #s1 {
      
      
            /* 行内元素是无法设置上下外边距 */
            /*margin-top: 100px;*/
            margin-right: 100px;
        }
        #s2 {
      
      
            /* 左右相邻元素彼此添加外边距,两者相加 */
            margin-left: 50px;
        }
        #big {
      
      
            width: 200px;
            height: 200px;
            background-color: palegreen;
            overflow: hidden;/* 解决粘连问题 */
        }
        #big>div {
      
      
            width: 50px;
            height: 50px;
            background-color: pink;
            margin-left: 50px;
            /* 当元素的上边缘和上级元素的上边重叠时,给元素添加上外边距会出现粘连问题,
               需要在上级元素中添加overflow: hidden; */
            margin-top: 50px;
        }
        #border_div {
      
      
            width: 200px;
            height: 200px;
            border: 10px solid cornflowerblue;
            /* 设置圆角,需要考虑边框 */
            border-radius: 110px;
        }
    </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>

盒子模型之内边距

  • 内边距: 元素边缘距内容的距离为内边距

  • 赋值方式: 和外边距类似

    • padding-left/right/top/bottom:10px; 单独某个方向赋值
    • padding:10px; 四个方向赋值
    • padding:10px 20px; 上下10 左右20
    • padding:10px 20px 30px 40px; 上右下左 顺时针赋值

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

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

    08盒子模型练习

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

CSS的三大特性

  1. 继承性 : 元素可以继承上级元素文本和字体相关的样式, 部分标签自带的效果不受继承影响,如:超链接的字体颜色
  2. 层叠性 : 多个选择器可能选择到同一个元素, 添加的样式不同的时候会全部层叠生效, 如果作用的样式相同则由优先级决定哪个生效
  3. 优先级 : 作用范围越小 , 优先级越高, !important > id > class > 标签名 > 继承(继承属于间接选中)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
      
      
            font-size: 35px;
            color: red;
        }
        div {
      
      
            /* !important作用是提升优先级 */
            color: green !important;
        }
    </style>
</head>
<body>
<div id="d1">
    <p>这是个p标签</p>
    <span>这是个div里面的span</span>
    <a href="">超链接</a>
</div>
<span>这是个div外面的span</span>
</body>
</html>

### 居中相关

  • text-align:center; 让元素的文本内容居中, 让元素里面的行内元素自身和行内块元素自身居中

  • margin:0 auto; 让块级元素自身居中

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
        
        
            background-color: cornflowerblue;
        }
        body>div {
        
        
            background-color: palegreen;
            /* 元素自身文本内容居中,内部的行内元素居中 */
            text-align: center;
        }
        body>div>div {
        
        
            background-color: cadetblue;
            width: 200px;
            margin: 50px 0;
        }
        body>div>a {
        
        
            width: 100px;
            background-color: orange;
            display: block; /* 块级元素的居中,只能够通过margin: 0 auto;来实现 */
            margin: 0 auto; /* 上下0,左右auto */
        }
    </style>
</head>
<body>
<div>
    <a href="">查看详情</a>
    <span>文本内容</span>
    <div><a href="">超链接</a></div>
    <div><p>这是p标签</p></div>
</div>
</body>
</html>

01综合练习

<!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;
        }
        .title_p {
      
      
            color: black;
            margin: 0 0 6px 0;
        }
        .price_p {
      
      
            color: #0aa1ed;
            margin: 6px 0;
            font-weight: bold;
        }
        a {
      
      
            width: 100px;
            height: 24px;
            background-color: #0aa1ed;
            color: white;
            text-decoration: none;
            display: inline-block;
            line-height: 24px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
<div>
    <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png">
    <p class="title_p">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
    <p class="price_p">￥4600.00</p>
    <a href="">查看详情</a>
</div>
</body>
</html>

元素定位

  • 静态定位
  • 相对定位
  • 绝对定位
  • 固定定位
  • 浮动定位

静态定位

  • 默认的定位方式 , 也称为文档流定位
  • 格式: position:static
  • 特点: 元素以左上为基准,块级元素从上往下依次排列, 行内元素从左向右依次排列 ,无法实现层叠效果
  • 如何控制元素的位置? 通过外边距

相对定位

  • 格式: position:relative

  • 特点: 可以实现层叠效果, 元素不脱离文档流(不管元素显示到什么位置 仍然占着原来的位置) (注:能层叠)

  • 如何控制元素的位置? 通过left/right/top/bottom让元素相对于初始位置做偏移

  • 应用场景: 当需要移动某个元素而其它元素不受影响时使用(元素位置微调)

    <!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; /* 相对定位 */
            left: 20px;
            top: 20px;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>

</body>
</html>

绝对定位

  • 格式: position : absolute

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

  • 如何控制元素的位置? 通过left/right/top/bottom让元素相对于窗口或某一个上级元素做位置偏移,如果需要相对于某个上级元素,必须给上级元素设置为相对定位

  • 应用场景: 当需要网页面中添加一个元素, 这个元素不影响其他元素的显示位置时使用绝对定位(例如京东菜单)

    <!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;
            background-color: red;
            margin: 100px 0 0 100px;
        }
        #big>div {
        
        
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 50px 0 0 50px;
            position: relative; /* 做参照物 */
        }
        #big>div>div {
        
        
            width: 50px;
            height: 50px;
            background-color: blue;
            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>
        div{
        
        
            width: 300px;
            background-color: rgba(0,0,0,0.3);
            padding: 10px;
            position: relative;/*参照物*/
        }
        input{
        
        
            width: 260px;/*300-20*2内边距*/
            padding: 10px 20px;
            border: none;
        }
        img{
        
        
            position: absolute;
            top: 14px;
            right: 40px;
        }
        p{
        
        
            margin: 0;
            font-size: 12px;
            color: red;
        }
    </style>
</head>
<body>
<div>
    <input type="text" placeholder="请输入用户名">
    <img src="http://doc.canglaoshi.org/tstore_v1/images/login/yhm.png" alt="">
    <p>用户名不能为空!</p>
</div>
</body>
</html>

固定定位

  • 格式: position:fixed;

  • 特点: 元素固定在窗口的某个位置, 元素脱离文档流

  • 如何控制元素的位置? 通过left/right/top/bottom让元素相对于窗口做位置偏移

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
        
        
            padding-top: 100px;
        }
        #d1 {
        
        
            width: 1000px;
            height: 100px;
            background-color: lavender;
            position: fixed; /* 固定定位 */
            top: 0;
        }
        #d2 {
        
        
            width: 50px;
            height: 200px;
            background-color: paleturquoise;
            position: fixed; /* 固定定位 */
            right: 20px;
            top: 70%; /* 除了能够用像素外,还可以使用百分比 */
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>

    <img src="../b.jpg">
    <img src="../b.jpg">
    <img src="../b.jpg">
    <img src="../b.jpg">
    <img src="../b.jpg">
    <img src="../b.jpg">
    <img src="../b.jpg">
</body>
</html>

浮动定位

  • 格式: float : left/right

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

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

  • 当元素的所有子元素全部浮动时 , 自动识别的高度为0 , 后面的元素会顶上来出现显示异常 , 给元素添加overflow:hidden解决

  • 应用场景: 当需要将纵向排列的元素改成横向排列时使用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>div {
        
        
            width: 200px;
            /*height: 200px;*/
            border: 1px solid red;
            /* 当元素的所有子元素全部浮动时,自动识别高度为0
               后面的元素会顶上来导致显示异常,添加如下代码 */
            overflow: hidden;
        }
        #d1 {
        
        
            /* width: 80px;当宽度大于容器宽度时,元素会自动换行 */
            width: 50px;
            /* height: 60px;当高度大于其他元素高度时,会卡住其他元素 */
            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>
        /* 去掉自带的内外边距 */
        ul {
      
      
            margin: 0;
            padding: 0;
            /* 去掉字体前面的黑点 */
            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>

09综合练习

<!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 {
      
      
            background-color: #0aa1ed;
            height: 35px;
            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>
    <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>
    <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>

溢出设置Overflow

  • visible(默认): 超出部分显示
  • hidden: 超出部分隐藏
  • scroll: 超出部分滚动显示
<!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">
<div>
    <img src="../b.jpg" alt="">
</div>
</body>
</html>

显示层级z-index

  • 当元素修改定位方式时,会出现元素层叠的问题, 通过z-index可以控制层叠的元素谁显示在上面 谁显示在下面

  • 必须改了定位方式之后z-index样式才会生效

  • z-index值越大显示层级越靠前

<!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: 2;
        }
        #d2 {
      
      
            width: 100px;
            height: 50px;
            background-color: blue;
            position: absolute;
            z-index: 1;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

JavaScript

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

  • 语言特点 :

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

    • 基于面向对象

    • 属于弱类型语言

Java: String name = "tom";  int age = 18;  age = "abc"; //报错

JS: let name = "tom";  let age = 18;   age = "xyz"; //不报错

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

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

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

  • 三种引入方式 :

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

      • 事件 : 就是浏览器窗口中发生的一些特定的交互瞬间

      • 点击事件 : 在用户点击元素时触发浏览器窗口中发生的一些特定的交互瞬间

    • 内部 : 在html页面中的任意位置添加script标签 , 标签体内写js代码

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

创建day04目录后

01JS引入方式.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;  age="abc"; //报错

JS: let name="tom";  let age = 18;   age="xyz"; //不报错

  • let和var关键字的区别 , 作用域不同

    • 使用let声明的变量 , 为一个局部变量

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

Java:
for(int i=0; i<10; i++){
    
    
 int y = i+1;
}
int z = i+y; //报错,i和y超出了自身的作用域

JS:
for(let i=0; i<10; i++){
    
    
 let y = i+1;
}
let z = i+y; //访问不到i和y,因为超出了作用域

for(var i=0; i<10; i++){
    
    
 var y = i+1;
}
var z = i+y; //能够访问到i和y的值

数据类型

  • JavaScript中只有引用类型(对象类型)
  • 常见的对象类型 :
    • number : 数值类型 , 相当于Java中所有数值类型的总和
    • String : 字符串 , 可以用单引号或双引号修饰 : ‘tom’ , “tom”
    • boolean : 布尔值 , true/false
    • undefined : 未定义 ,当变量只声明不赋值时 , 变量的类型为未定义
    • 获取变量类型的方式 : typeof 变量

运算符

  • 算术运算符: + - * / %, JS除法会自动根据结果转换整数还是小数

    - Java : int x = 5;  int y = 2;  x / y = 2;
- JS : let x = 5; let y = 2;  x / y = 2.5;

  • 关系运算符: > < >= <= != == 和 ===

    • == : 先统一等号两边的类型 , 再比较值 : “666” == 666 true
    • === : 先比较类型 , 类型相同之后再比较值 : “666”==666 false

  • 逻辑运算符 : && || !

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

  • 赋值运算符: = += -= *= /= %= ++ –

各种语句

  • if else
  • while
  • do while
  • for
  • switch case

方法/函数

  • Java : public 返回值类型 方法名(参数列表) { 方法体 }

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

  • 常见的四种方法:

    • 无参无返回值
    • 无参有返回值
    • 有参无返回值
    • 有参有返回值

  • 声明方法的三种方式 :

    1. function 方法名(参数列表) { 方法体 }
    2. let 方法名 = function(参数列表) { 方法体 }
    3. let 方法名 = new Function(“参数1”,“参数2”,“方法体”);

02方法.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮" onclick="f1()">
<script>
    //1.无参无返回值
    function f1() {
      
      
        console.log("f1");
    }
    //调用
    f1();

    //2.有参无返回值
    function f2(name,age) {
      
      
        console.log(name+":"+age);
    }
    f2("孙尚香",28);

    //3.无参有返回值
    function f3() {
      
      
        return "我是返回值!";
    }
    let info = f3();
    console.log(info);

    //4.有参有返回值
    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("吕布",40);
</script>
</body>
</html>

DOM 文档对象模型

  • 和页面相关内容
  • 通过元素的id获取元素对象
    let 元素对象 = document.getElementById(“元素id”);
  • 通过CSS中接触到的选择器获取元素对象
    let 元素对象 = document.querySelector(“选择器”);
  • 获取和修改元素的文本内容
    元素对象.innerText; //获取
    元素对象.innerText = “xxx”; //修改
  • 获取和修改表单中的控件的值
    控件.value; //获取
    控件.value = “xxx”; //修改

03页面相关方法.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>这个是div</div>
<input type="text" id="i1">
<input type="button" value="按钮" onclick="f()">
<script>
    function f() {
      
      
        //得到文本框和div对象
        let i = document.querySelector("#i1");
        let d = document.querySelector("div");
        //取出文本框的值并赋值给div
        d.innerText = i.value;
    }
</script>
</body>
</html>

04平方练习

<!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>0</span></div>
<script>
    function f() {
      
      
        let i = document.querySelector("#i1");
        let s = document.querySelector("span");
        s.innerText = i.value*i.value;
    }
</script>
</body>
</html>

NaN

  • Not a Number: 不是一个数

  • isNaN(x) 判断变量是否是NaN

<!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>0</span></div>
<script>
    function f() {
      
      
        let i = document.querySelector("#i1");
        let s = document.querySelector("span");
        /* 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>

05计算器练习

<!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");
        
        //判断输入的两个值是不是NaN
        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-i2.value;
                break;
            case 3: //乘
                s.innerText = i1.value*i2.value;
                break;
            case 4: //除
                s.innerText = i1.value/i2.value;
                break;
        }
    }
</script>
</body>
</html>

06猜数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入0-100之间的整数" id="i1">
<input type="button" value="猜一猜" onclick="f()">
<div>结果:<span>0</span></div>
<script>
    //0-100随机整数
    let x = parseInt(Math.random()*101);
    let count = 0;
    let i1 = document.querySelector("#i1");
    let s = document.querySelector("span");

    function f() {
      
      
        count++;
        if (isNaN(i1.value)) {
      
      
            s.innerText = "输入错误!";
            return;
        }
        if (i1.value > x) {
      
      
            s.innerText = "猜大了!";
        }else if (i1.value < x) {
      
      
            s.innerText = "猜小了!";
        }else {
      
      
            s.innerText = "恭喜你第"+count+"次猜对了!";
            //次数清零
            count = 0;
            //生成一个随机整数
            x = parseInt(Math.random()*101);
        }
    }
</script>
</body>
</html>

JavaScript对象分类

  • 内置对象 : 包括String , number , boolean等

  • BOM : Browser Object Model , 浏览器对象模型 , 包括和浏览器相关的内容

  • DOM : Document Object Model , 文档对象模型 , 包括和页面标签相关的内容

BOM浏览器对象模型

  • window: 此对象里面的属性和方法称为全局的属性和方法,访问时可以省略掉window

  • window中常见的方法:

    • alert(“xxx”)弹出提示框

    • confirm(“xxx”) 弹出确认框

    • prompt(“xxx”) 弹出文本框

    • isNaN(x) 判断变量是否是NaN

    • parseInt()和parseFloat() 把字符串转成整数或小数

    • console.log() 控制台输出

    • let timer = setInterval(方法,时间间隔) 开启定时器

    • clearInterval(timer) 停止定时器

    • setTimeout(方法,时间间隔) 开启只执行一次的定时器

  • window对象中常见的属性

    • location位置

      • location.href 获取和修改浏览器的请求地址

      • location.reload() 刷新页面

    • history历史

      • history.length 获取历史页面数量

      • history.back() 返回上一页面

      • history.forward() 前往下一页面

      • history.go(n) n=1是前往下1页面 n=-1 返回上一页面 n=2 前往下2个页面 n=0代表刷新

07定时器

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

    //开启定时器,每隔1秒调用一次方法
    //方法作为参数进行传递时不写()
    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>

DOM文档对象模型

  • 包含和页面元素相关的内容

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

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

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

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

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

  3. 获取和修改input控件的值

    控件对象.value = “xxx”; 修改

    控件对象.value 获取

  4. 创建元素对象

    let 元素对象 = document.createElement(“标签名”);

  5. 添加元素对象到某个元素里面

    document.body.appendChild(元素对象);

    父元素.appendChild(元素对象);

    父元素.append(元素对象,元素对象,元素对象);

01Dom相关

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<script>
   //创建标签
   let d = document.createElement("div");
   //给div设置显示文本
   d.innerText = "我是div";
   //把div添加到body里面
   document.body.appendChild(d);

   //创建h1和h2
   let h1 = document.createElement("h1");
   let h2 = document.createElement("h2");
   h1.innerText = "这是h1";
   h2.innerText = "这是h2";
   //把h1和h2同时添加到body中
   document.body.append(h1,h2);

   //创建图片标签并设置图片
   let i = document.createElement("img");
   //给元素设置属性
   i.src = "../b.jpg";
   //添加到页面中
   document.body.append(i);
</script>
</body>
</html>

02帅哥美女练习

<!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(1)">
<input type="button" value="添加美女" onclick="f(2)">
<script>
    let input = document.querySelector("#i1");
    function f(x) {
      
      
        //得到图片名
        let imgName = x == 1 ? "a.jpg" : "b.jpg";
        for (let i = 0; i < input.value; i++) {
      
      
            let img = document.createElement("img");
            img.src = imgName;
            document.body.append(img);
        }
    }
</script>
</body>
</html>

03员工列表练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1" placeholder="姓名">
<input type="text" id="i2" placeholder="工资">
<input type="text" id="i3" placeholder="工作">
<input type="button" value="添加" onclick="f()">
<table border="1">
    <tr>
        <th>姓名</th><th>工资</th><th>工作</th>
    </tr>
</table>
<script>
    //获取三个文本框
    let i1 = document.querySelector("#i1");
    let i2 = document.querySelector("#i2");
    let i3 = document.querySelector("#i3");
    //通过标签名获取table
    let table = document.querySelector("table");
    function f() {
      
      
        //创建tr和td
        let tr = document.createElement("tr");
        let nameTd = document.createElement("td");
        let salaryTd = document.createElement("td");
        let jobTd = document.createElement("td");
        //把用户输入的内容添加到td中
        nameTd.innerText = i1.value;
        salaryTd.innerText = i2.value;
        jobTd.innerText = i3.value;
        //把td追加到tr
        tr.append(nameTd,salaryTd,jobTd);
        //把tr追加到table
        table.append(tr);
    }
</script>
</body>
</html>

04自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>个人信息</caption>
    <tr>
        <td>照片:</td><td><img id="head_img" src="head.jpg" width="50px" alt=""></td>
    </tr>
    <tr><td>名字:</td><td id="name_td">xxx</td></tr>
    <tr><td>年龄:</td><td id="age_td">xxx</td></tr>
    <tr>
        <td>好友:</td>
        <td><ul id="friend_ul"></ul></td>
    </tr>
</table>
<input type="button" value="请求数据" onclick="f()">
<script>
    function f() {
      
      
        //模拟从服务器获取到的数据
        let person = {
      
      name:"苍老师",age:50,url:"a.jpg",friend:["克晶","传奇","成恒"]};

        //获取页面中的元素对象
        let head_img = document.querySelector("#head_img");
        let name_td = document.querySelector("#name_td");
        let age_td = document.querySelector("#age_td");
        let friend_ul = document.querySelector("#friend_ul");

        //把对象中的数据取出并赋值给页面中的元素对象
        head_img.src = person.url;
        name_td.innerText = person.name;
        age_td.innerText = person.age;
        //遍历好友数组
        for (let fn of person.friend) {
      
      
            //创建li
            let li = document.createElement("li");
            li.innerText = fn;
            //把li追加到ul中
            friend_ul.append(li);
        }
    }
</script>
</body>
</html>

前端MVC设计模式

  • MVC设计模式 , 其实就是将前端实现某个业务的所有代码划分为三部分

  • Model : 模型 , 指数据模型 , 这个数据一般来自于服务器

  • View : 视图 , 指页面标签内容

  • Controller : 控制器 , 指将数据展示到视图中的过程代码

  • 前端MVC设计模式弊端 : 需要在Controller控制器部分频繁进行DOM(遍历查找元素的代码)操作 , 会影响执行效率

M,V,VM设计模式

  • Model : 模型, 指数据模型 , 这个数据一般来自于服务器

  • View : 视图 , 指页面标签内容

  • ViewModel : 视图模型 , 将页面中可能发生改变的元素和某个变量在内存中进行绑定 , 当变量的值发生改变时会从内存中直接找到对应的元素让其改变

Vue

  • Vue框架是目前最流行的前端框架

  • Vue对象相当于MVVM设计模式中的VM , 负责将页面中可能发生改变的元素和变量进行绑定 , 绑定完之后会不断监听变量的改变 , 当变量的值发生改变时会自动找到对应的元素并改变其显示内容

06HelloVue(在web中创建js目录,放入vue.js文件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <h1>{
   
   {info}}</h1>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<!-- 引入本地的vue.js文件 -->
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
      
      
        el:"#app", /* 告诉vue对象管理的区域 */
        data:{
      
      
            info:"Hello Vue!"
        }
    })
    setTimeout(function () {
      
      
        v.info = "值改变了!";
    },3000);
</script>
</body>
</html>

相关指令

  • { {变量}} : 插值 , 让此处的文本内容和变量进行绑定

  • v-text=“变量”, 让元素的文本内容和变量进行绑定

  • v-html=“变量”, 让元素的html内容和变量进行绑定

  • v-bind : 属性名 = “变量”, 让元素的xxx属性和变量进行绑定 , 可以省略掉v-bind

  • v-model = “变量”, 双向绑定, 当变量的值发生改变页面会跟着改变 , 页面的内容改变时变量也会跟着改变 , 只有使用form表单中的控件时才会涉及到双向绑定.

  • v-on : 事件名=“方法”, 事件绑定 , 简写@事件名=“方法” , 调用的方法必须声明在Vue里面的methods里面

07文本相关指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!-- {
    
    {变量}}插值表达式,让此处的文本和data中变量进行绑定,不依赖于某个标签 -->
    <h1>{
   
   {info}}</h1>
    {
   
   {info}}
    <!-- v-text=变量,让元素的文本内容和变量进行绑定 -->
    <p v-text="info"></p>
    <!-- v-html=变量,让元素的标签内容和变量进行绑定 -->
    <p v-html="info"></p>
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
      
      
        el:"div",
        data:{
      
      
           info:"文本相关练习!<b>加粗</b>"
        }
    })
</script>
</body>
</html>

Idea中安装Vue插件

  • File -> Settings -> Plugins ,Marketplace中搜索Vue ,安装完成重启

08属性绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <!-- v-bind属性绑定 -->
  <input type="text" v-bind:value="msg">
  <!-- 上面的简写形式 -->
  <input type="text" :value="msg">
  <a :href="url">超链接</a>
  <img :src="src">
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
      
      
      el:"div",
      data:{
      
      
        msg:"属性绑定测试",
        url:"https://www.baidu.com",
        src:"../b.jpg"
      }
    })
</script>
</body>
</html>

09双向绑定测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!-- 当需要获取input值的时候使用双向绑定 -->
    <input type="text" v-model="msg">
    <h1>{
   
   {msg}}</h1>
    <hr>
    <input type="radio" v-model="gender" value="男">男
    <input type="radio" v-model="gender" value="女">女
    <h1>{
   
   {gender}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
      
      
        el:"div",
        data:{
      
      
            msg:"双向绑定测试",
            gender:"男"
        }
    })
</script>
</body>
</html>

10事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" value="按钮1" v-on:click="f()">
    <!-- @click为v-on:click的简写形式 -->
    <input type="button" value="按钮2" @click="ff()">
    {
   
   {info}}
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
      
      
        el:"div",
        data:{
      
      
            info:"事件绑定"
        },
        methods:{
      
      
            //第一种方法定义
            f:function () {
      
      
                v.info = "按钮1点击了!";
            },
            //第二种方法定义
            ff() {
      
      
                v.info = "按钮2点击了!";
            }
        }
    })
</script>
</body>
</html>

11猜数字练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="text" v-model="num" placeholder="请输入0-100之间的整数">
    <input type="button" value="猜一猜" @click="f()">
    <h1>结果:{
   
   {info}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    let x = parseInt(Math.random()*101);
    let v = new Vue({
      
      
        el:"div",
        data:{
      
      
            num:"",
            info:""
        },
        methods:{
      
      
            f() {
      
      
                if (v.num > x) {
      
      
                    v.info = "猜大了!";
                }else if (v.num < x) {
      
      
                    v.info = "猜小了!";
                }else {
      
      
                    v.info = "恭喜你猜对了!";
                }
            }
        }
    })
</script>
</body>
</html>

12计算机练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="text" v-model="n1">
    <input type="text" v-model="n2">
    <input type="button" value="加" @click="f('+')">
    <input type="button" value="减" @click="f('-')">
    <input type="button" value="乘" @click="f('*')">
    <input type="button" value="除" @click="f('/')">
    <h1>结果:{
   
   {result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
      
      
        el:"div",
        data:{
      
      
            n1:"",
            n2:"",
            result:""
        },
        methods:{
      
      
            f(x) {
      
      
                //eval()方法可以将字符串以代码的形式执行
                v.result = eval(v.n1+x+v.n2);
            }
        }
    })
</script>
</body>
</html>

### Vue指令(续)

  1. v-for=“(变量,i) in 数组”; 遍历数组 同时重复生成当前标签,数量和数组中对象的数量一致
  2. v-if=“变量”, 元素的显示状态和变量进行绑定, true显示,false不显示(删除元素)
  3. v-else和v-if指令结合使用, 显示状态和v-if的元素取反
  4. v-show=“变量” , 变量值为true时显示元素 ,为false时 隐藏元素(需要频繁切换显示状态时使用)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <table border="1">
        <caption>国产优秀纯电汽车</caption>
        <tr>
            <th>编号</th>
            <th>名字</th>
            <th>价格</th>
            <th>类型</th>
        </tr>
        <!-- car代表数组中的每一个对象,i代表遍历的下标值 -->
        <tr v-for="(car,i) in arr">
            <td>{
   
   {i+1}}</td>
            <td>{
   
   {car.name}}</td>
            <td>{
   
   {car.price}}</td>
            <td>{
   
   {car.type}}</td>
        </tr>
    </table>
    <h1 v-for="car in arr">{
   
   {car.name}}->{
   
   {car.price}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
      
      
        el:"div",
        data:{
      
      
            arr:[
                {
      
      name:"极氪001",price:350000,type:"SUV"},
                {
      
      name:"比亚迪汉EV",price:250000,type:"轿车"},
                {
      
      name:"比亚迪宋EV",price:150000,type:"SUV"}
            ]
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="text" v-model="name" placeholder="姓名">
    <input type="text" v-model="salary" placeholder="工资">
    <input type="text" v-model="job" placeholder="工作">
    <input type="button" value="添加" @click="f()">
    <table border="1">
        <caption>员工列表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>工资</th>
            <th>工作</th>
            <th>操作</th>
        </tr>
        <tr v-for="(e,i) in arr">
            <td>{
   
   {i+1}}</td>
            <td>{
   
   {e.name}}</td>
            <td>{
   
   {e.salary}}</td>
            <td>{
   
   {e.job}}</td>
            <td><input type="button" value="删除" @click="del(i)"></td>
        </tr>
    </table>
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
      
      
        el:"div",
        data:{
      
      
            name:"",
            salary:"",
            job:"",
            arr:[{
      
      name:"张三",salary:500,job:"销售"},
                {
      
      name:"李四",salary:300,job:"人事"}]
        },
        methods:{
      
      
            f() {
      
      
                //往数组中添加一个对象
                v.arr.push({
      
      name:v.name,salary:v.salary,job:v.job});
                v.name = "";
                v.salary = "";
                v.job = "";
            },
            del(i) {
      
      
                //删除数组中i下标位置的对象
                v.arr.splice(i,1);
            }
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <table border="1">
        <caption>个人信息</caption>
        <tr>
            <td>照片:</td><td><img :src="person.imgUrl" width="50px" alt=""></td>
        </tr>
        <tr><td>名字:</td><td>{
   
   {person.name}}</td></tr>
        <tr><td>年龄:</td><td>{
   
   {person.age}}</td></tr>
        <tr>
            <td>好友:</td>
            <td><ul>
                <li v-for="name in person.friend">{
   
   {name}}</li>
            </ul></td>
        </tr>
    </table>
    <input type="button" value="请求数据" @click="f()">
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
      
      
            el: "div",
            data: {
      
      
                person: {
      
      name: "xxx", age: "xxx", imgUrl: "../day05/head.jpg", friend: ["xxx", "xxx"]}
            },
            methods:{
      
      
                f() {
      
      
                    let person = {
      
      name:"苍老师",age:50,imgUrl:"a.jpg",friend:["克晶","传奇","成恒"]}
                    v.person = person;
                }
            }
        })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <div v-if="isLogin">
        <input type="text" v-model="newName">
        <input type="button" value="添加" @click="arr.push(newName)">
        <a href="javascript:void(0)" @click="isLogin=false">登出</a>
    </div>
    <div v-else>
        <a href="javascript:void(0)">注册</a>
        <!-- 如果超链接点击时,不离开此页面需要添加javascript:void(0),
             作用废掉跳转功能 -->
        <a href="javascript:void(0)" @click="isLogin=true">登录</a>
    </div>

    <ul>
        <li v-for="name in arr">{
   
   {name}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
      
      
        el:"body>div",
        data:{
      
      
            arr:["刘备","关羽"],
            isLogin:false,
            newName:""
        }
    })
</script>
</body>
</html>

Idea中安装Element插件

  • File -> Settings -> Plugins ,Marketplace中搜索Element,安装完成

猜你喜欢

转载自blog.csdn.net/weixin_47852232/article/details/128083308
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022