Python学习周总结（18.03.26 - 03.30）

2018-03-31 本文已影响0人 _Colonel_

   本周是培训的第五周，暂时告别python，进入了前端知识模块，主要是针对HTML，CSS，JavaScript三部分进行学习，其主要知识点如下：

1、HTML - Hyper-Text Markup Language（管内容）

内容梗概
<html>
<head></head>
<body>
文本 - h1-h6 / p / br / hr / sub / sup / strong / em / del / ins / q
列表 - ul / ol(li) / dl(dt/dd)
图像 - img / figure / figcaption
链接 - a(页面链接、锚链接、功能链接)
表格 - table / tr / td / th / thead / tbody / tfoot
表单 - form / input / select / textarea
音视频 - audio / video(source)
</body>
</html>
相关实例之表单处理
// action:服务器上的哪个程序来受理表单
// get:从服务器获取资源 post:向服务器上传数据
// 有文件上传，必须要post,还要指定编码enctype(enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码) multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
<form action="" method="post" enctype="multipart/form-data">
// fieldset:划分区域 legend:标识区域名
<fieldset>
<legend>必填信息</legend>
// placeholder:占位符
姓名：<input type="text" name="username" placeholder="请输入您的用户名" required>

// 输入的内容会变成掩码
密码：<input type="password" name="password" placeholder="请输入您的口令" required>

// 单选按钮 checked:默认选中
性别：<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女

// 复选框
爱好：<input type="checkbox" name="hobby" checked>阅读
<input type="checkbox" name="hobby">健身
<input type="checkbox" name="hobby">旅行
<input type="checkbox" name="hobby" checked>交友

生日：<input type="date" name="birthday">

// PC端如果邮箱地址中没有@符号将会报错，手机端会自动切换到有@符号的键盘
邮箱：<input type="email" name="email" placeholder="请输入您的邮箱" required>

</fieldset>
<fieldset>
<legend>选填信息</legend>
// 下拉列表 select>option*5
籍贯：<select name="province">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="苏州" selected>苏州</option>
</select>

// 文本区
自我介绍：
<textarea name="introduce_self" rows="5" cols="30"></textarea>

上传照片：<input type="file" name="pic">

</fieldset>
// submit: 向服务器提交数据 reset:重置数据
<input type="submit" value="立即注册">
<input type="reset" value="重新填写">

</form>

相关实例之定义列表
// dl: 定义列表(常用于图文混排的场景) dt:标题(一个) dd:解释内容(可以很多项)
<dl>
<dt>阅读</dt>
<dd>每天晚上十点开始</dd>
<dt>
// src:图片地址 alt:替换文字 width:设定图片宽度(不建议)
<img src="./images/pic_1.jpg" alt="game" width="30">
</dt>
<dd>这是一张图片</dd>
</dl>
相关实例之内部窗口
// 内部窗口 - 可以嵌别的页面到主窗口上 scrolling="no":去除滚动条 frameborder="no":去除边框
<iframe src="https://map.baidu.com/" width="400" height="300" scrolling="no" frameborder="no"></iframe>

2、CSS - Cascading Style Sheets（管显示）

内容梗概
1）选择器：通配符选择器标签选择器类选择器
2）样式表：内部样式表（无需下载，直接使用，速度快首页一般用内部样式表）；外部样式表（实现了代码的复用，保持网站风格一致，浪费空间，节省了时间浏览器会将其下载到缓存中，以后再用无需联网下载）；内嵌(行内)样式表（无法复用（不推荐使用），适合微调整）
3）三大原则：就近原则、具体原则、重要性原则
4）转义字符（实体替换符/字符实体）：如 <(小于号)，>(大于号)，（空格）等
5）字体：衬线字体（边角经过修饰）；非衬线字体（笔画粗细一致，边角没有修饰）。制作网页时，选择安全字体（每个计算机都能显示出来的字体），如若强制浏览器使用缓存中没有的字体，则可用下列代码实现：
@font-face{ /强制使用指定字体，没有则去指定路径下载/
font-family: ""; /字体名称/
src:url(); /字体下载路径/
}
```
6）块级元素（如:div h1 p）的浮动与清除浮动，具体如下：
/*将块级元素按行级元素处理  块级元素横着放*/
display:inline-block;
/*left:从左向右放置(没有边距) right:从右往左放置(没有边距) 脱离了正常的文档流（从左往右，从上往下）*/
float: right;

/*clear(清除浮动)  left:清除左浮动 right:清除右浮动 both:清除左右浮动，恢复正常的文档流，另起一行重新开始*/
clear: both;
 7）z-index(z索引)：有重叠的情况， z-index值越大,放置的位置越靠上。如果没有z-index值，body中先设置的先放置
 8）定位：相对定位（position: relative; 相对原来位置进行调整）;绝对定位（position: absolute; 相对于整个文档页面（100%时的body）来进行位置的调整）；固定定位（position: fixed; 相对于浏览器窗口进行调整(广告常用此模式))
```

