笔记 会学习、会分享 能进步 好玩

day01
1.阿里云服务器购买
2.阿里云服务器环境配置(ubuntu16.04 + apache2 + jdk1.8 + mysql-server-5.7)
购买链接:https://developer.aliyun.com/plan/grow-up
手机端注册
会员名:中文+数字
手机号:自己手机号
登录
实名认证
刷新刚刚购买页面
(注意这个是新人+学生专享的活动)

购买完毕后,重置服务器root用户密码,然后牢记

	连接阿里云服务器
		1)通过可视化软件 Xshell / Putty
    1. 云服务器的地址
      47.101.151.68
    2. 账号 密码
      输入密码时,控制台不会显示密码的内容和长度,直接输入你的密码,输完成后按回车
		2)windows/mac终端
			>ssh [email protected] 
  3)阿里云官网控制台 远程连接

  阿里云安装服务
	1)✅Apache静态服务器
		# apt update    // 用来更新软件源
		# apt install apache2
		Apache部署目录
			/var/www/html
  找到Apache默认页面的位置 
  cd /var/www/html/
  ls
  index.html
  vi index.html
    按两次d 删除当前行
    shift+i进入编辑模式
	2)✅Java环境jdk
		apt install openjdk-8-jre-headless
		测试
			java -version
	3)✅MySQL数据库
		apt install mysql-server-5.7
		测试
			# mysql -uroot -p
		修改配置文件=> 可以实现远程连接阿里云的数据库
		1) mysql> use mysql   切换数据集
		2) mysql> select user,host from user;
		3) mysql> update user set host='%' where user='root';
		4) # cd /etc/mysql/mysql.conf.d
		   # vi mysqld.cnf
		   找到bind-address,将光标定位到127的位置,然后按 i 进入插入模式
		   将127.0.0.1 修改为 0.0.0.0
		   按 esc 退出插入模式
		   按:(英文冒号)进入底行模式
		   输入 wq 点击回车(保存并退出)
		5)重启mysql服务
			# service mysql restart
  6)阿里云防火墙的3306端口是否打开
     腾讯云(安全组)
3.本地软件安装
  navicat安装
    1. 自定义安装
    2. 目标文件夹直接改盘符 改为C盘之外的
    3. 选择创建桌面快捷方式
    4. 安装
    5. 广告勾选掉
    6. 完成
  navicat连接云数据库
    1. 菜单栏左上角-连接-mysql
    2. 连接名暂时不填
    3. 主机名或IP地址:47.101.151.68(公网ip)
    4. 端口:3306
    5. 用户名:root
    6. 密码:****
  putty

博客:一周3篇(大厂就业)

https://developer.mozilla.org/zh-CN/docs/

html5
前端三要素:
js 动画(能说会道 会交流)
css 美化(妆容)
html 结构(身材)

jquery echarts (dom)
vue/react/angular (html/css/js)
  脚手架(http://localhost:3000)
sass/less   (css)

移动互联方向
大前端(移动端)

  1. html5
    超文本标记语言
    解释型标签语言

运行机制?
1) 开发pc - 部署pc - pc-浏览器 file:// 【开发】
2) 开发pc - 部署云服务 - pc-浏览器 http://
apache2 - scp/filezilla
http://www.tyut.edu.cn/
B/S架构 b浏览器(html、css、js) s服务器
面试题:
1. 访问百度/淘宝,浏览器-页面渲染出来中间经历了什么?
2. h5 与h4区别?
标准
doc声明不同

h5新增标签
h5新增api

超文本:
超级文本:字符,超级链接,图片,音频,视频,画布(地图、图表、3D模型)
标记:
标签进行标记, html标签(无法使用自定义标签)

标题1


段落


语言:
c、java 编译型语言 ,
hello.c --gcc–> hello.o --运行–>linux
Hello.java --javac–> Hello.class --运行–> jvm --> linux/win
html、js、css 解释型语言
hello.html --> 浏览器 -> linux/win
执行效率:c > java > js
  1. 工具
    vscode(koroFileHeader)
  2. 前端地位
    软件开发主流架构(前后端分离)

