前端基础

前端基础学习

学习方法:听-->写-->分享

学习目标: 基础静态代码网页布局-->首页/注册/列表页面

HTML5标签 CSS3样式

HTML

HTML:超文本标记语言 (Hyper Text Markup Language) 用来描述网页的一种语言 网页元素

网页 网站是网页的集合 网页是构成网站的基本元素 俗称HTML文件

常用浏览器

Web标准 结构(html) 表现(css) 行为(javascript)

浏览器内核

W3C 万维网联盟

语法规范

标签:

  • 图像标签

    图像标签:img 宽高之设置一个属相 另一个等比例伸缩 src必须先写 其他属相无先后顺序 中间空格分开

     替换文本 当图片无法显示时展示
    
  • 表格标签

    主要用于显示\展示数据

    • table 表格

    • tr 行 table row

    • td 单元格 table data

    • th 表头单元格

    • thead 头部区域

    • tbody 主题区域

    • 列表标签

      无序列表

      有序列表

      自定义列表

    • 表单标签

      收集用户信息

      表单域

      把范围内的信息提交给后台

      表单控件

      提示信息

    目录文件加

    根目录

    路径

    • 相对路径 同级路径 下一级路径(文件夹名/) 上一级路径(../)
    • 绝对路径 很少用 自己电脑中的图片和网上的图片

    CSS层叠样式表

    CSS简介

    网页的美容师 解决html本身的局限性

    由html专注去做结构呈现,实现结构(html)与样式(css)相分离

    编码规范

    选择器{样式}

    给谁用(用什么样式)

    p{

    color:red;
    
    font-size:12px
    

    }

    CSS基础选择器
    • 标签选择器

      使用标签名做选择器

    • 类选择器

      样式点定义 结构类调用 一个或多个 开发最常用

      多类名调用 相同的抽取

    • id选择器

      样式#号定义,结构id调用.只能调用一次

      经常与js搭配使用

    • 通配符选择器

      星号 影响页面中所有的标签和元素

    CSS字体属性

    font-family:

    font-size: 16px

    font-weight: 700-->400等同于normal,700等同于bold;

    font-style:italicc(倾斜) normal(修改成正常字体)

    复合属性 需要严格遵守顺序 font: font-style font-weight font-size/line-height font-family -->size和family不能省略

    font: italic 700 16px 'Microsoft yahei'

    CSS文本属性
    • 文本颜色: text-color 预定义颜色值 十六进制 rgb

    • 对齐文本 text-align center right left 水平对齐

    • 装饰文本 text-decoration none(去掉超链接的下划线) underline line-through

    • 文本缩进 text-indent: 2em; 段落的首行缩进

    • 行间距 line-height (上间距+文字本身高度+下间距) 行高 文字垂直居中 : 文字行高等于盒子高度

    CSS的引入方式

    根据书写的位置(或者引入方式)分为三大类

    • 行内样式表(行内式)

      修改一些简单的少的样式 直接在标签内声明使用 权重中 完全无分离(结构与样式)

    • 内部样式表(嵌入式)

      style 理论上可以放在页面的所有地方,但习惯上放在head 部分分离

    • 外部样式表(引入式)

      单独使用css文件 使用最多

    Chrome调试工具

    箭头选择网页中的元素 -- >左面html 右面style --> 检出出没有使用到的代码

    emmet语法

    快速生成标签/样式的语法 vocode自带集成

    • 标签名+tab键 快速生成标签

    • 标签名*要批量生成的标签个数+tab键 批量生成标签

    • 标签名>变签名 父子关系快速生成

    • 标签名+标签名 兄弟关系快速生成

    • 标签名.类名(#id名) 快速生成带样式的标签 默认成生成div标签可以省略标签名

    • $自增符号 批量生成时使用

    • {文字}生成带文字的标签

    • 样式元素书写 w100等效于 width:100px 首字母+赋值

    • 快速格式话代码 格式化文档 修改成保存页面的时候自动个格式化代码

      1.文件-->首选项-->设置;2.搜索emmet.include;3.settings.json[用户]中添加代码 "editor.formatOnType":true,"editor.formatOnSave":true

    css复合选择器
    • 后代选择器

      元素1 元素2 {样式声明} 元素2生效元素1必须是父类 可以是任意基础选择器的组合

    • 子选择器

      元素1>元素2(样式声明) 亲儿子选择器

    • 并集选择器

      元素1,元素2{样式声明} 集体声明 可以任意选择器组合 语法规范:竖着写

    • 伪类选择器的使用规范

      用于向默写选择器添加特殊的效果,比如给链接天界特殊效果,或选择第n个元素

      :表示 :frist-child(第一个子元素)

      • 链接 a:link{}--没有点击过的链接 a:visited{}--已经点击过的链接 a:hover{}(光标当前指向) a:active{}--鼠标按下时的

        开发常用a{}和a:hover{}结合使用

        注意声明顺序 链接中的样式需要单独指定

      • 获取焦点 :focus

    元素的显示模式与相互转换

    元素以什么方式进行显示

    • 块元素

      • 独占一行
      • 宽高间距都可以定义控制
      • 默认和父类宽相同
      • 注意 文字元素内不要再放块元素 p h
    • 行内元素

      • 一行可以显示多个
      • 宽高无法直接赋值
      • 默认的宽度是本身文本的宽度
      • 行内元素只能放文本元素或其他行内元素
    • 行内块元素

      • 一行上可以放多个元素 中间会有间隔
      • 默认宽度是文本本身
      • 可以设置宽高
  • 显示模式转换

    a标签增加触发范围---->display:block 使用最多

    display:inline display:inline-block

  • 背景图片的设置方式
    • 背景颜色 background-color:transparent|color;

    • 背景图片 background-image:url();

      超大或装饰性图片或logo 优点是便于控制位置

      • background-repeat 背景平铺
      • background-position:方位名词|
    css的三大特性
    注释
    PS

    snipaste 工具 截图置顶取色

    javascript

    基础知识

    编程语言 (标记语言html)

    脚本语言就是不用编译 逐行解释

    作用:表单动态验证 网页特效 服务端开发(node.js) 桌面程序(electron) app(cordova) 硬件物联网(Ruff) 游戏开发(cocos2d-js)

    组成部分
    • ECMSScript JavaScript语法

    • DOM 网页文档对象模型 API 对元素操作

    • BOM 浏览器对象模型 API 对浏览器窗口操作

    常用输出语句
    • alert(msg) 浏览器弹出警示框
    • console.log(msg) 浏览器控制台打印输出信息
    • prompt(info) 浏览器弹出输入框,用户可以输入
    变量

    变量的本质是在内存中申请一块用来存放数据的空间.

    变量的声明 var age; variable

    变量的赋值 age = 10;

    变量的初始化 var age = 10;

    声明多个变量 ,号分割

    undfined 未定义的

    逻辑性:怎么实现目标的思路-->先怎么做,再怎么做

    数据类型

    不同的数据所占用的存储空间不同

    javaScript是一种弱类型或者动态语言(变量的数据类型会随着赋值的改变而改变) 声明的时候不用声明变量类项,程序运行的时候根据赋值自动确认

    • 简单数据类项

      • Number 整数和小数 Mumber.MAX_VALUE infinity(无穷大) NAN(not a number 非数字) 方法isNAN()

      • String 单引号和双引号都可以 为了区别于html中的双引号js中建议使用单引号 嵌套的时候外单内双

        转义符 \n(换行)

        长度 str.length 拼接:+

      • Boolean 参与加法运算的时候true当0来看 false1

      • Undined 未定义数据类型

      • null

    • 复杂数据类项 object

    获取数据类项:typeof 变量

    控制台的颜色区分数据类项

    字面量 根据数据的书写方式知道数据的数据类型

    • 数据类项的转换
      • 装换成字符串 三种 常用+''方式(隐式转换)
      • 转换成数字形 四种 常用两种 parseInt(变量) parseInt(120px)可以去除单位 parseFloat(变量)
      • 转换成Boolean Boolean() 代表空和未定义的值会变成false,剩余的都转换成true
    运算符

    操作符

    • 算数运算符 不能直接判断浮点数是否相等

      表达式(数字\运算符\变量组成的式子) 返回值

    • 递增和递减运算符 ++num(前置递增) 变量(后置递增) (先返回原值后自增) num--;

    • 比较运算符

      == 运算符判断是否相等的时候会默认转换数据类项后再比较

      === 全等判断 要求值和数据类项都相同

    • 逻辑运算符

      布尔值参与的逻辑运算

      && || !

      短路运算 非布尔值参与 逻辑中断

      空或者否定为false 其他为true

      • && 表达式1&&表达式2-->如果表示式1为真 则返回表达式2, 如果表达式1为加假 则返回表达式2
      • || 表达式1||biaods2-->如果表达式1结果为真 则发挥表达式1, 如果表达式1结果为假 则发挥表达式2
    • 赋值运算符

      = += -= *= /= %=

    运算符的优先级 按权重排列

    1. 小括号
    2. 一元运算符 ++ -- !
    3. 算数运算符 先*?%后+-
    4. 关系运算符 < > >= <=
    5. 相等运算符 == != === !==
    6. 逻辑运算符 先&&后||
    7. 赋值运算符 =
    8. 逗号运算法 ,

    流程控制

    控制代码按照什么结构顺序来执行

    顺序结构
    分支结构
    1. if语句

      三元表达式 条件表达式?表达式1:表达式2

    2. switch语句

    3. 循环

      for 常用

      while

      do while

      \
      数组

      一组数据的集合 存在单个变量中

      数组的索引号从0开始

      访问

      有点意思

      遍历

      修改length长度 扩容

      追加

      筛选

    循环结构

    编译语言(java 先编译再运行 做好整桌菜后再吃) 解释语言(逐行解释执行 吃火锅)

    AJAX

    无刷新的和服务器进行交互

    DOM

    dom是一种文档对象模型,同时也是用于html编程的接口,通过dom来操作页面中的元素

    HTML DOM 定义了所有 HTML 元素的对象属性,以及访问它们的方法

    换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

    Vue.js

    渐进式javascript框架

    核心是使用简单的模板语法声明式的方式把数据渲染进DOM的系统

    使用:标签引入或者cli快速生成复杂项目

    可以在输出台直接修改属性值页面也会立即响应

    Vue基础

    • JavaScript框架

    • 简化Dom操作

    • 响应式数据驱动

    .vue文件 -->vue的单文件组件

    常用指令 attribute

    指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute

    • v-bind 将这个元素节点的 title attribute 和 Vue 实例的 messageproperty 保持一致”。
    • v-if

      通过控制属性seen达到控制元素p的显示或隐藏

    • v-for 循环
    • {{ todo.text }}
    • 将数组todos中的text中的数据列表展示
    • v-on 按钮的点击事件调用ReverseMessage方法 this.message = this.message.split('').reverse().join('')
    • v-model 表单输入和应用状态之间的双向绑定

    vue的组件概念

    一个可以复用的拥有预定义选项的vue实例

    众多独立的组件构成一个大的应用

    小型 独立 可复用

    非常类似于自定义元素

    数据与方法 实例property

    除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $,以便与用户定义的 property 区分开来

    生命周期

    • crtated 在实例创建完成后被立即调用
    • beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用
    • mounted 实例被挂载后调用
    • beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
    • updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
    • activiated 被 keep-alive 缓存的组件激活时调用。
    • deactivated 被 keep-alive 缓存的组件停用时调用。
    • beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。
    • destoryed 实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
    • errorCaptured 2.5.0+ 新增 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

    本地应用

    网络应用

    综合应用

    1.标题语法: # 注意空格分隔

    段落语法: 使用空白行将文字分隔 不要使用空格缩进

    换行语法: 结尾空格 结尾处两个或以上空格加回车键 等效于html的

    强调语法: 粗体Bold(前后加两个星) 斜体Italic(前后加一个星)

    引用语法:段落前加>

    this is example.

    那这个考研干部?

    你可能感兴趣的:(前端基础)