前端新手必看！HTML、CSS 和 JavaScript 详解与实用案例全攻略

大家好呀！我是魏大帅，一位热爱前端开发的程序员。今天在这呢，我来跟大家聊聊 HTML、CSS 还有 JavaScript 的知识，希望能对你们有用哈！[送心]

1. HTML速成课HTML（HyperText Markup Language）就是那个超文本标记语言，是搭建网页结构的基础语言。啥？不懂？简单来说，就是用各种标签把网页的不同部分（比如标题、段落、链接、图片啥的）拼凑起来。

2. HTML基本布局一个HTML小萌新通常长这样：

3. HTML 常用标签

  • 标题标签：<h1>、<h2>、<h3>等，用于定义不同级别的标题。
  • 段落标签：<p>，定义段落。
  • 链接标签：<a>，创建链接。
  • 图像标签：<img>，插入图像。
  • 列表标签：<ul>（无序列表）、<ol>（有序列表）和<li>（列表项），创建列表。
  • 表格标签：<table>、<tr>（表格行）、<td>（表格单元格），创建表格。
  • 表单标签：<form>、<input>、<select>、<textarea>等，用于创建表单。
  • 语义化标签：如<header>、<nav>、<section>、<article>、<aside>、<footer>等，让网页结构更清晰。

4. HTML5 新特性

  • 多媒体标签：<audio>和<video>，播放音频和视频。
  • 画布标签：<canvas>，绘制图形。
  • 本地存储：使用localStorage和sessionStorage在浏览器中存储数据。
  • 地理定位：使用navigator.geolocation获取用户地理位置信息。
  • Web Workers：在后台运行 JavaScript 代码，不影响页面性能。
  • 拖放 API：实现元素的拖放功能。

1. CSS 简介

CSS（Cascading Style Sheets）就是那个层叠样式表，专门负责给网页穿衣服，定义字体、颜色、大小、间距、背景等，让页面美美哒。

2. CSS 引入方式

  • 内联样式：在 HTML 标签中用style属性直接定义样式。
  • 内部样式表：在 HTML 文件的<head>标签中用<style>标签定义样式。
  • 外部样式表：将 CSS 代码保存为独立文件，在 HTML 文件中用<link>标签引入。

3. CSS 选择器

  • 元素选择器：根据元素名称选择元素。
  • 类选择器：根据元素的class属性选择元素。
  • ID 选择器：根据元素的id属性选择元素。
  • 后代选择器：选择某个元素的后代元素。
  • 伪类选择器：根据元素的特定状态选择元素，如:hover（鼠标悬停时）、:active（被点击时）等。
  • 属性选择器：根据元素的属性值选择元素。
  • 兄弟选择器：选择与某个元素相邻的兄弟元素。
  • 通用选择器：用*选择所有元素。

4. CSS 盒模型CSS 盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。理解盒模型对布局和定位元素至关重要。

5. CSS 布局

  • 流式布局：默认布局方式，元素会根据窗口大小自动调整位置。
  • 弹性布局（Flexbox）：灵活布局方式，轻松实现水平和垂直居中、等分空间等布局效果。
  • 网格布局（Grid）：创建复杂二维布局，精确控制元素位置和大小。

6. CSS 响应式设计响应式设计能根据不同设备屏幕尺寸自动调整布局和样式。可以使用媒体查询（Media Queries）实现。

7. CSS 动画

CSS动画，就是让页面元素动起来，比如渐变、旋转、缩放等，用@keyframes规则就能定义动画效果。

8. CSS 预处理器CSS预处理器，比如Sass、Less和Stylus，能让你写CSS的时候更高效，变量、嵌套、混合、函数啥的都有了。

1. JavaScript 简介JavaScript是一种脚本语言，能让你网页动起来，添加交互性和动态效果，还能操作HTML和CSS。

2. JavaScript 基本语法

  • 变量声明：用var、let或const关键字声明变量。
  • 数据类型：包括数字、字符串、布尔值、对象、数组等。
  • 运算符：如算术运算符、比较运算符、逻辑运算符等。
  • 控制流语句：如条件语句（if、else if、else）、循环语句（for、while、do-while）等。
  • 函数：定义函数封装可重复使用的代码块。

3. JavaScript 操作 DOMDOM（Document Object Model）就是文档对象模型，是表示 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 操作网页内容和结构。

  • 获取元素：用document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()等方法获取 HTML 元素。
  • 修改元素内容：用innerHTML、textContent等属性修改元素内容。
  • 修改元素样式：用style属性或classList方法修改元素样式。
  • 创建和删除元素：用document.createElement()和parentNode.removeChild()等方法创建和删除元素。

