web前端开发学习指南最完整的汇总

最新推荐文章于 2023-07-20 13:14:02 发布

前端基础开发

最新推荐文章于 2023-07-20 13:14:02 发布

阅读量1.1k

点赞数 1

文章标签： html5 html css

本文链接：https://blog.csdn.net/html886/article/details/104504165

版权

HTML

咋地了, DOCTYPE?

不定义DOCTYPE是一种可以被判死刑的罪行。以前你可能用的是下面的DOCTYPE，不过你要知道现在已经有更简洁清晰的代码取而代之了。

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

理想的状况是用HTML5 DOCTYPE，所有现代的浏览器都支持它，即使是不支持HTML5的浏览器，例如IE6,IE7，也会由此转入标准模式。参见来源。

<!DOCTYPE html>

编写合法且语义清晰的标记

用整洁、语义清晰的HTML编写网站代码是我们一直孜孜以求的。有时我们会发现前人配置页面的方式限制了我们，或者有时我们编写的是HTML格式的email模板。但永远不要偏离HTML的规范，即使是为了解决特定浏览器兼容性的bug。

所有的标题应该从<h2>开始分层级创建，文字段落应该总是放在<p>标签里，诸如此类。如果你编写的HTML的语义清晰，产生的页面会更整洁、简练，而且易于被搜索引擎爬虫解析。这是你能做到的最简单的SEO修补方式。

来看看下面的段落，你觉得哪个更整洁？是这个？

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

<span class="sectionHeading">A Heading</span>
<br /> <br />
Lorem ipsum dolor sit amet. ...
<br /> <br />

还是这个？

<h2>A Heading</h2>
<p>
    Lorem ipsum dolor sit amet. ...
</p>

鼠标中键点击的应变方式

现代web应用最令人郁闷的可用性缺陷之一是超链接功能的变种。一些看起来像是超链接的元素可能是通过Javascript映射的单击功能，这就破坏了鼠标中键点击（在新的tab中打开链接页面）的功能。即使它们能在新的标签页打开，它们只带有一个 # 的href又会把你带回到同样的页面。

深刻诠释了该问题的一个现代热门网站的例子就是Twitter。在它的整个应用里，鼠标中键点击用户名或头像会得到完全不同的结果。

<!-- 旧的方式，破坏网页语义 -->
<a href="#"></a>

<!-- 如果鼠标点击不能产生一个页面，那就不是超链接 -->
<span class="link" role="link"></span>

另一个替代方案是使用 # 引导的路径，它会把普通的url映射为 # 引导的链接，然后通过AJAX来获取页面片段。提供此功能的库应该能够在鼠标中键点击的时候正常显示页面，或者在左键点击时把该页面内容加载到指定的区域。不过这样也要慎重行事，有很多人都认为 #链接正在破坏web应用。

用Microformats格式表示联系人信息

Microformat是一种便于机器读取联系人信息的方式。hCard类（不是vCard）用来定义元素里包含的内容类型。这些内容会被浏览器提取并突出显示。

<span class="tel">
    <span class="type">home</span>:
    <span class="value">+1.415.555.1212</span>
</span>

如果你曾经浏览采用此格式的网页，你会注意到类似skype的程序可以轻松检测到网页上的哪些数字是电话号码。在iOS设备上的Safari浏览器也可以做到类似的事情。

有关Microformat的更多信息请参阅http://microformats.org/wiki/hcard

图片需要设 'Alt' 文本

<img> 标签需要 alt 文本，以便检查并满足可读性的要求。在 alt 属性中的文本必须能够说明图片显示的内容或要达到的效果，除非该图片不重要。

如果图片只是一个列表中的着重号或者其他无关紧要的图标，最好是给 alt 属性一个空字符串，但还是留着它。这样屏幕阅读器会忽略它，而不是把"着重号"连读20次。

<img src="dog.gif" alt="Fido and I at the park!" />
<!-- 很好，描述清晰 -->

<img src="bullet.gif" alt="bullet" />
<!-- 不好，显得多余 -->

<img src="bullet.gif" alt="" />
<!-- 好 -->

只对表格数据用table标签

table标签永远只应该用在表格数据的展示上。唯一的例外是当编写HTML格式的邮件时，这种情况下可能table是某些坑爹的邮件客户端唯一支持的样式了。

为了可读性，表格头永远要使用 <th> 元素。同时切记要设置cellpadding, cellspacing 和 border 的值为 0 ，因为这些样式由CSS来控制更容易确保一致性。

