HTML+CSS+JavaScript 基本使用

Html的基本使用

Html即超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。

HTML 运行在浏览器上，由浏览器来解析。

具体参照->手册

常用代码

<!DOCTYPE html>
<!--ctrl+/    Ctrl+shift+/注释-->
<html >
<!--<html lang="en">以HTML开始，，默认语言为英语，“zh“中文-->
<head><!--head提供有关文档内容和帮助信息-->
    <meta charset="UTF-8"><!--编码-->
    <title>标题</title><!--标题-->
</head>
<body>
<!--显示内容-->


<!--herf超链接-->
<a href="https://www.baidu.com" target="_self"> 大家好</a><!--target="_blank"重开一页显示 target="_self"当页显示-->
<b>粗体</b>
<em>斜体</em>
<u>下划线</u>
<s>中划线</s>
<br/>br回车<br/>
1*****************************************************************************
    <table border="1px"><!--表格-->
        <thead><!--thead 表头-->
        <tr>
            <th>标题</th><!--th，标题栏，加粗，-->
            <th>标题</th>
            <th>标题</th>
        </tr>
        </thead>
        <tbody></tbody><!--表体-->
        <tr>
            <td rowspan="2">列合并</td>
            <td>第二列</td>
            <td>第三列</td>
        </tr>
        <tr>
            <td colspan="2">行合并</td>
        </tr>
        <tfoot></tfoot><!--表尾-->
    </table>
2**********************************************************************************************
    <!--有序标签-->
    <ol type="1" ><!--type序列表体排列类型，数字，字母，罗马……-->
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
    <ol reversed><!--reversed降序，默认升序-->
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
    <!--无序标签-->
    <ul>
        <li>a</li>
        <li>b</li>
    </ul>

3***************************************************************************************

<form>
    <input type="text" value="自填充内容" >
    <input placeholder="提示内容，占位符">
    <input maxlength="5" placeholder="只能输入5个"><!--最大限制输入位数-->
    <input size="50" placeholder="长度为50行"><!--输入框长度-->
    <br/>
    <input value="只读不允许修改内容"  readonly><!--只读 不允许写入-->
    <input type="password" placeholder="密码">
    <input type="number" placeholder="随意数字" >
    <input type="number" min="0" max="100" step="10" value="50"><!--0-100数字-->
    <br/>
    <input type="range" min="-100" max="100">
    <input type="range" min="-100" max="100" step="20">
    <input type="range" min="-100" max="100" step="20" value="50">
    <br/>
    <textarea >多行文本框</textarea>
    <textarea rows="20" cols="30">最小20行30列的多行文本框</textarea>
    <br/>
    <BUTTON onclick="" n> 与JS按钮绑定事件的按钮</BUTTON>
    <input type="button" value="普通按钮">
    <input type="submit" value="提交form表单">
    <input type="checkbox">单选择框
    <br/>
    <input type="radio"  name="a" checked>多选一默认选择
    <input type="radio"  name="a">多选一
    <input type="radio"  name="a">多选一
    <br/>
    强制选项：
    <select>
        <option>选择1</option>
        <option>选择2</option>
    </select>
    可输入选项：
    <input type="text" list="datalist">
    <datalist  id="datalist">
        <option>选择a</option>
        <option>选择b</option>
    </datalist>

</form>
4**************************************************************************************
<form enctype="multipart/form-data"><!--上传文件form必须加这个属性-->
    <!--无效果<input type="email">邮箱<input type="tel" >电话<input  type="url">地址<input  type="search">搜索-->
    <input  type="color">颜色

    <input  type="file" >选择一个文件
    <input  type="file" multiple>选择多个文件
    <input  type="file" REQUIRED>必须选择文件

    <input  type="image" src="1.jpg" width="40px">图片按钮
    <input  type="date">日期
    <input  type="time">时间
    <input  type="hidden" value="内容">隐藏
</form>
5********************************************************************************************
<br/>图片超链接
<br/>
<a href="html1.html">
    <img  src="1.jpg" width="300px"  alt="无图时显示">