4. JavaScript 事件处理事件是用户与网页交互时发生的动作，比如点击、鼠标移动、键盘输入等。JavaScript 可以通过事件处理程序响应这些事件。

  • 注册事件处理程序：用addEventListener()方法注册事件处理程序。
  • 移除事件处理程序：用removeEventListener()方法移除事件处理程序。
  • 事件对象：事件处理程序可接收一个事件对象作为参数，包含有关事件的信息。

5. JavaScript 异步编程

  • 回调函数：异步编程方式，将一个函数作为参数传递给另一个函数，在特定事件发生时调用。
  • Promise：处理异步操作的对象，可以通过链式调用then()和catch()的方法处理成功和失败情况。
  • async/await：基于 Promise 的异步编程语法糖，使异步代码看起来更像同步代码。

6. JavaScript 面向对象编程JavaScript 是基于对象的语言，可以用面向对象编程的思想组织代码。可以使用构造函数、原型链和 ES6 的类实现面向对象编程。

7. JavaScript 模块化随着项目规模的增大，代码管理变难。JavaScript 模块化可以将代码分割成多个独立的模块，提高可维护性和可扩展性。可以用 ES6 的模块系统或 CommonJS 模块系统实现模块化。

8. JavaScript 库和框架

JavaScript 库和框架，这可是神器啊！jQuery、Lodash、React、Vue、Angular，有了它们，开发效率那是嗖嗖的！

1. 简单网页

简单网页，HTML搭结构，CSS美美哒，JavaScript输出个信息，F12一看，Console里“页面加载完成”，完美！

2. 响应式网页

响应式网页，CSS媒体查询，JavaScript监听窗口大小，一缩一扩，信息打印不停歇，F12一看，Console里“窗口大小改变”，666！

3. 表单验证页面

表单验证页面，HTML搞表单，CSS美美化，JavaScript验证输入，空了、格式错了，错误信息飞出来，验证通过，提示框弹出来，用户体验那是杠杠的！

4. 轮播图

轮播图，HTML搞结构，CSS美美哒，JavaScript切换图片，点击“上一张”或“下一张”，图片切换自如，酷炫！

看完这篇，觉得有帮助就一键三连[赞][赞][赞]，关注我吧，你的关注就是我最大的动力，前端知识，我分享，你学，咱们一起进步[比心]

如何在软件开发中实现酷炫的动画效果？几个办法教你解决编码困扰

作为一个程序员，无论是学习编程或者实际开发过程中，不管是移动端、PC端或者Web端，我们经常可以看到一些动画，比如图标、按钮、加载与刷新、提示与弹框、启动与关闭等等场景中，都会使用动画效果，美观灵动的动画效果，让产品页面的交互感也会变得更好。

不过，虽然在页面中添加动画有很多好处，但也会有诸多问题限制动画效果的实现，比如运行性能问题、效果还原度问题、开发效率问题等等……

基于此，小编在这里分享几个开发动画效果的好方法，好好利用，说不定可以有效帮助我们通过代码，完成想要的精美效果。

为什么使用Lottie作为开发动画的手段呢？

因为Lottie方式，能够解析渲染通过在AE上制作好动画，再导出成 json 文件，接下来在代码中可以完美还原动画效果。

由于这个特性，于是让Lottie具备两个很强的优势：

  • 动画数据源多样，可以使用网络加载动画资源，动态更新；
  • 跨平台且效果还原度高，设计稿导出一份动画描述文件，android,ios,react native通用。

Lottie是由Airbnb团队开发的一个适用于iOS、Android、React Native、Web和Windows的开源动画库，用于解析使用Bodymovin导出为JSON的Adobe After Effects动画，实时渲染AE动画并在设备上呈现它们！Lottie允许应用程序像使用静态图像一样轻松使用动画。

使用Lottie库解析AE动画，首先需要下载Bodymovin插件，将AE动画导出为JSON文件并包含一个JS库，之后在你的项目中，调用Lottie库来解析、渲染JSON动画效果，并且支持实体、形状图、蒙版、alpha遮罩、修剪路径和虚线图案等，不用担心动画维度或文件大小。

Keyframes是由Facebook团队开发的一个开源库，用于将基于Adobe AE的动画转换为允许在Android和iOS设备上呈现的数据格式，整体流程与Lottie类似。

效果示例

