新手的]简单前端基础总结

2019-01-18 08:34:23 1.1k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

超简单！Svelte 前端框架入门指南（附实战示例） Svelte是一款轻量高效的前端框架，相比React和Vue更易上手。它通过编译时优化直接操作DOM，无需虚拟DOM，性能出色且代码精简。本文介绍了Svelte的安装配置、基础语法和组件结构，并通过一个待办事项应用实例演示其开发流程。Svelte组件由script（逻辑）、HTML（结构）和style（样式）三部分组成，语法简洁直观。实战案例展示了数据绑定、事件处理和条件渲染等核心功能。Svelte适合前端新手学习，能快速构建高性能Web应用。阅读详情

简单前端基础总结

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Adobe Dreamweaver CC 2017；
作者：梁柏源
撰写时间：2019/1/16
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
前端基础（包括：HTML、css3、JavaScript）
（一）HTML是用来描述网页的一种语言：用来描述一个类，将他具象化（个人见解）.
一般用于布局如：
<body>
<div class=””>
<div></div>
</div>
</body>

 类似于盒子，一个大盒子装好几个小点的盒子，小点的盒子里再装更小点的盒子等等等，直到装完，称为容器
然而HTML标签很多

在截图中可以看到少数我列出的标签，大多数多标有作用；
img标签主要是引入图片；
span标签是行内标签；
ul标签是段落标签
.container-fluid 类用于100%宽度，占据全部视口(viewport)的容器
.container 类用于固定宽度并支持响应式布局的容器（引用屈老师授课笔记（蓝色字体））
（二）css3给对象设计样式的存在
既然有了容器就会有样式（css3）
 样式的引入（link）

引入步骤：先创建一个css文件，然后用link引入，引入成功后，将如下图

样式有很多比如：
 颜色：字体颜色（color）
 背景颜色（background）
 边框设计：盒子阴影（box-shadow）
 水平方向的盒子阴影（h-shadow）
 垂直方向的盒子阴影（v-shadow）
 模糊距离（blur）
 文本居中（text-align）
 垂直居中（line-height）
 外边距（margin）
 字体大小（font-size）等等
 例如：

 上截图就是一些随便敲的样式，先个总容器一个宽高和颜色，然后各个div设置相同的宽高与外边距，左对齐和不同的颜色
 效果：

（已缩小）
 还有一些去除HTML标签负面效果的样式如：
 取消a标签下划线的（text-decoration: none）
 清除浮动（overflow: hidden）
 去除li标签小点的（list-style: none）
 图片定位（background-position）
 元素隐藏（display： none）
 css在一定程度上可以以实现动画效果，例如下图