前端(html、css、js)
浏览器(终端)显示
pc(淘宝pc) 移动端(android/ios/pad h5、混合式app)小程序 大屏

后端(Java / python / c# / Nodejs)
逻辑(登录、注册)
数据库操作
中间件操作(消息队列…)
4. html结构
继承 xml

文档类型: html

  
  



head中的内容无法显示到浏览器视口中
charset 设定编码格式
viewport 适配移动端
pc分辨率 1480 * 800
手机分辨率 2000 * 400
title 网页标题,显示在选项卡中
apache2 favicon.ico
5. 标签
不区分大小写
单标签


双标签



元素
标签 + 内容

这是一个一级标题






属性
位于开始标签中
核心属性(通用,绝大多数标签都具有的属性)
id 唯一标识
class 分类,可以重复
title 悬浮提示
style 添加css规则的
自有属性

百度一下,你就知道

注释

不会被浏览器解释,注释是用来描述代码含义。
6. 块标签(块元素)
特点:
1) 独占一行空间(100%)
2) 高度默认为0,高度由内容决定
3) 可以指定宽、高
4) 用来搭建页面框架
元素:
h4:div、body、p、ul>li、ol>li、dl>dt、dd、h1~h6
h5:header、footer、nav、section、article、aside、address… 语义化标签
简单大方、无招胜有招
7. 行内标签(行内元素)
特点:
1) 行内与其他行内元素共享一行空间
2) 宽高都由内容决定
3) 无法指定宽、高
4) 用来填充,行内元素需要嵌套在块元素中,但是块元素不能嵌套在行内元素中。
元素:
span、a、img
装饰类型标签:strong b em i sub sup …

功能标签:
a
超级链接
href="" 跳转
url 跳转到一个外网地址中
相对路径:相对于当前代码所在文件的路径
. 当前目录下
… 当前目录下的上一级目录
绝对路径:相对于基准点
linux操作系统中
/ 操作系统根目录 也就是 /

      /var/www/html  apache2部署目录
        index.html  / 代表apache的根部署目录 即 /var/www/html
    锚点
      1. 定义锚点  
顶部
2. 跳转 跳转顶部 其他 target="" 目标 _self 默认值 ,当前页面 _blank 新页面 img src 图片地址 1. 网络资源 2. 相对路径 3. 绝对路径 4. base64格式值 alt 图片找不到时候的文本替换
  1. 功能标签(功能元素)
  1. table 表
    tbody 表格体 thead、tfoot
    tr 行
    td、th 列 (容器)
    子标签可以为任意其他标签
    行中的列数在经过计算后应该是相同的
  2. form
    用来进行前后台数据交互(默认情况下,同步交互:JavaEE(jsp)、nodejs(模板))
    ajax 异步交互
    前置技术: http协议
form( action 后端处理接口,enctype 表示编码方式,method请求方法)
  method取值
    get   用于查询操作,参数携带在url后面 
    post  用于更新【保存、修改、删除】操作,参数携带在请求报文请求体中
  enctype取值:
    application/x-www-form-urlencoded
      查询字符串(表单编码)将特殊字符转换为16进制 key=val&key=val&...
      schoolName=太原理工大学&userName=陈明
    multipart/form-data
      用于表单中有附件提交的时候,二进制,无需进行编码
    text/plain
      纯文本提交

  1) input     输入框
    注意:input(text、password、radio、checkbox)必须添加name属性,(radio、checkbox)必须添加value属性
       单行文本框
      密码
        单选按钮
      复选按钮
            附件
     提交按钮
      重置按钮

      日期选择器(h5新增,兼容性差,一般不用)
    ...
  2) textarea  多行文本
    
  3) select    下拉菜单
      

iframe

