本周是培训的第五周，暂时告别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
网友评论