html教程之网页制造:HTML代码编写的30条技能

只看该作者 · 发表于 2015-1-15 23:19:37

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

在W3C的HTML工作小组电子邮件论坛上频频冒出这样的情绪化批判字眼：“幼稚”、“令人无法忍受”、“荒谬”、“使诈”等。网页制造poluoluo文章简介：本文总结了30条HTML代码编写指南，只需在编写HTML代码的过程当中切记它们，天真使用，你必定会写出一手大度的代码，早日迈进专业开辟者的行列。
本文总结了30条HTML代码编写指南，只需在编写HTML代码的过程当中切记它们，天真使用，你必定会写出一手大度的代码，早日迈进专业开辟者的行列。
1.必定要闭合HTML标签

在以往的页面源代码里，常常看到如许的语句：

<li>Sometexthere.<li>Somenewtexthere.<li>Yougettheidea.

复制代码

大概已往我们能够容忍如许的非闭合HTML标签，但在明天的尺度来看，这长短常不成取的，是必需百分百制止的。必定要注重闭合你的HTML标签，不然将没法经由过程考证，而且简单呈现一些难以预感的成绩。
最好利用如许的情势：

<ul><li>Sometexthere.</li><li>Somenewtexthere.</li><li>Yougettheidea.</li></ul>

复制代码

2.声明准确的文档范例(DocType)

笔者新近曾到场过很多CSS论坛，在那边，假如有效户碰到成绩，我们会倡议他起首做两件事：

1.考证CSS文件，办理一切可见的毛病
2.加上文档范例Doctype

DOCTYPE界说在HTML标签呈现之前，它告知扫瞄器这个页面包括的是HTML，XHTML，仍是二者夹杂呈现，如许扫瞄器才干准确的剖析标志。

一般有四种文档范例可供选择：

1.<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">2.<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">3.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

复制代码

关于该利用甚么样的文档范例声明，一向有分歧的说法。一般以为利用最严厉的声明是最好选择，但研讨标明，年夜部分扫瞄器会利用一般的体例剖析这类声明，以是良多人选择利用HTML4.01尺度。选择声明的底线是，它是否是真的合适你，以是你要综合思索来选择合适你得项目标声明。
3.不要利用嵌进式CSS款式

当你在专一写代码时，大概会常常随手或偷懒的加上一点嵌进式css代码，就象如许：

<pstyle="color:red;">破洛洛</p>

复制代码

如许看起来即便利又没有成绩，可是它会在你得代码中发生成绩。
在你入手下手写代码时，最好是在内容布局完成以后再入手下手到场款式代码。

如许的编码体例就像打游击，是一种很盗窟的做法。——ChrisCoyier

更好的做法是，把这个P的款式界说在款式表文件里：

someElement>p{color:red;}

复制代码

4.在页面head标签中引进一切的款式表文件

实际上讲，你能够在任何地位引进CSS款式表，但HTML标准倡议在网页的head标志中引进，如许能够加速页面的衬着速率。

在雅虎的开辟过程当中，我们发明，在head标签中引进款式表，会加速网页加载速率，
由于如许可使页面慢慢衬着。——ySlow团队

<head><title>MyFavoritesKindsofCorn</title><linkrel="stylesheet"type="text/css"media="screen"href="path/to/file.css"/><linkrel="stylesheet"type="text/css"media="screen"href="path/to/anotherFile.css"/></head>

复制代码

5.在页面底部引进JavaScript文件

要记着一个准绳，就是让页面以最快的速率出现在用户眼前。当加载一个剧本时，页面会停息加载，直到剧本完整载进。以是会华侈用户更多的工夫。
假如你的JS文件只是要完成某些功效，（好比点击按钮事务），那就宁神的在body底部引进它，这相对是最好的办法。
举例：

<p>Andnowyouknowmyfavoritekindsofcorn.</p><scripttype="text/javascript"src="path/to/file.js"></script><scripttype="text/javascript"src="path/to/anotherFile.js"></script></body></html>

复制代码

6.不要利用嵌进式JavaScript，这都21世纪了！

很多年之前，还存在一种如许的体例，就是间接将JS代码到场到HTML标签中。特别是在复杂的图片相册中十分罕见。实质上讲，一个“onclick”事务是附加在标签上的，其效果同等于一些JS代码。不必要会商太多，十分不该该利用如许的体例，应当把代码转移到一个内部JS文件中，然后利用“addEventListener/attachEvent”到场工夫侦听器。大概利用jQuery等框架，之必要利用其“clock”办法。

