 一.计算机由硬件系统和软件系统两部分组成 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> 好啦，最终祝大家学有所成。
| 
收藏
淘帖
踩
