一.计算机由硬件系统和软件系统两部分组成
1. 硬件系统(看得见摸得着的物理设备)
2. 软件系统(操控硬件设备的软件集合)
二.硬件系统(根据冯诺依曼理论分为了五个部分)
1. 输入设备 2. 输出设备 3. 计算器 4. 控制器 5. 存储器(内存储器,外存储器)
4.软件系统(一般按照软件功能分为两类)
1. 操作系统--硬件上的第一层软件--支持应用软件
二．
1.HTML介绍
1. 前端三大组成部分--HTML(结构)--CSS(样式)--JS(行为)
HTML--超文本标记语言:负责的是页面结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
2. <!DOCTYPE HTML> -- 文档类型是html
3. <html> </html> -- 页面中最外层标签--根标签
4. <head> </head> -- 网页头部标签-里面内容主要是给浏览器看的内容
5. <metacharset="UTF-8"> -- 页面编码标准
6.<title> </title> -- 网页标题标签-里面内容会显示在浏览器窗口标签上
7. <body> </body> -- 网页主体标签-里面内容显示在浏览器的窗口中
三：CSS语法结构
CSS写在style标签中sttyle是个双标签
1.基础选择器
选择器作用 -- 找到页面元素
2. 标签选择器 -- 标签名
a. 一般标签都重复
b. 需要选中某些标签时使用
3. ID选择器 -- #id属性值
a. id属性不允许重复
b. 唯一选中标签时使用
3. 类名选择器 -- .类名
a. 类名可以重复
b. class属性可以有多个类(class="bz ldxns"),用其中一个
c. 选中属于某个类的标签时使用
4..CSS特性
1. 继承性 -- 子孙元素继承父级元素的样式
2. 覆盖性 -- 同一选择器设置同一样式,后设置的覆盖先设置的
<style>
格式如下：
<style>
选择器{
样式名1:值;
样式名2:值;
}
</style>
选择器 -- 设置哪些标签的样式
样式名:值; -- 设置成什么样子
<style>
div{
color:red;
font-size:50px;
}
</style>
5.复合选择器
1. 复合选择器 -- 选择器组合使用
2. 后代选择器
a. 语法 -- 父级选择器 子孙选择器
b. 通过父亲找子孙的时候可以使用
c. 注意目标标签是后面的子孙
3. 并集选择器
a. 语法 -- 选择器1,选择器2,选择器3
#div1,#div2,.p1,.p2,h3,h2{color: blue;}
b. 需一起选中多个选择器的元素时可以使用
c. 注意目标标签是所有选择器
6.CSS存放位置(引入方式)
1. 内嵌式:style标签中
<style type="text/css">
#div1{color:red;}
结构和样式(HTML和CSS)混在同一文件
不需要加载外部css文件,加载速度快--电商首页
2. 外链式:样式存入外部css文件
<link rel="stylesheet" type="text/css" href="css.css" />
代码分离--结构和样式分离--管理修改方法
除了电商网站的首页的其他情况
a. 单独将css内容写入css文件中--只写选择器和样式内容
b. 通过link标签引入css文件--href="css文件路径"
3. 行内式:写在目标标签的style属性中--style="样式内容
<div style="color: red; font-size: 100px;">哈哈</div>
<div style="color: red; font-size: 100px;">哈哈</div>
一定不要用行内式，因为修改十分不方便，还会导致页面混乱、加载速度会变慢
. 盒子模型
1. 组成: 内容--内边距--边框--外边距
2. 边框(内容的边框)--border(-top-bottom-left-right)
3. 内边距(内容和边框之间的距离)--padding(-top-bottom-left-right)
4. 外边距(两个盒子边框之间的距离)-margin(-top-bottom-left-right)
. 音频标签(HTML5新增)
-- 单个音频
<audio src="yinyue.mp3"controls="controls" autoplay="autoplay"loop="loop"></audio>
好啦，最终祝大家学有所成。
JavaEE
鸿蒙应用开发
集成电路应用开发
人工智能开发
AI+Linux云计算运维
Python+大数据开发
跨境电商
AI+设计
AI测试
新媒体+短视频
HTML&JS+前端