9、 css3
层叠样式表

  1. 在html中应用
    css嵌入到html的头部的style标签内
    css嵌入到元素style属性内
    css规则与html结构分离(解耦)
    css规则可以复用
    css单独写入到.css文件,通过link引入到html
  2. 语法
    注释: /* 注释内容 */
    语法:
    选择器 {
    样式规则
    }
    .box {
    background-color:lightcoral;
    color: #fff;
    width: 300px;
    margin-bottom: 1em;
    }
  3. 选择器
1. 核心选择器
  id选择器      利用了html元素的id属性,唯一
    #one {}    选中id为one的元素
  class选择器   利用html元素的class属性,非唯一
    .box {}    选中class为box的元素
  标签选择器     利用标签名进行选择
    div {}     选中所有的div元素
  并且选择器
    div.box {} 选中div元素,并且这个div的class为box
  和选择器
    div,.box{} 选中div元素和class为box的元素
  普遍选择器
    * {}       选中所有元素
2. 层次选择器( 两个选择器配合使用)
  子选择器    通过父元素选择子元素
    >
    .menu > li {} 
  后代选择器
    空格
    .menu li {}
    
  兄弟选择器
    ~ 当前元素之后的所有兄弟
    ul.rank > li:nth-child(2) ~ *{}
      第二个li之后的所有li
    + 当前元素之后的下一个兄弟
    ul.rank > li:nth-child(2) ~ +{}
      第三个li
3. 属性选择器(属性过滤器),一般应用在表单元素
  input[name]   
    具有name属性input元素
  input[name='username'] 
    具有name属性,并且name属性值为username的input元素
  input[name^='u']
    具有name属性,并且name属性值以'u'作为开始
  input[name*='u']
    具有name属性,并且name属性值包含'u'
  input[name$='u']
    具有name属性,并且name属性值以'u'作为结尾
4. 伪类选择器(伪类过滤器)
  :first-child
  :last-child
  :nth-child(n) 第n个孩子阶段  

  :visited      访问过的
  :hover        光标悬浮上去
  :active       a标签
  :focus        聚焦
5. 伪元素选择器
  ::after
  ul.menu::after {

  }
  在class为menu的ul元素中追加一个子元素
    

  ul.menu::before {

  }
  在class为menu的ul元素中插入一个子元素
    
  1. 计算选择器优先级
    当多个选择器中的相同规则作用于同一个元素的时候,我们纠结到底这个元素上使用哪个规则的时候。
公务员 -> 考研211+ -> 进入BAT(30%) -> 进入中小型私企(0)

1. 权重(积分)
  1000  style
  100   id
  10    class、伪类
  1     元素选择器、伪元素

  1+10 + 1 + 10 + 1+ 10 + 1
  ul.menu > li.menu_item > ul.sub_menu > li {
    color: lightcyan; /* 34*/
  }
  #introduce {
    color:lightcoral    /*100*/
  }
  .si {
    color: gray !important;
  }
2. 顺序(排名)
  当权重值相同的情况下,后者覆盖前者
3. 特权(!important)
  脱离了权重和顺序规则
  1. 样式规则
1. 字体规则
  可被继承
  font-family 字体
    字体栈 "Microsoft YaHei","宋体"
    在浏览器所在pc从字体栈顶到底寻找字体,找不到使用默认字体
  font-size   字体大小
    12px
  font-weight 字体粗细程度
    100~900
    bold
    bolder
  font-style  是否是斜体
    italic
    normal
  color       字体颜色
  line-height 行高
  长度的相对单位
    1px
    em    相对于当前元素上的字号
    rem   相对于根元素上的字号  
  font  速写形式
  font: font-style font-weight font-size/line-height font-family
    font: normal normal 14px/1.2 '宋体','微软雅黑';
    font: 14px/1.2 '宋体','微软雅黑';
  
  网络字体(iconfont)
    应用
    分析实现过程
      @font-face {
        font-family:"iconfont"
        src:
      }

      .iconfont {
        font-family:"iconfont"
      }
      .icon-Backward-Button:before {
        content: "\e82e";
      }
