计算机基础知识
计算机介绍--电脑( PC ）
- 计算机可以完成数学和逻辑运算
- 计算机可以对数据进行记忆和存储
- 计算机可以在程序指令下自动高效的进行计算
计算机组成（硬件+软件）
-
硬件：5大部分（1.输入设备、2.输出设备、3.存储设备【内存+外存】、4.控制器5.计算器，其中控制器+计算器称为cpu）；
内存：影响程序运行速度，快、价格高、临时存储
外存：存储作用，慢、价格低，永久存储
1.内存:决定了能同时运行多少个程序；
2.外存:硬盘、移动硬盘，决定了能保存多少数据
3.内存运算速度比外存快
4.内存断电后数据丢失，外存不会
5.内存比外存价格高
6、进程：微信app是一个进程，其中微信app中同时运行多个线程，如文件相关线程、图片相关线程等等；
-
软件：2个部分（操作系统软件+应用软件）
-
操作系统软件类型：
- 图形化桌面操作系统软件:Windows、Mac0S、Linux
- 移动设备操作系统:Android(底层也是一款小型的Linux)、苹果
- 服务器操作系统:Linux(开源、稳定、免费)、windows server(微软，收费)
- 嵌入式操作系统:Linux--pda、各种盒子
作用：操作系统os是一切的基础，硬件需要他才能协调工作，其他应用软件没有他也无法使用；
编码
-
二进制： （binary二进制）二进制是一种数学进制，只有0和1二个数。
计算机底层用到的就是二进制高低电位、如高电位 1、低电位0；
逻辑真 true，逻辑假 false。---都是对应二进制0和1；
bin目录（binary的简称）-就是二进制可执行文件目录，是操作系统运行的基础命令程序； -
编码：utf-8国际编码，当出现中文的时候必须使用编码来翻译，它可以用来表示Unicode标准中的任何字符，使用1~4字节为每个字符编码；
-
计量单位：1B(节字:bytes)=8b(比特:bit位，人为规定的最小计量单位)
1KB=1024B
1MB(兆)=1024KB
1GB=1024MB
1TB =1024GB
1PB= 1024TB
软件知识
-
五大浏览器:微软、谷歌、火狐、欧朋、苹果；
-
域名服务器：dns（Domain Name Server，域名服务器）是进行域名(domain name)和与之相对应的IP地址 (IP address)转换的服务器；
-
IP地址：网络ID+主机ID：端口号，ABC类网络，A类网络占8位网络ID，24位主机ID，所以能够涵盖的主机特别多，是大型网络；
-
Hosts：电脑中的一个文件而己，这个文件中的内容是ip地址和域名之间的对应关系的表;
-
URL：统一资源定位符；
-
客户端（Client）--服务器端（Server）：Client是指与服务器相对应，为客户提供服务的程序。比如：电脑端的浏览器和桌面应用程序、手机端的APP等；（Server）是网络中能对其它机器提供某些服务的计算机系统。
-
cs架构（Client/Server）：客户端-服务器架构；BS架构（Browser/Server）：即浏览器-服务器架构，手机端一般都是cs，电脑端一般都是bs架构，但是电脑端也有桌面应用；
效率：c/s效率高，某些内容已经安装在系统中了，b/s每次都要加载最新的数据。
升级：b/s无缝升级，c/s删除老版本再安装新版本
安全：c/s更安全，需要安装、注册、登录；bs有浏览器即可使用，安全程度低
开发成本：bs成本低；cls需要不同的系统要不同的开发人员，成本高 -
http请求：客户端向服务器端发送基于HTTP协议的请求，包括get、post类型等，包括request数据、response，接口请求中可查看；
dos命令
打开dos命令的几种方式：
- window+R键，然后输入cmd；
- window键，然后输入cmd搜索，可搜索命令行窗口；
- 打开桌面，鼠标右键，选择命令行，打开dos命令；
- 我的电脑-我的文件夹，地址栏输入cmd后回车，进入命令行窗口，如图：
常用命令： - ping 网址：和目标电脑之间的网络连接情况(ms代表亳秒，1000ms=1s)；
- ipconfig -all 查看当前电脑的网卡信息，授权上网的物理地址给网管；
- 盘符命令-可忽略大小写：d: c: D:
- 返回上一级目录：cd...
- 返回当前目录所在根目录：cd /
- 切换目录：cd XXX
- 查看当前目录下的文件：dir
- 上下键，切换查看历史输入命令；
HTML
介绍
- html负责网页框架：中文定义-超文本标记(标签、元素)语言（Hyper Text Markup Language）；
- css负责网页样式；
- js负责网页行为；
- 写代码前，先准备一个文件夹存放代码；
- 下载写代码工具：HBuilder；
基础内容
-
html骨架标签：新建的时候默认生成的那些标签；如 html、head、body、meta 、title标签；
-
meta 标签可以设置网页的字符集(utf-8 国际编码)；
-
title 标签设置网页的标题；
-
body 标签设置网页的主体内容部分；
-
回车、空格标签：如
<br /> -
文章标题标签，如h1~h6；
-
p标签、文字标签：如i斜体，b加粗，del删除；
-
注释：快捷键：英文状态下 CTRL+/ 或者
-
图片img，超链接a，音频audio、视频video ；
-
有序列表 ol，无序列表 ul；
-
表单form； input的多种type,如text、password、radio、checkbox、submit、reset、button等
-
体验：表单form：placeholder autofocus两个属性
- 可以添加 placeholder属性，可以给文本框设置提示文字例:placeholder="请输入用户名
- 如果是专门写表单的页面，可以给第一个输入框设置一个默认获取鼠标焦点的属性autofocus
例如：姓名：
其他体验： - 表单中：input +tab 键来生成代码为type是"text"普通的输入框;
- 表单中：Tab键的功能：下一个，空格相当于鼠标左键
- 表单中：tab可以让光标前进，shift+tab可以光标后退
-
路径：写想要找到的资源位置，如：
相对路径：相对于当前html文件去找其它资源的方式
(1)同级查找: 当前html和目标在同一级目录中，语法：直接写资源的名字即可
(2)上级查找:当前html和目标在上级目录中，语法：../写资源的名字即可
(3)下级查找:当前htm1和目标在下级目录中，语法：文件夹名/写资源的名字
上级
上上级
上上级下面的test文件夹中的图片
下级
下下级中的图片
<img src="t1.png"/ height="200" width="200">同级
绝对路径：资源的具体的位置
----绝对路径
基础代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是网页标题</title>
</head>
<body>
<h1>我是文章标题</h1>
<div>
我是文章段落<i>斜体</i>空格 <b>加粗</b>
空格 <del>删除线</del>空格 换行<br />
</div>
<!--我是注释-->
<img src="../../test/333.png" alt="" height="20px" width="20px"/>
<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
<audio src="../code1206/q.mp4"></audio>
<ol> <!--有序列表-->
<li>第一个</li>
<li>第二个</li>
</ol>
<ul> <!--无序列表-->
<li>第一个</li>
<li>哈哈哈哈哈哈</li>
</ul>
</body>
</html>表单代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<!--用户填写的表单数据-用户form标签-->
<form action="xxx.py" method="post">
姓名：<input type="text" placeholder="请输入" autofocus="autofocus"/> <br /> <br />
密码：<input type="password" placeholder="请输入"/> <br /> <br />
<!--单选radio，选中状态，可点击文字和单选框-->
性别：
<input type="radio" name="xb" id="nan"/>
<label for="nan">男</label>
<input type="radio" name="xb" checked="checked" id="nv"/>
<label for="nv">女</label><br /><br />
<!--多选同单选一致，checkbox-->
爱好：
<input type="checkbox" id="xiaqi" checked="checked" />
<label for="xiaqi">下棋</label>
<input type="checkbox" id="kanship" />
<label for="kanship">看视频</label>
<input type="checkbox" id="kanshu" />
<label for="kanshu">看书</label><br /><br />
<!--下拉选项 select标签，默认规则，如北上广，就必须按照这个顺序来；
默认选中状态，select属性实现-->
来自：
<select name="" >
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="深圳" selected="selected">深圳</option>
</select><br /><br />
备注：
<textarea name="" id="" cols="50" rows="10" placeholder="请输入">
</textarea><br /><br />
<input type="submit" value="提交"/>
<input type="reset" value="重置" /><br />
</form>
</body>
</html>CSS
介绍
- (Cascading Style Sheets)指层叠样式表
基础语法
-
选择器：如id选择器、标签选择器、类选择器等其他选择器；
-
语法：
id选择器：#p2 {color: orange;}
标签选择器：div {color: red; font-size: 20px;}
类选择器：.bz {color: red;} -
Px：像素单位；
-
引入方式：行内式、嵌入式、外联式三种样式
1、内嵌式：css 写在 style 标签中，放在 title 标签的后面;
2、外链式：css 代码和 html代码，实现代码的分离效果，使用link 标签设置 href 属性，即可单独把 css 文件链入到当前的 html 文件中；
----内嵌式：使用场景，如电商网站首页，因为打开速度快；外联式除了首页其他都用；
3、行内式：不建议前端使用，直接使用在标签中；
内嵌式的代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Review</title>
<style type="text/css">
#div_01{ /*id选择器*/
color: red;
height: 20px;
width: 300px;
background: center;
border: dotted;
border-color: green;
}
.heng{ /*类选择器*/
display:flex;
}
div{ /*标签选择器*/
display:flex;
}
</style>外联式的代码
html中的形式：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>每日练习</title>
</style>
<link rel="stylesheet" type="text/css" href="test015.css"/>
</head>css文件样式
css
/*标签选择器*/
h1 {color: #0000FF;}
/*类选择器*/
.bz {color: red;}
/*id选择器*/
#p01 {color: #0000FF;}
/*后代选择器，使用空格*/
div span {color: blueviolet;}
/*鼠标移入显示的样式*/
p:hover{color: royalblue;}
/*共用一个样式，使用,隔开,标签选择器*/
p, div {color: goldenrod;}JS
介绍
- JavaScript是一种轻量级的编程语言，一种脚本语言，他可插入 HTML 页面的编程代码，也可以控制HTML页面的结构和样式；
基础语法
- 事件源.来件类型=function(){事件发生的时候要执行的命令}；
- 三种类型：行内式、嵌入式、外联式三种样式同css一样；具体不再说
代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的网页js学习</title>
</head>
<body>
<input type="button" value="点击" id="button01"/>
<input type="button" value="点击" class="xw"/>
<input type="button" value="移上" class="xw"/>
<input type="button" value="移出" class="xw"/>
<input type="button" value="移上" class="xw"/>
<input type="button" value="移上" class="xw"/>
</body>
</html>
<script type="text/javascript">
//事件源.事件类型=function(){
// 时间发生的时候需要执行的命令
//}
//document 查找范围是整个文档
//document.getElementById()是事件源
document.getElementById('button01').onclick=function(){
alert('点击我');
}
document.getElementsByClassName('xw')[0].onclick=function(){
alert('class click')
}
document.getElementsByClassName('xw')[1].onmouseover=function(){
alert('class click')
}
document.getElementsByClassName('xw')[2].onmouseout=function(){
alert('class click')
}
</script>