前端学习总结笔记 ——入门(一)
什么是前端
狭义:使用HTML、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网络产品,涵盖pc端、移动端网页、处理视觉和交互问题。
广义:所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域。
前端需要了解的知识
- 网站和网页:网站指的是整站,而网页值得是单独页面。
- 主页和内页:主页的名字必须是index,通过主页的超链接跳转至内页。
- 内页的信息:包括内页所有可以展现的内容,文字、图片、超链接、视频、音频等。
- 动态页面和静态页面:几台页面的东西是固定不变的,动态页面内容会根据用户的操作和实际情况改变,其中的数据从后台获。
- 前端和后端:前端处理页面展示效果和用户交互,后端处理数据在服务器进行增、删、改、查、等。
-
常用工具简介
- 常用编辑器:VSCODE、Sublime.....
- 常用浏览器:火狐浏览器(Gecko内核)、谷歌浏览器(Webkit内核)、IE浏览器(Trident内核)
国内浏览器早年使用的是IE的Trdent内核,现在基本为Webkit或者Webkit和Trident双内核浏览器。
-
设计与测量工具:Photoshop
HTML、CSS初识
HTML标签关系
- 嵌套关系; 父子标签关系时,为了代码美观规范,子元素最好缩进下一行。
<head>
<title></title>
</head>
- 并列关系;为了代码美观,最好上下对齐。
<head></head> <body></body>
文档类型
- <!DOCTYPE html> HTML5兼容性好,可兼容老版本XHTML的文档类型。
- 字符集 ulf-8为目前最常用字符集,包含全世界所有国家所用字符。 中常用字符集还有gb2312(中文简体)、BIG5(繁体中文)、GBK(简体繁体皆兼容)。
HTML常用标签
- 标题标签;六个等级,文字大小逐级递减。
<h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
- 段落标签;
<p>文本内容</p>
- 水平线标签;该标签为单标签,hr后面写一个空格。
<hr />
- 换行标签;
<br />
div span标签;div独占一行,span可以一行存在多个。
<div>独占一行</div>
<span>多个并行</span>
粗体标签;
<b>粗体</b>
<strong>粗体</strong>
- 斜体标签;
<i>斜体</i> <em>斜体</em>
- 加删除线标签;
<s>删除线</s> <del>删除线</del>
- 加下划线标签;
<u>下划线</u>
<ins>下划线</ins>
- 注释标签:
<!--注释 -->
元素的属性和样式:
-
title属性:标记的标题,可以在鼠标移入该元素时显示出来
-
class属性:元素的类名,多个元素可以使用相同的类名,常用元素类名:
-
header;logo;aside;bannner;nav;menu;rearch;
-
scroll;main;content;list;title;service;hot;
-
news;download;regsiter;partner;btn;footer;
-
id属性:元素的编号,id是唯一的。
-
style属性:元素的样式,用来书写CSS层叠样式表,常用样式:
- width/height
- color(赋值方式有英文、16进制和RGB)
- font-size:字体大小(使用px像素作为单位)
- line-height字体行高(可做文字居中垂直)
- text-align文字对齐方式(可做文字水平垂直)
-
可在浏览器中按F12,开发者工具中查看代码。
选择器
- 统配选择器:在head里设置一个style标签,用选择器的样式的写法叫做内部样式表,该方法对当前页面有效(适量使用);
- *(通配选择器):
- 类型选择器(如:div):获取所有该种元素;
- 类名选择器(.加上class属性的值):获取所有具有该类名的元素;
- id选择器(#加上id属性的值):获取具有该id值得元素;
- 特殊用法:包含选择器(如#id.class)——获取第一种选择器后代中第二种选择器选中的元素。
- 选择器的优先级:
- id选择器>class选择器>类型选择器>统配选择器。
- 包含选择器层级较多时,可以约分包含选择器:如#id.class的优先级高于#id,#id.class与.class#id相同。
- 如果多个选择器优先级一致:后面覆盖前面。
盒子模型
模型图:
不同位置的名字就不一一赘述了,图中可寻。
- 外边距重叠:相邻的两个盒子,外边距和结合成一个单独和外边距。这种合并方式被称为折叠,并且因而所结合的外边距为折叠外边距,折叠结果遵循以下规则:
- 两个相邻的外边距都是正数时,折叠结果是两者中较大的值。
- 两个相邻的外边距都是负数时,折叠结果是两者绝对值较大的数。
- 两个相邻的外边距一正一负时,折叠结果是两者相加的值。
盒模型兼容问题的解决方法:
- 在个种浏览器中,实际盒模型有两种结构:一种是常规盒模型(也称内容盒模型),一种是怪异盒模型(也称边框盒模型)。
- 盒模型的公式(以水平方向为例):
盒子的宽=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
- 在前端中的用途:切图、修图、测量。
- 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:支持透明,也支持半透明;使用:图像中存在半透明效果的图片