</a>
<br/>
<br/>
利用form点击图片可在地址栏获取其位置
<br/>
<form>
<input type="image" width="300px" src="1.jpg" >
</form>
<br/>
分区响应图
<br/>
<img  src="1.jpg" width="300px"  alt="无图时显示" usemap="#map1">
<map name="map1">
    <area href="html1.html" shape="rect" coords="138,40,203,124" target="_blank" >
    <!--shape形状，coords位置（左上右下），target是否再新窗口 -->
    <area href="html1.html" shape="rect" coords="10,20,30,60" target="_blank">
</map>

<br/>
6***********************************************************************************************
<br/>
音频播放
<br/>
<!--autoplay自动播放 loop循环播放 controls控制进度条 preload="" 预加载 poster="图片地址"默认显示图片 -->
<audio src="音频地址"></audio>
<!--支持各种浏览器播放-->
<audio src="音频地址" height="128px"  >
    <source src="音频地址mp3" type="audio/mpeg">
    <source src="音频地址ogg" type="audio/ogg">
</audio>
<br/>
7************************************************************************************************
<br/>
视频播放
<br/>
<!--autoplay自动播放 controls控制进度条 preload="" 预加载 poster="图片地址"默认显示图片 -->
<video src="视频地址"></video>
<!--支持各种浏览器播放-->
<video src="视频地址" height="128px"  >
    <source src="MP4视频地址" type="video/mp4">
    <source src="ogv视频地址" type="video/ogg">
</video>
<br/>
8************************************************************************************************
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</body>
</html>

CSS的基本使用

CSS即层叠样式表（Cascading Style Sheets），是一种用来表现HTML或XML等文件样式的计算机语言。

但只是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；

这就导致了我们在工作中无端增加了许多工作量。

为解决这个问题，前端开发人员会使用一种称之为 CSS 预处理器 的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高前端在样式上的开发效率。

具体会在以后再讲，原理大体来讲就是：用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。常用CSS预处理器：

SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。
LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用 LESS。

属性和选择器

照搬属性大全和选择器大全

常用代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式表</title>
  <!--JS样式-->
    <script src="script1.js"></script>
    <!--<script >
        alert("内部使用JS")
    </script>-->

    <!--<外部样式表>-->
    <!--<link rel="stylesheet" type="" href="a.css">-->
    <!--文档样式表-->
    <style type="text/css">


    /*动画*/
p{
     100px;
    height: 100px;
    background-color: antiquewhite;
}
p:hover{
     200px;
    height: 200px;
    background-color: burlywood;
    transition-delay: 150ms;/*延迟*/
    transition-duration: 500ms;/*动画时间*/
    transition-timing-function: ease-in-out;/*有很多参数 ，此参数表示开始慢中间快结尾慢*/

}
    .class1{
        border: 1px solid black;
        background: aquamarine;
        padding: 100px 50px 100px  200px;/*内边距*/
        margin: 100px 50px 100px  200px;/*外边距*/
    }


        *{/*所有元素 all*/}
        a{/*根据类型选择元素，此仅对a标签影响 <a>*/  }
        .class{/*对类元素影响，类名可自定义，在下面要<a class="class1">*/}
        #id1{/*对ID影响，<a id="id1">*/}
        [herf]{/*对使用此属性的控件影响，<a herf="地址">*/}
        a:hover{/*对该控件的某一动作影响，<a>*/}
    </style>
</head>
<body>

<!--元素内嵌样式表
<a style="font-size: 20px ">字体变大</a>
<a style="font-size: 20px ;color: #ff4130">字体变大，颜色变红</a>

&lt;!&ndash;文档样式表，样式于title下的style里   【需注释外部样式表】&ndash;&gt;
<a>字体变大，颜色变蓝</a>

&lt;!&ndash;外部样式表，样式于title下的link到目录下CSS文件里   【需注释样式表】&ndash;&gt;
<a>字体变大，颜色变绿</a>-->
<div class="class1">盒子</div>
<p>P标签动画</p>
</body>
</html>

关于选择器的优先级别：

ID选择器 > 类选择器 > 标签选择器 > 通配符选择器

JavaScript的基本使用

JavaScript是一门基于原型、函数先行的弱类型脚本语言，是一门多范式的语言，
它支持面向对象编程，命令式编程，以及函数式编程