$(a#moreCornInfoLink).click(function(){alert(Wanttolearnmoreaboutcorn?);});

复制代码

7.开辟中随时举行尺度考证

良多人其实不真正了解尺度考证的意义和代价，笔者在一篇博客中具体剖析了这个成绩。一句话，尺度考证是为你服务的，不是给你找贫苦的。
假如你刚入手下手处置网页制造，那激烈倡议你下载这个网页开辟工具条，并在编码过程当中随时利用”HTML尺度考证”和“CSS尺度考证”。假如你以为CSS是一种十分勤学的言语，那末它会把你整的死而复活。你的不松散的代码会让你的页面毛病百出，成绩不休，一个好的办法就是——考证，考证，再考证。
8.下载Firebug

Firebug是当之无愧的网页开辟最好插件，它不仅能够调试JavaScript，还能够直不雅的让你懂得页面标志的属性和地位。不必多说，下载它！
9.利用Firebug！

据笔者察看，年夜部分的利用者仅仅利用了Firebug20%的功效，那真是太华侈了，你无妨花几个小时的工夫来体系进修这个工具，信任会让你事半功倍。
Firebug教程：

OverviewofFirebug
DebugJavascriptWithFirebug–videotutorial

10.利用小写的标志

实际上讲，你能够像如许随性的誊写标志：

<DIV><P>Heresaninterestingfactaboutcorn.</P></DIV>

复制代码

最好不要如许写，吃力气输出年夜些字母没有任何用途，而且会让代码很丢脸，如许子就很好：

<div><p>Heresaninterestingfactaboutcorn.</p></div>

复制代码

11.利用H1–H6标签

笔者倡议你在网页中利用个中全体六种标志，固然年夜部分人只会用到前四个，但利用最多的H会有良多优点，好比设备友爱、搜刮引擎友爱等，无妨把你的P标签都交换成H6。
12.假如是博客，那把H1留给文章题目

明天笔者在Twitter上倡议一次会商：是该把H1界说到LOGO上仍是界说到文章题目上，有80%的人选择了后者。
固然详细怎样利用要看你的需求，但我倡议你在创建博客的时分，将文章标题定为H1，这对seo(SEO)长短常有优点的。
13.下载ySlow

在已往几年里，雅虎的团队在前端开辟范畴做了很多巨大的事情。前不久，它们公布了一个叫ySlow的Firebug扩大，它会剖析你的<网页，并前往一个“成就单”，下面仔细剖析了这个网页的各个方面，提出必要改善的中央，固然它有点刻薄，但它相对会对你有所匡助，激烈保举——ySlow！
14.利用UL列表结构导航菜单

一般网站城市有导航菜单，你能够用如许的体例界说：

<ul><li>Sometexthere.</li><li>Somenewtexthere.</li><li>Yougettheidea.</li></ul>0

复制代码

假如你想誊写幽美的代码，那最好不要用这类体例，

为何要用UL结构导航菜单？
——由于UL生来就是为界说列表筹办的

最好如许界说：

<ul><li>Sometexthere.</li><li>Somenewtexthere.</li><li>Yougettheidea.</li></ul>1

复制代码

15.学会如何凑合IE

IE一向以来都是前端开辟职员的恶梦！
假如你的CSS款式表基础定型了，那末能够为IE独自创建一个款式表，然后如许仅对IE失效：

<ul><li>Sometexthere.</li><li>Somenewtexthere.</li><li>Yougettheidea.</li></ul>2

复制代码

这些代码的意义是：假如用户扫瞄器是IE6及以下，那这段代码才会失效。假如你想把IE7也包括出去，那末就把“[ifltIE7]”改成“[iflteIE7]”。
16.利用一个好的代码编纂器

不管你是Windows仍是Mac用户，这里都有良多优异的编纂器供你选择：
Mac用户

Coda
Espresso
TextMate
Aptana
DreamweaverCS4

PC用户

InType
E-TextEditor
Notepad++
Aptana
DreamweaverCS4

17.紧缩前端代码！

Javascript紧缩服务

JavascriptCompressor
JSCompressor

CSSCompressionServices

CSSOptimiser
CSSCompressor
CleanCSS

18.缩减，缩减，缩减

回看我们年夜多半人写的第一个页面，必定会发明严峻的“DIV癖”(divitis)，一般初学者的天性就是把一个段落用DIV包起来，然后为了把持定位而套上更多的DIV。——实在这是一种低效而无害的做法。

网页写完后，必定要屡次转头反省，只管的削减元素的数目。
能用UL结构的列表就不要用一个个的DIV往结构。

正如写文章的关头是“缩减，缩减，缩减”一样，写页面也要遵守这个尺度。
19.为一切的图片加上Alt属性

为图片加上alt属性的优点是不问可知的——如许可让禁用图片大概利用特别设备的用户无停滞得懂得你的王爷信息，而且对图象搜刮引擎友爱。
Firefox不撑持显现图象Alt属性，能够到场title属性：

<ul><li>Sometexthere.</li><li>Somenewtexthere.</li><li>Yougettheidea.</li></ul>3

复制代码

20.学会熬夜

我常常不知不觉的进修事情到清晨，我以为这是个很好的情况。
我的“啊～哈！”工夫（“AH-HA”moments，指山穷水尽或名顿开的时候）一般都产生在深夜，好比我完全了解JavaScript的“闭包”观点，就是在如许一种情形下。假如你还没有感觉过这类奇奥的时候，那就即刻尝尝吧！
21.检察源代码

没有甚么比仿照你的偶像能让你更快的进修HTML。后来，我们都要甘做复印机，然后渐渐得开展本人的作风。研讨你喜好的网站页面代码，看看他们是怎样完成的。这是妙手的必经之路，你必定要试一下。注重：只是进修和仿照他们的编码作风，而不是剽窃和照搬！
寄望收集上各类炫酷的JavaScript效果，假如看上往是利用了插件，那依据它源码中head标签内的文件名，就能够找到这个插件称号，然后就能够进修它据为己用。
22.为一切的元素界说款式

这一条在你制造其他公司企业网站时尤其需要。你本人不利用blockquote标志？那用户大概会用，你本人不利用OL？用户也大概会。花工夫做一个页面，显现出ul,ol,p,h1-h6,blockquotes,等等元素的款式，反省一下是不是有漏掉。
23.利用第三方服务

译者注：英文原文题目为“利用Twitter”
如今互联网下流行着很多能够收费加在网页中的API，这些工具十分壮大。它能够帮你完成很多奇妙的功效，更主要的是能够帮你宣扬网站。
24.进修Photoshop

Photoshop是前端工程师的一个主要工具，假如你已纯熟把握HTML和CSS，那无妨多进修一下Photshop。

Psdtuts+上有很多英文的饰品教程：Videossection
Lynda.com也有大批教程，不外要付出$25美圆
“YouSuckatPhotoshop”系列教程
消费几个小时的工夫进修Photoshop的快速键操纵

25.进修每个HTML标签

固然有些HTML标签很罕用到，但你仍然应当懂得他们。好比“abbr”、“cite”等，你必需进修它们以备不时之需。
26.介入社区会商

收集上有许很多多优异的资本，而社区中也埋没着很多妙手，这里你既能够自学，也能就教履历丰厚的开辟者。
27.利用CSSReset

CssReset也就ResetCss,就是重置一些HTML标签款式，大概说默许的款式。
关因而否应当利用CSSReset，网上也有剧烈的争辩，笔者是倡议利用的。你能够先选用一些成熟的CSSReset，然后渐渐演化成合适本人的。
28.对齐元素

复杂来讲，你应当尽量的对齐你的网页元素。能够察看一下你喜好的网站，它们的LOGO、题目、图表、段落一定是对得十分划一的。不然就会显得凌乱和不专业。
29.关于PSD切片

如今你已把握了HTML、CSS、Photoshop常识，那末你还必要进修怎样把PSD转换为网页上的图片和背景，上面有两个不错的教程：

SliceandDicethatPSD
FromPSDtoHTML/CSS

30.不要随便利用框架

Javascript和CSS都有很多优异的框架，但假如你是初学者，不要急于利用它们。假如你还没能纯熟的把握CSS，利用框架会搅浑你的常识系统。
CSS框架是为纯熟开辟者计划的，如许会节俭它们大批的工夫。
</p>
有些差异相对轻微，有充分的理由将这两种HTML5规范草案合并为一，让浏览器制造商与网络开发者不必面对不兼容的窘境。

只看该作者 · 发表于 2015-1-17 21:51:44

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-1-25 21:40:47

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-2-4 08:01:42

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-2-9 19:35:15

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-2-27 19:10:25

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-3-9 13:12:02

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-3-17 00:09:19

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

只看该作者 · 发表于 2015-3-23 10:09:21

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

		自动登录	找回密码
密码			立即注册

[HTML5] html教程之网页制造:HTML代码编写的30条技能

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子