前端基础知识汇集 Ver1.0

HTML5 + CSS3 理论案例

常用标签

  • !+tab可以在 html 页面中快速创建框架。
  • 注释的快捷标签：ctrl + /.
  • strong加粗标签；em斜体字标签； 空格；&gt大于；&lt小于；&copy版权。
  • img:图片标签；ul,li：无序列表；ol,li:有序列表。快速创建方法ol>li*3。
  • table、tr、td：表格标签
    • table:border(表格线宽度), width, height, cellspacing（每一个单元格之间的间隙）
    • tr: 行
    • td:列, colspan可以合并行单元格；rowspan可以 合并列单元格
  • audio:音频标签，同video
  • video:视频标签，controls="controls"可以加一个控制播放的进度条，放大缩小

常用表单标签

  • input:

    • type:type, password, checkbox, radio, file, color, number, date, button, submit.
      • radio 单选通过name相同区分
      • number 可以通过 max，min 属性控制输入数字范围
    • name
    • value

  • select ：列表框标签，配合 option 使用:

    1
    2
    3
    4
    5
    6
    <form>
        <select name="province">
            <option value="1">上海市</option>
            <option>
        </select>
    </form>

  • textarea.rows.cols

  • 快速建立表格技巧：table>(tr>(td2))\8

正则表达式

用一组特殊的符号来对指定的字符串做校验，如校验指定的字符串是否是手机号，邮箱等。

  • []:代表一位字符
  • “\d” 代表[0-9]
  • [abc]{2},表示指定的字符串只能有两个字符
  • [1][3578]\d{9}, 表示字符串只能有11个字符，第一个为1，第二个358，剩下的9个字符必须是数字。常用于手机号码校验。
  • [abc]{3,}:指定字符串个数至少为3位，并且每一位都必须是”a”,”b”,”c”
  • [123]{2,4}:指定字符串的字符个数至少为2位，至多不超过4位。
  • 属性中加入 pattern 用来指明规则，required 用来指定是否必须符合规则。
1
2
<input name="" pattern="[a-zA-z]{3,12}" required="required">

  • placehoder 可以为用户进行提示

CSS

  • font-size: 字体大小
  • color：颜色
  • font-weight: bolder 加粗
  • font-style: italic 斜体
  • 行内样式表:
    • 通过id，在 style 中， #id{}，括号中写入属性。id 值唯一
    • 通过class，值可重复。.{}
  • css文件：
    • 把样式表中的代码拷贝到css中即可。
    • 通过link方式引入，

css 字体样式

  • font-family: 字体类型；c://Windows\Fonts是计算机中包含的字体
  • font-size: 字体大小
  • font-style: 字体风格
  • font-weight: 字体粗细
  • span 有单独样式可以包裹起来

CSS 伪标签样式

  • a:link:未访问时的链接样式
  • a:hover:鼠标悬停到链接部分时的样式
  • a:visited:访问后的链接样式
  • a:active:鼠标单击未释放的超链接样式

css 文本样式

  • text-align: 水平居中
  • line-height: 行高
  • text-decoration: 设置文本的修饰符（如 删除线， 下划线等）
  • text-indent: 设置文本的首行缩进，单位是px
  • text-shadow: 设置文本的阴影效果，xyz轴，颜色，z代表阴影的程度

css列表样式

  • list-style-type:列表样式类型
    • none:无标记符号
    • disc: 实心圆
    • circle: 空心圆
    • decimal: 数字
    • square: 实心正方形
  • list-style-image:列表样式图片：
    • 先把列表变为无标记符号，再改
1
<li style = "list-style-image:url(xxxx)"></li>

CSS 背景样式

  • 背景样式：

    • background-color: 背景颜色
    • background-image: 背景图片
    • background-repeat: 背景图片平铺
      • no-repeat
      • repeat-x
      • repeat-y
      • repeat

  • 线性渐变：

    1
    2
    background: -webkit-linear-gradient(top,red,pink)
    height：600px
    • 分别是渐变的方向，起始颜色，结束颜色

盒子模型的边框（border）

  • 边框颜色：
    • border-top-color: 上边框颜色
    • border-bottom-color: 下边框颜色
    • border-left-color: 左边框颜色
    • border-right-color: 右边框颜色
    • border-color: 四个边框的所有颜色
  • 边框粗细:
    • boder-top-width:
    • ……
  • 边框特征:
    • border-top-style:上边框特征
    • 常用值：none, hidden,dotted,dashed,solid,double
  • border-radius:xxpx：边框圆角的弧度

盒子模型的外边距（margin）

  • margin：上右下左。顺时针可以表示4个方向（除了分开的上下左右）。

  • margin-top……, 属性可以是 auto，表示居中

