计算机基础知识计算机介绍–电脑( 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位人为规定的最小计量单位)1KB1024B 1MB(兆)1024KB 1GB1024MB 1TB 1024GB 1PB 1024TB软件知识五大浏览器:微软、谷歌、火狐、欧朋、苹果域名服务器dnsDomain Name Server域名服务器是进行域名(domain name)和与之相对应的IP地址 (IP address)转换的服务器IP地址网络ID主机ID端口号ABC类网络A类网络占8位网络ID24位主机ID所以能够涵盖的主机特别多是大型网络Hosts电脑中的一个文件而己这个文件中的内容是ip地址和域名之间的对应关系的表;URL统一资源定位符客户端Client–服务器端ServerClient是指与服务器相对应为客户提供服务的程序。比如电脑端的浏览器和桌面应用程序、手机端的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命令的几种方式windowR键然后输入cmdwindow键然后输入cmd搜索可搜索命令行窗口打开桌面鼠标右键选择命令行打开dos命令我的电脑-我的文件夹地址栏输入cmd后回车进入命令行窗口如图常用命令ping 网址和目标电脑之间的网络连接情况(ms代表亳秒1000ms1s)ipconfig -all 查看当前电脑的网卡信息授权上网的物理地址给网管盘符命令-可忽略大小写d: c: D:返回上一级目录cd…返回当前目录所在根目录cd /切换目录cd XXX查看当前目录下的文件dir上下键切换查看历史输入命令HTML介绍html负责网页框架中文定义-超文本标记(标签、元素)语言Hyper Text Markup Languagecss负责网页样式js负责网页行为写代码前先准备一个文件夹存放代码下载写代码工具HBuilder基础内容html骨架标签新建的时候默认生成的那些标签如 html、head、body、meta 、title标签meta 标签可以设置网页的字符集(utf-8 国际编码)title 标签设置网页的标题body 标签设置网页的主体内容部分回车、空格标签如br / nbsp;文章标题标签如h1~h6p标签、文字标签如i斜体b加粗del删除注释快捷键英文状态下 CTRL/ 或者图片img超链接a音频audio、视频video 有序列表 ol无序列表 ul表单form input的多种type,如text、password、radio、checkbox、submit、reset、button等体验表单formplaceholder autofocus两个属性1. 可以添加 placeholder属性可以给文本框设置提示文字例:placeholder请输入用户名 2. 如果是专门写表单的页面可以给第一个输入框设置一个默认获取鼠标焦点的属性autofocus 例如姓名input typetext placeholder请输入姓名 autofocusautofocus/ 其他体验 1. 表单中input tab 键来生成代码为type是text普通的输入框; 2. 表单中Tab键的功能下一个空格相当于鼠标左键 3. 表单中tab可以让光标前进shifttab可以光标后退路径写想要找到的资源位置如相对路径相对于当前html文件去找其它资源的方式 (1)同级查找: 当前html和目标在同一级目录中语法直接写资源的名字即可 (2)上级查找:当前html和目标在上级目录中语法../写资源的名字即可 (3)下级查找:当前htm1和目标在下级目录中语法文件夹名/写资源的名字 img src../cost.jpg上级 img src../../333.png/上上级 img src../../test/333.png/上上级下面的test文件夹中的图片 img srctestnext/redpen.jpg/下级 img srctestnext/test/redpen.jpg/下下级中的图片 img srct1.png/ height200 width200同级 绝对路径资源的具体的位置 img srcD:\test25\test\333.png/----绝对路径基础代码!DOCTYPEhtmlhtmlheadmetacharsetUTF-8title我是网页标题/title/headbodyh1我是文章标题/h1div我是文章段落i斜体/i空格nbsp;b加粗/b空格nbsp;del删除线/del空格nbsp;换行br//div!--我是注释--imgsrc../../test/333.pngaltheight20pxwidth20px/videowidth800heightsourcesrcmyvideo.mp4typevideo/mp4/sourcesourcesrcmyvideo.ogvtypevideo/ogg/sourcesourcesrcmyvideo.webmtypevideo/webm/sourceobjectwidthheighttypeapplication/x-shockwave-flashdatamyvideo.swfparamnamemovievaluemyvideo.swf/paramnameflashvarsvalueautostarttrueamp;filemyvideo.swf//object当前浏览器不支持 video直接播放点击这里下载视频ahrefmyvideo.webm下载视频/a/videoaudiosrc../code1206/q.mp4/audiool!--有序列表--li第一个/lili第二个/li/olul!--无序列表--li第一个/lili哈哈哈哈哈哈/li/ul/body/html表单代码!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titleform表单/title/headbody!--用户填写的表单数据-用户form标签--formactionxxx.pymethodpost姓名inputtypetextplaceholder请输入autofocusautofocus/br/br/密码inputtypepasswordplaceholder请输入/br/br/!--单选radio选中状态可点击文字和单选框--性别inputtyperadionamexbidnan/labelfornan男/labelinputtyperadionamexbcheckedcheckedidnv/labelfornv女/labelbr/br/!--多选同单选一致checkbox--爱好inputtypecheckboxidxiaqicheckedchecked/labelforxiaqi下棋/labelinputtypecheckboxidkanship/labelforkanship看视频/labelinputtypecheckboxidkanshu/labelforkanshu看书/labelbr/br/!--下拉选项 select标签默认规则如北上广就必须按照这个顺序来 默认选中状态select属性实现--来自selectnameoptionvaluebeijing北京/optionoptionvalueshanghai上海/optionoptionvalueguangzhou广州/optionoptionvalue深圳selectedselected深圳/option/selectbr/br/备注textareanameidcols50rows10placeholder请输入/textareabr/br/inputtypesubmitvalue提交/nbsp;nbsp;inputtyperesetvalue重置/br//form/body/htmlCSS介绍(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、行内式不建议前端使用直接使用在标签中内嵌式的代码!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titleReview/titlestyletypetext/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中的形式!DOCTYPEhtmlhtmlheadmetacharsetUTF-8title每日练习/title/stylelinkrelstylesheettypetext/csshreftest015.css//headcss文件样式/*标签选择器*/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一样具体不再说代码!DOCTYPEhtmlhtmlheadmetacharsetUTF-8title我的网页js学习/title/headbodyinputtypebuttonvalue点击idbutton01/nbsp;inputtypebuttonvalue点击classxw/nbsp;inputtypebuttonvalue移上classxw/nbsp;inputtypebuttonvalue移出classxw/nbsp;inputtypebuttonvalue移上classxw/nbsp;inputtypebuttonvalue移上classxw/nbsp;/body/htmlscripttypetext/javascript//事件源.事件类型function(){// 时间发生的时候需要执行的命令//}//document 查找范围是整个文档//document.getElementById()是事件源document.getElementById(button01).onclickfunction(){alert(点击我);}document.getElementsByClassName(xw)[0].onclickfunction(){alert(class click)}document.getElementsByClassName(xw)[1].onmouseoverfunction(){alert(class click)}document.getElementsByClassName(xw)[2].onmouseoutfunction(){alert(class click)}/script