若鲸游

JavaScript知识点JavaScript是什么1、运行在客户端的脚本语言 2、脚本语言：不需要翻译，运行过程中由js解释器逐行进行解释并执行 3、目前也可基于Node.js技术进行服务端编程 JavaScript权威网站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 浏览器执行JS简介 渲染引擎：用来解析HTML与CSS，俗称内核，比如：chrome浏览器的blink，老版本的webkit JS 引擎：也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行，比如： chrome 浏览器的 V8 浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。 JS引擎执行代码时逐行解释每一句源码(转换为机器语言)，然后由计算机去执行,所以JavaScript 语言归为脚本语言,会逐行解释执行。 JS的组成 JavaScript语法—-ECMAScript: 是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用厂泛，它往往 ...

day09-小兔鲜儿01-搭建项目目录 xtx-pc images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等 uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片 iconfont 文件夹：字体图标素材 css 文件夹：存放 CSS 文件（link 标签引入） base.css：基础公共样式 common.css：各个网页相同模块的重复样式，例如：头部、底部 index.css：首页 CSS 样式 index.html：首页 HTML 文件 引入样式表1234<link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/common.css"><link re ...

day08-CSS高级 目标：掌握定位的作用及特点；掌握 CSS 高级技巧 01-定位作用：灵活的改变盒子在网页中的位置 实现： 1.定位模式：position 2.边偏移：设置盒子的位置 left right top bottom 相对定位position: relative 特点： 不脱标，占用自己原来位置 显示模式特点保持不变 设置边偏移则相对自己原来位置移动 12345div { position: relative; top: 100px; left: 200px;} 绝对定位position: absolute 使用场景：子级绝对定位，父级相对定位（子绝父相） 特点： 脱标，不占位 显示模式具备行内块特点 设置边偏移则相对最近的已经定位的祖先元素改变位置 如果祖先元素都未定位，则相对浏览器可视区改变位置 123456789.father { position: relative;}.father span { position: absolute; top: 0; right: 0;} ...

day07-学成在线01-项目目录网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。 首页引入CSS文件 123<!-- 顺序要求：先清除再设置 --><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css"> 02-版心居中 12345678.wrapper {  margin: 0 auto;  width: 1200px;}body { background-color: #f3f5f7;} 03-布局思路 布局思路：先整体再局部，从外到内，从上到下，从左到右 CSS 实现思路 画盒子，调整盒子范围 → 宽高背景色 调整盒子位置 → flex 布局、内外边距 控制图片、文字内容样式 04-header区域-整体布局 ...

day06-Flex布局 目标：熟练使用 Flex 完成结构化布局 01-标准流标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。 02-浮动基本使用作用：让块元素水平排列。 属性名：float 属性值 left：左对齐 right：右对齐 1234567891011121314151617181920212223<style> /* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */ .one { width: 100px; height: 100px; background-color: brown; float: left; } .two { width: 200px; height: 200px; background-color: orange; /* float: left; */ float: right; }</style><div class="one&qu ...

day05-盒子模型 目标：掌握盒子模型组成部分，使用盒子模型布局网页区域 01-选择器结构伪类选择器基本使用作用：根据元素的结构关系查找元素。 123li:first-child {  background-color: green;} :nth-child(公式) 提示：公式中的n取值从 0 开始。 伪元素选择器作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。 123456div::before {  content: "before 伪元素";}div::after {  content: "after 伪元素";} 注意点： 必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可 伪元素默认是行内显示模式 权重和标签选择器相同 02-PxCookPxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。 开发面板（自动智能识别） 设计面板（手动测量尺寸和颜色） 使用方法：创 ...

day04-CSS进阶 目标：掌握复合选择器作用和写法；使用background属性添加背景效果 01-复合选择器定义：由两个或多个基础选择器，通过不同的方式组合而成。 作用：更准确、更高效的选择目标元素（标签）。 后代选择器后代选择器：选中某元素的后代元素。 选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。 123456789<style>  div span {    color: red;  }</style><span> span 标签</span><div>  <span>这是 div 的儿子 span</span ></div> 子代选择器子代选择器：选中某元素的子代元素（最近的子级）。 选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。 12345678910111213<style>  div > span {    color: red;  & ...

day03-CSS基础 目标：掌握 CSS 属性基本写法，能够使用文字相关属性美化文章页。 01-CSS初体验层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。 书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。 12345678910<title>CSS 初体验</title><style> /* 选择器 { } */  p { /* CSS 属性 */    color: red;  }</style><p>体验 CSS</p> 提示：属性名和属性值成对出现 → 键值对。 02-CSS引入方式 内部样式表：学习使用 CSS 代码写在 style 标签里面 外部样式表：开发使用 CSS 代码写在单独的 CSS 文件中（**.css**） 在 HTML 使用 link 标签引入 1<link rel=&q ...

day02：列表、表格、表单 目标：掌握嵌套关系标签的写法，使用列表标签布局网页 01-列表作用：布局内容排列整齐的区域。 列表分类：无序列表、有序列表、定义列表。 无序列表作用：布局排列整齐的不需要规定顺序的区域。 标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。 123456<ul>  <li>第一项</li>  <li>第二项</li>  <li>第三项</li> ……</ul> 注意事项： ul 标签里面只能包裹 li 标签 li 标签里面可以包裹任何内容 有序列表作用：布局排列整齐的需要规定顺序的区域。 标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。 123456<ol>  <li>第一项</li>  <li>第二项</li>  <li>第三项</li> ……</ol> 注意事项： ol 标签里面只能包裹 li 标签 li 标签里面可以包裹 ...

阶段目标：掌握HTML、CSS常用布局技巧，能够独立制作网页。 day01：HTML 基础 目标：掌握标签基本语法，能够独立布局文章页。 01-今日课程介绍 今日目标：掌握标签基本语法，能够独立布局文章页。 核心技术点 网页组成 排版标签 多媒体标签及属性 综合案例一 - 个人简介 综合案例二 - Vue 简介 02-标签语法HTML 超文本标记语言——HyperText Markup Language。 超文本：链接 标记：标签，带尖括号的文本 标签结构 标签要成对出现，中间包裹内容 <>里面放英文字母（标签名） 结束标签比开始标签多 / 标签分类：双标签和单标签 123<strong>需要加粗的文字<strong><br><hr> 03-HTML骨架 html：整个网页 head：网页头部，用来存放给浏览器看的信息，例如 CSS title：网页标题 body：网页主体，用来存放给用户看的信息，例如图片、文字 12345678<html> <he ...