一.计算机基本介绍1.定义:计算机是可以进行高效计算的电子设备1. 特点(作用):a. 数学逻辑运算b. 数据记忆存储c. 指令操作计算2.计算机由硬件系统和软件系统两部分组成1. 硬件系统(看得见摸得着的物理设备)2. 软件系统(操控硬件设备的软件集合)3.硬件系统(根据冯诺依曼理论分为了五个部分1. 输入设备2. 输出设备3. 计算器4. 控制器5. 存储器(内存储器,外存储器)4.软件系统(一般按照软件功能分为两类)1. 操作系统--硬件上的第一层软件--支持应用软件a. 图形化--Windows--Mac--Linuxb. 移动设备--Android--iOSc. 服务器--Linux--Windows Server2. 应用软件--运行在操作系统上的软件--用户使用功二.常见进制,编码,计量单位1.进制--计数规则1. 二进制--两个基数(0,1)--逢二进一2. 计算机识别二进制原理:高低电位3. 常见进制a. 二进制--binb. 十进制--decc. 八进制--octd. 十六进制--hex2.编码--自然语言翻译成机器语言1. 常见字符集(编码后的对应表格):a. ASCII--英文--一共256个b. UTF-8--中文--一个汉字占3个字节3.计量单位--计算机领域中表示数据量1. 基础单位a. 比特(bit位)--人为规定的最小的计量单位b. 字节(byte字节)--1个字节等于8个比特(12. 常用单位a. 1KB = 1024Bb. 1MB = 1024KBc. 1GB = 1024MBd. 1TB = 1024GB三.DOS命令1.打开DOS命令的操作窗口1. 打开运行界面(win R)2. 输入cmd3. 确定--打开命令输入 命令作用 注释time 显示当前时间 需要手动命令ctrl c 退出当前正在执行的命令shutdown /s /t 秒数 设置当前计算机定时关机 /s /t 左右shutdown /a 取消自动关机命令 /a 左侧有ping 网址 检查当前网址网络是否连通可以返回网络状态ipcon?g -all 显示当前计算机所有网卡信息包含 本机地址↑ ↓键 可以翻看最近使用过的命令帮助我们过的命令盘符名称:cd 目录名切换到某个盘符切换到当前某个子目录下盘符即c当前目录cd .. 返回上一级目录 .. 与cd 之cd / 返回当前盘符根目录 / 与cd 之dir 将某个目录的内容以列表形式列出显示当前件md 路径/目录 可以新建目录echo "内容" > 文件名称可以间接新建一个带有内容的文件DOS中间rd 路径/目录 删除目录 默认只能del 文件 删除文件 只能用来rd /s 强制删除非空目录del 目录 询问是否删除目录里的所有文件只删除当子目录copy 文件原路径 文件新路径将文件复制到其它地方 在复制的称move 文件原路径 文件新路径将文件剪切到其它地方 必须进入录执行2.语法规则:1. 命令 参数1 参数2 ...3.命令表格四.HTML基础1.HTML介绍1. 前端三大组成部分--HTML(结构)--CSS(样式)--JS(2. HTML--超文本标记语言:负责的是页面结构2.HTML骨架1.2. <!DOCTYPE HTML> -- 文档类型是html3. <html> </html> -- 页面中最外层标签--根标签4. <head> </head> -- 网页头部标签-里面内容主要是5. <meta charset="UTF-8"> -- 页面编码标准6. <title> </title> -- 网页标题标签-里面内容会显示上7. <body> </body> -- 网页主体标签-里面内容显示在3.HTML语法规则1. HTML页面由正确嵌套的标签(标记)构成2. 标签分为单标签和双标签a. 单标签 -- <单标签名称 />b. 双标签 -- <双标签名称> </双标签名称>3. 属性的语法a. 键值对b. 属性名="属性值"c. <标签名称 属性名1="属性值" 属性名2="4. 空格和换行的实现方法a. 空格实体 -- b. 换行标签 -- <br />标签 含义 <h1>一级标题</h1> 标题标签 h1-h6 <p>文章段落</p> 段落标签 <b>加粗效果</b> 文字标签-加粗 <s>删除线效果</s> 文字标签-删除线 <i>倾斜效果</i> 文字标签-倾斜 <strong>加粗效果</strong> 文字标签-加粗 <del>删除线效果</del> 文字标签-删除线 <em>倾斜效果</em> 文字标签-倾斜 <div>大盒子</div> 布局(结构)标签-大盒子 <span>小盒子</span> 布局(结构)标签-小盒子 <!-- 注释内容 -- > 注释--快捷键ctrl / <img src="图片路径"/>属性名="属性值"--键值对语法图片标签title-图片标题alt-图片描述4.基础HTML标签标签语义化的好处--搜索引擎中排名更靠前5.路径1. 路径的书写方式分为了绝对路径和相对路径两种绝对路径1. 从盘符(根目录)为起点,找目标文件,经过的目录都用2. 资源的路径不能保证不会变化,所以不用这种方式相对路径1. 从当前目录为起点,找目标文件,经过的目录都用" / 2. 开发人员常用的书写资源路径的方式--我们关注的是否正确就可以了3. 相对路径的三个方向:a. 同级路径--目标文件在同级目录-- 直接写b. 下级路径--目标文件在下级目录-- 下级c. 上级路径--目标文件在上级目录-- ../目录元素类型 元素含义 注意<input type="text" /> 普通文本框文字内容能提示内容<input type="password" /> 密码框 输入内容被<input type="radio" name="xb" /><input type="radio" name="xb" />单选按钮 每个单选按属性值默认选中checked=6.超链接1. 超链接标签使用<a></a>标签可以实现a. 超链接的作用一般是点着一个文字,跳转个超链接最基本的内容包含两个部分b. 点击的内容-- <a>点击的内容</a>c. 跳转的连接-- <a href="http://完整的线容</a>i. <a href="本地资源路径">点击2. 新窗口打开链接地址a. <a href="本地资源路径" target="_blan</a>3. 空链接a. 点击后不会发生跳转的链接b. <a href="#">点击的内容_点击后不跳转<i. 一个#号点击后会瞬移到页面ii. <a href="###">点击的内容_点c. <a href="javascript:;">点击的内容_点击d. <a href="javascript:void(0);">点击的内容</a>7.表单1. 表单的作用--web网页上用来收集用户数据，并且2. 表单标签:3. action--数据提交给哪个后台程序4. method--通过什么方法传递a. get--明文传递--直接写纸上b. post--加密传输--信封装起来5. 常见表单元素<form action="" method="">表单域里的内容</form>元素类型 元素含义 注意<input type="checkbox" /> 复选框/多选框可以全选默认选中checked=<select><option>选项1</option><option>选项2</option></select >下拉框 select--下option--下注意下拉框顺序默认选中selected=<textarea rows="行数" cols="列数"> </textarea>文本域 通常大小通不用rows禁用大小拖<input type="button" value="提示"/>普通按钮 文字通过v普通按钮效<input type="reset" value="提示"/> 重置按钮恢复默认设置value避免默认<input type="submit" value="提示"/>提交按钮 提交表单数的后台程序设置value8.列表标签1. 无序列表2. 有序列表<ul><li></li><li></li><li></li></ul><ol><li></li><li></li><li></li></ol>五.CSS与选择器1.CSS语法1. 层叠样式表--负责的是页面的样式(变大变小变漂亮2. CSS写在style标签中3. 语法结构2.基础选择器1. 选择器作用 -- 找到页面元素2. 标签选择器 -- 标签名a. 一般标签都重复b. 需要选中某些标签时使用3. ID选择器 -- #id属性值a. id属性不允许重复b. 唯一选中标签时使用4. 类名选择器 -- .类名a. 类名可以重复b. class属性可以有多个类(class="bz ldxnc. 选中属于某个类的标签时使用3.CSS特性1. 继承性 -- 子孙元素继承父级元素的样式2. 覆盖性 -- 同一选择器设置同一样式,后设置的覆盖<style>div{color:red;font-size:50px;}</style><style>选择器{样式名:值;}</style>选择器 -- 设置哪些标签的样式样式名:值; -- 设置成什么样子4.复合选择器1. 复合选择器 -- 选择器组合使用2. 后代选择器a. 语法 -- 父级选择器 子孙选择器b. 通过父亲找子孙的时候可以使用c. 注意目标标签是后面的子孙3. 并集选择器a. 语法 -- 选择器1,选择器2,选择器3b. 需一起选中多个选择器的元素时可以使用c. 注意目标标签是所有选择器5.CSS存放位置(引入方式)1. 内嵌式:style标签中2. 外链式:样式存入外部css文件a. 单独将css内容写入css文件中--只写选择b. 通过link标签引入css文件--href="css文件3. 行内式:写在目标标签的style属性中--style="样式内4. 三种引入方式的选择a. 内嵌式 -- 结构和样式(HTML和CSS)混在i. 不需要加载外部css文件,加载b. 外链式 -- 代码分离--结构和样式分离--i. 除了电商网站的首页的其他情c. 行内式 -- 一定不要用6.盒子模型1. 组成: 内容--内边距--边框--外边距JavaScript基础
js是JavaScript作用是:控制前端的结构和样式
语法
书写位置--script标签内
<script>
alert();
// 注释使用双斜杠
// 每个语句使用;;;;;结束
</script>
定义变量--遵循命名规则
var var_name = var_value;
定位元素
1.document.getElementById("目标元素id属性值")
2.注意getElementById大小写--驼峰命名法
设置样式
document.getElementById("元素id属性值").style.样式名="样式值";
事件
1.概念:捕捉用户的行为--在什么时候做什么事情
2.事件三要素:(当事件源发生了事件类型就执行指定命令)
1.事件源
2.事件类型
3.执行的命令
事件源.事件类型 = function() {
执行的命令
}
|
|
收藏
淘帖
踩