3、JS - JavaScript（管行为）

内容梗概
1）函数的定义与调用（以计算两个数的加减乘除运算为例），注意JS中没有重载的概念，后定义的函数将覆盖先定义的函数
<input type="text" id="number1" size="3" maxlength="5"/>
<select id="selected">
<option value="+">+</option>
<option value="-">-</option>
<option value=""></option>
<option value="/">/</option>
</select>
<input type="number" id="number2"/> // number:只能输入数字
<button id="btn" onclick="calculate()">=</button>
<input type="text" id="number3" readonly /> // readonly:只读不能修改
<script type="text/javascript">
function calculate(){
var x = document.getElementById("number1").value;
var y = document.getElementById("number2").value;
var cal = document.getElementById("selected").value;
var result = 0;
// 评估函数eval：给定字符串表达式,自动识别并计算其值
result = eval(x + cal + y);
document.getElementById("number3").value = result;
}
</script>
2）数据类型：简单数据类型（值保存在栈上，对象的引用在栈上）
number 、string、boolean、null、undefined；复杂数据类型（对象的值在堆上）-- object。可用typeof()来查看变量的数据类型
3）变量命名规则：字母数字下划线$号构成, 数字不能开头, 见名知意, 驼峰命名法
4）将函数与变量进行绑定，输出变量即自动调用函数，代码如下：
function add(a, b, c=300){
return a + b + c;
}
```
  var sum = +function(a, b, c){
  return a + b + c;
```
}(2, 2, 2);

var sum_2 = (function(a, b, c){
return a + b + c;
}(3, 3, 3));

alert(sum)
alert(sum_2)
```
 5）window常用的方法
 window.alert("haha");   // 警告框  不必要不要乱弹框 会影响用户体验
 var name = window.prompt("请输入你的名字"); // 输入提示框  显示可提示用户输入的对话框
 window.print(); // 调用打印功能
 window.confirm("你确定要退出吗？") ;  // 确认框
 window.close(); // 关窗口 不一定每个浏览器都支持
 window.open("http://www.baidu.com");  // 另开窗口显示内容
6）创建单个对象，即创建对象的字面量语法（以单个学生对象的创建为例）
var stu = {
      'name' : "mike",
      'age' : 18,
      'watch_movie':function(){
          window.alert(this['name'] + " is watching movie!");
      },
      'study':function(course){
          window.alert(this['name'] + " is studying " + course);
      }
  };
  // 方法调用 
  stu.watch_movie();
  stu.study("Chinese");
7）创建多个对象，即创建对象的构造器方法（以多个学生对象的创建为例）
      // 当要创建多个对象时，将属性绑定工作在Student方法内完成
  function Student(name, age){
    this.name = name;
    this.age = age;
      }
```

// 创建多个对象时，将公共方法绑在学生函数的原型（模具）上，方法只会被定义一次
Student.prototype.study = function(courseName){
window.alert(this.name + " 正在学习 " + courseName + " . ");
};

      Student.prototype.watch = function(){
        window.alert(this.name + " is watching movies. ");
      };

// 如果没有new，Student函数中的this表示浏览器窗口，对象与浏览器绑定在一起
var stu1 = new Student("jack", 20);
var stu2 = new Student("mike", 33);
stu1.study("English");
stu2.watch();

    通过一周的学习，已基本能完成网页前端的制作及一些响应事件的处理，课下作业也均能独立完成，内容量与效果基本与大学期间一学期的网页设计课程持平。如要制作一个完整的网站，还需进行相应后端知识的学习，并接触常用框架来辅助自己的开发，希望通过本阶段的学习后，能出一个完整的网站作品~

temp1.png

temp2.png

temp3.png

Python学习周总结（18.03.26 - 03.30）

猜你喜欢

热点阅读