# 课程内容介绍
1. 计算机基础
1. 计算机介绍(软硬件)以及进制,编码,计量单位
2. 简单DOS命令
2. WEB网站与HTML
1. HTML网页骨架语法
2. 基础的HTML标签
3. CSS2及选择器
1. CSS选择器
4. JavaScript基础语法
1. 基础语法和事件
5. 软件测试入门
1. 软件测试定义,目的,计划,报告
2. 网络基本概念
## 课程目标
1. 知道计算机的软硬件分类,了解常见进制,编码,量单位转换
2. 借助DOS提前接触一下命令行操作计算机的方式
3. 能够认识常见的HMTL标签和属性,知道CSS选择器的写法
4. 了解JS的基本语法,以及JS的事件三要素
5. 知道软件测试定义,能够记住网络基本概念的普及内容
# 第一天
## 今日内容
1. 理解计算机有硬件系统和软件系统构成
2. **能够说出来硬件系统有哪五部分构成**
3. 软件系统有分为了哪两个部分
4. 知道常见的数学进制包含哪些基数
5. 知道常见计算机计量单位的进制
6. **HTML骨架标签的有哪些内容**
7. **知道标题标签,段落标签,图片标签,结构标签是什么?**
# 一.计算机基本介绍
## 1.定义:计算机是可以进行高效计算的电子设备
1. 特点(作用):
1. 数学逻辑运算
2. 数据记忆存储
3. 通过指令自动高效的计算
## 2.计算机由硬件系统和软件系统两部分组成
1. **硬件系统(看得见摸得着的物理设备)**
2. **软件系统(操控硬件设备的软件集合)**
## 3.硬件系统(根据冯诺依曼理论分为了五个部分)
1. 输入设备
2. 输出设备
3. 计算器
4. 控制器
5. 存储器(内存储器,外存储器)
## 4.软件系统(一般按照软件功能分为两类)
1. 操作系统--硬件上的第一层软件--支持应用软件
1. 图形化
2. 移动设备
3. 服务器
2. 应用软件--运行在操作系统上的软件--用户使用功能
# 二.常见进制,编码,计量单位
## 1.进制--计数规则
1. 二进制--两个基数(0,1)--逢二进一
2. **计算机识别二进制原理:高低电位**
3. 常见进制
1. 二进制--bin
2. 十进制--dec
3. 八进制--oct
4. 十六进制--hex
## 2.编码--自然语言翻译成机器语言
1. 常见字符集(编码后的对应表格):
1. ASCII--英文
2. UTF-8--中文
## 3.计量单位--计算机领域中表示数据量
1. 基础单位
1. 比特(bit位)--人为规定的最小的计量单位
2. 字节(byte字节)--1个字节等于8个比特
2. 常用字节单位
1. 1KB = 1024B
2. 1MB = 1024KB
3. 1GB = 1024MB
# 三.DOS命令
## 1.打开DOS命令的操作窗口
1. 打开运行界面(win R)
2. 输入cmd
![1557054936404](C:\Users\liuzhaowen\AppData\Roaming\Typora\typora-user-images\1557054936404.png)
3. 确定--打开
![1557054952019](C:\Users\liuzhaowen\AppData\Roaming\Typora\typora-user-images\1557054952019.png)
## 2.语法规则:
1. **命令 参数1 参数2 ...**
## 3.打开文件扩展名
1. ![1557054970468](C:\Users\liuzhaowen\AppData\Roaming\Typora\typora-user-images\1557054970468.png)
2. ![1557054997933](C:\Users\liuzhaowen\AppData\Roaming\Typora\typora-user-images\1557054997933.png)
## 4.命令表格
| 命令输入 | 命令作用 | 注释 |
| ---------------------------- | ---------------------------------------------- | ------------------------------------------ |
| time | 显示当前时间 | 需要手动退出才能执行下个命令 |
| **ctrl c** | 退出当前正在执行的命令 | |
| shutdown /s /t 秒数 | 设置当前计算机定时关机 | /s /t 左右都有空格 |
| shutdown /a | 取消自动关机命令 | /a 左侧有空格 |
| **ping 网址** | **检查当前网址网络是否连通** | **可以返回网址对应的ip 和网络状态** |
| **ipconfig -all** | **显示当前计算机所有网卡信息** | **包含 本机ipv4地址与mac地址** |
| **↑ ↓键** | **可以翻看最近使用过的命令** | **帮助我们快速选中某个执行过的命令** |
| 盘符名称:<br />**cd 目录名** | 切换到某个盘符<br />**切换到当前某个子目录下** | 盘符即c盘 d盘.<br />**当前目录下的子目录** |
| **cd ..** | **返回上一级目录** | **.. 与cd 之间存在空格** |
| **cd /** | **返回当前盘符根目录** | **/ 与cd 之间存在空格** |
| dir | 将某个目录的内容以列表形式列出 | 显示当前目录下的目录与文件 |
| md 路径/目录 | 可以新建目录 | |
| echo "内容" > 文件名称 | 可以间接新建一个带有内容的文件 | DOS中间接新建文件的方式 |
| rd 路径/目录 | 删除目录 | 默认只能删除空目录 |
| del 文件 | 删除文件 | 只能用来删除文件 |
| rd /s | 强制删除非空目录 | |
| del 目录 | 询问是否删除目录里的所有文件 | 只删除当前目录下下的一级子目录 |
| copy 文件原路径 文件新路径 | 将文件复制到其它地方 | 在复制的过程中可以修改名称 |
| move 文件原路径 文件新路径 | 将文件剪切到其它地方 | 必须进入被剪切文件所在目录执行 |
# 四.HTML基础
## 1.HTML介绍
1. 前端三大组成部分--HTML(结构)--CSS(样式)--JS(行为)
2. HTML--超文本标记语言:负责的是页面结构
## 2.HBuilder使用
1. 添加项目目录
1. ![1557055038834](C:\Users\liuzhaowen\AppData\Roaming\Typora\typora-user-images\1557055038834.png)
2. 创建HTML文件
1. ![1557055060314](C:\Users\liuzhaowen\AppData\Roaming\Typora\typora-user-images\1557055060314.png)
2. ![1557055071343](C:\Users\liuzhaowen\AppData\Roaming\Typora\typora-user-images\1557055071343.png)
## 3.HTML骨架
1. ![1557055094939](C:\Users\liuzhaowen\AppData\Roaming\Typora\typora-user-images\1557055094939.png)
2. **\<!DOCTYPE HTML\> -- 文档类型是html**
3. **\<html> \</html> -- 页面中最外层标签--根标签**
4. **\<head> \</head> -- 网页头部标签-里面内容主要是给浏览器看的内容**
5. **\<meta charset="UTF-8"> -- 页面编码标准**
6. **\<title> \</title> -- 网页标题标签-里面内容会显示在浏览器窗口标签上**
7. **\<body> \</body> -- 网页主体标签-里面内容显示在浏览器的窗口中**
## 4.HTML语法规则
1. HTML页面由正确嵌套的标签(标记)构成
2. **标签分为单标签和双标签**
1. **单标签 -- \<单标签名称 />**
2. **双标签 -- \<双标签名称> \</双标签名称>**
3. **标签属性的写法**
1. **键值对: 属性名="属性值"**
2. **\<标签名 属性名1="属性值" 属性名2="属性值">**
4. 空格和换行的实现方法
1. 空格实体 -- \
2. 换行标签 -- \<br />
## 5.基础HTML标签
**标签语义化的好处--搜索引擎中排名更靠前**
| 标签 | 含义 | 注意 |
| ------------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------- |
| \<h1>一级标题\</h1> | **标题标签 h1-h6** | 双标签,共六级 |
| \<p>文章段落\</p> | **段落标签** | 双标签 |
| \<b>加粗效果\</b> | 文字标签-加粗 | 双标签,弱语义 |
| \<s>删除线效果\</s> | 文字标签-删除线 | 双标签,弱语义 |
| \<i>倾斜效果\</i> | 文字标签-倾斜 | 双标签,弱语义 |
| \<strong>加粗效果\</strong> | 文字标签-加粗 | 双标签,强语义 |
| \<del>删除线效果\</del> | 文字标签-删除线 | 双标签,强语义 |
| \<em>倾斜效果\</em> | 文字标签-倾斜 | 双标签,强语义 |
| \<div>大盒子\</div> | **布局(结构)标签-大盒子** | 双标签,独占行 |
| \<span>小盒子\</span> | **布局(结构)标签-小盒子** | 双标签,非独占 |
| \<!-- 注释内容 -- > | **注释--快捷键ctrl /** | 源码中可见<br />运行不显示 |
| \<img src="图片路径"/><br />属性名="属性值"--键值对语法 | **图片标签<br />title-图片标题<br />alt-图片描述** | 单标签<br />title(悬停显示)<br />alt(失败显示) |
| | | |
| | | |
# 今日内容
1. 理解计算机有硬件系统和软件系统构成
2. **能够说出来硬件系统有哪五部分构成**
3. 软件系统有分为了哪两个部分
4. 知道常见的数学进制包含哪些基数
5. 知道常见计算机计量单位的进制
6. **HTML骨架标签的有哪些内容**
7. **知道标题标签,段落标签,图片标签,结构标签是什么?** |
|