本帖最后由 Zy_阿匠 于 2017-1-3 15:48 编辑
第一部分
第1课时
1、认识了在HTML5时代，大前端的基本定义，包括职位的前景
2、大前端与传统前端工作内容的不同
3、大前端所需要掌握的技能
4、全栈工程师
第2课时
1、开发编辑器的介绍，包括sublime，atom，webstorm等
2、html5
3、css
4、js
第3课时
开发环境的电脑设置
1、首先需要把电脑的性能设置为专业且最佳状态
2、其次文件在电脑中的排列方式以及显示形式要设置为专业的形式
包括不要隐藏文件扩展名、在标题栏要设置文件的完整显示路径等
第4课时与第5课时
win下常用快捷键的介绍
Mac下常用的快捷键可以查看这里
https://www.zhihu.com/question/20021861
第6课时及第7课时
sublime编辑器的下载、安装及插件的使用
第8课时
win下sublime的常用操作
1、sublime的项目管理，包括文件夹的建立及文件的建立与管理
2、html文件与css文件的建立
3、win下sublime常用快捷键的介绍
Win下和mac下的sublime快捷键差别还是很大的，我分享一个
mac版的sublime常用快捷键，上图：
![]()
第9课时
atom编辑器的安装及介绍，包括一些atom下常用的设置
第10课时
webstorm的介绍和安装，除了webstorm的简单介绍外，还对比了目前流行的几款编辑器
包括：sublime、atom、vscode及webstorm,区别如下：
1、sublime，轻量级，适合初级前端开发，智能提示一般，需要借助第三发插件
2、atom,轻量级，适合初级前端开发
3、vscode智能提示很强大，也比较适合初级前端，与前2款内核一样
4、webstorm，重量级，适合大型网站的开发
综合来讲，就是0基础前端开发，用sublime等，也可以在不需要提示的情况下，
打造自己编码的规范性和正确性；有一定基础，工作涉及大型项目时，可以使用
Webstorm
第二部分
第1课时
1、浏览器
（1）首先它更像是一个平台，帮助用户浏览网页的这样一个平台，它最重要的部分是渲染引擎，
用来解析网页，然后呈现给用户观看
（2）浏览器的工作原理：用户发送请求到浏览器➣浏览器封装请求服务器➣DNS解析发送服务器
➣服务器响应并处理请求➣发送响应报文➣浏览器接收并处理请求并呈现页面
（3）目前主流浏览器有：Google Chrome、Safari、Fairfox、Opera及IE等，其中火狐与IE最常用
（4）浏览器内核：IE的为trident、safair的为webkit、chrome的为blink
2、名词解释
（1）Internet，又称为因特网或者互联网，可以实现全球信息互联的一个网络
（2）WWW，为网站提供相关服务的，通过它用户可以进行上网冲浪
（3）HTTP，超文本传输协议，网络通信与传输网页的一种协议、规则
（4）DNS，域名解析服务器，是网络上域名与IP地址互相映射的分布式数据库，每个主机名有且只有1
Ip地址，我们只要知道主机名，然后通过DNS解析成IP地址，就可以访问相对应的主机
3、网页
网页主要由HTML、CSS及Javascript组成，其中，HTML相当于网页的骨骼框架，CSS主要作用为控制
页面的各种样式表现，JS主要在于处理用户与网页的交互行为等
第2课时
1、HTML，是一种超文本标记语言，网页的所有内容，都通过HTML的标签进行标记，然后呈现出来
2、HTML的标签都是成对出现并且有开有合的，也就是说出现一个开始标签，就必须有相对应的闭合
标签，当然，除了单标签除外。标签都是以“<”开始
3、标签当中如果有属性名及属性值，书写方式为 属性名=“value”，多个属性名之间用空格隔开
第3课时
HTML文档的框架标签主要包括，<!DOCTYPE>、<html>、<head>、<body>等
1、<!DOCTYPE>，用来声明文档的类型及标准，给浏览器一个如何解释文档的依据
2、<html>，文档的根标签，所有的标签都必须被包含在这里
3、<head>,文档的头部标签，更多的是定义一些与文档及网页相关的信息，它并不会作为内容被呈现出现
在它当中，也包含了以下标签：
⓵<title>，网页的标题标签，被括的内容将呈现在浏览器窗口的标题栏上，对SEO的优化来说，很关键
⓶<meta>,基本文档格式，常用的为<meta charset=“UTF-8”>
⓷<style>，css样式标签，所有的css样式都必须被包含在此标签中
⓸<script>，js标签，所有的js内容都必须被包含在此标签中
⓹<link>，导入外部文件标签，如：<link rel=“stylesheet” href=“”>
4、<body>，呈现网页内容的标签，所有需要展现出来的内容，都必须在此标签中
第4课时
<body>标签中常用标签
1、<h1>——<h6>，网页标题标签，成对出现
2、<p></p>，段落标签
3、<span></span>，行内标签
4、换行标签，单标签
5、<hr>,水平线标签 ，单标签
6、<strong></stong>，定义文字家中语气
7、<sub></sub>，定义下标字
8、<sup></sup>，定义上标字
9、<em></em>，文字以斜体展示
10、<del></del>，文字加删除线
第5课时
敲个代码，小实战一下
- <!DOCTYPE>
- <html>
- <head>
- <meta charset=“UTF-8”>
- <link rel=“stylesheet” href=“”>
- <title>hello,world!</title>
- <script></script>
- <style><style>
- </head>
- <body>
- <h1>hello, world!</h1>
- <p>
- <strong>hello, world!</strong>
- <hr>
- </p>
- </body>
- </head>
- </html>
第三部分
第1课时
1、超链接标签<a>，基本语法格式为：<a href=“#” target=“value” alt=“"></a>
其中，target的取值有”_blank”、”_self”，后者为默认值，前者指在当前窗口打开
2、也可以通过使用ID名，让用户快速链接到目标，此方法一般是站内链接或网页内链接
<a href=“#ID名”></a>
3、URL：统一资源定位符，它指定了资源的具体位置以及访问方法
Scheme://host.domafiin:port/path/filename
Scheme:因特网服务的类型，常用为:http
Host:域主机，常用为WWW
Domain:因特网域名
Port:端口号,http默认的为80
Path:服务器的路径
Filename:文档名称
第2课时
1、相对路径，不带有盘符，以HTML网页文件为起点，通过层级关系描述位置
(1)、与HTML在同一文件夹，描述：<img src=“logo.gif”>
(2)、在HTML下一级文件夹，描述：<img src=“img/img01/logo.gif”>
(3)、在HTML上一级文件夹，描述：<img src=“../logo.gif>
2、绝对路径一般指带有盘符或具体的网络地址
3、三种图片格式的选择：gif、png、jpg；色彩比较少有动画的选gif，对色彩要求高的选jpg
第3课时
1、有序列表标签：<ol><li></li></ol>
2、无序列表标签：<ul><li></li></ul>
3、定义列表标签：<dl><dt>名词</dt><dd>名词解释</dd></dl>
4、表格标签：<table><tr><td>.....</td></tr></table>
5、表单标签：<form></form>,基本语法为：
<form action=“URL地址” method=“提交方式” name=“表单名称”></form>
6、<input></input>标签，基本语法：<input name=“名称” type=“类型” value=“取值”></input>
7、文本域标签：<textarea>,基本语法：<textarea cols=“每行字符数” rows=“行数”></textarea>
8、控件标签：<select>,基本语法:<select><option>....</option></select>
|
|
收藏
淘帖
踩