2. 文本规则
  text-align  文本在容器中显示方式
    center
  text-decoration-line:underline;
  text-decoration-style: double;
  text-decoration-color: lightsalmon;
  text-decoration: none;
  text-indent     缩进
  text-transform  控制大小写
  white-space:容器内的文本是否会主动换行
    nowrap  不换行
  overflow: 容器内的内容超出部分如何处理?
    hidden
  text-overflow: 文本超出部分如何显示提示?
    ellipsis '...'
3. 列表规则
  用于设置有序列表、无需列表、自定义列表的显示方式 ul、ol、dl
  list-style:none;
4. 其他规则
  cursor:pointer;
  visibility:hidden
  opacity:0.2
  display:none; 【三十年河东三十年河西】
    改变元素的显示方式
    none
    block   将行内元素转换为块元素
    inline  将块元素转换为行内元素
    inline-block  行内块元素
      与其他行内元素共享一行空间
      可以指定宽高
  面试题:
    如何将一个文本在块元素进行水平居中?
      text-align:center
    如何将一个文本在块元素进行垂直居中?
    如何将一个块元素进行水平居中?【3种】

  overflow:
    overflow-x,overflow-y速写
    overflow:hidden;
    overflow:scroll; 
    overflow:auto;
    容器,容器的内容的大小超过容器本身
  outline
    外圈线框
  outline-color: pink;
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 1px;
  outline:
5. 盒子规则
  盒子 - 块元素
  margin  外边距(盒子外边框距离其他元素的距离)
    margin: 10px;       上右下左
    margin: 10px 20px;  上下,左右
    margin: 10px 20px 30px;   上 左右 下
    margin: 10px 20px 30px 40px; 下 右 下 左
    速写形式,外边距,上下外边距会进行重叠
    margin-top
    margin-right
    margin-bottom
    margin-left
  border 边框
    border-width
      border-top-width
      border-right-width
      border-bottom-width
      border-left-width
    border-style
      border-top-style
      border-right-style
      border-bottom-style
      border-left-style
    border-color
      border-top-color
      border-right-color
      border-bottom-color
      border-left-color
    border 速写
      border: 2px solid #ccc;
  padding 内边距(内容距离盒子内边框的距离)
    padding: 10px;       上右下左
    padding: 10px 20px;  上下,左右
    padding: 10px 20px 30px;   上 左右 下
    padding: 10px 20px 30px 40px; 下 右 下 左
    速写形式,外边距,上下外边距会进行重叠
    padding-top
    padding-right
    padding-bottom
    padding-left
  width/height
    宽高
  box-sizing(盒子模式)
    内容盒子(普通盒子 , 默认盒子)
      content-box;
      盒子实际占据的宽度 2borderWidth + 2padding + width
      盒子实际占据的高度 2borderWidth + 2padding + height
    边框盒子(怪异盒子 ie低版本)
      border-box;
      盒子实际占据的宽度 :width
        width = 2borderWidth + 2padding + 内容宽
      盒子实际占据的高度 :height
  border-radius:2px
      外圆    300px 
      内圆    200px
      期望 内圆由200 变化到250,并且,中心点不变
  background
    background-color 
    background-image
    background-repeat
    background-size
    background-position
    background-clip
    background-orign
    background-attachment
    background  速写形式
6. 默认文档流 (y轴)
  块元素, 独占一行空间,高度由内容决定。块元素默认从上往下排列
7. 浮动布局(x轴)
  float:left
  浮动元素:
    1) 脱离文档流
    2) 块元素的宽度不再是100%,由内容决定
    3) 块元素不再支撑其父元素
    4) 同一层次(兄弟关系)浮动元素会在一行排列,当浮动元素宽度总和大于父元素的时候会发生换行。
  clear
    清理浮动
    left  不与左浮动元素在同一水平线上
    right 不与右浮动元素在同一水平线上
