前端基础

最新推荐文章于 2024-08-15 15:54:59 发布
最新推荐文章于 2024-08-15 15:54:59 发布
阅读量898 收藏 2
点赞数
分类专栏： 前端笔记 文章标签： css css3 html5 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46261309/article/details/107295752
版权

前端基础

目录


学习目标：能根据psd文件，用HTML + CSS 布局出符合W3C规范的网页

HTML

HTML： HyperText Markup Language（超文本标记语言）

一、常见的html标签及属性

  1. 标题标签 ( h1~h6 ) ;
  2. 段落标签( p) ;
  3. 列表标签 ( ul>li无序列表，ol>li有序列表，ol的属性：type) ；
  4. 超链接标签（a，属性：href指要跳转地址、target=’_blank’）；
  5. 图片标签（img，属性：src路径、alt、title）；
  6. 加粗（strong）；
  7. 斜体（em）；
  8. 删除（del）；
  9. 容器标签（div，span）

二、表单与表格

表格：
  1. table标签：表格容器
  2. thead标签：表头
  3. tbody标签：表体
  4. tr标签：行，内部一定是只有td或th
  5. th标签：表头单元格，字体会加粗
  6. td标签：单元格
  7. 合并单元格：rowspan、colspan
表单：

  1. form：表单

  2. input： 输入框

<input type="text">  <!-- 文本框 -->
<input type="password">  <!-- 密码输入框 -->
<input type="radio">  <!-- 单选框 -->
<input type="checkbox" >  <!-- 复选框 -->
<input type="button">  <!-- 按钮 -->
<input type="submit">  <!-- 提交按钮 -->

  1. label：文本

  2. placeholder：占位符，提示作用

  3. 下拉菜单

三、其他

  1. 空格： &nbsp；
  2. 换行：
  3. 分割线：
  4. 注释：

CSS

一、 css引入样式的方法

  1. 行内样式

    <div style="background: red;"></div>

  2. 内部引入

    <style type="text/css">
	div{
		background: red;
	}
</style>

  3. 外部引入

    <link rel="stylesheet" type="text/css" href="style.css">

二、CSS选择器

  1. 标签选择器

  2. 类选择器（多个）

  3. id选择器（唯一）

  4. 通配符选择器（页面所有标签）

  5. 子元素选择器

    div p  ： 选取到div内 "所有" 的p标签
div>p  ： 选取到div内 "子集" 的p标签

  6. 兄弟元素选择器

    div+span  ： 选取到div标签 "同级" 下一个span标记

  7. 伪类选择器（ :hover ）

  8. 伪元素选择器( ::before、::after )

  9. 属性选择器

    [value]  :  选取到标签的属性有value的
[value=a] : 选取到标签的属性值为a的元素

三、选择器权重

!important（无穷大） > 行内样式（1000） > id （100）> class |属性|伪类（10）> 标签|伪元素（1） > 通配 （0）

四、CSS常用属性

  1. 背景颜色：background-color、background:
  2. 文字颜色：color
  3. 颜色值可以写成：rgba(255,255,255，1)
  4. 边框(border) ：border:1px solid pink；
  5. width : 宽度
  6. height : 高度
  7. text-align：文字水平对齐（center、left、right）
  8. line-height ：行高
  9. font-size： 字体大小（一般用12px、14px）
  10. font-weight： 字体加粗（normal、bold、数值100-900）
  11. text-deoration：文本修饰
  12. cursor：光标
  13. 小技巧：单行文字垂直居中用行高=高

DIV + CSS

一、盒子模型

属性值 2个（上下，左右）、3个（上、左右、下）、4个（上、右、下、左）

  1. margin： 外边距
  2. padding： 内边距
  3. border： 边框

宽高的计算：

  • 元素的实际宽度 = border-left + border-right + width + padding-left + padding-right
  • 元素的实际高度 = border-top + border-bottom + width + padding-top + padding-bottom

可以通过设置box-sizing: border-box; 元素的实际宽度（高度）就是width（height）设置的宽度（高度）

*{
     box-sizing: border-box;
}

二、元素分类

  1. 行级元素 : inline（div、p、ul、ol、li、form…）
  2. 块级元素 : block （span、em、strong…）
  3. 行级块元素 : inline-block（img…）

三、元素类型转换

  1. 定位：position:absolute/fixted （转成块级）
  2. float ： 自动转换：inline-block
  3. display属性

四、浮动布局

  • 可以使用float属性来实现让两个div在同一行显示
  • 浮动元素会脱离文档流
  • 浮动元素的最下面加入： clear:both（块元素）display:block，可清除浮动
  • 伪元素清除浮动 (只需要在浮动元素父级容器添加 class=“clear”)
.clear::before,.clear::after{
    content:"";
    display: block;  /*将伪元素增加的内容设置成块元素*/
    clear:both;
}

五、定位

