博前“废话”:
昨天理解到javaweb的前端技术有html、css、javascript等技术,然后今天一大早就迫不及待地开始动手敲代码,但是敲着敲着发现代码混乱、质量也不高,更别说性能了。那怎么办呢? 脑袋第一反应是“问度娘”,结果还真有一些专门讲解然后优化代码的书籍。加之今天讲师推荐了一本《编写高质量代码 web前端开发修炼之道》曹刘阳著,于是拜读了此书。以下是对拜读此书的一些总结。
高质量的HTML
1.标签的语义
既然学习html语言,那么标签肯定不陌生。这里对常用的标签做一个总结.
标签 | 全拼 | 含义 |
---|---|---|
p | paragraph | 段落 |
a | anchor | 锚 |
h1~h6 | header1~6 | 标题1-标题6 |
font | font | 字体 |
div | divisjon | 分隔 |
span | span | 范围 |
ul | unordered list | 不排序列表 |
ol | ordered list | 排序列表 |
li | list item | 列表项目 |
table | table | 表格 |
img | image | 图片 |
input | input | 用于收集用户信息 |
form | form | 表单 |
其中span、div其实没有语义的,span作用于行内元素,div作用于作用于块级元素。
2.为什么要将标签语义化呢?
现在的搜索引擎越来越多了,当然也各有差异。有些搜索引擎看不到定义的视觉效果,能看到的是代码,而且只能通过标签来判断语义。然而带语义的标签是通用的。这样一来,搜索引擎便能更好的显示视觉效果了。
3.到底怎样提高代码质量?
提高代码质量无非就是代码规范化,使用带语义的标签进行布局。下面举一个例子:
<div class="h2">带标签的语义
<a href="http://www.w3school.com.cn">还有更多哟</a></div>
<div class="p">在w3school上还有更多值得我们学习的带语义的标签</div>
<style type="text/css">
.h2{ position:relative;background:blue;}
.p{text-align:center;color:red;}
</style>
上面是一个初学者会写的代码。
<h2>带标签的语义</h2>
<a href="http://www.w3school.com.cn">还有更多哟</a>
<p>在w3school上还有更多值得我们学习的带语义的标签</p>
<style type="text/css">
h2{ position:relative;background:blue;}
p{text-align:center;color:red;}
</style>
这样的代码看起来是不是要好很多。
通过观察我们可以发现第一段代码里使用的是类选择器,而第二段则使用的是标签选择器。换句话说,标签选择器的代码质量高于类选择器。
4.使用语义化标签时应注意如下几个问题?
- 尽可能少地使用无语义标签div和span
- 在语义不明显,既可以用div的地方也可以用p标签的地方,尽量使用p标签,因为p标签在默认情况下有上下间距,去除样式后的可读性更好,对兼容性特殊终端有利
- 不要使用纯样式标签,比如font、b和del等,改用CSS设置。而强调文本可以使用strong、em,分别对文本进行加粗、斜体进行”强调”。