前端学习笔记

1.css简介 用来修饰html样式的一种语言,层叠样式表 增强复用性 方便后期维护 2.css样式引入方式: (1)内嵌方式

   <div style="color:red"></div>

(2)内部样式:head里边

<style>
       div{color:red}
    </style>

(3)外部样式 创建一个.css文件

  div{color:red}

调用一个外部的css样式文件

   <link rel="stylesheet" type="text/css" href="style.css">
      rel:relation的缩写,引入的文件与html本身的关系,样式表
      type:告知浏览器这段代码需要解析
      href:需要引入的css的路径
特点:书写方便,复用性强,

3.css选择器 (1)基本选择器 优先级;id>class>元素 1)元素选择 h1{color:red;}d选择器

    #div1{}----<div id="div1">
3)类选择器
      .div1{}------<div class="div1">

(2)属性选择器

    <style>
      input[type="text"]{}
      imput[type="password"]{}
    </style>

(3)伪元素选择器

a标签的伪元素选择器
    静止时:a:link{color:black}
    悬浮时:a:hover{color:red}
    活动时:a:active{color:blue}
    完成时:a:visited{color:yellow}

(4)层级选择器 父选择器 子选择器{} 4.css的属性 (1)文字属性

font-size:字号
  font-family:字体类型

(2)文本属性

 color:颜色
  text-align:对齐方式
  text-decoration:下划线

(3)背景属性

 bckground-color:背景颜色
  background-image:背景图片   url("路径")
  background-repeat:平铺方式  默认x方向和y方向都平铺
    属性:repeat,no-repeat,repeat-x,repeat-y

(4)长度宽度属性

 width:
  height:

(5)列表属性

 list-style-type:列表项前的小标志
  list-style-image:列表项前的小图片  url("")

(6)显示属性

 display:是否让标签元素显示
  属性:none(消失),block(显示),inline(覆盖)

(7)浮动元素

div是行元素
  float:浮动方向   left,right

缺点:会对父元素和相邻元素没有设置浮动的 造成不可预测的后果 属性:clear:both /left/right 清除浮动

5.css的盒子模型

  border:盒子的边框
  padding:盒子内部的间隙
  margin:盒子外部与其他元素的间隙


  border:
  border-width:边框宽度
  border-style:边框的线型
  border-color:边框颜色

  padding
  padding:20px,50px  上下20 左右50
  padding:10 20 30 40  顺时针

二、JS 1.javascript是基于对象模型 和 事件驱动 的脚本语言,可以潜入到html中 特点:交互性 : 安全性:js不能访问本地磁盘 跨平台性:所有的浏览器都内置js解析器 2.js作用? 可以动态的修改(增删)html及 css的代码 可以动态的校验数据 3.js的历史及组成? 组成:ECMAScript BOM(浏览器模型) DOM(文档对象模型) 4.js的引入方式 (1)内嵌脚本

     <input type="button" value="button" onclick="alert('x')">
(2)内部脚本
    <input id="btn" type="button" value="button">
     <script type="text/javascript">
    document.getElementById("btn").onclick = function(){
        alert("xxx");
        };
     </script>
(3)外部脚本创建一个.js文件 将js代码卸载其中,在Html 中使用<script>标签进行引入
     <input id="btn" type="button" value="button">
        window.onload = function(){
    document.getElementById("btn").onclick = function(){
            alert("xxx");
        };
    }

js代码写在哪都可以,在不影响html功能情况下 越晚越好。 5.js的基本语法 1)变量(弱类型)

     var x = 5;   var str = "hello";
      y = 5;

2)原始类型 number:数字 string:字符串 boolean:布尔类型 undefined:未定义 null:空———>object

类型转换
     number||boolean-->string:   toString();
      string-->number  :  parseInt("10");  parseFloat();
  强制转换:
  Boolean(value)

3)引用类型

    var obj = new Object();

4)引用类型 赋值:=、 判断:>、 <、 ==、>=、<=、!=或<>、===(全等,代表值与类型都一致) 算术:+、-、*、/、 逻辑:&&、||、! void运算: 类型运算符:typeof:判断数据类型 instanceof:预测数据类型 5)逻辑语句

      if else:
      switch:
      for

     "10"+"20"=1020  进行连接
     "7"-"2"=5   其它的进行算术运算

三、js 1.js的内置对象 1)Number

    var myNum = new Number(value);
      var myNum = Number(value);
      toString():数字转换成字符串
      valueOf():返回一个Number对象的基本数字值
 2)Boolean
     var bool = new Boolean(value);  //object类型
       var bool = Boolean(value);
       toString():逻辑值转换为字符串,并返回结果
       valueOf():返回Boolean对象的原始值
 3)String
   属性:length
   方法:indexOf():检索字符串
    lastIndexOf():从后检索
        split():分割为字符串数组
        substring():提取两个指定索引号之间的字符
        substr():co索引号提取指定数目的字符

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

Angularjs基础(十二)

ng-model-options       描述:规定如何更新模型             实例: 在失去焦点时绑定输入框的值scope 变量中。 ...

20610
来自专栏听雨堂

relative定位的理解

relative:对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。       设置此属性值为 relative ...

1867
来自专栏JavaEE

JavaScript的使用前言

JavaScript作为使用得最多的脚本语言,可以说是无处不在。所有主流浏览器都支持JavaScript。目前,全世界大部分网页都使用JavaScript。它可...

912
来自专栏技术博文

mysql中int长度的意义

疑问: mysql的字段,unsigned int(4), 和unsinged int(5), 能存储的数值范围是否相同。如果不同,分别是多大? 答: 无论是i...

2964
来自专栏前端知识分享

第208天:jQuery框架封装(一)

1.1冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。

2414
来自专栏编程

Python基础知识6:格式化字符、颜色

字符格式化,有两种方式: 1、通过%占位符方式,%s,%d,% 2、通过format,其中format比较好用,可以居中、可以用%、可以用二进制、可以填充字符自...

2165
来自专栏前端知识分享

第60天:js常用访问CSS属性的方法

点语法可以得到 width  属性  和 top属性  带有单位的。 100px

761
来自专栏liulun

riot.js教程【四】Mixins、HTML内嵌表达式

前文回顾 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期; riot.js教程【二】组件撰写准则...

2567
来自专栏前端知识分享

第75天:jQuery中DOM操作

还有就是,我说的是name属性,上面例子中的 type属性,是可以用attr的。

762
来自专栏菜鸟计划

vue内置指令详解——小白速会

指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。 内置指令 1、v-bin...

3825

扫码关注云+社区