前端学习总结笔记——入门(一)

前端学习总结笔记 ——入门(一)

什么是前端

狭义:使用HTML、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网络产品,涵盖pc端、移动端网页、处理视觉和交互问题。

广义:所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域。

前端需要了解的知识

  • 网站和网页:网站指的是整站,而网页值得是单独页面。
  • 主页和内页:主页的名字必须是index,通过主页的超链接跳转至内页。
  • 内页的信息:包括内页所有可以展现的内容,文字、图片、超链接、视频、音频等。
  • 动态页面和静态页面:几台页面的东西是固定不变的,动态页面内容会根据用户的操作和实际情况改变,其中的数据从后台获。
  • 前端和后端:前端处理页面展示效果和用户交互,后端处理数据在服务器进行增、删、改、查、等。
  •  

常用工具简介

  • 常用编辑器:VSCODE、Sublime.....
  • 常用浏览器:火狐浏览器(Gecko内核)、谷歌浏览器(Webkit内核)、IE浏览器(Trident内核)

国内浏览器早年使用的是IE的Trdent内核,现在基本为Webkit或者Webkit和Trident双内核浏览器。

  • 设计与测量工具:Photoshop

 

HTML、CSS初识

HTML标签关系

  • 嵌套关系; 父子标签关系时,为了代码美观规范,子元素最好缩进下一行。
    

  • 并列关系;为了代码美观,最好上下对齐。
    
    

    文档类型

  •     HTML5兼容性好,可兼容老版本XHTML的文档类型。
  • 字符集   ulf-8为目前最常用字符集,包含全世界所有国家所用字符。 中常用字符集还有gb2312(中文简体)、BIG5(繁体中文)、GBK(简体繁体皆兼容)。

HTML常用标签

  • 标题标签;六个等级,文字大小逐级递减。
    
    

    这是标题 1

    这是标题 2

    这是标题 3

    这是标题 4

    这是标题 5
    这是标题 6

     

  • 段落标签;

    文本内容

     

  • 水平线标签;该标签为单标签,hr后面写一个空格。

     

  • 换行标签;

div span标签;div独占一行,span可以一行存在多个。

独占一行
多个并行

粗体标签;

粗体
粗体
  • 斜体标签;
    斜体
    斜体

     

  • 加删除线标签;
    删除线
    删除线

     

  • 加下划线标签;
下划线
下划线
  • 注释标签:
     

    元素的属性和样式:

  • title属性:标记的标题,可以在鼠标移入该元素时显示出来

  • class属性:元素的类名,多个元素可以使用相同的类名,常用元素类名:

  1. header;logo;aside;bannner;nav;menu;rearch;

  2. scroll;main;content;list;title;service;hot;

  3. news;download;regsiter;partner;btn;footer;

  • id属性:元素的编号,id是唯一的。

  • style属性:元素的样式,用来书写CSS层叠样式表,常用样式:

  1. width/height
  2. color(赋值方式有英文、16进制和RGB)
  3. font-size:字体大小(使用px像素作为单位)
  4. line-height字体行高(可做文字居中垂直)
  5. text-align文字对齐方式(可做文字水平垂直)
  6. 可在浏览器中按F12,开发者工具中查看代码。

