HTML5的语义化、HTML5新增标签、css3新增样式
1、什么是语义化
为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要。所谓标签语义化,就是指标签的含义。
语义化的HTML标签和属性,如:
<header></header>也就是我们的头部标签, 一般用于网站头部内容
<footer></footer>有头部肯定就有底部,一般用于网站底部
div 语义:Division(分隔)
span 语义:Span(范围)
ol 语义:Ordered List(排序列表)
ul 语义:Unordered List(不排序列表)
li 语义:List Item(列表项目)
二、为什么要语义化?
1. HTML结构清晰
2. 代码可读性较好
3. 无障碍阅读
4. 搜索引擎可以根据标签的语言确定上下文和权重问题
5. 移动设备能够更完美的展现网页
6. 便于团队维护和开发
三、HTML5相比HTML新增了哪些功能?
- 简化的语法
HTML5简化了很多细微的语法,例如doctype的声明,你只需要写<!doctype html>就行了。HTML5与HTML5,XHTML1兼容,但是与SGML不兼容。
- 更加语义化标签(开发者可以更加优雅,网页结构更清晰)
header、footer、nav、article、figure...但这些表情不兼容ie6-8,(兼容处理:html5.min.js;)
- 新增<audio> 和<video> 标签
这两个标签可能是HTML5里面最有用的两个标签了。从意思上不难理解,这两个标签是用来播放音频和视频的。
- 表单元素的升级
传统的表单元素:form、laber、textarea、select、button...
input(text、password、radio、checkbox、file、submit、reset、button)
Html5给input新增加一些类型(search、email、number、tell、range、color、date)
升级:给表单元素新增加属性placeholder(给表单元素设置提示信息)
升级:提供了新的下拉框方式
- 新增canvas标签
我们可以基于js,把它作为一个画布,绘制出想要的图形或者动画,Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就能和用户产生UI交互。虽然目前<canvas>标签还不能实现Flash的所有功能。
Echarts图表插件(http://echarts.baidu.com),它是基于canvas实现
-
删除<b> 和<font> 标签
-
删除<frame>, <center>, <big> 标签
-
新增一些API(主要是供js使用的)
webstorage:localStorage、seessionStorage 本地存储解决方案
web socket:新的客户端和服务器端通信方案
获取地理位置或者重力感应等API
四、css3新增样式?
一、边框属性
1、border-color:为边框设置更多颜色
2、border-image:图片边框
3、border-radius:圆角边框
4、box-shadow:阴影效果
二、背景属性
1、background-size:背景图片尺寸
2、background-origin:指定背景图片从哪里开始显示
3、background-clip:指定图片从哪里开始裁剪
三、文字效果
1、text-shadow:文本阴影
2、word-wrap:自动换行
四、css新增动画效果
1、transform:变换效果,比如将元素实现旋转、缩放、平移的功能。
2、animation:动画效果
CSS3 提供了类似 Flash 关键帧控制的动画效果,通过 animation 属性实现。
animation 实现动画效果主要由两个部分组成:
1、通过类似 Flash 动画中的关键帧声明一个动画;
2、在 animation 属性中调用关键帧声明的动画。
新增元素
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域