• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 写给入门者的三十条HTML代码编写指南

写给入门者的三十条HTML代码编写指南

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML,代码编写等相关知识,佚名 希望在学习及工作中可以帮助到您

1. 一定要闭合HTML标签

在以往的页面源代码里,经常看到这样的语句:

<li>Some text here.
<li>Some new text here.
<li>You get the idea.

也许过去我们可以容忍这样的非闭合HTML标签,但在今天的标准来看,这是非常不可取的,是必须百分百避免的。一定要注意闭合你的HTML标签,否则将无法通过验证,并且容易出现一些难以预见的问题。

最好使用这样的形式:

<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>

2. 声明正确的文档类型( DocType )

笔者早先曾加入过许多CSS论坛,在那里,如果有用户遇到问题,我们会建议他首先做两件事:

1. 验证CSS文件,解决所有可见的错误

2. 加上文档类型 Doctype

DOCTYPE 定义在HTML标签出现之前,它告诉浏览器这个页面包含的是HTML,XHTML,还是两者混合出现,这样浏览器才能正确的解析标记。

通常有四种文档类型可供选择:

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

关于该使用什么样的文档类型声明,一直有不同的说法。通常认为使用最严格的声明是最佳选择,但研究表明,大部分浏览器会使用普通的方式解析这种声明,所以很多人选择使用HTML4.01标准。选择声明的底线是,它是不是真的适合你,所以你要综合考虑来选择适合你得项目的声明。

3. 不要使用嵌入式CSS样式

当你在埋头写代码时,可能会经常顺手或偷懒的加上一点嵌入式css代码,就象这样:

<p style="color: red;">站长之家</p>

这样看起来即方便又没有问题,但是它会在你得代码中产生问题。

在你开始写代码时,最好是在内容结构完成之后再开始加入样式代码。

这样的编码方式就像打游击,是一种很山寨的做法。——Chris Coyier

更好的做法是,把这个P的样式定义在样式表文件里:

someElement > p {
color: red;
}

4. 在页面head标签中引入所有的样式表文件

理论上讲,你可以在任何位置引入CSS样式表,但HTML规范建议在网页的head标记中引入,这样可以加快页面的渲染速度。

在雅虎的开发过程中,我们发现,在head标签中引入样式表,会加快网页加载速度,因为这样可以使页面逐步渲染。 —— ySlow团队

<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>

5. 在页面底部引入javascript文件

要记住一个原则,就是让页面以最快的速度呈现在用户面前。当加载一个脚本时,页面会暂停加载,直到脚本完全载入。所以会浪费用户更多的时间。

如果你的JS文件只是要实现某些功能,(比如点击按钮事件),那就放心的在body底部引入它,这绝对是最佳的方法。

举例:

<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="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('Want to learn more about corn?');
});

7. 开发中随时进行标准验证

很多人并不真正理解标准验证的意义和价值,笔者在一篇博客中详细分析了这个问题。一句话,标准验证是为你服务的,不是给你找麻烦的。

如果你刚开始从事网页制作,那强烈建议你下载这个网页开发工具条 ,并在编码过程中随时使用”HTML标准验证”和“CSS标

您可能想查找下面的文章:

  • html编写edm时注意事项小结(一般发邮件需要注意的地方)
  • 浅谈.html,.htm,.shtml,.shtm的区别与联系
  • html、css基础注意点(前端必看篇)
  • 关于HTML面试题全部汇总
  • 符合w3c标准的html标准需要注意的地方详解
  • 深入理解HTML5在移动开发方面的发展现状
  • 浅谈HTML5与HTML4的10个关键区别
  • 分享15个最佳的HTML/CSS设计和开发框架
  • 自己在实践中遇到的一些前台基础(html、css)
  • 用ps两分钟做个xhtml+css的网站首页

相关文章

  • 2017-08-06FlashFXP ftp客户端软件的注册破解方法
  • 2018-08-23腾讯设计师:空心图标是否比实心图标难以识别?
  • 2018-08-23用户体验设计从业者有没有所谓的 35 岁中年危机?
  • 2018-08-23小科普!Android和iOS的设计到底有什么不同?
  • 2018-08-23基础小课堂!从零开始教你做高保真原型图+UI 设计规范
  • 2018-08-23进阶高级设计师!帮你做能落地的界面设计之输入框
  • 2018-08-23扁平风格的问题在哪?来看这个分析!
  • 2018-08-23超全面!八种格调超高的PPT文字设计法!
  • 2018-08-23高手的平面课堂!网格系统的入门基础知识+案例演示
  • 2017-08-06从image/x-png谈ContentType(s)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css浮动(float,clear)通俗讲解经验分享
    • 新手科普文!每个设计师都该懂的参考线完全手册
    • AI+AE教程!手把手教你绘制可爱的螳螂小动画
    • 商业设计比赛中如何提升获奖率?高手总结了这4个实用小技巧
    • 每天刷抖音停不下来?原来是用这3个设计让你上瘾!
    • 上亿人使用的唱吧APP V8.6 改版设计过程揭秘
    • Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时
    • 明明想法和思路都对了,为什么最后效果却不尽人意呢?
    • 「区块链」和秃顶的设计师们
    • 简单实用!七步学会用 Sketch 搭建复杂表格

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有