盒子模型的内边距 （padding）

  • 类似于外边距

玩转盒子

  • 加渐变：

    • ```html
      background: -webkit-linear-gradient(left,red,white) 
      1
      2
      3
      4
      5

      * 加阴影： x,y,阴影程度

          * ```html
              box-shadow: 20px 30px 30px blue

  • 旋转：transform:rotate(30deg)

浮动

  • div, h1, h2 等属于块级标签，块级标签会独占一行。如果想把他们在一行显示，可以使用浮动属性来控制。
  • 浮动用 float 表示，常用值：left，right

相对定位

  • position:relative(相对定位)，absolute(绝对定位)
  • relative，相对自身原来位置进行偏移，常用值：top, left, right, bottom

绝对定位

  • absolute
  • 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位。

z-index 属性

  • 该属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
  • 需要注意，前边要先定义 position 属性。
  • IE 浏览器不支持
  • z-index 可以为负值

表单项目实战

  • 先确定列再确定几行
  • input[type=”checkbox”]*n 快速创建
  • 原有的属性进行css 如img 不用加点

JavaScript 基础入门教程

[toc]

数据类型

  • 打印 document.write();或者 window.alert();.
  • 都是 var

循环结构与数组

  •   var attr = [x, y, z];
  var attr = new Array();// 长度不限，可增加删除
  
    1
    2
    3
    4
    5
    6

    * js 的数组与 java 不同，它的数据量可以变化

    * ```javascript
        attr.push(x); //add
        attr.pop();// delete last one
    
## JS 语言特点

  • 弱语言；脚本语言；基于事件的语言。

  • js 由三部分组成： ECMAScript，DOM，BOM

函数

  • 重载
    • java 还可以通过参数类型
    • 由于 js 只有 var 类型，之恶能通过==形参个数==重载了.
  • 时间函数：setInterval(): 可按照指定的周期（ms）来调用函数或计算表达式
    • setInterval(code, millsec[,"lang"])
    • 第一个是一个字符串，加’’
    • 第二个是数字
  • 数学函数（验证码）：
1
2
3
4
5
6
7
var i = Math.random() * 10000;
//floor 向下取整
var j = Math.floor(i);
//向上取整
Math.ceil(i);
//通过 parseInt
parseInt(i);
  • charAt(n): 获取指定位置的字符，默认0

DOM 对象

  • doucunmet object model, 文档对象模型（节点树）

  • 与css获取元素的方式不同，js 通过 DOM 获取

    1
    2
    3
    4
    5
    //通过 id 获取指定标签
    var xxx = document.getElementById("???");//得出的东西看不懂

    // 通过指定元素获取指定元素 
    var flag1 = xxx.属性名

  • ```javascript
    <input type = “text” placeholder =”请输入第一个数字”
    //……
    var usernameElement = document.getElementById(“username”);
    alert(usernameElemet.value)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    * 在 css 中

    ```css
    # nav a{
        
    }//空格表示 儿子辈，孙子辈...所有

    # nav>a{
        
    }//大于号是儿子辈

  • 一般来说line-height和盒子整体的height保持一致，这样使用居中时，会正确显示。

  • text-decoration去掉a的下划线

  • display:block: 此元素将显示为块级元素（比如li是块级，而在其中的a行级不一样，可以使用此修改为一样的）

  • 伪类结构 

1
2
3
#nav li:first-child a{
    
} //只改 li 的第一个child
  • innerHTML 获取标签里的内容，包括嵌套的标签
  • 比如说想要获取一个自己定义的属性，比如说flag，使用标签名.属性无法获取；这时可以使用 doucument 下的getAttribute(“???”) 来获取。
  • 改style可以通过.来设置
    • getElementsByTagName()和getElementsByClassName()可以分别根据标签名 / class 名进行多选

二级导航菜单

  • 通过 事件触发，然后 display：none/block转换隐藏和显示。
  • 可以直接通过 doucument 对象使用.onclick = function(){}执行函数

元素添加与删除

  • createElement(); createTextNode(); appendChild()
  • removeChild()

BOM 模型

  • “+username+”

JQuery 详解

[toc]

JQuery 获取标签对象的4种方式

  •   doucument.getElementById("id属性值") --> $("id属性值")
  //类似地
  //$(".class属性值")
  //$("标签名")
  //$("选择器[name = 属性值]")
  
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    * P.s. idea 的目录层级问题可以通过点击齿轮图标，取消选择"Compact Empty Middle Packages"。



    ## JQuery 中 CSS 方法、注意事项

    * ```javascript
        $("#box1").css({
            width: "200px",
            height: "200px",
            background: "green",
            border-radius: "50%"
        })