选择器

  • 统配选择器:在head里设置一个style标签,用选择器的样式的写法叫做内部样式表,该方法对当前页面有效(适量使用);
  • *(通配选择器):
  1. 类型选择器(如:div):获取所有该种元素;
  2. 类名选择器(.加上class属性的值):获取所有具有该类名的元素;
  3. id选择器(#加上id属性的值):获取具有该id值得元素;
  • 特殊用法:包含选择器(如#id.class)——获取第一种选择器后代中第二种选择器选中的元素。
  • 选择器的优先级:
  1. id选择器>class选择器>类型选择器>统配选择器。
  2. 包含选择器层级较多时,可以约分包含选择器:如#id.class的优先级高于#id,#id.class与.class#id相同。
  3. 如果多个选择器优先级一致:后面覆盖前面。

盒子模型

模型图:

前端学习总结笔记——入门(一)_第1张图片

 

不同位置的名字就不一一赘述了,图中可寻。

  • 外边距重叠:相邻的两个盒子,外边距和结合成一个单独和外边距。这种合并方式被称为折叠,并且因而所结合的外边距为折叠外边距,折叠结果遵循以下规则:
  1. 两个相邻的外边距都是正数时,折叠结果是两者中较大的值。
  2. 两个相邻的外边距都是负数时,折叠结果是两者绝对值较大的数。
  3. 两个相邻的外边距一正一负时,折叠结果是两者相加的值。

盒模型兼容问题的解决方法:

  • 在个种浏览器中,实际盒模型有两种结构:一种是常规盒模型(也称内容盒模型),一种是怪异盒模型(也称边框盒模型)。
  • 盒模型的公式(以水平方向为例):

      盒子的宽=width+ padding-left + padding-right + border-left-width +border-right-width 

  • 低版本的 IE 浏览器中用的是怪异盒模型,怪异和模型的特点:我们为元素所设置的宽为盒子的实际宽;而在标准和模型中则是内容宽。
  • 两种不同的和模型会导致我们设置的样式在不同浏览器中显示不同,为了解决这个问题css3中提出了一个样式 box-sizing:border-box/content-box(默认),该样式用来修改盒模型的种类。
  • 由于该样式是CSS3样式,低版本浏览器不兼容,一次易班我们将盒模型的值设置为border-box(怪异盒模型)来统一效果,并且该盒模型在页面布局时计算也会较为方便。

元素种类

区块元素:

  • 每个元素独占一行。
  • 支持所有样式。
  • 不设置宽高时宽度等于父元素宽度,不设置高度时高度为0,有内容时由内容撑开。
  • 不解析换行符。
  • 常见区块元素:div(盒子)、ul(无序列表)、ol(有序列表)、dl(定义列表)、li(列表的项)、p(段落)、h1-h6(标题)、table(表格)、form(表单)、pre(源代码)、hr(分割线)

内联元素:

  • 在一行内空间时,可以和非区块在同一行显示。
  • 不支持宽高样式,使用部分样式会出现问题。
  • 宽高完全由内容(文字图片等)撑开。
  • 换行符会被解析。
  • 常见的内敛元素:span(行间元素)、a(超链接)、b(加粗)、strong(加粗)、i(斜体)、em(斜体)、sub(下标)、sup(上标)、ins(表单项)、del(删除线)、img(图片)、input(表单项)、label(表单标记)、br(换行)

内敛块元素:

  • 在一行有空间时,可以和非区块元素同一行显示。
  • 支持所有样式。
  • 不设置宽高时完全由内容撑开。
  • 换行符会被解析。
  • 虽然img和input都是内联元素,但是他们表现的是内联块元素的效果,既可以设置宽高等样式。

在我们需要改变他们元素种类的时候可以用样式display的值修改样式,block(区块元素)、inline(内联元素)、inline-block(内联块元素)、none(不占位元素,既隐藏)

 

photoshop

  1. 在前端中的用途:切图、修图、测量。
  2. PS工具的快捷键:
  • 移动工具:v
    • 矩形选框工具(区块大小的测量工具):m
    • 裁切工具:c
    • 吸管工具和拾色器(文字颜色和背景颜色的测量工具):i
    • 横排文字工具(字体大小测量工具):t
    • 手抓:h 在当前工具上使用空格
    • 复制:ctrl + c
    • 粘贴(配合截屏:Print Screen):ctrl + v
    • 新建画布(如果复制版里有图会按照那张图的大小新建画布):ctrl + n
    • 保存:ctrl + s
    • 自由变形:ctrl + t
    • 放大:ctrl + 加号
    • 缩小:ctrl + 减号
    • 标尺:ctrl + r
    • 显示/隐藏辅助线:ctrl + h
    • 盖印选中图层:ctrl + e
    • 储存为web格式:ctrl + alt + shift + s
    • 盖印可见图层:ctrl + alt + shift + e
    • 历史记录

图层的使用:

  • 新建图层
  • 创建新组
  • 栅格化图层
  • 图层的顺序
  • 删除图层
  • 选区的变形、测量和截取

图片格式:

  • PSD:源文件(只能用PS打开)
  • JPG:不支持透明半透明,所有空白区域填充白色;使用:网页中的大图,高清图(体积大)
  • GIF:支持透明,不支持半透明;使用:网页中的小图标(动画图片)
  • png-8:支持透明,不支持半透明;使用:网页中的小图标
  • png-24:支持透明,也支持半透明;使用:图像中存在半透明效果的图片

你可能感兴趣的:(前端学习总结笔记——入门(一))