• 前端基础


    一. 索引

      1.  HTML

          <1>  介绍 & 规范

          <2>  文件标签(一)

                <html> / <head> / <body>

                <br> / <p> / <hr> / <div> / <span>

                <font> / <h1> --- <h6>

                <b> / <i> / <del> / <u>

                <ol> / <ul>

                <img src = "" width="" height = "" border = "" alt="" title="" align = "" >

                <a href="跳转路径" target = "_blank / _self">

          <3>  文件标签(二) - 表格标签

                <table border="" width="" align="" cellspacing="">

                <tr align="left / right / center">

                <td>

          <4>  文件标签(三) - 表单标签   

                <form action="目的地" method = "get / post">

                <input type = "text / password / checkbox / radio / file / reset / submit / button">

                <select>: 下拉列表/下拉框

                <option selected = "selected">

                <textarea>

                <button>

          <5>  文件标签(四) - 框架标签

                1. <frameset>和<frame>:用于定制HTML页面布局

                2. 可以理解为:用多个页面拼装成一个页面

                3. 框架标签和<body>标签不共存

          <6>  文件标签(五) - 其它标签与特殊字符

                <meta charset="" name="" content="" http-equiv="">

                特殊字符:

                  

          <7>  HTML5新特性

                1. 大小写不敏感

                2. 引号可省略

                3. 省略了结尾标签

                4. 新增语义化标签,让<div>“见名知意”

                  <section> / <article> / <aside> / <header> / <hgroup> /

                  <nav> / <figure> / <foot>

                5.   <video src="" controls loop autoplay>

                6. 表单的控件更加丰富了

                  <input type = "color / date / range / search / ...">

                  <progress/> / <mark> / <datalist>

                

      2.  CSS

          <1>  CSS介绍 & CSS与HTML结合方式

          <2>  选择器

                标签选择器 / 类选择器 / id选择器 / 选择器组 / 派生选择器

                CSS伪类

          <3>  文本属性 & 背景属性

                1. 文本属性

                  {font-family: }  {font-size: }

                  {font-weight: normal / bold; }

                  {color: }  {text-align: left / right / center; }

                  {text-decoration: none / underline; }

                  {line-height: }  行高

                  {text-indent: 2em; }  首行文本缩进

                2. 背景属性

                  {background-color: }

                  {background-image: url('img/1.jpg'); }

                  {background-repeat: repeat / repeat-x / repeat-y }

                  {background-position: 50px 100px;}

                  {background-attachment: scroll / fixed}

                

          <4>  列表属性 & 边框属性

                1. 列表属性

                  {list-style-type: none / disc / circle / square/ decimal / ...}

                2. 边框属性

                  {border-style: none / dotted / dashed / solid / double / ...}

                  

          <5>  轮廓属性 & 盒子模型

                1. 轮廓属性

                  {outline: 5px blue dashed;}

                2. 盒子模型

                   

                                                       

          <6>  定位 

                默认定位

                  自上而下,自动换行 - <h1>, <p>,<div> (块级元素)

                  从左向右,不换行 - <a>, <b>, <span> (行内元素)

                  从左向右,自动换行 - <input> / <img> (自动换行)

                浮动定位

                  {float: none / left / right} (靠左 / 靠右)

                相对定位

                  和原来的位置进行比较,进行偏移

                    

                绝对定位

                  以已定位的祖先元素作为参照物, 进行偏移

                  

                固定定位

                  将元素的内容固定在页面的某个位置,当用户向下滚动页面时元素框并不随着移动

                  

                  

                z-index

                  如果有重叠元素,使用z轴属性,定义上下层次

                  

          <7>  圆角 & 盒子阴影 & 渐变

          <8>  背景 & 过渡动画   

                {background-origin: border-box / padding-box / content-box}  背景位置

                {background-clip: border-box / padding-box / content-box}  背景裁切

                {transition: width 2s linear 1s; }

     

      3.  JavaScript

          <1>  介绍 & HTML与javaScript结合方式

          <2>  基本语法

          <3>  常用字符串API

          <4>  数组

          <5>   Math数学对象 & Number对象  

          <6>  正则表达式 & 日期对象

          <7>  函数

          <8>  函数闭包

          <9>  弹框输出

          <10>   DOM操作 - 简介

          <11>   DOM访问

                var 对应id的元素下的内容 = document.getElementById("").value;

                var 对应name的元素们 = document.getElementsByName("");

                var 对应TagName的元素们 = document.getElementsByTagName("tr");

          <12>   DOM修改

                1. 修改内容

                  document.getElementById("hello").innerHTML = "Bye~";

                  document.getElementById("hello").style.color = "red";

     

                2. 添加节点

                  var img = document.createElement("img");

                  img.setAttribute("src", "../img/cat.jpg");

                  var divs = document.getElementByTagName("div");

                  divs[0].appendChild(img);

                3. 删除节点

                  var img = document.getElementById("cat");

                  img.parentNode.removeChild(img);

                4. 替换节点

                  var old = document.getElementById("");

                  var new = document.createElement("img");

                  new.setAttribute("src", "new.jpg")

                  old.parentNode.replaceChild(new,old);

          <13>   事件

              1. 窗口事件 - 仅在 body 和 frameset 元素中有效

                onload: 当文档被载入时,执行脚本

                  <body onload = "test()">

              2. 表单元素事件 - 仅在表单元素中有效

                onblur: 当元素失去焦点时,执行脚本

                onfocus: 当元素获得焦点时,执行脚本

                  <input onfocus = "test1()" onblur = "test2()">

              3. 鼠标事件        

                onclick :当鼠标被单击时,执行脚本

                ondblclick: 当鼠标被双击时,执行脚本

                onmouseout: 当鼠标指针移出某元素时,执行脚本

                onmouseover :当鼠标指针悬停于某元素之上时,执行脚本          

                  <img src = "公司logo.jpg" onmouseover="加个边框()" onmouseout="去掉边框()">

              4. 键盘事件

                onkeydown: 键盘按下去

                onkeyup:  键盘弹上来

                  window.onkeydown = function() {

                    if(event.keyCode == "13"){ // 回车键

                      alert("登录成功!");

                    }

                  }

                   

                  window.onkeyup = function() {              

                       // 按住按键不松手是不会触发的。当松手时,按键回弹则触发

                    console.log(event.keyCode);

                  }

              5. 事件冒泡: 事件的触发顺序自内向外(先子后父)

               事件捕获: 事件触发顺序变更为自外向内(先父后子)

          <14>   面向对象OOP

          <15>   JSON

                JSON是一种轻量级的数据交换格式:          

                  {

                     属性1:值1,

                     属性2:值2

                  }

          <16>   BOM操作 - window对象

                BOM:javascript对浏览器的一些常规操作的方法

                  1. window.screen.width / window.screen.height

                  2. location.href  当前页面的URL路径地址

                  location.reload();  重新加载当前页面(刷新)

                  location.href = "新的网址";  跳转页面

                  3. history.go(-1); / history.back();  返回上一级页面

                  4. window.navigator 对象包含有关访问者浏览器的信息

                  5. 储存对象 - 本地存储 localStorage / 会话存储 sessionStorage

          <17>    计时操作

                timer = setInterval(test, 100);  每隔0.1秒,执行一次test函数

                clearInterval(timer);  停止定时器

                setTimeout(test,3000);  3秒之后调用(一次性定时器)

    二. 练习题

      1. 编写一个注册用户信息页面,需求如下:

        表单中包括:用户名,密码,性别,学历(本科,专科),自我介绍;

        输入完用户名后校验只能是"admin",否则弹框提示错误

        点击提交执行后执行事件,把自我介绍的内容弹框提示出来

      2. 使用html+css完成效果图

        

  • 相关阅读:
    js基础知识(pomelo阅读)
    nohup启动命令(转)
    JS基础知识(数组)
    JS基础知识(作用域/垃圾管理)
    JS基础知识(基本类型 引用类型)
    html5实现饼图和线图-我们到底能走多远系列(34)
    RK3288 device descriptor read/64, error -32
    RK3288 双屏异显,两屏默认方向不一致
    Android 查看Android版本的方法
    adb error: device offline
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/15148529.html
Copyright © 2020-2023  润新知