入门篇笔记

第一讲：WEB前端开发是做什么的及需要学习那些内容
WEB前端开发工程师要做什么？
答：做PC端和移动端的网页并解决用户体验的问题。
WEB前端开发工程师具体要学习什么内容及必备条件？
答：必备条件：（1）能上网、会打字、懂得互联网、用过搜索引擎。
（2）有浓厚的兴趣。
（3）肯做联系，勤敲代码。
学习内容：（1）软件：
浏览器[谷歌、IE、火狐、苹果]
浏览器插件
用来写代码的编辑器：记事本、DW、Sublime···
用来处理图片的工具：PhotoShop
※（2）语言：
HTML
CSS
JavaScript
第二讲：HTML语言是什么
HTML超文本标记语言
超：超出文本。一个网页不只有文本还有声音有图片有视频。
文本：文本形式。
语言：和浏览器打交道的，与浏览器进行沟通。
标记、标签： <不能出现汉字>
标签对：（标签头）
（头部头）
（标题）
（头部尾）
（主体头）
内容-content
（主体尾）
（标签尾）
单标签： /:表示结束。
：写一个文档，类型是html。写在前，大小写都可。
：文档的翻译器，识别各国语言，防止出现乱码。
记事本编辑器使用此语句时：保存时把编码换至UTF-8。
写在后。
DW、Sublime等编辑器自带文本格式。
DW：自带文本格式。
Sublime：先打出“！”，再按ctrl+E，自动生成文本格式。
第三讲：CSS语言和JS语言介绍及演示
CSS：层叠样式表
写在主体内

aaaa

（把内容包起来，给内容加外观）

加样式：

（英文输入法）

 样式=属性名称：值 ；  
 width:宽  height:高  px：像素  background：背景颜色
 border：边框  solid：实线   font-size：字体

加图片：浏览器中的图片：右键--复制图片网址

     background:url(图片地址);

加过渡时间：transition : 1s（时间1秒）结合JavaScript使用。

JavaScript：脚本语言 （行为，网页做动态变化）

onclick=”this.style.width = ‘800px’;”
点击时发生=”这个图片.样式.属性名称=’变化后的量’;”
与样式不同的是：样式：属性名称：值
JavaScript：属性名称=’ 值 ‘
第四讲：记事本、sublime、DW介绍
记事本 打码时无提示
代码生成：自行打码









字体放大：格式--字体
折叠代码：无法实现
效果呈现：保存.html文件，双击桌面文件。
Sublime 打码时有提示
代码生成：先打出“！”，再按ctrl+E，自动生成文本格式。
字体放大：ctrl+滚动滑轮
折叠代码：点击标签前面数字的箭头
效果呈现：保存.html文件，右键代码--在浏览器中打开。
DW： 打码时有提示
代码生成：点击“代码”自动生成
效果呈现：拆分：所见即所得。不用保存，立即呈现效果。
第五讲：id选择符、样式出现的位置（行间、内部、外部）
前提步骤：新建html文件--点击代码--桌面新建文件夹--把创建文件保存进去
行间样式表 ：html注释，电脑不识别。
```

aaa

bbb

ccc

行间样式表：代码在一行，比较直观简单，命令只作用在一个元素上。
内部样式表  
    ```

        
        
        
    
    
        
aaa
        
bbb
    

外部样式表
```



（创建连接）

aaa

bbb

用记事本写样式：
           #div1{
                width:100px;
                height:100px;
                background:red;
                }
保存到桌面的文件夹中 样式表的后缀.css 名字不可以是中文
通过改变外部样式表，改变页面样式。


第六讲：常用样式：单位值种类、颜色值模式、背景图片、平铺、背景定位 
常用样式       /**/CSS注释
    
        
        
        


        



第七讲：背景中scroll的设置、复合样式（简化单一样式）
scroll的设置  
换行符
     
        
        
        

    
    
单一样式
background-image:url(img/1.jpg);
background-repeat:no-repeat;
background-position:center 0px;
background-attachment:fixed;
复合样式
background:url(img/1.jpg) no-repeat center 0px fixed;（位置可以随意换）
第八讲：边框

样式：solid 实线  dashed 虚线 dotted 点画线（像素过高在不同浏览器中会出现兼容问题）
border-top:10px solid red;（上部）
border-bottom:10px solid yellow;（下部）
border-left:10px solid blue;（左部）
border-right:10px solid green;（右部）
第九讲：PS切图快捷键操作、印屏幕、浏览器插件获取WEB图片
PS技术：切图（抠图）、测量、图片简单的处理
如何得到一张图片：（1）设计师给的PS图片，格式（.psd）
                 （2）印屏幕：PrtSc
                      打开PhotoShop--新建ctrl+n--粘贴ctrl+v
                      放大 ctrl++ 双击放大镜还原 缩小ctrl+- 拖拽 ：空格
                      抠图：选框工具+添加选取+从选取中减去+与选取交叉
                      保存：ctrl+c 新建 ctrl+n 尺寸不变 背景内容：透明
                      存储为WEB 和设备所用格式 选择gif 
                      拾色器：填充颜色 选中--油漆工具（alt+del）前景色
                                                    （ctrl+del）背景色
                      拉伸：ctrl+t 渐变
                 （3）浏览器的插件F12 移动鼠标 右键图片地址
第十讲：网易新闻小结构实例
反选 ctrl+shift+i 
嵌套包含关系 
            ```
            

                
（缩进 TAB）
                

                

             
             ```
切换模式 f 可拖拽
测量 选中--F8
渐变 取小像素 平铺
验证方法：100%的状态下进行比较  印屏幕