A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© Zy_阿匠 初级黑马   /  2017-1-3 15:26  /  2166 人查看  /  4 人回复  /   1 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 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课时
敲个代码,小实战一下
  1. <!DOCTYPE>
  2. <html>
  3.          <head>
  4.                    <meta charset=“UTF-8”>
  5.                    <link rel=“stylesheet” href=“”>
  6.                    <title>hello,world!</title>
  7.                    <script></script>
  8.                     <style><style>
  9.          </head>
  10.          <body>
  11.                      <h1>hello, world!</h1>
  12.                      <p>
  13.                            <strong>hello, world!</strong>                          
  14. <hr>
  15.                      </p>
  16.           </body>  
  17.           </head>
  18. </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>

      

4 个回复

倒序浏览
回复 使用道具 举报
很不错,加油
回复 使用道具 举报
在课时5代码中应该是<style></style>,差了个/
回复 使用道具 举报
总结很全面,很细致哦!向你学习。不过有个问题:“_blank”是默认值,在新的空白窗口打开,“_self”是在当前窗口打开超链接吧!
来自宇宙超级黑马专属苹果客户端来自宇宙超级黑马专属苹果客户端
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马