构建项目
第一件事–设计页面架构
在使用HTML&CSS在构建现在很流行的扁平化风格的页面的时候(或者其它所有的静态页面的时候),第一件事就是需要进行页面结构的设计,不要一上来就手撸代码,有时候重新架构一个项目的难度远远大于从头开始写这个项目。
需要语义化的使用各种HTML标签,不要将所有的标签都用<div>
来设置,这样会使后面的维护变得越来越困难。
下面是简书的一个页面的部分HTML标签:
可以看到里面使用了许多语义化的标签<li>
、<span>
、<em>
等,这些语义化标签可以更好的帮助我们来结构化我们的代码,并且使得维护更加轻松。
下面是一些常用的语义化标签的说明和适用条件:
<a>
:超链接,用于支持跳转的文本内容。<address>
:文档或者文章的作者的联系信息。<article>
:块级元素,表示一篇文章或者一个文档。<blockquote>
:引用块,表示这部分内容是引用别人的。<caption>
:定义表格的标题。<button>
:按钮,这个就不多说了。<code>
:代码块,表示里面是一部分代码块。<div>
:division,表示一个部分,基本没有什么语义性。<figure>
&<figcaption>
:分别为图片块以及内部的图片标题。<footer>
:页脚,一般使用在页面最底部的较短的一块。<img>
:图片元素。<input>
:表单输入框。<li>
&<ol>
&<ul>
:列表元素、有序列表块和无序列表块,在出现一列相同样式元素的时候使用。<nav>
:导航链接部分,适用于页面中的导航栏。<option>
&<select>
:表示下拉菜单的选择框和各个供选择的条目。<p>
:paragraph,段落,表示文章的某一个段落。<pre>
:源代码,这个标签中的内容会用等宽字体显示,并且会保留所有的tab、空格以及换行等样式。<progress>
:进度,HTML5新特性,可以用来显示一个任务当前的进度。高度语义化的一个标签。<section>
:文档中的区段或者某一个部分。<big>
&<small>
:标签内的字号会大一号或者小一号。<span>
:组合文档中的行内元素,并且为其添加样式。<del>
:带有删除线的文本。<sub>
&<sup>
:下标文本和上标文本,用来进行设置上下标的,高度语义化。<table><td><tr><th><tfoot><thead>
:与表格相关的一些标签,具体使用方法可以自行查看HTML表格
用CSS来实现样式
使用语义化的HTML标签是为了让我们更容易理解自己页面的架构,但是并不是用来为元素添加样式的,由于各个浏览器对于标签的渲染是不一样的,所以为了样式可以在各种浏览器上都做到兼容,仍旧需要使用CSS来添加样式,这时,就需要首先移除掉所有标签原本的样式。
比如,在初始化的HTML中,body会有一定的边距,这种样式对我们来说是完全无用的。怎么移除这些无用的样式呢?
可以使用normalize.css这个样式表,normalize.css可以帮助我们移除无用的默认样式。
normalize.css
A modern, HTML5-ready alternative to CSS resets