饥人谷技术博客W3Cschool学习之路

前端基础知识

2016-12-21  本文已影响1429人  波段顶底

什么是html？

html是一种网页标记语言，叫超文本标记语言，我们平时上网所看到的所有网页均来自于html，英文全称Hyper Text（超文本） Markup（标记） Language（语言）。
图片、链接、音乐、视频、程序等等现在都是通过html实现。但严格讲，它并不算编程语言而是属于标记语言（标记标签 markup tag）。所以，不论你是否是程序员，这个语言最好掌握。期初学习时可能觉得html很简单，一度以为当个程序员太简单，后面会接触到html5、css3，兼容性，可能这还不是最难得，直到......javascript，WTF！！！没点基础还真会怀疑人生！总之，对于html而言，
并没有想象中的那么难，也没有想象中那么简单。

了解html的历史

等等，这是违反鲁棒性原则（对自己输出要严格， 对他人的输入要灵活）的，因为xhtml并没有增加新的tag，它只是要求按照XML的规范来要求HTML，并定义了一个新的MIME type，application/xhtml+xml。W3C的初衷是想让浏览器强行检查错误，如果页面有HTML错误，浏览器就要显示错误信息。而实际情况是大家已经用4.01的标准做了大量不符合要求的网页了，你这么一搞，那就是啪啪打脸啊，自然不被大家认可，这也不符合浏览器向后兼容的原则。后来，W3C不得已，就在xhtml 1.0的标准之后加了一个附录C，允许开发者自己选择是使用XHTML语法或是旧的MIME type，来分发页面。因为旧的MIME type不会触发浏览器的强错误检查。也就是说，很多网站虽然宣称自己符合xhtml1.0标准，但并不能保证完全无错。主要要看web服务器使用的是那种mime type来分发的。但是，W3C仍不死心啊！又在XHTML 1.1中取消了附录C，还是让大家全部使用新的MIME type来分发，并要求大家把文档标记成xml。结果很显然，然并卵！W3C锲而不舍啊，在后来流产的XHTML 2.0身上，还是非要强行错误检查，强行检查错误就是如果你页面有错误，网页显示就是黄屏，哪怕只有一个小错误，你丫别想看这个网页了！这要是不失败难道还等着程序员给它送上神坛么？而且这个情况正好解释了乱战期间的先实现后标准的现象存在的合理性。因为，先有标准再来实现是行不通的。

html结构

html的结构包括头部head，内容body，头部中可包含页面的标题title、关键词keywords、描述说明description等，它本身不会显示，主要是给浏览器看的，但非常之重要，可以影响网页显示的效果。<body></body>里面就是网页要显示的主要内容了，里面有很多闭合标签构成。

html结构速记

html、css、js的作用？

一个网站由N多个网页组成，一个网页则有html、css和js构成。

三剑客

网站裸奔：如果没有衣服（css）的装饰，人只有躯干身体（html），那就是人（网站）在裸奔，之前我记得美帝好像还搞过一个网站裸奔活动，很多网站哪天全都下架了css，全都裸奔，想想也很壮观。

如果人（网站）没有可以控制其动作（抬胳膊，转向，走路，吃饭，说话）的思想（js），这人（网站）也可以称之为人，但更像一个植物人。当然，借助css3的新技术，可以把植物人打扮的更漂亮，甚至可以协助他做一些简单的动作，但没有js，他依然是无交互反馈的。

有了html5后，增加了更多新的骨头，去掉了以前老化无用的骨头，但作为人更重要的依然是思想，没有思想和闲鱼有何区别？而jQuery等框架的作用则更像是把控制人体的动作编排成一套招式，比如吃饭这个动作编排进了：拿起勺子→挖食物→把勺子送嘴边→张嘴→送食物进嘴→咀嚼。

html和html5区别

html
html5

没有JavaScript的网页会由图2变为图1，只是好看了，但还是黑板，交互性依然不行。

HTML、XML、XHTML区别

什么是html语义化？

所谓html语义化实际上是除了让人容易通过标签的意思理解外，也要易于搜索引擎和浏览器爬虫理解。简单讲就是在合适的时间合适的地方使用合适的有语义信息的标签，例header,nav,aside,footer,section,ul,ol,em,strong等代替那些没有语义div,span信息的标签和big,center,strike,font,b,u等完全可以用css来取代的标签。同时，语义化也有助于seo和团队的开发维护，它的目的是让机器更接近人的思想，都能看懂，提高处理效率。比如我们经常犯的错误就是在一个div里面对某一个词要加重强调的时候，会使用span包起来，然后控制span的css为font-weight为bold。这种显然不是语义化，因为有加重强调的标签strong。

