计算机基础知识
计算机介绍–电脑( 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是一切的基础，硬件需要他才能协调工作，其他应用软件没有他也无法使用；
编码
计算机底层用到的就是二进制高低电位、如高电位 1、低电位0；
逻辑真 true，逻辑假 false。—都是对应二进制0和1；
bin目录（binary的简称）-就是二进制可执行文件目录，是操作系统运行的基础命令程序；
1KB=1024B
1MB(兆)=1024KB
1GB=1024MB
1TB =1024GB
1PB= 1024TB
软件知识
效率：c/s效率高，某些内容已经安装在系统中了，b/s每次都要加载最新的数据。
升级：b/s无缝升级，c/s删除老版本再安装新版本
安全：c/s更安全，需要安装、注册、登录；bs有浏览器即可使用，安全程度低
开发成本：bs成本低；cls需要不同的系统要不同的开发人员，成本高
dos命令
打开dos命令的几种方式：
常用命令：HTML
介绍
基础内容
1. 可以添加 placeholder属性，可以给文本框设置提示文字例:placeholder="请输入用户名
2. 如果是专门写表单的页面，可以给第一个输入框设置一个默认获取鼠标焦点的属性autofocus
例如：姓名：<input type="text" placeholder="请输入姓名" autofocus="autofocus"/>
其他体验：
1. 表单中：input +tab 键来生成代码为type是"text"普通的输入框;
2. 表单中：Tab键的功能：下一个，空格相当于鼠标左键
3. 表单中：tab可以让光标前进，shift+tab可以光标后退
相对路径：相对于当前html文件去找其它资源的方式
(1)同级查找: 当前html和目标在同一级目录中，语法：直接写资源的名字即可
(2)上级查找:当前html和目标在上级目录中，语法：../写资源的名字即可
(3)下级查找:当前htm1和目标在下级目录中，语法：文件夹名/写资源的名字
<img src="../cost.jpg">上级
<img src="../../333.png"/>上上级
<img src="../../test/333.png"/>上上级下面的test文件夹中的图片
<img src="testnext/redpen.jpg"/>下级
<img src="testnext/test/redpen.jpg"/>下下级中的图片
<img src="t1.png"/ height="200" width="200">同级
绝对路径：资源的具体的位置
<img src="D:\\test25\\test\\333.png"/>—-绝对路径
基础代码
<!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>
表单代码
<!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
介绍
基础语法
id选择器：#p2 {color: orange;}
标签选择器：div {color: red; font-size: 20px;}
类选择器：.bz {color: red;}
1、内嵌式：css 写在 style 标签中，放在 title 标签的后面;
2、外链式：css 代码和 html代码，实现代码的分离效果，使用link 标签设置 href 属性，即可单独把 css 文件链入到当前的 html 文件中；
—-内嵌式：使用场景，如电商网站首页，因为打开速度快；外联式除了首页其他都用；
3、行内式：不建议前端使用，直接使用在标签中；
内嵌式的代码
<!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中的形式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>每日练习</title>
</style>
<link rel="stylesheet" type="text/css" href="test015.css"/>
</head>
css文件样式
/*标签选择器*/
h1 {color: #0000FF;}
/*类选择器*/
.bz {color: red;}
/*id选择器*/
#p01 {color: #0000FF;}
/*后代选择器，使用空格*/
div span {color: blueviolet;}
/*鼠标移入显示的样式*/
p:hover{color: royalblue;}
/*共用一个样式，使用,隔开,标签选择器*/
p, div {color: goldenrod;}
JS
介绍
基础语法
代码
<!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>
