@windyBaby 2017-01-17T09:20:56.000000Z 字数 2058 阅读 1682

前端基础知识串讲

一、页面结构

1. Doctype部分

混杂模式(quirks mode）

标准模式(standards mode)

准标准模式(almost standards mode)--IE提出

如果没有文档声明，浏览器会开启混杂模式，这样不同浏览器差异会很大

标准模式可以使用下面任一种文档类型来开启：

HTML 4.01 严格型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 5

<!DOCTYPE html>

准标准模式分为过渡型（transitional）和框架集型（frameset），通过以下文档声明触发，准标准模式和标准模式差异并不大

HTML 4.01 过渡型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 框架集型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 元素和有效的 DTD

2.HTML标签

<html>此元素可告知浏览器其自身是一个 HTML 文档。

最常用属性：lang表示语言language

英语

<html lang="en">

中文简体

<html lang="zh-CN">

虽然有了新标准，但由于兼容性问题，中文还是使用前者

zh-CN (简体, 中国大陆) 对应 cmn-Hans-CN 普通话 (简体, 中国大陆)
zh-SG (简体, 新加坡)   对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK (繁体, 香港)     对应 cmn-Hant-HK 普通话 (繁体, 香港)
zh-MO (繁体, 澳门)     对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW (繁体, 台湾)     对应 cmn-Hant-TW 普通话 (繁体, 台湾)

3.head内容

<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

必需：<title>

元信息：<meta>

引入：<style> <script> <link>

title

<title>这个页面的名字</title>
<!--网页的重要信息，在收藏夹和标签页都会显示-->

meta

中文编码

<meta charset="utf-8">

兼容

<meta http-equiv="x-ua-compatible" content="ie=edge>"

适配

<meta name="viewport" content="width=device-width,initial-scale=1">

搜索

<meta name="author" content="jikexueyuan">作者
<meta name="keywords" content="html,css">关键字
<meta name="description" content="best learning web">描述

刷新重定向

<meta http-equiv="Refresh"content="5;url=http://www.jikexueyuan.com" />

link

标签页图标（favorite icon）

<link rel="shortcut icon" href="favicon.ico">

二、代码规范

1.HTML

确保有Doctype、html、head、meta、body

标签要闭合，自闭合标签不用加斜线

避免多余的标签和嵌套

正确使用语义化标签

2.CSS

结构与样式分离（尽量不使用行内样式）

外部样式表引在头部

3.JavaScript

尽量放在单独文件内

建议放在</body>结束前

4.通用规范

永远使用同一套规范

合理的注释
专门给IE的注释

合理的命名
驼峰式（camelCase）、短横分隔命名（kebab-case）、下划线
关于团队合作的css命名规范 | Web前端腾讯AlloyTeam Blog

注意引用顺序

注意文件路径

绝对路径和相对路径

相对路径(Relative Path)

同目录文件引用
. 表示当前所在的目录
./ 表示从当前目录开始，可以忽略

表示上级目录
../表示源文件所在目录的上一级目录
../../表示源文件所在目录的上上级目录，以此类推。

表示下级目录
引用下级目录的文件，直接写下级目录文件的路径即可。

绝对路径(Absolute Path)

HTML绝对路径指带域名的文件的完整路径。

规范参考文档

编码规范 by @mdo
规范 - NEC : 更好的CSS样式解决方案
 前端代码规范及最佳实践 | Isobar
适用于小团队的前端规范
 前端编码规范
 弄懂favicon

三、浏览器调试

1.审查HTML元素
2.审查CSS属性
3.颜色、元素状态、及动画状态
4.移动端模拟
5.文件资源查看下载