第一阶段：web前端开发基础环境配置1

1.前端开发基础视频：操作系统通用快捷键操作（win快捷键）

1.1

Win+D：快速显示桌面

Win+L：快速锁定计算机

Win+E：快速打开资源管理器

Ctrl+Shift+ESC:打开任务管理器

1.2前端开发基础视频：操作系统通用快捷键操作（编辑快捷键）

Alt+F4：关闭当前活动项目或退出活动程序

Alt+Tab：在打开的项目中进行切换

Ctrl+F4：关闭活动文档（在程序中能够让你同时打开多个文档）

F2：重命名选定的项目

2认识大前端

2.1 解决用户体验

2.2 web（网页） 移动端

2.3学习态度很重要，多做练习

3认识网页

3.1  网页的组成

文字，图片，按钮，输入框，视频。。。元素组成。

3.2 Web标准

     W3c（万维网联盟）

     ☞结构标准    html

     ☞表现标准    Css

     ☞行为标准    js

3.4 浏览器与服务器之间的那点事（(✿◡‿◡)）

                         http协议   请求报文

浏览器---------------------------->服务器

          <-----------------------------

                            响应报文

http:浏览器与服务器之间传输的一种规范

https：加密处理

Url地址：

url协议：平时我们写的网址就是url地址

url协议：规定url地址的格式

协议规定格式：scheme://host.domain:port/path/filename

scheme：定义因特网服务的类型。常见的就是http

host：定义域主机（http的默认主机是www）

domain：定义因特网域名 比如：w3school.com.cn

port:定义端口号（网页默认端口：80）

path：网页所在服务器上的路径

filename：文件名称

4 认识html

4.1概念

Hyper text markup language(超文本标记语言)

超文本：能够实现网页跳转的文本（超链接）

标记：html中的标签

4.2html

 文档类型

  html文档头部分

  	网页的标题

   html结构的主体部分

html:后缀名决定文件的打开方式。

4.3 标签的分类

☞单标签：只有开始标签没有结束标签。

例如：

☞双标签：又开始标签和结束标签。

例如：

4.4标签关系分类

☞并列关系（兄弟）

☞嵌套关系（包含）

4.5sublime快捷键使用:

sublime快捷键使用：

http://blog.csdn.net/moyan_min/article/details/11530751

5html标签介绍

5.1单标签

☞文本换行标签 

☞横线标签

5.2双标签

☞段落标签

这是一行文字


这是一行文字

☞标题标签

注意：标题标签只能 取数字1--6

这是一个标题
    
这是一个标题
    
这是一个标题
    
这是一个标题
    
这是一个标题
    
这是一个标题

☞文本标签

	优美的文字
    

☞文本格式化标签

文字加粗显示：  
    
    	该减肥啦！！！
    

☞文字斜体

☞文字删除线

删除线标签
 删除线标签

☞文字下横线标签

文字下横线
文字下横线

5.3图片标签（img）

属性：src：设置显示图片（图片名称或者图片路径）
title：用来设置鼠标放到图片上显示的文字

alt：当图盘无法正常显示的时候，对图片的描述

width: 用来设置图片宽度

height: 用来设置图片高度

5.4图片路径

5.4.1相对路径（重点）

5.4.2绝对路径

凡是带有磁盘路径的或者网站地址的都是绝对路径

例如：D:\a\1.png   www.baidu.con/imags/1.png

5.5超链接

百度
春天
夏天
 
  
 
  
 
  属性:title:当鼠标放到超链接上显示的文字 
  
 
  
target="_self"  默认值    网页在当前页面中打开
 
  
target="_blank"    网页在新窗口中打开
 
  
 
  

    	
 
  
 
  
5.7锚链接介绍（a）
 
  
☞任何一个表情设置id属性，并取值
 
  
你好
 
  
 
  ☞给a标签设置href属性     "#id名称" 
  
 
  
 
  
 
  
 返回顶部
 
  文字和图片都可以设置超链接 
  
 
  
 
  
5.8简单的下载功能
 
  
a标签中通过给href属性设置一个压缩文件，即可实现下载功能。
 
  
5.9超链接不跳转到任何页面
 
  
 
  
 
  
 
  
5.10html特殊字符
 
  
空格符： 
 
  
<    小于号          <
 
  
>     大于号         >      ......
 
  
 
   
  
 
  
6列表
 
  
6.1无序列表（ul）
 
  
 
  
 


    	
   
    	

    	

    	.......
    	

 
 
  
 
  
例子：


    	
苹果
   
    	
苹果
    	
苹果
    	
苹果
      
属性介绍：type="square"    小方块显示
          type="circle"    小圆圈
 
  
 
  6.2有序列表（ol） 
  
 
  
 
  
 


    	
  
    	

    	




type属性：A,a,   i(小写的罗马数字)   I（大写的罗马数字）
start="3"  li前面的显示从第几个开始

            把大象放冰箱分几步？
    
        
打开冰箱门
        
把大象放进去
        
把冰箱门关上
    
 
  
 
  
6.3自定义列表（dl）
 
  
 
  
    

    	
 小标题
    	
 列表项
    	

    	

    
例子：

     
        
了解我们
        
人才招聘
        
关于我们
        
新闻中心
        
公益社区
        
移动客户端
    
 
  
 
  
7补充
 
  
放置背景音乐
 
  
 
  
 
  文字滚动 
  
 
  
 
  

		跑起来
 
  页面自动滚动效果：... 
  
 
  
中间的内容可以为：文字，图片，也可以是由程序生成的文字或图片
 
  
属性：height      设置高度    width      设置宽度       bgcolor        设置背景颜色
 
  
behavior：设置滚动的方式
 
  
alternate：表示在两端之间来回滚动
 
  
scroll：表示由一端滚动到另一端，会重复
 
  
slide：表示由一端滚动到另一端，不会重复
 
  

 
  
direction：设置滚动的方向
 
  
down：向下滚动           left：向左滚动            right：向右滚动           up：向上滚动
 
  
loop：设置滚动次数         -1 一直滚下去
 
  
页面背景音乐：
 
  
属性：src   设置音乐路径
 
  
           hidden：隐藏播放按钮   true 隐藏  false 显示