js、html、css

JS

介绍
JS是一种直译式（解释型）基于对象的脚本语言，动态类型，弱类型，基于对象的脚本语言，内置支持类型
JS语言和java语言对比：

对比	java	JS
运行环境	JVM虚拟机	JS引擎，是浏览器的一部分
是否跨平台	跨平台	跨平台
语言类型	强类型语言	弱类型语言
是否需要编译	需要编译，是编译型语言	不需要编译，是解释型语言
是否区分大小写	区分大小写	区分大小写

JS的作用
具体来说有两部分作用：
JS代码可以操作浏览器：进行网页跳转、历史记录切换、浏览器弹窗等等
JS代码可以操作网页：操作HTML的标签、标签的属性、样式、文本等等
注意：JS的是在浏览器内存中运行时操作，并不会修改网页源码，所以刷新页面后网页会还原
JS的组成
ECMAScript(核心):是JS的基本语法规范
BOM：Browser Object Model，浏览器对象模型，提供了与浏览器进行交互的方法
DOM：Document Object Model，文档对象模型，提供了操作网页的方法
JS的引入
1、内部JS（内嵌式）

2、外部JS（外联式）

3、注意事项，script标签不能同时用外部和内部JS例：

JS小功能
alert():弹出警示框
console.log():向控制台打印日志
console.warn():控制台警示框
console.error():控制台错误提示

document.write():文档打印，向页面输出内容
JS基本语法
变量：用var来定义，类型由它本身决定
注意：
1、var可以省略不写，建议保留
2、最后一个分号可以省略，建议保留
3、同时定义多个变量可以用“，”隔开，公用一个‘var’关键字，var c=1,d=2;
typeof操作符：
用来判断变量是什么类型
typeof(变量名) 或typeof 变量名
null与undefined的区别：
null:对象类型，已经知道的数据类型，但对象为空
undefined:未定义的类型，并不知道是什么数据类型

转换函数	作用
parseInt()	将一个字符串转换成整数，如果包含非数字字符，就会转换失败，返回NaN=Not a Number,不是一个数
parseFloat()	将一个字符串转换成小数
isNaN()	转换前判断被转换的字符串是否是一个数字。非数字返回true isNaN=is not a number

函数
普通函数：

function 函数名(形参列表){
函数体
[return 返回值;]
}

调用普通函数：

var result = 函数名(实参列表);

匿名函数，也叫回调函数，类似于java里的函数式接口里的方法

function(形参列表){
函数体
[return 返回值;]
}

特点：

• 参数列表里面直接写参数的变量名，不写var
• 函数没有重载的，后面的直接把前面的覆盖了

JS事件

属性	此事件发生在何时
onclick	当用户点击某个对象时调用的事件句柄
ondbclick	当用户双击某个对象时调用的事件句柄。
onchange	域的内容被改变。
onblur	元素失去焦点。
onfocus	元素获得焦点。
onload	一张页面或一幅图像完成加载
onsubmit	确认按钮被点击；表单被提交。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按住
onkeyup	某个键盘按键被松开。
onmousedown	鼠标按钮被按下。
onmouseup	鼠标按键被松开
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上
onmousemove	鼠标被移动

事件使用
方式一: 设置标签的 属性

方式二: 派发事件 匿名函数; 标签对象.事件属性 = function(){}

 document.getElementById("inputId").onclick = function () {
        alert("你好...");
    }

正则表达式
就是用来校验字符串的规则
test()方法

var reg4  =/^1[3456789]\d{9}$/; 
    var str4 = "188245899";
    alert(reg4.test(str4));

Array数组
var arr=new Array(size)
var arr=new Array(element1,element2,element3,…)
var arr=[element1,element2,element3,…]
数组常用方法介绍

方法	描述
concat(array)	连接两个或更多的数组，并返回结果
join(string)	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分割
reverse()	颠倒数组中元素的顺序