8. 伸缩盒布局(x轴)
  div.container > div
  ul.container > li
  1) 概念
    伸缩盒容器 div.container 、ul.container
    伸缩盒元素 div、li
    主轴    默认主轴x轴,伸缩盒中,伸缩盒子元素沿着主轴来进行排列
    交叉轴  与主轴垂直的轴
  2) 规则
    伸缩盒容器
      display:flex;
        强制让它的子元素沿着主轴方向中显示,并且子元素不会脱离文档流,交叉轴上元素的高度如果没有指定,应该和父元素保持一致。
      flex-direction:row;
        定义主轴方向,row 表示主轴是x轴,column表示主轴为y轴
      flex-wrap:nowrap 
        当子元素的长度加起来超过主轴上的父元素的宽度,默认不换行,
      align-items: stretch;
        定义伸缩盒容器中的子元素在交叉轴上的排列方式
      justify-content:space-around;
        定义伸缩盒容器中的子元素在主轴上的排列方式
    伸缩盒元素
      flex-basic:   主轴上的基础长度(基本工资)
      flex-grow:    主轴上剩余空间分配的份数(分红)
      flex-shrink:  主轴上亏损空间的分摊份数(亏损)
9. 定位布局(z轴)
  position:
    static  静态(默认、非定位元素)
    relative  相对(定位元素)
    absolute  绝对(定位元素)
    fixed     固定(定位元素)
    sticky    粘滞(定位元素)
  定位元素的特点: 可以使用定位规则。top right bottom left
  1) 相对定位
    1. 不脱离文档流
    2. 相对于它原来所在位置移动
  2) 绝对定位 
    1. 脱离文档流
    2. 相对于距离它最近的父定位元素位置移动!如果所有的父元素都不是定位元素,相对于浏览器视口位置移动
    一般情况下,绝对定位元素应该嵌套在相对定位元素内容来使用
  3) 固定定位
    1. 脱离文档流
    2. 相对于浏览器视口进行定位
  4) 粘滞定位
    1. 在没有达到阈值的时候是不脱离文档流(相对),达到阈值脱离文档流(固定)
    2. 通过left、top、right、bottom来设定阈值

  定位布局的应用:
    1. 二级栏目
    2. 模态框
    3. 特殊布局
10. 动画
  设计师;美工;前端(实现)
  动态网站(具有动画 错误!)是数据是动态的。
  
  1) 实现步骤
    1. 定义动画帧
      @keyframes 动画名{
        from {
          // 开始帧
        }
        to {
          // 结束帧
        }
      }

      @keyframes 动画名{
        0% {
          // 开始帧
        }
        20% {

        }
        ...
        100% {
          // 结束帧
        }
      }
    2. 设定动画(贺卡)
      animation-name: move; 
        动画名
      animation-duration: 2s;
        持续时间
      animation-timing-function: linear;
        时间曲线函数(自由落体,贝塞尔曲线)
      animation-fill-mode:forwards;
        填充模式,动画结束后保留哪一帧规则
      animation-iteration-count: 2;  
        动画迭代次数 infinite
      animation-direction: alternate-reverse;   
        动画执行的方向 from->to , to->from
      animation-play-state: paused;
        动画状态
      animation-delay: 1s;
        延迟时间
      animation: move 2s 1s 2 linear;
        动画的速写形式
  2) 案例(呼吸灯)
  3) 案例(梦幻西游)
11. 动画库 animate.css
  动画帧、动画设定规则都有第三方完成,我们直接使用class即可
  1) 引入动画库
    
  2) 使用
    1. 直接调用动画设定类
      
