HTML5的语义化、HTML5新增标签、css3新增样式

1、什么是语义化

  为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要。所谓标签语义化,就是指标签的含义。

  语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

  语义化的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新增了哪些功能?

  1. 简化的语法

HTML5简化了很多细微的语法,例如doctype的声明,你只需要写<!doctype html>就行了。HTML5与HTML5,XHTML1兼容,但是与SGML不兼容。

  1. 更加语义化标签(开发者可以更加优雅,网页结构更清晰)

header、footer、nav、article、figure...但这些表情不兼容ie6-8,(兼容处理:html5.min.js;)

  1. 新增<audio> 和<video> 标签

这两个标签可能是HTML5里面最有用的两个标签了。从意思上不难理解,这两个标签是用来播放音频和视频的。

  1. 表单元素的升级

传统的表单元素:form、laber、textarea、select、button...

input(text、password、radio、checkbox、file、submit、reset、button)

Html5给input新增加一些类型(search、email、number、tell、range、color、date)

升级:给表单元素新增加属性placeholder(给表单元素设置提示信息)

升级:提供了新的下拉框方式

  1. 新增canvas标签

我们可以基于js,把它作为一个画布,绘制出想要的图形或者动画,Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就能和用户产生UI交互。虽然目前<canvas>标签还不能实现Flash的所有功能。

Echarts图表插件(http://echarts.baidu.com),它是基于canvas实现

  1. 删除<b> 和<font> 标签

  2. 删除<frame>, <center>, <big> 标签

  3. 新增一些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 属性中调用关键帧声明的动画。

五、css3新增过度效果
1、transition:过渡效果

新增元素

video    表示一段视频并提供播放的用户界面

audio    表示音频    

canvas    表示位图区域    

posted @ 2020-07-24 23:21  柠檬IT  阅读(359)  评论(0编辑  收藏  举报