前端开发注意的问题 ，浏览器兼容性

1.页面代码的实现步骤

我们拿到美工设计的psd后，需要对页面做好足够的分析。思考页面分为几大块，应该使用什么样的标签，什么样的浮动等等，将早期的框架搭建起来。 确定左右平行元素的宽度，能够在各个浏览器中正常显示。 后面需要对每一块中的内容进一步区分，观察有几个模块，有没有相同的模块，css样式是否可以复用。有些细节一定要注意，浮动元素不要与块级元素在一列中。如果需要在一列中平铺多个元素，请给这些元素都加上float属性，并设置好对应的宽度。

2了解各个标签的属性与内置样式

常用HTML标签的英文全称及简单描述

 

HTML标签	英文全称	中文释义
a	Anchor	锚
abbr	Abbreviation	缩写词
acronym	Acronym	取首字母的缩写词
address	Address	地址
dfn	Defines a Definition Term	定义定义条目
kbd	Keyboard	键盘（文本）
samp	Sample	示例（文本
var	Variable	变量（文本）
tt	Teletype	打印机（文本）
code	Code	源代码（文本）
pre	Preformatted	预定义格式（文本 ）
blockquote	Block Quotation	区块引用语
cite	Citation	引用
q	Quotation	引用语
strong	Strong	加重（文本）
em	Emphasized	加重（文本）
b	Bold	粗体（文本）
i	Italic	斜体（文本）
big	Big	变大（文本）
small	Small	变小（文本）
sup	Superscripted	上标（文本）
sub	Subscripted	下标（文本）
bdo	Direction of Text Display	文本显示方向
br	Break	换行
center	Centered	居中（文本）
font	Font	字体
u	Underlined	下划线（文本）
s/ strike	Strikethrough	删除线
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	水平尺
href	hypertext reference	超文本引用
alt	alter	替用(一般是图片显示不出的提示)
src	Source	源文件链接
cell	cell	巢
cellpadding	cellpadding	巢补白
cellspacing	cellspacing	巢空间
nl	navigation lists	导航列表
tr	table row	表格中的一行
th	table header cell	表格中的表头
td	table data cell	表格中的一个单元格
iframe	Inline frame	定义内联框架
optgroup	Option group	定义选项组

同时需要仔细阅读html参考手册，了解哪些标签可以直接平铺在用一列中，哪些为会计元素，只能一一向下排列，哪些元素不会影响布局的 样式等等。

3 牢记浏览器常见的bug处理方式，在代码第一次编写时就考虑解决兼容性的问题

4 每一列浮动元素后，都要设置清除浮动

元素浮动后，会使元素浮出文档流，使其所在的父级元素无法跟随浮动的的元素的高度而改变自身的高度。所带来的问题就是浮动元素超出了父元素的包裹范围，若后面跟着有文字、或浮动元素，则会造成布局混乱。