猫窝私语 — Makumo's Blog

玛酷猫的温馨小窝,记录生活点点滴滴。

@玛酷猫15年前

11/30
21:51
读书笔记 前端

读书笔记(一)——可以遗忘的HTML标签

长久以来项目网站首页结构一直没有改变,依旧是TABLE结构,随着越做越大,栏目内容越来越多,网站首页也越来越臃肿,访问打开时间也越来越长。趁着年末改版,首页DIV+CSS化也提上日程,虽然这部分工作主要是设计部门处理,不过也借着这个机会好好学一学页面重构方面的知识。最近借阅了本《CSS实战手册(CSS THE MISSING MANUAL)》,还在慢慢阅读中。俗话说:好记性不如烂笔头。把一些好东东记录下来,方便日后查找。这次主要提下一些可以遗忘的HTML标签和一些技巧。 😉

可以遗忘的标签:

<font>标签:这个在自己设计页面是也经常用到,有时候为了某几个字的表现效果,懒得去设置一个新的样式,直接使用<font>标签了,常常一个页面有着许多font,代码看起来有些凌乱,修改起来也不是很方便。

<b>、<i>粗体和斜体标签,这个自己倒是不用,基本在用<strong>,用Dreamweaver设计直接Ctrl+B就OK,斜体自己似乎从做网页也来就没有用过,总感觉字变斜了看起来怪怪的。 :bhan: 做图片的时候到偶尔会用用。

用于网页布局的<table>标签。这个就是自己期望达到的目标:除了显示数据表、图表之外,少或者不用<table>来显示网页结构,这个还需要慢慢来,毕竟是改变一种设计习惯,还需要一定过程

一些展现表现形式的标签属性,类如:color,backgroud,border,一系列调整边距属性,对齐属性等等。如果用过Dreamweaver CS4会发现在元素的设置里面没有了 backgroud 这个填写框了,(家里没装CS4,明天去单位补个图),这些效果的代码代码都很长,使代码变得臃肿的主要原因之一,而且可读性也大幅度下降,其实这些都可以用CSS来定义表现。

不要滥用<br />标签。这块就不是很明白,按书上所写“浏览器自动地——有时令人愤怒地——在段落之间插入空格”,我倒是还没遇到过,先记下来了,或许书中后面、以后工作中会慢慢搞清楚。

一些技巧:

使用<h1>等系列标签来表示标题,使页面层次更分明,更主要的是有助于搜索引擎的收录;
使用无序列表<ul>来显示菜单、一些相关项目;使用有序列表<ol>来显示排名、有顺序的项目;使用<dl><dt><dd>来显示术语表;
使用一些生僻的标签来展示一些特殊的信息,如<cite><address>等等;
注意标签闭合;
使用W3C校验器来校验,能发现一些不容易看出的拼写、不规范等等错误;

暂时先写到这吧,书才刚开始看。以后再慢慢写了 :mrgreen:

PS:读书学习中,难免有一些认识不足或者错误理解,欢迎斧正。

PS2:发现用高亮代码显示来当做<ol>用也挺不错 😀

读书笔记(一)——可以遗忘的HTML标签