join(";")就是按分号进行分隔
Date日期
创建当前日期：var date=new Date()
创建指定日期：var date=new Date(年，月，日)
注意：从0开始，0表示1月
创建指定日期：var date=new Date(年，月，日，时，分，秒)
注意：月从0开始，0表示一月
日期常用方法：通过get获取
toLocaleString():根据本地时间，把date对象转换为字符串
JS的BOM
浏览器对象模型
BOM里面的五个对象
window：窗体对象

方法	作用
alert()	显示带有一段消息和一个确认按钮
confirm	显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval(‘函数名()’,time)	按照指定的周期（以毫秒计算表达式）
setTimeout(‘函数名()’,time)	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由setInterval(0设置的Interval()
clearTimeout()	取消由setTimeout()方法设置的timeout

//1.弹出警告框 window.alert(“不能删除!!!”);widow可以省略
//alert(“不能删除!!!”);
//2.弹出确认框
//var flag = confirm(“您确认删除吗?”);
//console.log(“flag=”+flag);
//if(flag){
//请求服务器 删除
//}
//3.周期执行 setInterval(‘函数名()’,time) eg: setInterval(“sayHello()”,1000);
//setInterval(“sayHello()”,10000);
//4.延迟执行 5s之后调用sayHello()
//setTimeout(“sayHello()”,5000);
var intervalFlag;
function startSayHello() {
//每隔1s开始打印hello…
intervalFlag = setInterval(“sayHello()”,100);
}
function stopSayHello() {
//停止打印sayHello()
clearInterval(intervalFlag);
}
function sayHello() {
console.log(“hello…”);
}

navigator:浏览器导航对象【了解】
属性
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息

screen:屏幕对象【了解】
方法
width
返回显示器屏幕的分辨率宽度
height
返回显示屏幕的分辨率高度

history:历史对象【了解】
方法
back()
加载 history 列表中的前一个 URL
forword()
加载 history 列表中的下一个 URL
go()
加载 history 列表中的某个具体页面

location:当前路径信息
属性
host
设置或返回主机名和当前 URL 的端口号
href
设置或返回完整的 URL
port
设置或返回当前 URL 的端口号

• location.href; 获得路径
• location.href=""; 设置路径

JS的DOM（最重要）
当网页被加载时，浏览器会创建页面的DOM对象。DOM对象模型是一棵树形结构：网页里所有的标签、属性、文本都会转换成节点对象，按照层级结构组织成一棵树形结构。

• 整个网页封装成的对象叫document
• 标签封装成的对象叫Element
• 属性封装成的对象叫Attribute
• 文本封装成的对象叫Text
  操作标签
  document.getElementById(id)
  根据id获取标签
  Element对象

document.getElementsByName(name)
根据标签name获取一批标
Element类数组

document.getElementsByTagName(tagName)
根据标签名称获取一批标签
Element类数组

document.getElementsByClassName(className)
根据类名获取一批标签
Element类数组

操作标签

• document.createElement(tagName) 创建标签 Element对象
• document.createTextNode(“文本”) 创建文本节点
• parentElement.appendChild(sonElement) 插入标签
• element.remove() 删除标签

操作标签体

1. 获得标签的内容 (一并获得标签)
   标签对象.innerHTML;
2. 设置标签的内容(①会把前面的内容覆盖 ②支持标签的)
   标签对象,innerHTML = “html字符串”;

操作属性

1. getAttribute(attrName) 获取属性值
2. setAttribute(attrName, attrValue) 设置属性值
3. removeAttribute(attrName) 删除属性

HTML

hyper text marku[ language:超文本标记语言
font标签：face：字体类型，size取1-7......
段落标签:
段落
   注意：段落之间自动换行
粗体标签:内容 
斜体标签:内容
下划线标签:

换行标签:

图片标签:
路径问题:绝对路径（以http开始的，以盘符开始的）
相对路径:    ./当前目录     ../上级目录
列表标签：
无序列表：
type属性：列表的类型；circle:空心圆;square:实心的正方形
注意：ul和li标签是一个整体，一般情况下ul标签和li标签都是一起出现，不会单个出现
有序列表：
start属性: 起始的索引(默认是第1个)       type属性: 列表类型;  1: 阿拉伯数字; a: 小写的英文字母; A:大写的英文字母; i: 小写的罗马数字; I:大写的罗马数字


超链接标签（重要）：用于控制页面和页面（服务器资源）之间的跳转的
格式：需要展现给用户看的内容
target属性取值：_blank:新起页面 _self:当前页面（默认）
假链接：点击不会跳转的链接这是一个假链接

table标签
表单标签（最重要）
用于收集不同类型的用户的输入.
它有一个标签定义，里边有不同的表单控件
常用属性：
action:提交路径，默认是当前页面
method:提交方式，常用的是get和post，默认就是get
get和post的区别：
1、get方式提交的数据在地址栏可见，post方式不可见
2、get方式相对不安全，post安全一些
3、get方式对提交的数据的大小有限制，post方式没有限制的
form的常见子标签

• input:输入域，通过type属性来指定类型
• select:选择列表
• textarea:文本域

type属性：

• text文本输入框
• password密码域
• submit提交按钮
• reset重置按钮
• button空白按钮
• radio单选框
• checkbox复选框
• file文件
• hidden隐藏字段

选择菜单：select

• name在select里面指定
• value在option里面指定
• option定义在select里面

文本域：textarea

属性：
cols列
rows行

通用属性
1.name

• 作为单选和多选框的分组
• 作为key上传到后台程序，后台程序通过key得到相对应的value。如果要想把数据提交到后台程序，一定要指定name属性
  2.value
• 给按钮起名字
• 设置提交到服务器的值 name=value

设置默认值

- text,password:通过value属性
 用户名: 
- radio checkbox:通过checked属性
性别: 男
          女
select :在option上通过selected属性
籍贯: 
            深圳
            北京
            上海
        

 textarea:直接在标签体中写	
自我介绍: 哈哈哈

媒体标签：
音频标签audio

属性名	取值	默认值	描述
src	url	音频资源的路径
autoplay	autoplay	autoplay	音频准备就绪后自动播放
controls	controls	controls	显示控件，比如播放按钮
loop	loop	loop	表示循环播放
preload	preload	preload	音频在页面加载时进行预加载，如果使用“autoplay”，则忽略该属性

视频标签：video

属性名	取值	默认值	描述
src	url		描述
width			设置视频播放器的宽度
height			设置视频播放器的宽度
autoplay	autoplay	autoplay	视频在就绪后自动播放
controls	controls	controls	显示控件，比如播放按钮
loop	loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放
preload	preload	preload	视频在页面加载时进行加载，如果使用autoplay则忽略该属性
muted	muted	muted	规定视频的音频输出应该被静音
poster	url		视频下载时显示的图像，或者视频播放前显示的图像

回到顶部

 
回到顶部

图片链接

    

    百度

详情和概要标签

    
概要信息
    详情信息

HTML5中新增的type类型

<input type="xxx"/>

注：不同的浏览器支持上有差异，有些浏览器依然不支持

CSS

• 内联样式：把CSS代码内嵌到HTML代码里,通过标签的style属性来结合
• 内部样式：把CSS代码写在HTML文档内部,通过style标签来结合
• 外部样式：把CSS代码写在独立的CSS文件里,通过link标签结合
  基本选择器语法
  

1. 标签选择器 只要是当前这个标签的 都会修饰到
   标签名{}
2. id选择器 适合找1个
   #id{}
3. class选择器 适合找多个(>=1)
   .class{}
   组合选择器
   
   伪类选择器【了解】
   了解几个超链接相关的伪类选择器
   
   背景属性
   

  /*设置整个页面的背景样式*/
        body{
            /*背景图片*/
            background-image: url("img/little_mm.jpg");
            /*平铺方式*/
            background-repeat: repeat;
        }

文本样式

p{
            /*首行缩进：2个字符*/
            text-indent: 2em;
            /*文字颜色：绿色*/
            color: green;
        }
        a{
            /*超链接 不显示下划线*/
            text-decoration: none;
        }

字体属性

 span{
            /*字体：幼圆*/
            font-family: 幼圆;
            /*大小：40px*/
            font-size: 40px;
            /*字体：斜体*/
            font-style: italic;
            /*加粗显示*/
            font-weight: bolder;
        }