超硬核万字！web前端学霸笔记，学完就去找工作吧

水平线

---

实体:

   <  >  &  "

注释:

在网页中插入列表及相关属性的设置。

有序列表

• ..

• 无序列表
• ..

• #第四章 构建页面（二）

  ============

  在网页中插入图片及常用相关属性（src、alt）。

  在网页中设置热区。

  

  ·id属性和name属性表示名称，设置为相同值，与标签的usemap属性匹配。创建       图像与热区之间的关系

  ·alt属性：该区域的替代文本；

  shape属性：该区域的形状；（rect、circle、poly）

  coords属性：该区域在原始图片上的坐标值。

  href属性：该区域的链接地址；

  在网页中插入超链接及常用相关属性（href、target）

  href:链接地址

  target：目标窗口在何处打开

  _blank：在新窗口打开

  _self：在当前窗口打开

  _parent：在父窗口打开

  _top：在顶层窗口打开

  锚的应用。

  锚点：网页中的某一位置。

  锚点链接：在同一个页面跳到指定位置的方式。

  创建锚点链接：

  ①建立锚点

  锚（显示在页面上的文本）

  ②创建指向该锚的链接

  ……

  相对路径、绝对路径的概念。

  在网页中使用内联框架（iframe）。

  标签的常用属性是:

  src：文件的路径

  width： “内联框架”区域的宽度

  height：“内联框架”区域的高度

  scrolling：规定是否在 iframe 中显示滚动条：

  No：不出现滚动条  Yes：显示滚动条  Auto：自动出现滚动条

  frameBorder：设置是否显示框架的边框。(1，0)

  name：框架的名字，用来进行识别。

  #第五章 构建页面（三）

  ============

  在网页中插入表格及简单样式修饰。

  词汇(标签)：

  语法：1. 成对出现 2. 嵌套于

  标签内

  语义：定义一行 

  词汇(标签)：

  语法：1. 成对出现 2. 嵌套于标签内

  语义：定义表头 

  词汇(标签)：

  语法：1. 成对出现 2. 位于内

  语义：定义一个单元格

  相关属性

  width:规定表格元素的宽度（pixels或%）

  bgcolor：表格背景颜色

  background：表格背景图

  align：表格的对齐方

  border： 表格边框的宽度（pixels）

  bordercolor：表格边框的颜色

  cellpadding :  单元边沿与其内容之间的距离

  cellspacing :   单元格之间的空白（pixels或%）

  colspan:跨列

  rowspan:跨行

  在网页中插入表单及简单样式修饰。

  标签： 

  action：规定当提交表单时向何处发送表单数据 值：URL

  method：规定用于发送 form-data 的 HTTP 方法。 值：get/post

  标签：

  text

  password

  radio

  checkbox

  file

  submit

  button

  reset

  ... .. .. ..

  #第六章 HTML4.01与HTML5

  ===================

  HTML5与HTML4.01。

  定义嵌入对象      html4     html5

        定义外部交互内容或插件   html5

  定义声音内容             html5

  定义视频                     html5

  HTML多媒体概述。

  video与audio。

  object与embed

  多媒体元素基本属性和常用方法。

  Canvas基础知识。

  使用canvas绘制简单图形。

  HTML样式修饰性标签介绍

  font规定文本的字体、字体尺寸、字体颜色。

  < font  color=“red” size=“5” face=“黑体”>< /font >

  strong用于强调文本

  你好

  b规定粗体文本

  你好

  #第七章 CSS语言基础

  ============

  为什么使用CSS。

  1、针对元素样式设置的属性太少

  2、修改元素样式太麻烦

  3、控制元素样式的代码冗余度过高

  更专业的样 式修饰方法

  更简约的布 局方法

  更简便的样 式修饰方法

  改一处动全局的方法

  CSS简介。

  CSS是 Cascading Style Sheet 的缩写。译作 「层叠样式表」。 是用于(增强)控制网页样式       并允许将样式与网页 内容分离的一种标记性语言。

  CSS的基本语法：CSS代码是由一条条语句构成，而每一条语句的结构，都基本相同

  样式写法：选择器 {属性：属性值；属性：属性值；… }

  选择器

  1、标签选择器——选择器是HTML标签。影响整个页面中该种标签的样式。

  2、类选择器——以“.”开头定义的选择符。影响所有以class属性引用该类的标签样式。

  注意：类名的第一个字符不能使用数字

  元素可以加入多个类。把各个类名放在class属性中，各个类名之间用一 个空格分              隔。类名的顺序并不重要。

  3、id选择器——以“#”开头定义的选择符。影响以id属性引用该选择符的标签样式。

  单一页面中，一个id选择器只能使用一次！

  样式表

  1、行内样式——在元素标签内通过style属性添加样式

  用途：指定网页中个别元素的显示效果。不符合 样式与内容分离原则不推荐用

  2、页内样式——在head部分的style标签内添加样式

  用途：对页面中某些标签或元素设置样式风格。控 制当前页面样式，维护较困难

  3、外部样式——引用外部建立的.css文件

  用途：可同时控制多个页面，适用于各类大型网站， 可用性最强，推荐使用。

  样式优先级：

  1、ID选择器 > 类选择器> 标签选择器

  2、行内样式>页内样式>外部样式

  3、就近原则，距离元素最近的样式优先级最高

  注释方法： /*…*/  多行注释

  多个样式，在同一内容上共同实现， 叫做：CSS样式的叠加

  文档中的某些元素，将沿用为其父元素所设置的 样式，这种特点叫做：CSS样式的可继承性

  结构和样式分离思想。

  CSS基本应用示例。

  #第八章 文本样式和字体样式

  ==============

  CSS字体相关类样式修饰。

  字体系列：font-family：‘宋体’，‘仿宋’；

  字体大小：font-size：20px;(2em;)

  字体风格：font-style:italic(normal\italic\oblique);

  字体加粗：font-weight:900;(100~900;)(lighter\normal\bold\bolder)

  字体综合设置：font:italic  bold  36px  ‘宋体’;

  CSS文本类样式修饰。

  文本缩进：text-indent:2em;(20px;)

  水平对齐：text-align:left(right\center)

  文本修饰：text-decoration:none;(underline\line-through\blink)

  文本颜色：color:red;(#000000;)

  行高：line-height:2em;(20px;)

  #第九章 超链接和伪类

  ===========

  CSS超链接的修饰。

  未被访问的超链接a:link

  鼠标经过超链接a:hover

  链接被点击的那一刻a:acitve

  访问过的超链接a:visited

  特定顺序设置： :link ，:visited，:hover, :active

  超链接应用

  CSS伪类的使用方法。

  CSS伪元素的使用方法。

  #第十章 背景样式和列表样式

  ==============

  CSS背景类样式修饰

  背景色：background-color

  关键字（gray）

     十六进制表示方式（#808080）

     rgb表示方式，如：rgb（128,128,128）

  背景图像：background-image

  background-image:url(images/f1.png)

  背景重复：background-repeat:repeat-x;

  repeat;默认

  repeat-x;

  repeat-y;

  no-repeat;

  inherit;继承父元素

  背景定位：background-position:50%50%;

  center

  top

  bottom

  right

  left

  背景综合属性：background

  background:red   url(images/11.png)   no-repeat  center;

  CSS列表类样式修饰

  列表类型：list-style-type

  none   无

  circle  空心圆

  square   实心方块

  decimal  数字

  lower-alpha  小写英文

  列表项图像：list-style-image

  url（images/f1.png）

  列表标志位置：list-style-position

  outside

  inside

  列表综合设置

  list-style:square   inside   url(images/f1.png)

  #第十一章 网页布局

  ==========

  布局简介: 网页布局是指网页内容 在页面上所处位置的设计。

  布局概念

  页面尺寸：

  分辨率:800x600时，页面尺寸:780x428个像素

  分辨率:640x480时，页面尺寸:620x311个像素

  分辨率:1024x768时，页面尺寸:1005x600个像素

  布局常见版式

  布局的方法

  布局思想：由整体到局部

  结构性标签div、span

  Div

  • div相当于一个容器（盒子）

  • div标签可以把文档分割为独立的、不同的部分

  • 通过id或class属性区分不同的容器

  div具有盒子模型的所有属性， 布局时用来控制元素之间的距离和相对位置

  应用浮动float

  浮动：定义元素在哪个方向浮动，改变页面中对象的前后流动顺序

  Left        左浮动

  Right      右浮动

  None      不浮动

  Inherit    继承父元素float属性

  float所产生的问题

  1. 浮动元素距离父元素边框的位置，是该侧的父元 素padding+自身margin的值

  2. 通常不会超过父元素的边界

  3. 元素一旦浮动就不属于父元素了

  4. 浮动元素不会相互重叠

  5. 不能上下浮动，通常只设一种浮动即可

  6. 如果父元素宽度不够，浮动元素会另起一行显示。

  Overflow

  1、父元素不设高度并且子元素浮动时，使父元素高度自 动适应子元素高度。

  2、父元素设置的高度或宽度小于子元素时，使父元素出 现相应滚动条或隐藏子元素超出部分内容

  Clear

  用来设置该元素边上没有其他元素可以浮动

  clear: left / right / both / none

  相对定位、绝对定位

  ✓ 绝对定位

  ✓ position:absolute

  •1、与left，right，top，bottom等属性共同使用

  •2、如果父元素未设置position属性，则以浏览器 窗口左上角为起始位置

  •3、如果父元素设置了position属性，则以父元素 左上角为起始位置

  ✓ 相对定位

  ✓ position:relative

  •1、与left，right，top，bottom等属性共同使用

  •2、以自身本应在的位置为起始位置

  float和position相似点：

  1、都是将元素浮动起来

  2、元素一旦设置就与父元素没关系了 float和position

  不同点：

  1、position与top、left等配套使用

  2、float位置移动通过margin、padding等实现

  3、overflow和clear对position无效

  4、布局通常使用float，而不是position

  布局示例。

  #第十二章 CSS盒子模型

  =============

  行内元素、块级元素的概念及display属性的用法。

  CSS盒子模型简介。

  Web中的盒子：一个矩形区域，内容包裹在盒子中。盒子的 堆叠与嵌套形成整个页面的内容排布。

  盒子模型

  宽度

  高度

  边框

  内边距

  外边距

  根据HTML元素的显示特征，可分为：

  ➢块级元素（block level element）

  • 元素在显示时会独占一行，并同时具有宽、高、内外边距特征。

  • 举例：form – 交互表单 ，h1 – 1级标题 ，hr – 水平分隔线 ，p – 段落 ，table – 表格 ，ul – 无序列表

  ➢行内元素（inline element）

  • 在显示时通常不会以新行开始，横向排列，到最右端自动折行。

  • 举例：a – 链接 ，img – 图片 ，input – 输入框 ，select – 项目选择 ，font – 字体设定 ，b – 粗体 ，i – 斜体 ，strong – 粗体强调

  Display：block/inline/none；

  border-top  上边框

  border-right  右边框

  border-bottom  下边框

  border-left  左边框

  ➢边框的宽度：border-width

  ➢边框的颜色：border-color

  ➢边框的样式：border-style

  border-width：20px；四面

  border-width：20px 10px；上下，左右

  border-width：20px 10px 5px 10px；上右下左

  复合

  border：width style color；       border:1px solid #cccccc；

  padding、margin与border相同

  #第十三章 CSS高级内容

  =============

  CSS高级选择器

  分组选择器

  派生选择器

  最后：

  总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

  面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  排布。

  盒子模型

  宽度

  高度

  边框

  内边距

  外边距

  根据HTML元素的显示特征，可分为：

  ➢块级元素（block level element）

  • 元素在显示时会独占一行，并同时具有宽、高、内外边距特征。

  • 举例：form – 交互表单 ，h1 – 1级标题 ，hr – 水平分隔线 ，p – 段落 ，table – 表格 ，ul – 无序列表

  ➢行内元素（inline element）

  • 在显示时通常不会以新行开始，横向排列，到最右端自动折行。

  • 举例：a – 链接 ，img – 图片 ，input – 输入框 ，select – 项目选择 ，font – 字体设定 ，b – 粗体 ，i – 斜体 ，strong – 粗体强调

  Display：block/inline/none；

  border-top  上边框

  border-right  右边框

  border-bottom  下边框

  border-left  左边框

  ➢边框的宽度：border-width

  ➢边框的颜色：border-color

  ➢边框的样式：border-style

  border-width：20px；四面

  border-width：20px 10px；上下，左右

  border-width：20px 10px 5px 10px；上右下左

  复合

  border：width style color；       border:1px solid #cccccc；

  padding、margin与border相同

  #第十三章 CSS高级内容

  =============

  CSS高级选择器

  分组选择器

  派生选择器

  最后：

  总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

  面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】