初识Web前端框架

最新推荐文章于 2022-08-25 15:51:06 发布

徐明曉

最新推荐文章于 2022-08-25 15:51:06 发布

阅读量261

点赞数

分类专栏：实战

本文链接：https://blog.csdn.net/weixin_43518038/article/details/105778738

版权

实战专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. Web前端开发技术三要素：link

Web前端开发技术框架包括三个要素：HTML、CSS和JavaScript。

HTML：是用来描述网页的一种标记语言（标记标签），而不是一种编程语言。

  1. 标签：是指<html></html>，<div></div>。
  2. 标签是有语义的：标题用<h1>，表格展示用<table>，链接用<a>，无序排列用<ul>等等。
  3. 标签里可带有各类属性：最基本的就是class和id。class属性的作用是引用css样式；id的作用是配合javascript使用，具有唯一性。下面举几个例子说明
     * 图片标签<img>的主要属性有src，alt。src是引用图片的网络地址（必要）；alt是对这张图片的描述，如果图片加载不成功，则会显示alt的文字。
     * 超链接<a>的主要属性有href，target。href是指链接要跳转的网址（必要）；target是告诉浏览器点击这个链接后要以哪种形式找开窗口，target=”_blank”是指打开一个新窗口

CSS：官方名字叫层叠样式表，它的出现是为了解决内容和表现分离的问题，一般存放在.css文件里。

  1. CSS使用：可在html的头元素<head>里书写，或者书写在CSS文件并在html里引用该文件。
  2. CSS优先权：多个css样式可集中在单个html标签里，出现这种情况时，一般按优先权划分从低到高划分：
     * 浏览器默认设置 （最低）
     * 外部样式表
     * 内部样式表（写在html的<head>标签内部）
     * 内联样式（写在html的标签里，即style属性）（最高）

  3. CSS的语法:css由两个主要部分组成，选择器，一条或多条声明。
     选择器是指css样式的名字“.seletor”，名字前面要带上一点“.”。声明是由属性和值组成，给个例子“margin: 0 auto”，冒号前面是属性，后面是值，该例子是定义元素居中显示。

JS(JavaScript)：javascript是脚本语言，它是连接前台（html）和后台服务器的桥梁，它是操纵html的能手。

  1. 原生JS：是指最基础的JS，没有封装过，但因为各浏览器对JS的支持不同，就导致用基础的JS编程需要为不同的浏览器写兼容代码。
  2. JS库，JS框架：是指集成一系列dom操作，API封装，界面UI封装的的库类，常见的有jQuery，extJS等等，这方面的定义比较难区分，暂不误导
  3. JS插件：就是集成了帮助程序员轻松完成功能的程序。JS插件用得比较多，网页制作上随处可见。如图片轮换功能，导航制作，上传图片等等。

2. 常用前端框架：link

使用前端框架可以降低界面开发周期和提高界面的美观性。

vue.js - 小巧精致,渐进式JavaScript 框架
Material-UI -一组反应元件，实现谷歌的材料设计
Angular - Google开发的前端技术框架
React,js 中文网 - 用于构建用户界面的Javascript库
Foundation - 高级响应式前端框架
jQuery - 一个快速、简洁的JavaScript框架
Sass -世界级强大的专业CSS扩展语言
Pure -轻型响应式CSS框架
Ant Design - 蚂蚁金服的UI设计语言
Material Design Lite - Google官方轻量级MaterialDesignLite版
Semantic UI - 语义化设计的前端开源框架
Aurelia - javaScript客户端框架
Element - 饿了么出品基于Vue2.0前端组件库
Bootstrap中文网 - Bootstrap中文爱好者网站
Ember.js - Web应用程序开发的MVC框架

徐明曉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Web前端框架

1. Web前端开发技术三要素：linkWeb前端开发技术框架包括三个要素：HTML、CSS和JavaScript。HTML：是用来描述网页的一种标记语言（标记标签），而不是一种编程语言。 1. 标签：是指<html></html>，<div></div>。 2. 标签是有语义的：标题用<h1>，表格展示用<tabl...
复制链接

扫一扫