零基础也能看懂！这篇文章千万别错过！

Sunny萧萧:本文作为小白的入门级，相对基础，写给现在想了解一点前端知识的设计师同行。这篇文章用设计师熟悉的东西解释了与前端相关的术语（例如，背景解释（这里省略了2000个单词…）。序言仍然需要一点：许多人认为他们一听到前端这个词就在写网页。事实上，前端包括很多东西，不仅仅是标签和风格。如果按10级来评价，不知道你想象的东西有没有占20%。今天，为有需要的人整理一些以前的东西。作为web转行做设计师的人，我会尽量从设计师能理解的角度来说，如果有不足和错误，请纠正但不要喷。1、如果你使用工具和工具，我认为DW是最熟悉的。对于设计师来说，光看图标就感觉很友好？DW可能不是全职前端的首选，因为它会觉得性能不好，比如代码提示不够，工作效率不高。以DW为例，这主要是...我的电脑里只装了它。太多的代码提示不是一件好事。如果你养成了只记住前两个字母然后等待代码提示的习惯。大概就像没有自动铅笔的时候，连普通铅笔都不会剪。多尴尬啊。第二，初步识别htmlhtml不是编程语言，而是标记语言。它只是以网页的形式在相应的标签中显示内容，让人们看到。就像用PS添加字体、颜色、样式一样。。。然后导出成一张图片给别人看。事实上，编写PS程序软件的人所做的就是编程。你所需要做的就是掌握一定的PS技术。同样，DW也是一个让你的内容呈现给他人的工具，你可以给内容（图片、文本、形状……）布局，添加风格、动作……然后导出一个html文件，让其他人可以通过浏览器看到，布局和添加风格的技术是你需要掌握的，这是本文想要传达的。1.文件格式的后缀是“.html“文件是网页的文件格式，默认用浏览器打开。有时会遇到诸如“有时会遇到”之类的“例如”.htm其实格式也差不多。就像jpg也叫jpeg一样。2.在新文件DW中新建html文件，然后自动出现以下代码：该代码至关重要，不同版本的DW可能有所不同，但功能相同，相当于在新建PS文档时至少有一个层。这些代码规定了浏览器读取所需的一些规范，为您写入内容奠定了基础。其中：所有想要显示的内容都安装在标签中，即html画布，将东西放在画布外，可能看不见，也可能出错。你的网页名称包含在内:(其他标签功能会在后面的文章中慢慢讲解或者百度。）编码区上方有几个菜单，Code（编码）、Split（拆分）、Design（设计）、Live(实时)，请确保您在编码菜单下。之前有设计师用design直接可视化排版，说也可以排版。嗯...程序员为什么要来？你有你的便利，我们有我们的优势...乖乖码字。尖括号“<>而看似不知道的单词的组成就是标签，也是构成网页不可或缺的元素，当然不止这些。有木发现，除了第一行和带meta的，都是成对儿出现的？（ohgod，代码都来虐狗了！）而且不交叉。以下是一些需要注意的规范：1）除特殊标签外，所有标签必须成对出现，并以“<tagName>以“”开始，以“</tagName>“结束(所以也叫开始标签和结束标签)，不要和其他标签交叉:下面这种乱七八糟的方式肯定会死得很惨。2)标签名小写(记住……)3)每个标签的尖括号不能多也不能少(这与浏览器读取网页的形式有关，一般从上到下，从左到右。当你读到一个左尖括号时，“好吧，多说是没有用的，或者在实践中寻找知识！”实战案例演示1。你习惯于在PS中移动鼠标画矩形吗？那么现在要改变一种方式，把你想让DW做的事变成一行命令。然后在第一个div后面，先空格，再添加样式句子如下：保存后刷新即可看到：OK，当我们接触到这个标签时，我们会谈谈。我通常把标签看作是一个二维盒子。之所以是二维盒子，是因为盒子只有宽度和高度，是平的。这个盒子可以小到看不见，也可以大到看不见。html中有很多种盒子，比如a标签盒()、文本p盒()或span盒(比如1，有这样一句话:style="width:200px;height:200px;background-color:#c93;"如果没有这句话，就像在白色画布上画一个白色矩形，你会看不到你的盒子。width（宽）、height（高）、background-color(背景颜色)决定了盒子的宽度和颜色，它们被称为属性，其次是属性值。width（宽）、height（高）、background-color（背景颜色）决定了盒子的宽度和颜色，它们被称为属性，其次是属性值。事实上，有时你可以把每个标签都当作一个人或任何物体（有点面向对象的想法，请百度感兴趣）。所有能描述这个人的外表都被称为他的属性：如果我们想用html标记语言来描述上图中的孩子，可能是这样的：当然，不可能写酱紫色，标签和标签属性不允许有中文。因此，获得以下风格的书写规范，多练习画几个盒子(可以尝试改变宽高和背景颜色)：2、默认风格和附加风格。如果你是一张好孩子的纸，做上面的练习，画更多的盒子，你会发现无论右边的空间有多宽，新盒子总是另一行。你只规定了大小，没有告诉盒子要“站”在哪里。那就是要说的。1.默认风格:1)左侧，会占用与自身高度相同的空间(前提是你已经规定了宽度和高度，否则是0)，所以别人跟不上。2)div盒默认为白色。2.附加风格:例1中的style是附加风格。在添加附加风格(以下简称风格)之前，div按照自己的默认风格呈现。添加样式后，默认样式将被覆盖，俗称“后来居上”。让我们做一个实验。在div盒的样式中添加两个相同的属性名称，即style，具有不同的属性值：