结构表现行为分离原则

html（内容结构层）、css（样式表现层）、js（行为控制层）。html结构层作为网页的重要基础，其标签赋予内容的含义，主要包含内容（注意：这里的内容是指纯粹的数据信息本身，并不包含辅助信息，如装饰性的图片图标等）。css表现层则是定义您的html该如何显示。js行为层则是为页面增加一些交互动作。实际上，html4.0诞生的时候就是希望将css和html的分离开，css负责表现，而不是通过一些html的样式标签来实现，这样做好处在于一方面有利于搜索优化，另一方面方便修改维护和改版重构。在实现分离时候保持两个原则即可：

编码规范的黄金定律：

永远遵循同一套编码规范 -不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

HTML规范：

XHTML规范：

HTML5规范

原则：

web标准的核心思想是结构（html）、表现（css）、行为（javascript）相互分离，互不干涉。并非某一个标准，而是一系列标准的集合。按照结构表现行为分离原则，编写网页时应先考虑结构，也就是在写html的时候，先不要管css样式的事儿，先把重点放在html的结构和语义化上，让html能够体现页面的结构或内容。之后在结构的基础上再去添加样式，最后在加上js交互行为。同时，在写javacript的时候尽量不要用js去直接操作样式，而是通过给html元素添加或删除class来控制样式变化。

语法：
注释：
文档：
属性：
元素：
格式：
编辑器配置：

css编码规范：

语法：

代码示例：

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

对用到的术语有疑问的请参考 Wikipedia 上的 syntax section of the Cascading Style Sheets article。

声明顺序：

相关的属性声明应当归为一组，并按照下面的顺序排列：
Positioning
Box model
Typographic
Visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

代码示例：

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* Misc */
  opacity: 1;
}

完整的属性列表及其排列顺序请参考 Recess。

不要使用@import：

与<link>标签相比，@import指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

  1. 使用多个<link>元素
  2. 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
  3. 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

代码示例：

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

请参考 Steve Souders 的文章了解更多知识。

媒体查询（Media query）的位置：

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。如：

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}
带前缀的属性：

当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。
在 Textmate 中，使用 Text → Edit Each Line in Selection (⌃⌘A)。
在 Sublime Text 中，使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
单行规则声明：

对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。
这样做的关键因素是为了错误检测 -- 例如，CSS 校验器指出在 183 行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。

代码示例：

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }
简写形式的属性声明：

在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：padding、margin、font、background、border、border-radius
大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。
在 MDN（Mozilla Developer Network）上一篇非常好的关于shorthand properties 的文章，对于不太熟悉简写属性声明及其行为的用户很有用。

代码示例：

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
Less 和 Sass 中的嵌套：

避免不必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。
扩展阅读：Nesting in Sass and Less

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}
Less 和 Sass 中的操作符：

为了提高可读性，在圆括号中的数学计算表达式的数值、变量和操作符之间均添加一个空格。

// Bad example
.element {
  margin: 10px 0 @variable*2 10px;
}

// Good example
.element {
  margin: 10px 0 (@variable * 2) 10px;
}
注释：

代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}
class 命名：

在为 Sass 和 Less 变量命名时也可以参考上面列出的各项规范。

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
选择器：

扩展阅读：
Scope CSS classes with prefixes
Stop the cascade

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
代码组织：
/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }
编辑器配置：

将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：

参照文档并将这些配置信息添加到项目的.editorconfig文件中。例如：Bootstrap 中的 .editorconfig 实例。
更多信息请参考 about EditorConfig。

推荐学习网站和书籍：

  1. https://www.w3.org/
  2. https://developer.mozilla.org/
  3. http://www.w3school.com.cn/
  4. https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css
  5. http://www.w3cschool.cn/
  6. http://www.w3ii.com/
  7. https://www.codecademy.com/
  8. http://www.webplatform.org/
  9. http://www.bilibili.com/video/av3514695/
  10. http://www.bilibili.com/video/av3143963/
head fisrt系列入门书籍 也可以看看 评价挺高，排版是亮点，缺点是书是胶粘的，时间长了掉页严重，我是看一页仍一页

chrome书签：

一些学习网站，自己去搜下就可以，缺点是不系统

本文章著作权归作者本人和饥人谷所有，转载须说明来源

上一篇 下一篇

猜你喜欢

热点阅读