首页 
从零开始学前端
知识点 0/11 · 4%
0. 概述
4
%
从零开始学前端
最后更新于 2024-06-12
#拓展知识#知识库
前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax。
开始学习22
文章数
19.8K
总字数
11
知识点数
16.9K
学习人数
427
学完次数
10
精选笔记
知识库概述
HTML 和 CSS 是网页前端页面布局和样式定义所使用的编程语言，也是 UI 设计师要尽可能学习和掌握的基础知识之一。
它包含的优势有：
- 逻辑简单，只是脚本和记事语言没有复杂的逻辑，可以快速上手
- 上手容易，不用安装复杂的编译环境和软件用任何轻量化编辑器都可以编写并预览
- 便于参考，可以随时从线上网站参考它们的相关代码是如何编写的
学习 HTML CSS 并不是让大家在真实项目中编写网页页面样式，仅仅是了解它们的编写逻辑，并自己动手做一些练习即可，一周以内就能完成。
重点掌握：1. 了解前端开发思路，更好的和前端沟通和高效协作、2. 能判断设计的可用性，提前优化方案的可行性不用反复改稿、3. 为建立专业设计规范做好准备，加速项目的整体开发效率和质量 即可。
HTML CSS 概念初识
已学会 0/3 · 知识点 0/1
HTML的基本认识
HTML 也叫做超文本标记语言，是一种对内容进行结构化标记的工具。比如我们在一个 TXT 文档中，输入下面两行文字： 超人的干货上新 关于 HTML 和 CSS 入门详解 对于我们来讲，这两段文字的身份分别是 “标题” 和 “正文”，但对于电脑来说，它们都只是一系列文本而已。所以，我们需要赋予它们合...
CSS 的基本认识
上一部分的案例中，Hello World 是一段黑色的标题，但我想修改它的大小、色彩、粗细、位置怎么办？ 这就需要更改它对应的属性了，在最初，这种更改只需要用 HTML 的功能就可以完成，但效率实在是太低了（后面也会说），于是，分离出了 CSS 作为专门控制样式的替代品。 对于 HTML 的每一个标...
学习前的准备工作
了解了它们的基本概念，接下来，我们就要为具体的学习做准备工作了。对于 HTML CSS 来说，准备工作相当简单，核心只有两件事：浏览器、编辑器。 HTML 文档本身并没有什么特别的，只是一个 HTML 后缀的文本文件而已，需要用浏览器打开才能显示出具体内容。比如把标题文本渲染成 40px 大小、黑色...
HTML 基础入门
已学会 0/4 · 知识点 0/2
HTML 的语法认识
2.1.1 HTML 标签 我们知道 HTML 的主要作用是标记元素的类型，这个标记的专业术语叫做 “标签”（HTML TAG）。标签由三个概念组成，分别为标签名、尖括号、结束标签。 在上一篇中，我们做过的演示，标题和一段正文，是由 h1 和 p 两个标签组成。 结束标签是 HTML 中的重要内容，...
HTML 的框架标签
设计过 UI 界面的同学应该都知道，每次开始界面具体内容设计前，我们要先做一些全局的谋划和置入官方组件元素，比如状态栏、首页指示器、底部导航栏、页边距等信息。 而我们创建一个标准的网页文件，也需要做对应的准备工作，那就是提前把页面的结构创建好。当然，这些结构就不是设计素材了，而是对应的页面标签。下面...
HTML 的内容标签
2.3.1 一般文本格式标签 首先我们从最基本的文本类标签开始学起，这是最没有理解成本的标签类型。我们把常见的文本标签罗列出来大家看一看： <h1> – <h6>：1级标题 – 6级标题 <p>：表示一个正文的段落 <b> ：仅...
HTML 的布局标签
最后一部分，我们要介绍的，就是专门用来进行内容布局和定义结构的标签，主要包含： <div>：万能模块定义的标签， 用来组织不同的标签元素形成一个整体 <span>：行内内联元素，主要用来控制一些特殊的文本类型 <header>：页面的头部内容区域定义 <na...
CSS样式表初识
已学会 0/5 · 知识点 0/5
CSS 的标准应用语法
CSS 和 HTML 不是同一种代码语言，所以自然语法书写的形式上也有差异。比如下面是一段标准的 CSS 代码，作用是指定 h1 标签内容为红色。 一段 CSS 代码中通常包含两样东西 —— 选择器、声明。选择器就是前面所写的 h1，它是需要控制样式的 “对象”，而每条声明则是声明了一则 CSS 的...
CSS的引用方式
了解完语法，并不是直接就可以开始写 CSS 代码并产生作用了，需要学会 HTML 如何引用 CSS，换句话讲，就是 CSS 代码要写在什么地方。主要有三种形式： 外部样式表 内部样式表 内联样式 3.2.1 外部样式表 外部样式表，就是我们在这个 HTML 文档之外，创建一个 CSS 文档，专门用来...
选择器的多种使用方法
选择器是让 CSS 定位到具体的某个或某些元素，来修改它们的样式，是我们开始编写具体样式代码前要优先确保正确的地方，常见选择器包含： 标签选择器 Class、id 选择器 伪类、伪元素 3.3.1 标签选择器 前面案例中应用的选择器，都是以标签为对象的，假设我们把选择器定义成 p 标签，那么整个页面...
CSS的盒模型认识
CSS 的盒模型 （box model），是实现元素排版布局的核心概念，下图就是盒模型的标准示意图： 里面标注的英文都是 CSS 可以声明的属性，我们分别解释一下： Margin：外边距，可以撑开元素和其它元素的距离 Border：描边，约等于我们设计软件中的描边边框 Padding：内边距，从描边...
标签的宽和高尺寸
接下来，我们就要讲讲有关页面展示中，宽高的定义方式了。在 CSS 属性中，是提供了 wight、height 两个属性的，用来定义标签的宽和高尺寸。 比如我们可以定义一个 div 的宽高都是 100px，用属性 width 和 height 表示： 这是我们手动设置的一个 “固定尺寸”，但是，在 H...
CSS 常用属性的应用规则
已学会 0/5 · 知识点 0/2
文字属性
4.1.1 文本属性 在 CSS 中，文本指的是标签中的文字内容，我们可以控制一些特定的文本属性，常用的包含： color：标签中的文本颜色，使用颜色名或 #212131 这样的编码 line-height：每行文本的高度，用像素单位设置 text-align：文本的对齐属性，包含 left、rig...
色彩/图片属性
前面为了展示模块实际区域，我们应用过很多次 background 属性来定义背景色，相信大家已经有所了解。但是，background 的作用可不仅仅只是定义背景色而已，它包含： background-color：定义背景色的属性 background-image：定义背景图片的属性，使用 ̶...
排版定位
如果我们通过浏览器的检查功能去查看界面的框架，就会发现实际上一个完整的网页是由无数矩形拼接起来的，我在自己的教学中为了方便大家理解称其为 —— 矩阵视图。 要把这些矩形框架合理搭建起来，就需要应用到定位相关的属性，来控制它们的顺序和位置，主要应用到的属性包含下面几个： position：定位类型设置...
动画效果
4.4.1 过渡效果 动效在 web 2.0 以后的需求越来越强，尤其是对于交互的反馈表现，在过去，我们只能依托 JS 来实现操作的动效，但在更新到了 CSS3 以后，就为我们提供了直接操控动效的属性 —— transition。它包含了 4 个下级属性，分别是： transition-proper...
其它常见样式类型
4.5.1 色彩设置原理 前面我们使用的 color、background-color 等属性，都是用来指定色彩的属性。但是设置色彩本身，不仅仅只是 16 进制色或者已经给出的颜色命名，还包括可以使用 RGB 和 RGBA 色值。 RGB设置：color: rgb(255,255,0); 复制软件中...
网站前端布局实例
已学会 0/4 · 知识点 0/1
HTML样式的语法
写了那么多 HTML CSS 的学习，终于，要在这篇迎来具体的案例应用了。下面，就是本节课要演示的案例图，我们要通过 HTML 和 CSS 将它实现出来： 在完成设计稿以后，我们着手项目的前端界面布局，首先要先建立项目有关的文件夹，然后在这个文件夹根目录中创建 ”index.html“ 文档，再创建...
CSS 全局预设
相信通过上面几个模块的演示，大家应该能了解如何制定 HTML 标签的结构了吧，节省篇幅，页脚模块的样式我就不添加了。 我会将基础的文件框架放在素材文件夹中，大家在公众号回复 ”前端“ 即可获取。 在这个全局预设中，我们分别清除了 margin、padding、list-style 三个属性的默认数值...
顶部样式定义
接着，我们来完成顶部样式的制定。我们可以发现，顶部的导航栏背景实际区域的尺寸宽是 960px，高是 60px，并在画布中居中显示，那么它们的样式： 然后，我们就要定义导航栏内的元素了，包含两个部分内容，LOGO 和导航按钮文字，所以我们可以使用 float 属性来表现它们，并使用 margin 属性...
内容样式定义
然后，我们再来实现内容区域的样式，标题这些我就不说了，我们先重点讲讲卡片模块。 卡片内部实际上有内边距的存在，所以我们可以使用 padding 属性，同时因为一行有四个卡片，每个卡片间有间距，所以也要使用 float 和 margin 属性。 要记住在这个定义下，我们使用了 padding，那就等于...
推荐笔记
用户名长的话就这样
2024-08-16
比如：某一瞬间的购物订单，某一瞬间车次上的乘客名单….对象图相对类图会更注重实际数据参考，拥有自己的状态和数据值。
首先，介绍一下大名顶顶的 div，这是一个专门用来进行聚合内容的万能标签，类似 UI 设计软件中的 “编组” 功能，无论里面放了什么花里胡哨、乌七八糟的内容，都可以通过一个 div 标签将它们统一进行编组。
UX小学生
2024-06-28
前端学习软件 http://brackets.io
所以，根据我自己的使用经验，墙裂推荐一款非常适合设计师学习前端的软件 Brackets，它搭配 Chrome 浏览器可以实现代码所见即所得的功效。 http://brackets.io
UX小学生
2024-06-27
<h1>内是标题，<p>内是正文：
<h1>超人的干货上新</h1>
<p>关于HTML和CSS入门详解</p>
HTML 的标签，就是赋予它们对应身份的铭牌，在 HTML 下的展示就会是这样，内是标题，内是正文： 超人的干货上新 关于HTML和CSS入门详解
UX小学生
2024-06-26
auto：它是让浏览器自己计算边距的数值
margin 除了设置数值以外，还有个很重要的值，就是 ”auto“，它是让浏览器自己计算边距的数值，也自适应布局里非常重要的参数，我们会在后续演示中讲解。
UX小学生
2024-03-20
代码的实现逻辑是制约 UI 设计的重要因素，掌握得越多，对于设计可用性的理解也就越深。
简单概括就是代码的实现逻辑是制约 UI 设计的重要因素，掌握得越多，对于设计可用性的理解也就越深。
