写web前端的准备工作

最新推荐文章于 2022-11-28 11:29:34 发布

Cao Lilu

最新推荐文章于 2022-11-28 11:29:34 发布

阅读量739

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/crown_0726/article/details/41908079

版权

前端开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

1、文档头

一个良好的文档必须有一个文档头：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这是用DreamWeaver cs6版本创建html页面出现的文档头。

2、重置css样式

每个网页浏览器都包含一套自己的标准样式文件。默认情况下，如果你没有特定的其他CSS样式规则，你的字体，边距和填充等网页上的元素都会按照各个浏览器不同的默认规则来渲染，这会让你的网页在不同的浏览器上显示的样式和版面都不同，可能是非常糟糕。
通常情况下，我们网站开发人员都会删除这些预设值，用一套标准的默认规则来代替它，使你的网站在不同的浏览器上面显示是完全一致的。

【第一版】

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; }
html { height: 101%; }
/* always display scrollbars */
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; } 
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
input { outline: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

【第二版】

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0px;padding:0px;}
table{border-collapse:collapse;border-spacing:0px;}
fieldset,img,abbr,acronym{border:0px;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}