前端学习笔记
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索引号提取指定数目的字符