Web前端技巧_HTML+CSS+JavaScript
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">看这篇<span style="color: black;">文案</span>前，你<span style="color: black;">首要</span>要对Web前端的<span style="color: black;">重点</span>技术有<span style="color: black;">必定</span>的<span style="color: black;">认识</span>，例如 HTML、CSS、JavaScript。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Web前端的<span style="color: black;">构成</span>：</p>现代在网页技术，分为三个层面：内容(HTML)+表现(CSS)+<span style="color: black;">行径</span>(JavaScript)，在<span style="color: black;">这儿</span>我<span style="color: black;">亦</span>把这三个技术<span style="color: black;">掰开</span><span style="color: black;">来讲</span>。
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.内容(HTML)：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.1 <span style="color: black;">运用</span> XHTML 1.0 或 HTML5 规范的代码，网页<span style="color: black;">最后</span><span style="color: black;">是由于</span>浏览器来解析的，而浏览器又是<span style="color: black;">按照</span>Web规范来解析网页的，<span style="color: black;">因此</span>，遵守规范<span style="color: black;">能够</span><span style="color: black;">保证</span>在<span style="color: black;">各样</span>浏览器中都能正确解析，但<span style="color: black;">倘若</span>碰到了浏览器的Bug那就<span style="color: black;">另一</span>算了，那不是<span style="color: black;">咱们</span>的错，是浏览器的错。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.2 布局采用先上下后<span style="color: black;">上下</span>的结构原则，<span style="color: black;">尽可能</span>不要<span style="color: black;">显现</span>一个容器里面有上下<span style="color: black;">上下</span>多种布局的元素，<span style="color: black;">这般</span><span style="color: black;">能够</span>减少<span style="color: black;">各样</span>浏览器的布局排版的差异，<span style="color: black;">为何</span>呢？一个<span style="color: black;">上下</span>要浮动上下又要清除浮动，麻烦，二个，内容要修改的时候，<span style="color: black;">发掘</span>一个高了<span style="color: black;">或</span>矮了，不对齐了，又要<span style="color: black;">调节</span>几个块的。那左中右怎么办？先分<span style="color: black;">上下</span>再从其中一个再分<span style="color: black;">上下</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.3 全页布局，<span style="color: black;">通常</span>分为 Topbar(顶栏) ,Header(头部) ,Nav(导航栏) ,Content(内容) ,Footer(脚部)，<span style="color: black;">亦</span><span style="color: black;">便是</span><span style="color: black;">针对</span>页面整体从上往下看。<span style="color: black;">倘若</span>还有横幅<span style="color: black;">宣传</span>(Banner)和<span style="color: black;">帮忙</span>栏(像淘宝那种)，就<span style="color: black;">另一</span>再加。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.4 整理自己的模板库，自己写过的代码Copy一份，以后就<span style="color: black;">不消</span>再重新写了，例如头部，注册表单，网银列表等。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.表现(CSS)：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.1 设定默认样式，每种浏览器都会为元素设定一套初始样式(默认样式)，设定默认样式<span style="color: black;">能够</span>减少<span style="color: black;">各样</span>浏览器渲染样式的差异。常用的设置有：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,form,input,textarea,p,th,td{margin:0;padding:0;} /* 默认内边距和外边距设置为0 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">caption,th{text-align:left;} /* 默认对齐方式设置为左对齐 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">img{border:0;} /* 去掉带链接<span style="color: black;">照片</span>的边框线 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ul{display:block;} /* 设置列表为块<span style="color: black;">表示</span> */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">li{list-style:none;} /* 去掉默认添加的项目符号 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">table{border-collapse:collapse;border-spacing:0;} /* 去掉表格的内边框线和单元格间隔 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">body{font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#000;line-height:12px;} /* 设置文本字体 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">a:link, a:visited{font-size:12px;text-decoration:none;font-family:Verdana, Geneva, sans-serif;color:#000;line-height:12px;} /* 设置链接字体 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">a:hover{text-decoration:underline;}</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.2 为元素赋予样式特征，<span style="color: black;">尽可能</span>少用ID而用类来设定。</p>2.3 <span style="color: black;">不消</span>内联样式，<span style="color: black;">所有</span>样式<span style="color: black;">经过</span><span style="color: black;">外边</span>文件引用，并且放在
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">里面。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.4 <span style="color: black;">恰当</span><span style="color: black;">归类</span>，如公共样式、首页样式、<span style="color: black;">归类</span>页样式、搜索页样式，<span style="color: black;">必须</span>时才引用。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.5 模块化设定样式，<span style="color: black;">通常</span>规则是 ".mod_name .class_column tag" (模块名+布局名+元素名/类) ，如：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.header 头部</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.header .left h1 头部左边的标题</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.search .keyword 搜索栏的<span style="color: black;">重要</span>词输入框</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.nav a 导航栏的链接</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.mod_good .good_name <span style="color: black;">制品</span>模块的<span style="color: black;">制品</span>名</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.user_info a 用户信息的链接</p>2.6 有自己一套自定义元素类，例如表单控件有<span style="color: black;">非常多</span>种，<span style="color: black;">非常多</span>都是 input 元素，只对文本输入框设定样式怎么办？设一个自定义类 .input_text ，<span style="color: black;">而后</span>设定高度
你的见解真是独到，让我受益匪浅。
页:
[1]