定位：position

  1. 默认值：static
  2. inherit
  3. fixed ==》相对于浏览器窗口定位，脱离文档流
  4. absolute ==》绝对定位，相对元素最近的已定位祖先，脱离文档流
  5. relateive ==》相对元素原定位置，不脱离文档流

H5

  1. 语义化标签：header、nav、asidearticle、section、footer

  2. 媒体标签：音频标签audio、视频标签video

    autoplay :自动播放 controls:播放器的控制页面

C3

一、css3新增属性

  1. 圆角 （border-radius）

  2. 阴影 （box-shadow）

     box-shadow: 10px 20px 10px blue;  
// 水平偏移值    垂直偏移值  模糊半径  阴影的颜色

  3. 形变（transform） 属性值是函数

    • 旋转 rotate()
    • 缩放 scale()
    • 移位 translate()
//以元素中心点，顺时针旋转了45度
transform: rotate(45deg);
//以元素中心点，逆时针旋转了45度
transform: rotate(-45deg);

//以元素中心点，向四周缩放1.5倍
transform: scale(1.5);

//利用位移，实现将元素放置在页面水平和垂直居中
.box {
    width: 200px;
    height: 200px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background-color: #00f;
}

//transform属性也可以将多个属性值写到一起，多种效果同时实现
transform:translate(100px,200px) rotate(-45deg)  scale(1.5);

transform属性也可以将多个属性值写到一起，多种效果同时实现

二、css3过渡效果

  • 谁做过渡给谁加
  • transition可设置多个属性值
    // 过渡属性 过渡时间 过渡函数 延时时间
transition: width 2s linear 0.5s;
  • transition可设置多个属性的过渡效果
    //用逗号隔开
transition: width 2s linear 0.5s,height 3s linear 0.2s;
  • 将transform指定为过渡属性，可实现形变的过渡效果
     transition: transform 3s;
  • 过渡属性可以设置为all
    transition: all 2s linear 0.5s;

transform-origin 可变换中心点（方位）

//transform-origin: x y;
transform-origin:50px 50px;

三、动画效果

  • 定义动画 (@keyframes )

    //第一种：
@keyframes 动画名称{
    0%{
      transform: translate(0px,0px)
    }
    50%{
      transform: translate(10px,10px)
    }
    100%{
	  transform: translate(20px,20px)
    }
}

//第二种：
@keyframes 动画名称{
    from{
      transform: translate(0px,0px)
    }
    to{
	  transform: translate(20px,20px)
    }
}

  • 调用动画

    定义好动画之后，在需要使用动画的元素上添加animation属性

    .box {
    width: 200px;
    height: 200px;
    background-color: #00f;
    //调用anim动画，动画执行10s，匀速
    animation: anim 10s linear;
}

  • 将动画100%设置跟0%状态一样，可以使动画更连贯

  • 循环动画 animation-iteration-count：infinite

    .box {
    width: 200px;
    height: 200px;
    background-color: #00f;
    //调用anim动画，动画执行10s，匀速
    animation: anim 10s linear;
    animation-iteration-count:infinite;
}

  • 停止动画

    animation-play-state:paused;

flex布局

一、flex容器

  • 先给容器设置属性 display: flex; 将此容器会变成一个flex容器

  • 常见的flex容器属性

    属性说明属性值
    flex-direction主轴方向row（默认值）、row-reverse、column、column-reverse
    justify-content子元素在主轴上的排列方式flex-start、flex-end、flex-center
    align-items侧轴的排序方式flex-start、flex-end、flex-center

二、flex子项

  • flex容器内部的元素被称为flex子项（flex item），在这个容器内部浮动会失效，不分行、块元素

  • 常见的flex子项属性

    属性说明属性值
    align-self子项自己在侧轴的排序方式flex-start、flex-end、flex-center
    flex占flex容器的几份1、2、3…

grid布局

  • grid布局为二维布局

一、 grid容器

  • 先给容器设置属性 display: grid; 将此容器会变成一个grid容器

  • 常见的grid容器属性

    属性说明属性值
    grid-template-columns设置gird容器中的项目有多少列，并指定列的宽度/比例grid-template-columns: 100px 100px 100px; grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows设置gird容器中的项目有多少行，并指定行的宽度grid-template-rows: 100px 100px 100px;
    grid-column-gap列之间设置间距grid-column-gap: 30px;
    grid-row-gap行之间设置间距grid-row-gap: 20px;
    justify-items单元的水平位置justify-items: center;
    align-items单元的垂直位置align-items: center;
    justify-content整个内容区域在容器里面的水平位置justify-content: center;
    align-content整个内容区域在容器里面的垂直位置align-content: center;

二、 grid子项

  • grid容器内部的元素被称为grid子项
  • 常见的grid子项属性
