前端学习总结笔记 ——入门（一）
什么是前端
狭义：使用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：支持透明，也支持半透明；使用：图像中存在半透明效果的图片
963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