<table cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th>
                Cell Header
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Cell Item
            </td>
        </tr>
    </tbody>
</table>

使用 jQuery 和 jQuery UI Widgets

jQuery 和 jQuery UI 被做成尽可能在不同浏览器上表现出几乎相同的外观和功能。 jQuery UI 被设计为符合 WAI WCAG 2.0 及 WAI ARIA，因此采用该框架可以避免在你的站点上运行的插件或脚本的所有不确定性。

JavaScript

代码留空和格式

任何关于代码格式、留空和大括号位置的讨论都会引起激烈辩论。对此，我想最简单的规则就是，除非你愿意把整个代码文件重新格式化，不然还是尊重并保持已有代码文件的格式。这意味着如果你看到一个JS文件里的大括号没有换行写，那你的代码也要继续保持大括号不换行。如果你的代码没有和代码文件里的其他部分保持一致，那么你的代码就不应该通过代码审查流程。

一致的代码格式让代码更加易读，同时也意味着代码容易用查找/替换命令进行修改。谢天谢地，我们自己形成的编程习惯和jQuery正式推荐的方式非常相似。细微的差异也是有的，不过，那些是个人问题或者我们觉得没法维护的一些东西。参阅jQuery核心样式指南

字符间距

// 不好
if(blah==="foo"){
    foo("bar");
}

// 好 :)
if (blah === "foo") {
    foo("bar");
}

大括号不换行

// 不好
if (foo)
{
    bar();
}

// 好 :)
if (foo) {
    bar();
}

总是用大括号

// 不好
if (foo)
    bar();

// 好 :)
if (foo) {
    bar();
}

字符串处理

引用字符串永远要用双引号。有些人非常喜欢用C语言风格的字符串（单引号），但这种习惯会导致脚本内部的风格冲突。C语言风格的字符串处理要求空字符串和单字符包在单引号里，而短语和单词必须包在双引号内。

注释

往代码里玩命加注释的需求是由各种经理、主管及其他很少接触代码的人们引领的。这种需求无非是雇员们考核指标中的一个勾选栏，花在这上面的时间基本没有带来什么回报。如果那些从善如流的开发者能遵循本文档中提出的建议，他们的代码会变得相当易于阅读，一目了然，以至于再用注释描述这些代码会多余得令人尴尬。来看下面的例子。在这里，布尔变量被作为问题提出，而函数也有直观的命名。

if (user.hasPermission) {
    editPage();
}

至少在这个场景中，注释是完全没有必要的。

注释重要的情况

一个项目里，永远会有某些部分难以查阅和理解。比如一个复杂的正则表达式，或者一个对角度进行计算或在度和弧度单位之间切换的数学函数。没有上面的注释，初级或中级的读者将对脚本的含义毫无头绪。

// 校验美国电话号码的正则表达式，号码格式是 (XXX) XXX-XXXX (减号、空格和括号都是可选的，可以有也可以没有)
var phoneRegEx = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;

总是使用 === 比较符

使用 == 比较符可以让令人郁闷的bug消失于无形。它允许在 JavaScript花园中有清楚解释的弱类型。使用严格的 === 比较符不会执行类型强制转换，从而能够严格地评估两个对象之间的差别。再说一遍，更多详细信息请参见 JavaScript花园。

var zeroAsAString = "0";

if (zeroAsAString == 0) {
    // 这样也能判断为true，呵呵...
}

if (zeroAsAString === 0) {
    // 判断为false
}

例外

在和null进行比较的时候，允许使用 == 比较符，因为它会检测null和undefined两个属性。如果你不完全理解这个原理，那我还是建议你用 === 比较符为好。

var foo = null;

// foo 是 null, 但 bar 是 undefined ，因为它尚未被声明
if (foo == null && bar == null) {
    // 上面的判断还是成立的
}

使用 .parseInt() 的时候，总是指定第二个 'radix' 参数

把字符串解析为整数的时候，有个好习惯是指定第二个基数参数 -- 它会确定该字符

最低0.47元/天解锁文章

前端基础开发

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端开发学习指南最完整的汇总

HTML咋地了, DOCTYPE?不定义DOCTYPE是一种可以被判死刑的罪行。以前你可能用的是下面的DOCTYPE，不过你要知道现在已经有更简洁清晰的代码取而代之了。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-tr...
复制链接

扫一扫