【2018-10-23】【web前端学习】【day2】

CSS：层叠样式表。

将网页内容和显示样式进行分离，提高了显示功能。

CSS和HTML结合方式：

每个html标签上面都有一个属性：style可以和css结合。
使用html标签：<style> 写在head里面。

css代码;

</style>

例如：

【2018-10-23】【web前端学习】【day2】

在style 标签里面适用语句：【某些浏览器下不起作用，所以一般用第四种。】

@import url(css文件的路径);

使用头标签 link，引入一个外部css文件。

优先级【针对2】

由上到下，从外到内，优先级由低到高。（后加载的优先级高）

格式：选择器名称 {属性名：属性值；属性名：属性值：……}

·····css选择器

标签选择器。【标签名】
class选择器。<div class=”haha”>aaa</div> haha就可以是一个选择器。

style里面：div.haha{}

.haha{}//只要选择器是haha的，都用这个效果。

3.id选择器。【每个html标签上都有这个属性id】

style里面：div#hhh{}

#hhh{}//只要选择器是hhh的，都用这个效果。

优先级：style>id>class>标签选择器

······css扩展选择器。

关联选择器。【嵌套标签】

div p{}//修改div里面p标签的内容

2.组合选择器。【不同标签设置相同的样式】

idv,p{}//修改div和p标签里的内容

3.伪元素选择器

css里面提供了一些定义好的样式，可以直接拿来使用。【如：超链接】

······css盒子模型。

【2018-10-23】【web前端学习】【day2】

······css布局漂浮：

float

float:left;文本流向对象的右边。

·····css布局定位：

position:

属性值：

absolute：将对象从文档流中拖出。可以用top bottom等属性进行定位。

relative：直接用top、bottom定位。

······Javascript：基于对象和事件驱动的语言，应用于客户端。

基于对象：提供好了很多对象，可以直接拿来使用。

事件驱动：html做的网站静态效果。javascript是动态。

客户端：浏览器。

····js的特点·：

交互性。信息动态交互。
安全性。不能访问本地磁盘文件。
跨平台。java里面跨平台：虚拟机 js只需要浏览器即可。

·······js和java的区别【没有任何关系】

·······js的组成

java是oracle公司 js是网景公司
js基于对象，java面向对象。
java强类型语言，js是弱类型的语言。
java需要先编译。js只需要解析。
ECMAScript

-ECMA：欧洲计算机协会

-由该组织制定的js语法

1.BOM

-浏览器对象模型

2.DOM

-文档对象模型

······js和html的结合方式

······js的原始类型和声明变量。

使用一个标签：<script type=”text/javascript”>js代码</script>
使用script标签引入外部一个js文件。<script type=”text/javascript” src=1.js></script>【不要在script里再写内容了】

定义变量都是用关键字 var

·····原始类型：

-string：var str=”abc”

-number：var m=”123”

-boolean：var f=”true”

-null：var date=new Date();

获取对象的引用，null表示对象引用为空，所有对象的引用也是object。

-undefined

定义一个变量，没有赋值。

var aa;

typeof();查看当前变量的数据类型。

·····js的语句

if判断语句
switch语句
循环语句（while for）
i++和++i和java一样

·····js的运算符

js里面不区分整数和小数，123/1000=0.123
字符串的操作：相加和java一样（字符串连接），但相减即数字相减。NaN:不是一个数字进行相减
boolean类型的相加减。true=1，false=0；
==和===的区别：（都是判断）两个等号比较的是值三个等号比较的是值和类型。
引入知识：直接向页面输出的语句（内容显示在页面上）

document.write(“aaa”);

document.write(“<br/>”);

可以向页面输出变量、固定值和html代码。

99乘法表案例

<html>

<head>

    <title>99乘法表</title>

    <style type="text/css">

    </style>

</head>

<body>

<script type="text/javascript">

   document.write("<table border='1' bordercolor='blue'>");

    //循环行

    for(var i=1;i<=9;i++){

        document.write("<tr>");

        for(var j=1;j<=i;j++){

            document.write("<td>");

            document.write(j+"*"+i+"="+i*j);

            document.write("</td>");

        }

    document.write("</tr>");

    }

    document.write("</table>");

</script>

</body>

</html>

document.write里面是双引号，如果设置标签的属性需要使用单引号。

document.write可以输出变量，还可以输出html代码。

····js的数组

定义方式（3种）

var arr=[1,2,3];
使用内置对象Array。 var arr1=new Array(5);//定义一个数组长度为5的数组。

arr1[0]=”1”;

3.var arr2=new Array(3,4,5);//定义一个数组，括号里面是元素。

···数组里面有一个属性length，可以查询数组长度。

····数组可以存放不同的数据类型的数据。

····js的函数

····定义函数（3种）

函数的参数列表里面，不需要写var，直接写参数名称。

1） function 方法名(参数列表){

方法体；

返回值可有可无；

}

2）匿名函数

var add = function(参数列表){

方法体和返回值；

}

3）使用js里面的一个内置对象Function【动态函数】

var a = new Function(“参数列表”，”方法体和返回值”)；

····js的全局变量和局部变量

全局变量：在script标签中定义一个变量，这个变量在页面中js部分都可以用、

局部变量：方法内部定义一个变量，只能在方法内部使用。

ie自带调试工具：F12

····script标签所在位置

放到</body>的位置。

【2018-10-23】【web前端学习】【day2】

相关推荐