在使用Keyframes库前，首先需要安装Adobe ExtendScript Toolkit脚本，将AE动画导出为JSON文件，之后调用Keyframes库导出和渲染具有复杂形状和路径曲线的高质量、基于矢量的动画。

与Lottie不同的是，Keyframes对AE动画有一些约束，比如不支持预合成、形状层不支持路径合并、不支持路径修剪等等，使用场景和适用范围略有区别，感兴趣的朋友可以对比体验一下区别。

上面的两种方式，主要是基于AE导出JSON文件快速实现动画效果以及Lottie动画资源，但是这种方式毕竟流程比较复杂，对新手不太友好。

对于新手而言，我们可以使用阿里团队推出的犸良：基于Lottie的动效设计平台，犸良内置了一些动效素材，即使不会动效你也可以基于动效库和素材库快速开发出相关动画。

官网

使用素材示例

具体使用办法，我们可以通过支付宝扫码登录或者账号密码登录犸良，选择背景模版素材、自定义画布或上传背景图片开始创建动画，进入动画编辑页面，可以调整背景尺寸、修改文字、替换图片素材、编辑或替换动画素材等。

编辑完动画点击页面右上角的「完成编辑」按钮，网站将会把你的动画生成一个可预览的JSON动画效果，你可以用支付宝扫描该动画二维码在手机端预览动画，也可以下载该动画的JSON文件，好方便的用在自己的代码中。

目前犸良网站有200+动效模版，包含banner插图、金币红包、人物素材、button按钮、氛围图、icon以及阿里蚂蚁形象等等，丰富的动画素材及模板让你随心创作你的动画，赶紧去看看有没有适合自己的动画素材吧。

LottieFiles是由DesignBarn公司推出的Lottie官方动画社区，用于发现、测试和分享为Lottie和Bodymovin设计的精彩动画，网站提供英文、简体中文和德文三种语言。

在LottieFiles可以免费搜索来自全球动画师创作的1000多个精美动画，包括单个动画及动画包，可免费下载或付费下载，下载格式包括AE源文件、Lottie JSON文件、GIF动画及MP4文件等，同时兼容iOS、Android和Web。

官网

示例

示例

LottieFiles还支持你测试你的动画文件，无论在网站的任何位置只需要将你的JSON文件拖放进来就可以立即预览动画并生成动画二维码、链接地址，在iOS和Android上安装使用LottieFiles扫描动画二维码或者粘贴Lottie JSON动画链接地址在手机端预览动画效果。

同时，该社区还支持上传自己的动画作品，如果我们有相关才能，赶紧去发布作品开始展示吧。

以上就是本次分享的全部内容，我是，专注于开发资讯和编程教程分享，感兴趣的朋友可以关注我。

Vue+element+json封装一个动态渲染的表单控件

表单表单，你已经长大了，你要学会：

  • 动态渲染
  • 支持单列、双列、多列
  • 支持调整布局
  • 支持表单验证
  • 支持调整排列（显示）顺序
  • 依据组件值显示需要的组件
  • 支持 item 扩展组件
  • 可以自动创建 model

这个表单控件是基于 **element-plus** 的 el-form 做的二次封装，所以首先感谢 element-plus 提供了这么强大的UI库，以前用 jQuery 做过类似的，但是非常麻烦，既不好看，可维护性、扩展性也差，好多想法都实现不了（技术有限）。

现在好了，站在巨人的肩膀上，实现自己的想法了。

把表单需要的属性，统统放入json里面，然后用require（方便） 或者aioxs（可以热更新）加载进来，这样就可以实现动态渲染了。

比如要实现公司信息的添加、修改，那么只需要加载公司信息需要的json即可。

想要实现员工信息的添加、修改，那么只需要加载员工信息需要的json。

总之，加载需要的json即可，不需要再一遍一遍的手撸代码了。

那么这个神奇的 json 是啥样子的呢？文件有点长，直接看截图，更清晰一些。

另外还有几个附带功能：

  • 支持单行下的合并。

在单行的情况下，一些短的控件会比较占空间，我们可以把多个小的合并到一行。

  • 支持多行下的扩展。

多行的情况下，一些长的控件需要占更多的空间，我们可以设置它多占几个格子。

  • 自动创建表单需要的 model。

不需要手动写 model了。

再次感谢 el-form，真的很强大，不仅好看，还提供了验证功能，还有很多其他的功能。

只是好像只能横着排，或者竖着排。那么能不能多行多列呢？似乎没有直接提供。

我们知道 el-row、el-col 可以实现多行多列的功能，那么能不能结合一下呢？官网也不直说，害的我各种找，还好找到了。（好吧，其实折腾了一阵着的table）

