CSS精灵图、字体图标、HTML5新增属性、界面样式和网站 favicon 图标

/* CSS精灵图 */
.icon {
    background-image: url('sprite.png');
    background-repeat: no-repeat;
}
.icon-home {
    width: 24px;
    height: 24px;
    background-position: 0 0;
}
.icon-user {
    width: 24px;
    height: 24px;
    background-position: -24px 0;
}

/* 字体图标 */
@font-face {
    font-family: 'MyIconFont';
    src: url('myicon.eot'); /* IE9 */
    src: url('myicon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('myicon.woff') format('woff'), /* 现代浏览器 */
         url('myicon.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('myicon.svg#MyIconFont') format('svg'); /* Legacy iOS */
}
.icon-home:before {
    font-family: 'MyIconFont';
    content: '\e001';
}
.icon-user:before {
    font-family: 'MyIconFont';
    content: '\e002';
}

/* HTML5新属性 */
/* 使用HTML5布尔属性 */
<input type="email" required>
<input type="url" pattern="https?://.">
<input type="date">
<input type="time">
<input type="number" min="0" max="10" step="1">
<input type="search">
<textarea rows="8" cols="48" required></textarea>

/* 为表单元素设置界面样式 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f9f9f9;
    border: 1px solid #c1c1c1;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 16px;
}

/* favicon图标 */
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png">