黑马程序员技术交流社区
标题:
技术帖
[打印本页]
作者:
刘诚
时间:
2019-7-20 08:40
标题:
技术帖
技术帖
来这里学习的第四天了，通过这几天的学习我深深的体会到了什么是生无可恋。也意识到为什么所有人听到程序员这类人群，都会说这种工作就是伤脑的工作—地中海。因为是真的代码能让你看呆，那就是另一种世界。好绚烂好夺目，亮到你眼花缭乱。
是真的，虽说我学的并不是开发，可这几天也是有接触到代码，稍微是有点点的了解。但我是真的佩服佩服前端开发人员了。贼帅！
好了，貌似跑题到感言帖了。这是个认真却不正经的技术帖hhhh。技术帖实话说，我这种没什么技术的人来写这个，实属不易。超纲超纲了，学了四天我好像还是没什么技术性的东西拿出来。但是呢，既然有这个作业呢。几天的输入，那肯定是得有点输出的，不论好歹优良，总归呢还能看。能让大家（大神）娱乐那也是有用的了。
那么好，学了四天。我就从第一天开始说我学到的以及我摘抄的笔记了。
第一天：关于计算机基础
（这一天的课我是落下了的，由于某些原因，没有能够跟同学们一起在教室里正经的学习。我是在家里自己看的老师发过来的视频。）
既然学习的技术是关于软件的，那么起码得对计算机得有深入的了解。所以我笔记出来以下的知识点：
1.计算机是由硬件系统和软件系统组成的。
2.硬件由：输入设备，输出设备，计算器+控制器（CPU），存储器（内存和外存）组成。
3.软件：系统软件和应用软件
系统软件：Windows，macOS，Linux（图形界面系统软件）；Android，iOS（移动设备系统）；Windows servers，Linux（服务器操作系统）。
关于二进制
1. 逢二进一，二进制里的基数只有0和1
2. 二进制可以转换成十进制
3. 二进制实现技术简单，状态稳定
4. 二进制是高低电位的原理
第二天
1.知道超链接标签和属性的作用
答：<a> <a href=""> 实现页面跳转 href 指定跳转的页面
target=_blank
2.知道实现表单有哪些常见标签？
<form action="" method="">
表单域内容
</form>
Action--数据提交给哪个后台
Meithod--通过什么方式传递（get明文 post简单加密）
3.掌握不同表单元素的type属性值是什么？
文本框：input type="text"
密码框：input type=“password"
单选框：input type=“radio" name=""
复选框：input type="checkbox"
按钮：input type="button"
重置：input type="reset"
提交：input type="submit"
4.了解列表标签（元素）有哪些标签？
答：两种 有序和无序
有序：ol li
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序：ul li
<ul>
<li></li>
<li></li>
<li></li>
</ul>
1. css语法：
<style>
Div{
Color:pink;
Font-size:50px;}
</style>
2.css选择器-标签选择器的写法：标签名
3.css选择器-ID选择器的写法：#ID值
4.css选择器-类名选择器的写法：.类名
5. 了解命名规则
答：ID：①不推荐使用中文命名
②不能使用特殊符号（除了下划线以及中划线）
③每个ID值不能重复
④不允许使用数字开头
⑤见名知意
class：①不推荐使用中文
②不允许使用数字开头
③不允许特殊符号（除下划线 中划线）
④类名可以重复使用
⑤见名知意
5. 特性：继承性和覆盖性
第三天
1. css 存放位置（引入方式）：
内嵌式，外链式，行内式
内嵌式：style标签当中
外链式：新建css文件，样式存入外部文件，通过link标签引入css文件<link href=”css文件路径”
行内式：卸载目标标签的style属性中—style=样式内容
2.三种方式的特点
①内嵌式 -- 结构和样式(HTML和CSS)混在同一文件
不需要加载外部css文件,加载速度快--电商首页
②外链式 -- 代码分离--结构和样式分离--管理修改方法
除了电商网站的首页的其他情况
③行内式 -- 一定不要用
3.表单
<datalist id=””>
<option>1</option>
<option>1</option>
<option>1</option>
</datalist>
4. 非空验证：
<input type=”text” required=”requied”/>
5. 自动聚焦
<input type=”text” autofocus=”autofocus”/>
6. 自动填充
<input type=”text” autocomplete=”on” name=”text”/>
7. 表单标签元素类型（HTML5新增）
Input：type=”email” “url” “number” “search” “datetime-local” “month” “week” “time” “date” “range”
8. 音视频标签
音频：<audio src=”yinyue.mp3” controls=”control” autoplay=”autoplay” loop=”loop”>
</audio>
视频：<video width=”800” controls=”controls” loop=”loop” autoplay=”autoplay”>
<source src=”movie.mp4” type=”video/mp4”></source>
第四天
1. Css扩展属性和属性值：
Border-radius 圆角属性
Background: linear-gradient 渐变色背景/url 背景图片/rgba(255,255,255,0-1)透明色背景
Box-shadow 盒子阴影
Text-shadow 文字阴影
Transform：rotate/scale/translate
Transition: 变化过渡-① 属性all 持续时间
②属性al 持续时间 延迟时间 速度变化
③ Ease-in 加速 ease-out 减速 ease-in-out先加后减
Animationl： 添加动画
2. javascript 的作用是控制前端的结构和样式
3. Javascript的基本语法：
<script>
alert();
</scropt>
4. 定义变量：
Var var_name=var_value
5. 设置样式：
document. getElementById(‘’).style.样式名=’样式值’;
6. js事件：
三要素：事件源，事件类型，执行命令
综上，笔记可能是有点乱。并且也是看不到什么技术的东西。大都是概念性的知识。主要本人也不是什么学习的好材料，为了有点说服力。我决定用下面的一个实例来证明实力，这四天还是没有白来。
文字阴影加自定义动画的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{background: url(bg.jpg);}
div{width:150px;height:100px;margin:50px ;border:1px solid ghostwhite;border-radius:10px;background:rgba(255,255,255,0);box-shadow:3px 3px 8px #000000;text-shadow:2px 2px 0px white;font-size: 25px;animation: go 1s alternate infinite;}
@keyframes go{
from{background:yellow;transform: translate(0px ,0px);}
to{background:greenyellow;transform: translate(500px, 0px);}
}
</style>
</head>
<body>
<div>黑马</div>
</body>
</html>
以上虽然不够专业，但是今后会向专业前进。“每天进步一点点”。
好的，技术帖也就是非技术性的小白一个技术分享。谢谢大神们的阅读。
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2