2. 引用关键帧
12. 过渡 过渡是轻量级的动画,过渡中无需定义关键帧,它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上(状态发生变化的时候) transition-property: width; 过渡属性,取值可以为多个,多个值通过逗号分割;关键字:all 所有属性 transition-duration: 2s; 过渡持续时间 transition-delay: 0; 过渡延迟时间 transition-timing-function: linear; 时间曲线函数 transition:transform,background-color 2s,2s 0s linear; 速写形式 13. 变形 transform:变形函数 1. 缩放 scale(2) 2. 平移 translate(100px,50px) 3. 旋转 rotate(360deg) 4. 拉伸 skew(45deg) 14. 媒体查询(响应式布局) 网页类型(产品生态) pc网页 (html5/css3) 火狐 淘宝、网易严选 h5(移动端)网页 (html5/css3) uc/safari 淘宝、网易严选 app(移动端) html5、css3 -(ionic webview) webapp【ios不允许上架,andriod】 混合式开发 原生/h5css3 混合式开发 框架(rn/weex - js)+ mvvm思想(vue) 原生开发语言 android android/ios 淘宝、网易严选 * 后台管理系统(适配 - 自动适配,响应式vue ) 大屏(特殊屏幕)网页 9. 定位布局(z轴)

注意:
html源码中,多个空格等于一个空格,一个换行也等于一个空格

面试题:
如何理解语义化?
利用标签表达出来的含义(而不利用标签表达的样式)来表达页面结构
换句话说,就是在合适的页面位置上使用合适的标签
hello world
什么是盒子模型?
内容盒子(默认盒子) width = 内容宽
边框盒子(怪异盒子 ie低版本)width = 内容宽 + padding + border
居中?
文本在盒子中水平居中?
text-align:center
文本在盒子中垂直居中?
1) line-height = height
2) vertical-align 行内元素?
盒子应该位于容器内部,容器通常情况下要比盒子大
盒子在容器中水平居中?
1) margin: 0 auto;
2) 定位 margin-left:50%; left:-50px; position:relative;
3)
盒子在容器中垂直居中?
2) 父元素padding, box-sizing:border-box
2) 父元素padding + 子元素margin, box-sizing:border-box
动画题目:
1. 效果要求
(1. 定义:目前两圈的大小为常规大小
(2. 正常运动轨迹:两圈常规大小 -> 外圈向外扩大10px(2000ms) -> 外圈向内回归正常大小(2000ms)-> 内圈向内缩小12px(2500ms) -> 内圈放大至常规大小(2500ms) -> 循环
(3. 加速运动轨迹:两圈常规大小 -> 外圈向外扩大10px(1000ms) -> 外圈向内回归正常大小(1000ms)-> 内圈向内缩小12px(1200ms) -> 内圈放大至常规大小(1200ms) -> 循环
(4. 加速运动轨迹下,当文字显示为:“我很生气”时,内圈的颜色变为红色
(5. 加速运动轨迹下,当文字显示为:“我很高兴”时,内圈的颜色变为绿色
这道题你做下 分别用JS和CSS3来实现 做好了发我邮箱

第三方库(职业技能)
iconfont
字体图标库,原理:网络字体 @font-face() font-family
bootstrap
栅格布局(grid layout,原理:flex、float
animate.css
动画库,原理:animation

day03 简单的重构网页 Html+CSS
html元素 css 选择器 属性 值 git使用

  1. git介绍
克隆别人的仓库,就能拿到你当时克隆时候仓库里的文件
  git clone 仓库地址
当仓库发生了更新,使用git pull命令获取最新内容
  tyut-2021 %  git pull
  Already up to date.

git错误提示:
fatal: not a git repository (or any of the parent directories): .git
  1. 网页重构 经典网站去重构
    header:logo 搜索框
    nav:导航栏
    轮播图
    address:地址 联系方式
    footer:网站底部 联系方式 联系地址 版权 其它网站的链接
  2. html文件后缀名
    .html(建议使用这个) .htm
  3. css文件的后缀名
    .css

day07 动画:呼吸灯、梦幻西游
/* 指定应用的一系列动画 属性值是一个由@ keyframes 定义的动画序列*/
animation-name: outer;
/* 指定一个动画周期的时长 单位支持s ms 无单位值无效 /
animation-duration: 5s;
/
定义CSS动画在每一动画周期中执行的节奏。 /
animation-timing-function: linear;
/
定义动画在结束前运行的次数 infinite代表无限循环 number默认是1 可以用小数 */
animation-iteration-count: infinite;

复习:

  1. 大前端
    第一阶段 重构(美工,页面仔)
    psd设计图 -> html、css、js
    html5 + css3 15天(网易严选)
    第二阶段 dom驱动框架
    linux操作系统 3天
    Javascript(es5/dom/bom)15天
    jquery、bootstrap、antv、echarts、highcharts、地图(腾讯、百度、高德)
    行学天下门户(后台管理系统、门户前台、swagger)
    第三阶段 企业级开发阶段
    es6、typescript 5天
    vue全家桶(vue + vuerouter + vuex + elementui + axios【ajax】 + …)
    家政服务预约云平台
    第四阶段 拓展阶段
    小程序
    react全家桶(react + reactrouter + redux + antdesign + axios + …)
    reactnative (混合式app开发 - app)
    第五阶段 服务端开发阶段
    nodejs(io流、http网络模块)
    express
    egg
    第六阶段 优化阶段
    nuxt.js vuepress
  2. 校招(大厂 25w起步)
    绝大多数大厂已经开始!!!
    网申(报名) -> 笔试 -> 面试3轮 -> offer
  1. 简历 数据结构 **授课 ** ***** M起
1. 个人信息                 算法
  学校 专业               数据库、网络
  * 博客(会学习会分享)     【leecode、牛客】
  * gitee、github(专业)
2. 个人技能
  招聘需求
3. 项目经验
  * TYUT新闻网
  技术栈
  预览地址
  描述:你在项目组中的贡献
  2~3个
4. 获奖经历
  1. html结构

  2. 语法
    注释
    标签
    元素
    实体
    一个回车、多个空格表示一个空格
      空格
    >
    <

  3. 块元素
    搭建页面骨架;独占一行空间、高度由内容决定、指定宽高

  4. 行内元素
    填充 ;与其他行内元素共享一行空间、不可以指定宽高(css中)
    a
    img 可以指定

  5. 功能

  1. 表格
    表格组件 div -模拟-> table
    table
    caption
    thead
    tfoot
    tbody
    tr
    td/th : rowspan colspan
  2. 表单
    用于向后台提交数据,原生表单和后台交互的数据格式主要还是为查询字符串
    qs ‘name=terry&age=12’
    json ‘{“name”:“terry”,“age”:“12”}’
form : action,enctype,method
  input : name(text,password,file,radio,checkbox...), value(radio,checkbox),placeholder
  select:name > option: value
  textarea: name,value,rows,cols
  1. iframe
    载入外部页面

css相关技术点

  1. css介绍
    层叠样式表
  2. css在html使用方式
1) style标签
2) style核心属性
3) link
  1. 语法
    注释 /* */
    声明:
    选择器 {
}
  1. 选择器
1) 核心选择器
  id、class、元素、并且div.box、和 div,.box、*
2) 层次选择器
  子代  ul.menu>li
  后代  ul.menu li
  兄弟  + ~
3) 属性过滤器
  [name]
  [name='username']
  [name*='u']
  [name^='u']
  [name$='u']
  form.login_form > input[checked]