属性说明
justify-self自身单元格内容的水平位置
align-self自身单元格内容的垂直位置
grid-column-start 、 grid-column-end指定左右边框垂直网格线，可合并写成grid-column：1/3；
grid-row-start 、 grid-row-end指定上下边框水平网格线，可合并写成grid-row：1/3；

媒体查询

  • 使用@media来定义不同的条件和样式，窗口尺寸（或设备尺寸）满足指定条件的时候才会应用指定的样式

  • max-width 、 min-width

    @media screen and (min-width:600px) {
    /* 窗口大于600px才会应用指定的样式 */
}

@media screen and (min-width:600px) and (max-width:900px){
    /* 窗口大小600px到900px才会应用指定的样式 */
}

@media screen and (max-width:900px){
    /* 窗口小于900px才会应用指定的样式 */
}

rem

  • 单位：

    1. px （像素）
    2. em （相对父元素的字体大小font-size）
    3. rem （相对html的字体大小font-size）

  • 使用js代码让html元素的font-size属性在不同的设备中设置不同的值

    (function (doc, win) {
var docEl = doc.documentElement,
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
  };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
    1. 代码第7行：100就会起到百分比的作用。例如1px=1/100=0.01rem;
    2. 720为设计稿宽度。在实际工作中如果设计稿宽度改变，只需要讲720替换成设计稿宽度即可。
前端的基础
02-07
web前端的项目开发，基础教程ppt、html5一些基础知识。。。
web前端基础案例
09-30
总结来说，这个"Web前端基础案例"教程旨在帮助初学者建立起对Web前端开发的全面理解，通过实践案例强化技能，从而能够独立创建具有基本功能和样式的静态网页。随着进一步的学习，你将能掌握更复杂的前端框架和技术，...
好程序员web前端教程分享web前端入门基础知识
qq_35970166的博客
10-17 531
　　好程序员web前端教程分享web前端入门基础知识，作为合格的Web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一两个还不行，必须对这三门语言都要熟悉。下面我们一起来看一看吧！ 1、网页的基本结构(HTML、CSS) HTML是一种标记语言，而不是编程语言，最基本是标签是和，CSS是用来定义如何显示HTML元素的。对HTML+CSS很容易入门，但很多人不够...
基础 - 前端知识体系详解
最新发布
qq_61863348的博客
08-15 1699
CSS预处理器定义了一种新的语言，其基本思想是用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是"用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用"
jQuery选择过滤器
weixin_33862188的博客
05-26 161
为什么80%的码农都做不了架构师？>>> ...
前端团队管理 前端基础架构的实践和思考 共22页.pdf
06-09
前端团队管理与前端基础架构的实践和思考 前端团队管理是指在软件开发过程中，负责前端开发的团队如何更好地发挥职能作用，提高团队的效率和质量。本文将探讨前端团队的职能转变、前端基础架构的构建和实施，以及...
第4章 前端面试技能拼图2 ：前端基础知识 ， 必知必会
03-13
本章“第4章 前端面试技能拼图2：前端基础知识，必知必会”将深入探讨那些面试官常问且开发者必须掌握的核心概念。 1. HTML（超文本标记语言）： HTML是网页内容的结构标准，是前端开发的基石。理解不同标签的作用...
前端基础第一天的笔记
01-03
这是前端基础第一天学习的笔记,视频,文档,练习题所有的东西,文件太大传输不上来,需要把种子传上去,大家再用µTorrent软件打开即可
web前端的html部分
weixin_46503355的博客
09-09 634
web前端基础 1.相关介绍 前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。 以前会 Photoshop 和 Dreamweaver 就可以制作网页，随着网站开发难度加大、开发方式多样，网页制作更接近传统的网站后台开发，网页制作更多被称为 Web 前端开发。前端技术包括 4 个部分：前端页面设计师、浏览器兼容、CSS、HTML“传统”技术与 Adobe AIR、Go
前端知识基础
Dodddhdhdg的博客
09-14 222
文章目录1.基础知识1.1 变量类型1.2 typeof运算符1.3 变量计算——强制类型转换1.4 面试题2.原型、原型链2.1 构造函数2.2 原型规则和示例2.3 循环对象自身的属性2.4 原型链2.5 instanceo2.6 面试题3.作用域、闭包3.1 执行上下文3.2 this3.3 作用域3.4 作用域链3.5 闭包3.6 面试题4.异步、单线程 1.基础知识 总结大纲: 1. 基础知识：原型、原型链；作用域、闭包；异步、单线程 2. JS API：DOM操作；Ajax；事件绑定 3.
前端基础---JS基础
qq_43813560的博客
03-28 883
Javascript 是一种运行在客户端的脚本语言 应用场景： 1.网页特效 2.服务端开发
web前端基础适合零基础基础小白通俗易懂自制.xmind
07-03
自学web前端基础适合零基础基础小白通俗易懂
前端基础知识
RanSelf的博客
07-09 328
本文为笔者目前为个人项目所学习的前端知识
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值