前端基础知识分享

 一.了解CSS中的@ AT规则

1. 常规规则

@charset
定义字符集。字符设置据说会被HTTP头覆盖。

某些软件，例如Dreamweaver新建CSS文件时候，自动会带有下面所示代码，但实际开发时候，作用不大，因为meta中已经有所设置(<meta charset="utf-8">)，会覆盖，所以我都是直接删掉的。

@charset "utf-8";

@import
导入其他CSS样式文件。实际上线时候，不建议使用，多请求，阻塞加载之类。但，本地开发可以使用，用做CSS模块化开发，然后使用一些(如grunt)工具进行压缩并合并。但是呢，相比less, sass等还是有不足，就是@import语句只能在CSS文件顶部，使得文件的前后关系控制，就不那么灵活。[tip:sass中也经常使用@import]

@import 'global.css';

@namespace
此规则应用到XML HTML(XHTML)上特别有用，因为这样的话XHTML元素可以作为选择器在CSS中使用。

/* XHTML命名空间 */

@namespace url(http://www.w3.org/1999/xhtml);

/* 内嵌在XHTML的SVG的命名空间 */

@namespace svg url(http://www.w3.org/2000/svg);

1.嵌套规则

所谓“嵌套规则”，就是带有花括号{}, 语法类似下面的规则：

@[KEYWORD] {

  /* 嵌套语句 */

}

@keyframes用来声明CSS3 animation动画关键帧用的

二.常见标签语义（基础知识）

p - 段落

h1,h2,h3,h4,h5,h6 - 层级标题

strong,em - 强调

ins - 插入

del - 删除

abbr - 缩写

code - 代码标识

cite - 引述来源作品的标题

q - 引用

blockquote - 一段或长篇引用

ul - 无序列表

ol - 有序列表

dl,dt,dd - 定义列表

三.HTML5常用新标签

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<header> 标签定义 section 或 document 的页眉。

<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。

<embed> 标签定义嵌入的内容，比如插件。

<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

<audio> 标签定义声音，比如音乐或其他音频流。

四.关于多媒体标签

当在现代浏览器中使用 audio 以及 video 标签来播放音频、视频时，应当注意格式。

音频应尽可能覆盖到如下格式：

** MP3 ** WAV ** Ogg

视频应尽可能覆盖到如下格式：

** MP4 ** WebM ** Ogg

在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素

五. http标准

为什么做web前端要了解http标准？——因为浏览器要从服务端获取网页，网页也可能将信息再提交给服务器，这其中都有http的连接。web系统既然和http链接有瓜葛，你就必须去了解它。

六. W3C标准

七. ECMAScript标准

有些人可能只知道javascript，而不知道ES——其实，js是在ES的基础上，为web浏览器做了一部分封装（增加了DOM操作、BOM操作等）。

如上图中的这些概念，大家可能平时都在javascript中看到，其实他们是ES的内容。只不过javascript继承了ES的这些特性，并且javascript用的比较广泛，因此才会在js中讨论的多一些。

本文来源于：【html第二期】前端基础知识分享<(￣︶￣)>-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。