源代码在发往客户端运行之前不需经过编译，
而是将文本格式的字符代码发送给浏览器由浏览器解释运行

常用代码

输出语句

<!--网页输出-->
document.write()

<!--控制台输出-->
console.log()

<!--[]里面可写可不写-->
<!--窗口弹出-->
[window.]alert()

<!--弹出确认框-->
[window.]confirm()

<!--弹出输入提示框-->
[window.]prompt()

<!--写入到某个HTML元素中-->
xx.innerHTML()

基本数据类型

数据类型	描述
number	任意数字，但不能超1e308,否则会变成 Infinity(无穷大)
string	任意文本单引号和双引号可以互相包含
boolean	true（非0数字、非空字符）
array	超过数组长度则变成添加如果跳序赋值，则中间元素为undefined
null	空变量，也可以用于清空变量
undefined	表示变量不含有值
object	对象有花括号，括号内部的对象属性以键值对形式来定义
function	函数赋值给变量，变量名即函数名

函数

函数	描述
charAt()	返回指定索引位置处的字符
eval()	将js字符串变成代码执行
indexOf()	返回字符串第一次出现的位置
lastIndexOf()	返回字符串最后出现的位置
isNaN()	判断是否为NaN
isFinite()	判断数字是否有限NaN, Infinity, undefined 返回false
parseInt( var )	转换为int类型
parseInt( var , 进制 )	将值按照进制转换为十进制
random()	返回介于 0 和 1 之间的伪随机数
reverse( arr )	返回一个顺序反转的数组对象
sort( arr )	返回一个顺序排序的数组对象
split()	判断数字是否有限NaN, Infinity, undefined 返回false
toArray()	转换成数组
toString()	返回对象的字符串
valueOf()	返回对象的原始值
setAttribute( 属性 )	获得属性值
setAttribute( 属性，值 )	根据属性改变属性值

注意：函数没有java的重载，只能覆盖

使用可变参数函数时：

函数不能有参数
函数里关键字arguments是个数组，存储的是传递进的所有参数

事件

事件	描述
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

节点

创建节点：

// 创建标签
var para = document.createElement("p");
// 添加文本
var node = document.createTextNode("这是新段落。");
// 添加节点
para.appendChild(node);

// 至此节点创建完毕，需要添加进某个元素里
// 找到一个已有元素
var element = document.getElementById("div1");
// 向已有元素追加元素
element.appendChild(para);

复制节点：

//获得被复制节点
var ul = document.getElementById("copy");
//复制节点 (cloneNode方法里是有参数，默认false代表不克隆子标签，true克隆)
var newUl = ul.cloneNode();

//至此节点复制完毕，需要添加进某个元素里
//找到一个已有元素
var element = document.getElementById("div1");
//向已有元素追加元素
element.appendChild(newUl);

删除节点：

//找到要删除的父标签
var parent=document.getElementById("div1");
//找到要删除的标签
var child=document.getElementById("p1");
//从父标签删除子标签
parent.removeChild(child);

对象

在js中，对象只是一种特殊的数据，对象拥有属性和方法，任何东西包括基本类型都是对象

创建对象:

方法一：
//创建对象
var stu = new Object();
//给对象赋属性
stu.name = 'zs';
stu.age = '10';
console.log(stu.name+":"+stu.age);
//给对象添加方法
stu.test = function(){
  console.log("test方法");
}

方法二：
//类似java中的构造方法
function Student(name,age){
  his.name = name;
  this.age = age;
  this.test = function(){
    console.log("第二种创建对象的方法")；
  }
}
//使用
var stu = new Student('zs','11');
console.log(stu.name+":"+stu.age);
stu.test();
在方法二的构造方法中，可以如下新增方法在构造方法里
Student.prototype.test2 = function(){
  console.log("陈独秀你坐下");
}

方法三：
//以json格式来创建对象{name:'zs',age:11};
var stu = {
  name:'zs',
  age:13,
  test:function(){
    console.log("明天不放假");
  }
};

遍历对象:

for(var i in stu){
  console.log(i+":"+stu[i])
}

for…in语句能用于遍历数组或对象

对于对象，i为属性名或方法名，内容就通过名获得

对于数组，i基本为数组下标，但因为数组也是对象，所以i不止有下标，需要注意