返回

从零开始学前端

#知识库
#拓展知识
4%
进度
0/0
知识点
2
笔记
概述
1. HTML CSS 概念初识
1.1 HTML的基本认识
1.2 CSS 的基本认识
1.3 学习前的准备工作
2. HTML 基础入门
2.1 HTML 的语法认识
2.2 HTML 的框架标签
2.3 HTML 的内容标签
2.4 HTML 的布局标签
3. CSS样式表初识
3.1 CSS 的标准应用语法
3.2 CSS的引用方式
3.3 选择器的多种使用方法
3.4 CSS的盒模型认识
3.5 标签的宽和高尺寸
4. CSS 常用属性的应用规则
4.1 文字属性
4.2 色彩/图片属性
4.3 排版定位
4.4 动画效果
4.5 其它常见样式类型
5. 网站前端布局实例
5.1 HTML样式的语法
5.2 CSS 全局预设
5.3 顶部样式定义
5.4 内容样式定义
首页知识库知识库从零开始学前端

概述

UX百科编辑部 编辑于 2024-01-0523人正在学
30

HTML 和 CSS 是网页前端页面布局和样式定义所使用的编程语言,也是 UI 设计师要尽可能学习和掌握的基础知识之一。

理论上来说,术业有专攻,现代团队只有分工明确才有生产效率。但为什么要求设计师也要懂 “编程” 呢?

简单概括就是代码的实现逻辑是制约 UI 设计的重要因素,掌握得越多,对于设计可用性的理解也就越深。就像建筑设计必须需要了解工程力学、产品设计必须了解材料学和生产工艺。

设计是建立在一系列限制下的视觉解决方案,如果不了解这些限制条件,那么设计就只能停留在方案阶段而无法最终实施,或者最终的实施结果和预期南辕北辙。

尤其是 UI 设计到产品落地的真实项目中,如果缺乏必要的知识,就无法和前端有效的沟通和协作,导致最终还原度崩塌,或严重拖累项目开发进度。

而前端语言总类很多,除了网页还有 iOS、Android 端,以及桌面的 Windows、MacOS 等,学习并掌握所有前端语言并不现实,但它们搭建页面、制定样式的编程逻辑是相通的,就像学习 UI 设计软件掌握其中一个再理解其它软件是没有门槛的。

所以 HTML CSS 就成为设计师了解前端页面编程流程、思路的最佳对象。它包含的优势有:

  • 逻辑简单,只是脚本和记事语言没有复杂的逻辑,可以快速上手
  • 上手容易,不用安装复杂的编译环境和软件用任何轻量化编辑器都可以编写并预览
  • 便于参考,可以随时从线上网站参考它们的相关代码是如何编写的

学习 HTML CSS 并不是让大家在真实项目中编写网页页面样式,仅仅是了解它们的编写逻辑,并自己动手做一些练习即可,一周以内就能完成。

对于投入的时间和成本,可以在未来获得远超预期的收获。包括:

  • 了解前端开发思路,更好的和前端沟通和高效协作
  • 能判断设计的可用性,提前优化方案的可行性不用反复改稿
  • 为建立专业设计规范做好准备,加速项目的整体开发效率和质量

下面,我们就更具体的介绍一下 HTML 和 CSS 的基础概念。

UX百科内部交流群已开启,有任何体验问题或者学习问题可以加群交流:

点赞
收藏
学会
35083023
下一篇: 1.1 HTML的基本认识
HTML 也叫做超文本标记语言,是一种对内容进行结构化标记的工具。比如我们在一个 TXT 文档中,输入下面两行文字: 超人的干货上新 关于 HTML 和 CSS 入门详解 对于我们来讲,这两段文字的身份分别是 “标题” 和 “正文”,但对于电脑来说,它们都只是一系列文本而已。所以,我们需要赋予它们合...
笔记 (1)
只看自己
logo
UX小学生 记录于 2024-03-20
代码的实现逻辑是制约 UI 设计的重要因素,掌握得越多,对于设计可用性的理解也就越深。
原文: 简单概括就是代码的实现逻辑是制约 UI 设计的重要因素,掌握得越多,对于设计可用性的理解也就越深。
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