目录
classname命名规范
| ClassName | 含义 |
| ---------------------- | -------------------- |
| about | 关于 |
| account | 账户 |
| arrow | 箭头图标 |
| article | 文章 |
| aside | 边栏 |
| audio | 音频 |
| avatar | 头像 |
| bg,background | 背景 |
| bar | 栏（工具类） |
| branding | 品牌化 |
| crumb,breadcrumbs | 面包屑 |
| btn,button | 按钮 |
| caption | 标题，说明 |
| category | 分类 |
| chart | 图表 |
| clearfix | 清除浮动 |
| close | 关闭 |
| col,column | 列 |
| comment | 评论 |
| community | 社区 |
| container | 容器 |
| content | 内容 |
| copyright | 版权 |
| current | 当前态，选中态 |
| default | 默认 |
| description | 描述 |
| details | 细节 |
| disabled | 不可用 |
| entry | 文章，博文 |
| error | 错误 |
| even | 偶数，常用于多行列表或表格中 |
| fail | 失败（提示） |
| feature | 专题 |
| fewer | 收起 |
| field | 用于表单的输入区域 |
| figure | 图 |
| filter | 筛选 |
| first | 第一个，常用于列表中 |
| footer | 页脚 |
| forum | 论坛 |
| gallery | 画廊 |
| group | 模块，清除浮动 |
| header | 页头 |
| help | 帮助 |
| hide | 隐藏 |
| hightlight | 高亮 |
| home | 主页 |
| icon | 图标 |
| info,information | 信息 |
| last | 最后一个，常用于列表中 |
| links | 链接 |
| login | 登录 |
| logout | 退出 |
| logo | 标志 |
| main | 主体 |
| menu | 菜单 |
| meta | 作者、更新时间等信息栏，一般位于标题之下 |
| module | 模块 |
| more | 更多（展开） |
| msg,message | 消息 |
| nav,navigation | 导航 |
| next | 下一页 |
| nub | 小块 |
| odd | 奇数，常用于多行列表或表格中 |
| off | 鼠标离开 |
| on | 鼠标移过 |
| output | 输出 |
| pagination | 分页 |
| pop,popup | 弹窗 |
| preview | 预览 |
| previous | 上一页 |
| primary | 主要 |
| progress | 进度条 |
| promotion | 促销 |
| rcommd,recommendations | 推荐 |
| reg,register | 注册 |
| save | 保存 |
| search | 搜索 |
| secondary | 次要 |
| section | 区块 |
| selected | 已选 |
| share | 分享 |
| show | 显示 |
| sidebar | 边栏，侧栏 |
| slide | 幻灯片，图片切换 |
| sort | 排序 |
| sub | 次级的，子级的 |
| submit | 提交 |
| subscribe | 订阅 |
| subtitle | 副标题 |
| success | 成功（提示） |
| summary | 摘要 |
| tab | 标签页 |
| table | 表格 |
| txt,text | 文本 |
| thumbnail | 缩略图 |
| time | 时间 |
| tips | 提示 |
| title | 标题 |
| video | 视频 |
| wrap | 容器，包，一般用于最外层 |
| wrapper | 容器，包，一般用于最外层 |
IE9以上支持
一、HTML5新增特性
1.新增语义标签
<header>头部标签 <nav>导航标签 <article>内容标签 <section>定义文档某个区域 <aside>侧边栏标签 <footer>尾部标签
移动端更好用
2.新增视频标签
2.1<video>标签：目前只支持三种视频格式，MP4、webM、Ogg;尽量使用MP4
语法：<video src="文件地址" controls="controls"><video>
属性：
| 属性 | 值 | 描述 |
| autoplay | autoplay | 自动播放，谷歌浏览器还需用muted |
| controls | controls | 向用户显示播放控件 |
| width | 宽度 | |
| height | 高度 | |
| loop | loop | 播放完之后是否继续播放 |
| preload | auto(预先加载视频) none(不应加载视频) | 预先加载视频 |
| src | 视频url地址 | |
| poster | 加载等待的画面图片 | |
| muted | muted | 静音播放 |
3.新增音频标签
<audio>标签支持3种格式：MP3、War、Ogg
语法格式：
<audio src="文件地址" controls="controls"></audio>
| 属性 | 值 | 描述 |
| autoplay | autoplay | 自动播放，谷歌浏览器禁止自动播放 |
| controls | controls | 显示播放控件 |
| loop | loop | 音频结束时重新开始播放 |
| src | url | 要播放的音频位置 |
4.新增的input类型
type="email"
type="url"
type="date"
type="time"
type="number"
type="tel"
type="search"
type="color"
5.新增的表单属性
required="required"，表单内容不能为空
placeholder：提示文本
autofocus：自动聚焦
autocomplete：off/on 显示之前输入的值 ，默认是on
multiple:multiple；可以提交多个文件
二、CSS3的新特性
1.属性选择器
1.1可以不借助类或者id选择元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[value]{
}
</style>
</head>
<body>
<input type="text" value="请输入">
<input type="text" >
</body>
</html>1.2.可以选择属性=值的某些元素（常用）
input[value='请输入']{
}1.3.可以选择属性值开头的某些元素
div[class^=icon] {
color: red;
}1.4.可以选择属性值结尾的某些元素
section[class$=data] {
color: blue;
}1.5.可以选择属性值包括的某些元素
section[class*=data] {
color: blue;
}类选择器、属性选择器、伪类选择器的权重是10
2.结果伪类选择器
常用于选择父级选择器的子元素
E：first-child 匹配父元素中的第一个子元素E
E：last-child 匹配父元素中的最后一个子元素E
E：nth-child（n） 匹配父元素中的第n个子元素E;n可以数字、关键字和公式
n可以是关键字：even偶数 odd奇数
n如果是公式：n是从0开始的，如果是nth-child（n）是所有的孩子
| 公式 | 数值 |
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15... |
| n+5 | 从第5个开始（包含第五个）到最后 |
| -n+5 | 前5个（包含第五个） |
nth-child和nth-of-type的区别
nth-child会把所有的子元素排列序号，再和前面指定盒子匹配
nth-of-type会把指定元素类型的盒子排列序号
3.伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
::before 在元素前面插入内容
::after 在元素后面插入内容
注意：
- before和after创建一个元素 属于行内元素，在html结构树中找不到
- before和after必须有content属性
- 伪元素选择器和标签选择器一样，权重为1
伪元素清除浮动：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
4.CSS3盒子模型
可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box
默认是content-box 盒子大小为width+padding+border
border-box 盒子大小为width
5.CSS过渡
过渡动画：从一个状态渐渐变化到另一个状态
和hover一起搭配使用
语法：transition：要过渡的属性 花费时间 运动曲线 何时开始
- 属性：想要的csss属性
- 花费时间：单位是秒 必须写单位
- 运动曲线：默认是ease(可以省略)
- 何时开始：单位是秒 必须写单位 可以设置延迟触发时间 默认是0s
谁过渡给谁加transition
6.favicon图标
页面标签页的小图标
- 制作png格式，然后使用第三方软件（比特虫https://www.bitbug.net/）转换为ico图标
- 把转换的图标放在项目的根目录下
- 引入图标
<link rel="shortcut icon" href=" favicon.ico" />
三大标签SEO优化
<title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 网站说明 -->
<meta name="description" content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
<!-- 关键字 -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
1833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
