编写高质量的源代码 笔记.docVIP

对于CSS，最基本的要求就是能兼容主流浏览器—IE 6、IE 7、IE 8 和Firefox，有些公司可能还会要求兼容Opera、Safari、Chrome。 对JavaScript 的使用有所要求，不仅要会使用原生的JavaScript，还要会使用JavaScript 类库和Ajax 表3-1 标签语义对照表 标签名 英文 全拼 中文 翻译 div division 分隔 span span 范围 ol ordered list 排序列表 ul unordered list 不排序列表 li list item 列表项目 dl definition list 定义列表 dt definition term 定义术语 dd definition description 定义描述 del deleted 删除 ins inserted 插入 h1~.h6 header 1 to header 6 标题1 到标题6 p paragraph 段落 hr horizontal rule 水平尺 a anchor 锚 abbr abbreviation 缩写词 acronym acronym 取首字母的缩写词 address address 地址 var variable 变量 pre preformatted 预定义格式 blockquote block quotation 区块引用语 strong strong 加重 em emphasized 加重 b bold 粗体 i italic 斜体 big big 变大 small small 变小 sup superscripted 上标 sub subscripted 下标 br break 换行 center center 居中 font font 字体 u underlined 下划线 s Strikethrough 删除线 fieldset fieldset 域集 legend legend 图标 caption caption 标题 标签语义化： Div和span是没有语义的，它们只能分别用作块级元素和行内元素的区域分隔符 Css布局和table布局 Css布局是div+css布局 Table设计之初是为了呈现二维数据 标签专注于结构，css专注于布局：包括位置、大小、颜色等，css布局弱化了标签布局的能力 Css布局只是Web标准的一部分，在HTML、CSS、Javascript这三大元素中，HTML才是最重要的，结构是重点，样式只是用来修饰。正确的做法是：先确定HTML，确定语义的标签，再来选用合适的CSS。 如何确定标签是否语义良好： 浏览器会根据标签自己的语义给定一个默认的样式，比如h1、h2、h3等表示不同级别的标题。判断网页标签语义是否良好的一个简单方法：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。 对标签是否语义良好进行调试：Firefox插件Web Developer 表单的语义： form action= method= fieldset legend登录表单/legend plabel for=name账号：/labelinput type=text id=name/ /p plabel for=pw密码 ：/label input type=password id=pw / /p input type=submit value=登录 class=subBtn / /fieldset /form 。一般来说，表单域要用fieldset 标签包起来，并用legend 标签说明表单的用途。因为fieldset 默认有边框，而legend 也 有默认的样式，为满足设计需要，我们可以将fieldset 的“border”设为“none”，把 legend 的“display”设为“none”，以此来兼顾语义和设计两方面的要求。每个input 标 签对应的说明文本都需要使用label 标签，并且通过为input 设置id 属性，在label 标签 中设置“for = someId”来让说明文本和相应的input 关联起来。 表格的语义： table border=1 caption几种页面实现的比较/caption thead trth实现方式/thth代码量/thth搜索引擎友好/thth 特殊终端兼容/th/tr /thead tbody trthtable 布局/thtd 多/tdtd 差/tdtd 一般 /td/tr trth乱用标签的CSS 布局/thtd少/tdtd一般/tdtd差 /td/tr trth标签语义良好的CSS 布局/thtd少/tdtd好/tdtd 好/td/tr /tbody /table 过去，我们在用table 布