4) 伪类过滤器
  子元素
    :nth-child(n)     n序号,从1开始
    :nth-child(2n+1)  1、3、5...
    :nth-child(even)  偶数
    :nth-child(odd)   奇数
    :first-child
    :last-child
  状态
    :hover
    :visited
5) 伪元素选择器
  ::after
  ::before
  
  • one
  • two
  • ::after
ul::after { content:"hello world" }
  1. 文本规则
    text-align
    center/left/right
    text-decoration
    none
    text-indent
    overflow:hidden
    white-space: nowrap
    text-overflow:ellipsis
    vertical-align: 行内元素在容器中的垂直排列方式
    display:inline-block;
  2. 字体规则
    color:red;
    line-height: 行高
    font-size:12px
    font-family:‘Microsoft Yahei’,‘微软雅黑’;
    font-style:是否打开斜体 normal/italic
    font-weight: bold/bolder
    font: style weight size/line-height family;
    html {
    font: 14px/1.5 ‘Microsoft Yahei’,‘微软雅黑’
    }
    px 像素
    em 相对于当前元素的字体大小
    rem 相对于html元素上设置字体大小
网络字体(应用 iconfont)
1. 获取字体文件 .ott .woff... (字体方正)  阿里云服务器(共享)
2. css3
  @font-face {
    font-family:'李氏名字';
    src:url('./lszi.woff')
  }

  .logo {
    font-family:'李氏名字';
    font-size:12px;
  }
  ------------------------
  @font-face {
    font-family: "iconfont"; /* Project id 2736919 */
    src: url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.woff2?t=1628652186798') format('woff2'),
        url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.woff?t=1628652186798') format('woff'),
        url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.ttf?t=1628652186798') format('truetype');
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-fuwufankui:before {
    content: "\e67d";
  }
3. 应用
  1) 引入iconfont.css (声明了新字体,声明了很多class)
  2) 使用
    
  1. 列表规则
  2. 其他规则
  3. 盒子规则
    块元素,布局时候使用盒子来进行,y轴,x轴,z轴