二者结合一下就可以了，这里有个小技巧，el-row 只需要一个就可以，el-col 可以有多个，这样一行排满后，会自动排到下一行。

  • formColSort

存放组件ID的数组，决定了显示哪些组件以及显示的先后顺序。

  • v-for

遍历 formColSort 得到组件ID，然后获取ID对应的span（确定占位）以及组件需要的meta。

  • formColSpan

存放组件占位的数组。依据el-col的span的24格设定。

  • getCtrMeta(ctrId)

根据组件ID获取组件的meta。

为啥要写个函数呢？因为model的属性不允许中括号套娃，所以只好写个函数。

为啥不用计算属性呢？计算属性好像不能传递参数。

  • component :is=\”xxx\”

Vue提供的动态组件，用这个可以方便加载不同类型的子组件。

  • ctlList

组件字典，把组件类型变成对应的组件标签。

这样一个v-for搞定了很多事情，比如单列、多列，组件的排序问题，组件的占位问题，还有依据用户的选择显示不同的组件的问题，其实就是修改一下 formColSort 里的组件ID的构成和顺序。

我比较懒，手撸 model 是不是有点麻烦？如果能够自动获得该多好，于是我写了这个函数。

可以根据类型和默认值，设置 model 的属性，这样就方便多了。

就是用户选了某个选项，表单的组件响应变化后的model。

在我的计划里面是需要一个这样的简单的model，所以我又写了一个函数

这样就可以得到一个简洁的 model 了。

这个是最复杂的，分为两种情况：单列的挤一挤、多列的抢位置。

单列的表单有一个特点，一行比较宽松，那么有时候就需要两个组件在一行里显示，其他的还是一行一个组件，那么要如何调整呢？

这里做一个设定：

  • 一个组件一行的，记做1
  • 两个组件挤一行的，记做-2
  • 三个组件挤一行的，记做-3

以此类推，理论上最多支持 -24，当然实际上似乎没有这么宽的显示器。

这样记录之后，我们就可以判断，≥1的记做span=24，负数的，用24去除，得到的就是span的数字。当然记得取整数。

为啥用负数做标记呢？就是为了区分开多列的调整。

多列的表单有一个特点，一个格子比较小，有些组件太长放不下，这个时候这个组件就要抢后面的格子来用。

那么我们还是做一个设定：

  • 一个组件占一格的，还是记做1
  • 一个组件占两格的，记做2
  • 一个组件占三格的，记做3

以此类推。

这样记录之后，我们可以判断，≤1的，记做 24 / 列数，大于1的记做 24/ 列数 * n。

这样就可以了，可以兼容单列的设置，不用因为单列变多列而调整设置。

只是有个小麻烦，占得格子太多的话，就会提取挤到下一行，而本行会出现“空缺”。

这个暂时靠人工调整吧。

毕竟哪个字段在前面，还是需要人工设置的。

一顿分析猛如虎，一看代码没几行：

这个也是一个急需的功能，否则的话，动态渲染的表单控件适应性就会受到限制。

其实想想也不难，就是改一下 formColSort 里面的组件ID就好了。

我们设置一个watch来监听组件值的变化，然后把需要的组件ID设置给 formColSort 就可以了。

因为需要监听的组件可能不只一个，所以做了个循环，这样就可以监听所有需要的组件了。

上面的代码比较凌乱，这里整体介绍一下。

  • el-form-manage.js

表单组件的管理类，单独拿出来，这样就可以支持其他UI库了，比如antdv

  • el-form-map.js

动态组件需要的字典

  • el-form-div.vue

表单控件的代码

模板：

setup：

这里就简单多了，因为实现具体功能的js代码都分离出去了。要么做成子组件，要么组成独立的js文件。

这里主要就是负责重新渲染表单组件。

这个使用 el-form 提供的验证功能。

目前暂时还没有归纳好 el-form 的验证，因为需要把这个验证用的数据写入到json里面，然后读取出来设置好即可。

所以肯定没难度，只是需要点时间。

自带的组件肯定是不够的，因为用户的需求总是千变万化的，那么新组件如何加入到表单控件里面呢？可以按照接口定义封装成符合要求的组件，然后做一个map字典，就可以设置进去了。

因为接口统一，所以可以适应表单控件的调用。

简单的方法是，直接修改两个js文件。

如果不方便修改的话，也可以通过属性传递进来。目前暂时还没有想好细节，不过似乎不是太难。

https://github.com/naturefwvue/nf-vue-element

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科