【dw字体段落css】前端小知识入门小白篇

早上好，各位！今天说前面的内容。

这篇文章是小白的入门级、相对基础。

序言仍然很重要：我认为很多人一听到前端的两个词就在写网页。事实上，前端包含了很多东西。如果以10级来评价，不知道你们想象的东西是否占了20%，今天能不能把以前的东西整理好，送给需要的人。

一、使用工具

工具的话，DW好像是最熟悉的。光看图标就觉得亲切有木有？(图1)

(图1)

二、html的第一知识

Html不是编程语言，而是标记语言。您可以将内容放置在相应的标签内，以便通过网页显示。就像使用PS添加字体、颜色和样式一样.然后，完成向其他人导出图片。实际上，编写PS程序软件的人是编程工作。你要做的只是掌握一定的PS技法。同样，DW也是向他人展示内容的工具。内容(图片、文字、形状。)布局，添加样式和行为。导出为html文件，以便其他人可以通过浏览器查看。添加布局和风格的技术是你需要掌握的。

1.文件类型

后缀"。带有html "的文件是网页的文件格式，默认情况下使用浏览器打开。有时“。遇到“htm”这样的形式其实也差不多。就像Jpg也有JPEG这个名字一样。

2.新文件

在DW内创建新的html文件时，将自动出现以下代码(图2)

(图2)

此代码是必需的，不同版本的DW可能略有不同，但起着相同的作用。也就是说，创建新的PS文档时，至少有一个图层。这些代码规定了一些浏览器阅读所需的规范，为编写内容奠定了基础。

其中：

要显示的内容全部包含在标记内。换句话说，这是html画布。在画布外放置东西会导致不可见或错误。

你的主页名称在里面： (图3)

(图3)

(其他标签作用在以后的文章中慢慢解释，或者百度一下。)。

代码区域上方是“代码”(Code)、“分割”(Split)、“设计”(Design)、“实时”(Live)等多个菜单。请确保位于“代码”菜单下。

好像和尖括号“”认识，不认识的单词的构成是标签，也是构成主页不可或缺的要素。当然不只是这几个。有没有发现第一排和meta，都成对出现的树？(哦good，代码们都来虐狗了！)而且不相交。(图4)

(图4)

以下是需要注意的一些规范。

1)除特殊标记外，所有标记都必须成对出现，以“标记名称”开头，以“/标记名称”结尾(因此也称为开始和结束标记)，并且不能与其他标记相交。以下乱七八糟的方法绝对会死。(图5)

(图5)

2)标签名称小写(记住.）

3)每个标签的尖括号不多也不少。(关于浏览器阅读网页的格式，一般是从上到下、从左到右、阅读左尖括号''时，会搜索下一个右尖括号''到底。是的，是的。遗漏会造成严重的问题，在填充内容和样式之前，必须养成写一对标签的规范编码习惯。)。

好吧，话多无益，最好在实践中找到知识。

实战案例演示

第一，画矩形

你习惯在PS上移动鼠标吗？那么现在要改变方式，把DW想做的事情变成一行命令。(图6)

49c?from=article.detail&_iz=31825&index=5" width="404" height="254"/>

（图6）

在后回车换行，然后缩格（不想代码乱七八糟的话就养成换行缩格的习惯吧）。当你开始打左尖括号的时候右下角就已经有代码提示了，像平时的百度搜索一样，选择你想要的按下回车便自动完成。你也可以选择自己一个字母一个字母的敲。然后完整的敲出如下代码 —— 代码例1：（如图7）

（图7）

然后在第一个div的后面，先空格，再添加样式句子如下：（如图8）

（图8）

保存后刷新即可看到：（如图9）

（图9）

OK，接触到了

这个标签，我们就来说道说道。

我一般会把标签看做是一个一个的二维盒子，之所以说它是二维盒子，是因为盒子只有宽高，是平面的。这个盒子可以小到看不见，也可以大到望不到边。html中有很多种类的盒子，例如装链接的a标签盒子（），装文本的p盒子（）或者span盒子（

如例1中，有这样一句：（如图10）

style="width:200px; height:200px; background-color:#c93; "

（图10）

如果没有这一句，那就像在白色画布上画了一个白色的矩形，你将会看不到你的盒子。

width（宽）、height（高）、background-color（背景颜色）决定了盒子的宽高和颜色，他们被称为属性，其后跟的是属性值。其实有时候你完全可以把每个标签当成一个人或任何物体（有点面向对象思想的意思哦，有兴趣的请百度）。所有能描述这个人的外在都叫做他的属性：

（图11）

上图中的小孩如果我们要用html标记语言来描述的话，大概是这个样子（如图11）

：<人 style=”年龄：10岁; 肤色:黄色; 性别:男；”>，当然，不可能酱紫写啦，标签及标签属性是不允许有中文的。

所以，得到如下样式书写规范，多练习画几个盒子吧（可以尝试更改宽高及背景颜色）：（如图12）

（图12）

二、默认样式及附加样式（如图13）

（图13）

如果你是个乖孩纸，做了上面的练习，多画了几个盒子，你会发现，所有的盒子不管右边空格有多宽，新的盒子总是另起一行。你只规定了大小，并没有告诉盒子要“站”在哪里。

那就是即将要说到的。

1. 默认样式：

1）靠左而且会占与其自身高度一样的空间（前提是你已经规定了宽高，否则为0）（如图14）

（图14）

所以别人是没法紧随其后的。

2）div盒子默认为白色

2. 附加样式：

例1中style内就是附加样式，添加附加样式（以下简称样式）之前，div按照自身的默认样式呈现。添加样式之后，默认样式将被覆盖，也就是俗称的“后来居上”。来做个实验吧，在一个div盒子的样式也就是style内添加两个同一属性名，不同属性值的样式：（如图15）

（图15）

然后观察一下，最后出现的矩形颜色是#c93还是#c00？

好啦，到最后看看能不能不看示例自己敲出来吧。内容不多只是为了入门，之后会不间断更新争取讲多一点。