这一篇，我们开始搭建留言板的主体内容。
先规划下留言板的布局，最简易的留言板应当分为：留言显示区和留言发送区，留言显示区，可分为留言人的昵称，留言时间和留言内容；留言发送区，可分为留言人昵称输入框和留言内容输入框，留言时间可在后台根据计算机时间自动添加。
网页要显示的内容，都需要写在<body></body>标签内，我们先写入一个外部的层，并将class命名为wrap。这里的class被称为元素的类，用于css定义该元素div的样式，或者JS（javascript简称）操作该元素。
<body>
<div class="wrap">
</div>
</body>代码段中的<div>是HTML标签，是一个块级元素，顾名思义，在它里面的内容自成一块区域，与其他区域分隔开来，与块级元素相对应的，是行内元素（例如<span>标签、<label>标签、<i>标签等等），两者的区别如下图所示：
从图中可以看出，块级元素自成一行，多个行内元素可以存在于一行。两者主要的特性为：
- 块级元素可以包含块级元素和行内元素，行内元素只能包含行内元素，不能包含块级元素
- 块级元素可以设置高度和宽度，没有设置宽度时，默认为100%。行内元素是没有高宽度的，取决于行内元素的内容高度，也就是行高。
块级元素可以通过CSS来改变其所占区域，使多个块级元素可以存在于同一行，同理，行内元素也可以成为块级元素，单独占一行，这些后面会碰到，现在不细说。
标签属性class，被称为类，还有id，都是用来区分层级，不同区域，为CSS和JS用来定位。同名class可以用于多个标签，有时候可以省却很多css代码或者方便统一设置样式，id名是唯一的，同个页面不能有相同id的存在，不然很容易出错。
对于标签的id、class等命名最好用语义相关的单词，或者是拼音（本人推荐还是使用英语单词较好）
现在开始设置最外面的层，将留言板的宽度变为固定宽度（这里不考虑自适应），这样在CSS文件里只要设置.wrap的宽度即可，我们先搭好部分布局，再写相应的CSS（这只是我个人的习惯而已）。
在.wrap内写入留言显示区域的HTML，我们将它的class命名为mes-board。
<body>
<div class="wrap">
<!-- 留言显示区 -->
<ul class="mes-board">
<li class="mes-content">
<h4>义乌小白：</h4>
<small>2016-10-02 11:00</small>
<p>大神之路，从留言板开始！</p>
</li>
<li class="mes-content">
<h4>义乌小白：</h4>
<small>2016-10-02 11:00</small>
<p>大神之路，从留言板开始！</p>
</li>
</ul>
</div>
</body>这里我预先填入了一些内容，为的是能够预览效果。下面介绍一些标签：
<!-- --> 这个是HTML的注释标签，是不会在浏览器上显示的。多用于代码说明，有利于代码的维护，当然也可以将不希望显示的代码注释掉，以后要用的时候，就不需要重新敲代码，只要把注释标签取消，就可以显示了<p>无序标签ul：</p>
<ul>
<li>无序标签</li>
<li>无序标签</li>
<li>无序标签</li>
</ul>
<p>有序标签ol：</p>
<ol>
<li>有序标签</li>
<li>有序标签</li>
<li>有序标签</li>
</ol>
ul 是无序列表标签，对应的为<ol>...</ol>有序列表标签
li为列表内容
p为文本标签下图为无序列表ul和有序列表ol在浏览器中的表现：
<h4></h4>标签表示标题（在这里用于表示昵称），类似的标签还有<h1>、<h2>、<h3>等等一直到<h6>为止，数字越小字体越大越粗
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
当然你也可以通过CSS来改变它的默认样式。
在这里要注意<h1>这个标签，对于SEO还是有点用处的，一般<h1>标签内都会包含该页的核心关键词，但是绝对不能滥用，会被搜索引擎认为优化过渡，建议一个页面不要超过1个，<h2>与<h3>的功能相对减弱很多，也可以用用，一个页面不要超过2-3个。
我们先在浏览器中看下未写样式的版面。
现在我们开始写css样式。在为留言板写样式之前，我们应该将css初始化，因为每个浏览器他自身有着默认的css样式，而且在某些标签下数值各不相同，因此，我们应该将他们统一（这篇小白文，不涉及浏览器的兼容性）。
/* CSS初始化 */
html,body,div,article,section,ul,li,form,p,input,button,textarea,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
ol,ul,li { list-style: none; }
a,a:hover { text-decoration: none; }
img { border: none; }
body {
font: 100%/1.5 "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
color: #666;
}
当然初始化并不仅仅是这些，但是这些已经够我们用的了，我的建议也是用多少初始化多少，我们看看初始化后的界面
所有的默认样式的外边距和内边距都归为0了，这将方便我们为相应的元素添加样式，达到我们所想要的排版；文字的颜色和字体也都改变了。我们下面将一一介绍：
/* */ 是css的注释，可注释多行
html,body,div,article,section,ul,li,form,p,input,button,textarea,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}margin定义元素的外边距，padding定义的是内边距，这里涉及到CSS的一个基本盒子模型，见下图（图比较粗糙），
在css定义的那些元素，大家会发现，初始化的都是块级元素，因为只有块级元素才有margin和padding属性。
ol,ul,li { list-style: none; }去除了li前面的标志类型，就是小圆点（无序列表）或者序号(有序列表)，前面2张图可以比较出来。
a,a:hover { text-decoration: none; }去除超链接的下划线，以及鼠标放上去后也不会出现下划线，a:hover 就是定义鼠标放在链接上的样式，这里是因为<a></a>这个超链接，默认的状态下是有下划线的
img { border: none; }去除图片的边框
body {
font: 100%/1.5 "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
color: #666;
}这是为网页的文字设置文字大小、行高、字体以及颜色；其中font我这里使用了简写的方式，分开写就是：
body {
font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
font-size: 100%;
line-height: 1.5;
color: #666;
}font-family 定义字体，先写西文字体，再写中文字体，最后写一个通用字体。浏览器应用字体也是从前往后，如果前面的字体没有，就往后寻找；
font-size定义文字大小，我在这里是定义他们按照默认的字体大小；
line-height定义行高，不带单位的行高则动态计算，大家可自行百度吧；
color顾名思义，就是颜色，定义文字的rpg颜色，#666是缩写，能缩写尽量用缩写，也可以用单词，但是不建议使用。
通常我们应该还要写一个清除浮动的样式，我们可以命名为clearfix
/**
* clearfix hack
* reference:http://nicolasgallagher.com/micro-clearfix-hack/
*/
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after { clear: both; }
/*for IE6/7*/
.clearfix { *zoom: 1; }
什么是浮动？这个后面用到时会讲到的，这个也是很重要的概念，建议大家去看下相关资料。我这个clearfix是按国内的大神推荐的一个网址写的，在注释部分有地址。里面的内容我也不一一讲解了，后面我也不会讲的很详细了，因为这样好拖节奏，两篇文章下来，还在开头阶段。一些非常基础的知识，可以预先在W3C school里面自行了解，或者本人推荐关于HTML和CSS的一本书籍，是Head First系列的
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