1) 组成:
  margin、border、padding、内容
2) 盒子模型
  默认盒子(box-sizing:content-box)
    width = 内容宽  即 盒子实际占据的宽度 = borderWidth + padding + 内容宽
  怪异盒子(box-sizing:border-box)
    width = borderWidth + padding + 内容宽  即 盒子实际占据的宽度 = width
3) 背景规则
  background-color
  background-img
  background-repeat
  background-position
  background-origin
  background-size
  background-clip
  background
  1. 默认文档流(y轴)
    块元素默认特性:div 默认宽度为100%,高度由内容决定,可以指定宽高
    div p ul>li
    10.浮动布局(x轴)
    解决块元素在容器中多列显示的问题
    建议:尽量给块元素设定宽度而非高度(块元素最终节点可以指定高度)
1) float
  块元素 - 浮动元素
  1. 脱离默认文档流
  2. 宽度要么为设定值,如果没有设定,宽度由内容决定
  3. 在同一级别(相邻兄弟)的浮动元素,可以在一行排列
  4. 当一行无法容纳所有浮动元素,浮动元素会自动回车
2) clear
  清理浮动,left 清理float:left; right清理float:right

11.伸缩盒布局(x轴、y轴)
应用场合:父子结构, h5页面中(移动端页面,pc)
概念:x轴、y轴、主轴、交叉轴、伸缩盒容器、伸缩盒元素
规则:
伸缩盒容器
display:flex;
flex-direction:row; 主轴x轴
align-items: y轴(主轴)上的显示方式
justify-content:x轴(交叉轴)上的显示方式
flex-wrap:wrap;
伸缩盒元素
flex-basic
flex-grow 剩余空间分配
flex-shrink 亏损空间分配
flex: 速写
flex:1


  • 聊天

  • 通讯录

  • 我的


12.定位布局(z轴)
position: static ; // 非定位元素
定位元素: 可以使用定位属性,top right bottom left
position: relative;
不脱离文档流;相对于自身原来所在位置来进行定位
position: absolute;
脱离文档流;相对于距离它最近的父定位元素来进行定位
position: fixed;
脱离文档流;相对于浏览器视口来进行定位
position: sticky;
在没有达到阈值前不脱离文档流(相对定位),达到阈值后脱离文档流(固定定位)

应用场景:
  特殊场景布局:二级栏目;广告;回到顶端;模态框
  实现块元素的居中
    left/margin-left
  1. 动画与过度

-------------第三方框架(社区代码)-------------
一如前端深似海
html/css/js 深度理解

iconfont 字体图标库
bootstrap html/css封装【组件库 (基础html/css/js的组件库)】
12栅格系统
组件(html+css) 按钮、列表、表格、模态框…
elementui 组件库 (基础 vue 的组件库)

你可能感兴趣的:(大前端,html5,css3)