dev_3

ChasingTheDawn
224 阅读1分钟

web前端

前端基础

HTML

  1. HTML页面结构

  • 文档声明

  • 页面头部

  • 页面内容

  1. 常见的HTML标签

  • 注释

  • 标题标签

  • 段落和换行标签

  • 块标签

  • 含样式和语义的行内标签

  • 图像标签和链接标签

  • 列表

  • 表格

  1. HTML表单

  • form表单

  • input标签

  • label标签

  • textarea标签

  • select标签

  • option标签

    各标签示例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="get">
    <label>邮箱账号：</label>
    <input type="text" name="email"><br>
    <label>昵称：</label>
    <input type="text" name="nickname"><br>
    <label>密码：</label>
    <input type="password" name="password"><br>
    <label>确认密码：</label>
    <input type="password" name="password2"><br>
    <label>性别：</label>
    <input type="radio" value=1 name="gender">男<input type="radio" value=0 name="gender">女<br>
    <label>爱好：</label>
        <input type="checkbox" name="hobbies" value="read">阅读
        <input type="checkbox" name="hobbies" value="photo">摄影
        <input type="checkbox" name="hobbies" value="sing">唱歌 <br>
    <label>生日：</label>
        <select name="li" id="li">
            <option value="公历">公历</option>
            <option value="阴历">阴历</option>
        </select>
        <select name="year" id="yyyy">
            <option value="1992">1992</option>
            <option value="1993">1993</option>
        </select>年
        <select name="mouth" id="mm">
            <option value="01">01</option>
            <option value="02">02</option>
        </select>月
        <select name="day" id="dd">
            <option value="01">01</option>
            <option value="02">02</option>
        </select>日
    <br><lable>详细地址：</lable>
        <textarea name="addr" id="" cols="30" rows="10"></textarea>
    <br><input type="hidden" name="token" value="dewerwe">
    <br><input type="submit" value="立即注册">
    </form>

</body>
</html>

  1. 内联框架

    • iframe

  2. HTML元素分类

    • 块元素

    • 内联元素

    • 内联块元素

CSS

  1. CSS介绍和引用

    一般，首页的css会使用嵌入式，在head中使用style标签，这样的好处是，提高首页的渲染速度。

  2. CSS背景

  3. 颜色表示法

    可填透明度 rgba(255,255,255,0.1)

  4. CSS文本样式

    常见：

  5. CSS选择器

  6. CSS模型框

    一些标签自带了样式，可以进行统一处理，搜索reset.css，对css样式进行初始化设置。如：www.cnblogs.com/weizhxa/p/9… 文章中，复制淘宝的初始化设置代码，放在项目工程中，新建一个reset.css文件。使用link导入html中。

  7. 浮动和定位

代码示例： juejin.cn/post/691937…

JavaScript

  1. 获取页面标签

    由于代码从上往下加载，如果脚本写在上面，可能会报错。

  2. 操作标签内容

  3. 修改标签属性

  4. onclick事件

JQuery

  1. jquery介绍和引用

  2. jquery选择器

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" >
// 页面加载完后运行，等同与window.onload
    $(function () {
        //通过.css操作样式
        $("#box1").css({height:"200px",width:"200px",background:"red"})
        var li3 = $("#li3").css({background:"pink"})
        // li3的同级元素的前一个元素，li2
        li3.prev().css({background:"blue"})
        // 链式调用,等同于上面两行代码
        $("#li5").css({background:"pink"}).prev().css({background:"blue"})
        // prevAll() 前面的所有兄弟节点
        li3.prevAll().css({background:"blue"})
        // 通过索引选择
        $("li").eq(0).css({background:"white"})

    })
</script>

    <body>
  <div id="box1" style="height: 100px;width: 100px;background-color: rosybrown"></div>
  <div id="box2" style="height: 100px;width: 100px;background-color: bisque"></div>
  <ul>
      <li id="li1">1</li>
      <li id="li2">2</li>
      <li id="li3">3</li>
      <li id="li4">4</li>
      <li id="li5">5</li>
  </ul>
</body>

  3. jquery操作样式

  4. 绑定click事件

  5. jquery操作属性

  6. jquery操作元素

  1. jquery效果函数

  2. jquery事件

    image.png

9.ajax

image.png

Vue框架

avatar
文章
阅读
粉丝