JQuery 循环方法

  • ```javascript
    divs.each(function(index,dom)){
            var temp = divs.eq(index); //temp 是 jquery对象
    alert(temp, attr(“id”));
            }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77

    * 规范：$xxx，表示使用 jquery 写的==标签==。  

     ## JQuery 的选择器

    * 基本选择器

        * $("#id属性值")：返回的是 jQuery 对象
        * $(".class属性值"): 返回的是 jQuery 对象数组
        * $("标签名")：返回的是 jQuery 对象数组

    * 属性选择器

        * 精确匹配：$("基本选择器[属性名 = 属性值]")；
        * 属性以xxx打头：$("基本选择器[属性名 ^= 属性值]")；
        * 属性以xxx结尾：$("基本选择器[属性名 \$= 属性值]")；
        * 属性包含xxx: $("基本选择器[属性名 *= 属性值]")；

    * 层次选择器

        * 获取儿子辈的标签：$("选择器>标签名")
        * 获取所有的后代标签：$("选择器  标签名")
        * 获取某个标签的下一个兄弟标签：$("选择器+标签名")
        * 获取某个标签后面的所有兄弟标签：$("选择器~>标签名")
        * 获取某个标签相邻的所有兄弟标签：$("选择器").siblings([标签名]);

    * 过滤选择器

        * 获取第n个标签：$("选择器：nth-child(数字)")；
        * 获取偶数标签：$("选择器：nth-child(even)")；
        * 获取奇数行标签：$("选择器：nth-child(odd)")；

    * 表单选择器

        * 处理复选框：$("选择器：checked");
        * 处理下拉框: $("选择器：selected");

    * 循环：

        * jQuery 对象数组.each(function(index,dom){

            ​	index: 数组中的元素的下标

            ​	dom: 代表的是数组中元素的对象，备注：此处是 dom 对象

            }）

    * jQuery 中的方法：

        * jQuery对象数组.eq(下标): 取出jQuery数组中的元素，返回的jQuery对象
        * jQuery对象数组.size():查看jQuery数组中元素的个数
        * jQuery对象.attr("属性名")：获取属性
        * jQuery对象/jQuery对象数组.attr("属性名"，“属性值”)：给某个标签或者一组标签设置属性值

    * dom对象与jQuery对象互转：

        * jQuery 对象转 dom 对象：
            * var dom = jQuery 对象.get(0)
            * var dom = jQuery对象[0]
        * dom 对象转 jQuery 对象：
            * var $i = \$(dom 对象)



    ## jQuery 方法

    * ```html
        <body>
         	<input type="text" value="" name="bookName">
            <script>
            var v1 = $("input:eq(0)").attr("value");
            var v2 = $("input:eq(0)").prop("value");
            $("input:eq(0)").val("jQuery从入门到精通");//prop("value"."jQuery从入门到精通")
            var v3 = $("input:eq(0)").val();//prop("value").attr("value")
            //但是 val 只能对于表单的这个 value 值操作。而 prop 和 attr 没有这个限制
            </script>
        </body>
  •   xx.html()//获取标签体内容，包含标签内容
  xx.html("??")//使用??代替原本标签的内容
  xx.text()//类似于html(), 只不过不含标签本身
  xx.text("")//类似html("")
  
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    * this 是 dom 对象，可以使用 $("this")

    * cmd 中输入 mspaint 可以迅速打开画图







    # BootStap 入门

    [toc]

    * css 新单位：
        * 宽度：10vw(viewport width)
        * 高度：10vh(viewport height)
            * eg: xxx/10 为一份

    ## 布局容器

    * `container`，将内容放入其中，bootstrap 可以帮助你适应窗口的大小

    * ```html
        <div class="container c1">
            //自定义的 class 名可以写在后面。
        // container-fluid 可以铺满

网格布局

  • row/col
  • 分行：w-100
  • 每行12格
  • align-items-center: row 的对齐
  • align-self-end: col 的对齐
  • justify-content-start: 水平对齐

旋转木马（轮播）

  • carousel: carousel-inner active
    • carousel-inner: carousel-item carousel-indicators
    • data-ride=”carousel”
    • slide
    • 把图片的 class 写上 d-block w-100 这样的话，变为块级标签，图片会随着div变换大小

分页组件

  • pagination

进度条组件

  • progress:

    • progress-bar
    • bg-success
    • bg-info
    • bg-warning
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

<br><br> 我的邮箱：2448628553@qq.com <br><br><br> 垂死病中惊坐起，暗风吹雨入寒窗。 <br>