前端学习从入门到高级全程记录之16（CSS高级技巧）

本期目标

本期我们继续学习一些CSS的高级技巧。

1.CSS W3C 统一验证工具

CssStats 是一个在线的 CSS 代码分析工具，可以分析你写的代码到底好不好，哪里出错。

网址是：  http://www.cssstats.com/

如果你想要更全面的，这个神奇，你值得拥有：

W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆

因为它可以检测本地文件哦！！

http://tool.chinaz.com/Tools/CssFormat.aspx css 代码压缩

2.代码压缩

之前的京东案例，我们写了也有四五百行代码，但都是竖着，方便检阅，但是占空间，有专门的工具可以对代码进行压缩，也有一个快捷键（ctrl+shift+{）进行轻度压缩，这个需要在代码编辑器导入插件。
http://tool.chinaz.com/Tools/CssFormat.aspx css 代码压缩。这个网站就是站长之家的压缩：

也是非常方便，主要还是免费。

3.HTML5新标签与特性

兼容性问题 （ie9 以上的版本）

文档类型设定

document

• HTML: sublime 输入 html:4s
• XHTML: sublime 输入 html:xt
• HTML5 sublime 输入 html:5

字符设定

• <meta http-equiv="charset" content="utf-8">：HTML与XHTML中建议这样去写
• <meta charset="utf-8">：HTML5的标签中建议这样去写

常用新标签

w3c 手册中文官网 : http://w3school.com.cn/

• header：定义文档的页眉 头部
• nav：定义导航链接的部分
• footer：定义文档或节的页脚 底部
• article：定义文章。
• section：定义文档中的节（section、区段）
• aside：定义其所处内容之外的内容 侧边

<header> 语义 :定义页面的头部  页眉</header>
<nav>  语义 :定义导航栏 </nav> 
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义:  定义文章</article>
<section> 语义： 定义区域</section>
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>

✦datalist 标签定义选项列表。请与 input 元素配合使用该元素

<input type="text" value="请输入明星" list="star"/>
	<datalist id="star">
		<option value="刘德华">刘德华</option>
		<option value="刘若英">刘若英</option>
		<option value="刘晓庆">刘晓庆</option>
		<option value="戚薇">戚薇</option>
		<option value="戚继光">戚继光</option>
	</datalist>

✦fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<fieldset>
    		<legend>用户登录</legend>  标题
    		用户名: <input type="text"><br /><br />
    		密　码: <input type="password">
</fieldset>

新增的input type属性值：

类型****	使用示例****	含义****
email****	<input type="email">	输入邮箱格式
tel****	<input type="tel">	输入手机号码格式
url****	<input type="url">	输入url格式
number****	<input type="number">	输入数字格式
search****	<input type="search">	搜索框（体现语义化）
range****	<input type="range">	自由拖动滑块
time****	<input type="time">	小时分钟
date****	<input type="date">	年月日
datetime****	<input type="datetime">	时间
month****	<input type="month">	月年
week****	<input type="week">	星期 年

常用新属性

属性****	用法****	含义****
placeholder****	<input type="text" placeholder="请输入用户名">	占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus****	<input type="text" autofocus>	规定当页面加载时 input 元素应该自动获得焦点
multiple****	<input type="file" multipl