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    表示位图区域    

原文地址:https://www.cnblogs.com/yjf713/p/13375057.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


  译序:JWMediaPlayer是开源的网页使用的Flash播放器。本文采摘于JWPlayer的官方文档,讲解了JWPlayer对于RTMP的使用方法,我们可以从JWPlayer客户端的角度来了解RTMP协议。以下是官方原文:      简介    RTMP(RealTimeMessagingProtocol
    Flash编程原理都是只能将1写为0,而不能将0写成1.所以在Flash编程之前,必须将对应的块擦除,而擦除的过程就是将所有位都写为1的过程,块内的所有字节变为0xFF.因此可以说,编程是将相应位写0的过程,而擦除是将相应位写1的过程,两者的执行过程完全相反.一、Nor和NandFlash
 上传setenvgatewayip192.168.1.1;setenvserverip192.168.1.7;setenvipaddr192.168.1.156;mw.b0x820000000xff0x1000000sfprobe0sfread0x8200000000x1000000tftp0x82000000test.bin0x1000000 下载mw.b82000000ff1000000tftp82000000test.bi
Error:FlashDownloadFailed-"Cortex-M3"出现一般有两种情况:1.SWD模式下,Debug菜单中,Reset菜单选项(Autodetect/HWreset/sysresetReq/Vectreset)默认是AutoDetect,改成SysResetReq即可。2.Jtag模式下,主要是芯片大小选错。Flash->ConfigureFalshTools配置窗口,切换到“Utilities"
jPlayer是一个用于控制和播放mp3文件的jQuery插件。它在后台使用Flash来播放mp3文件,前台播放器外观完全可以使用XHML/CSS自定义。支持:有一点比较好的是,在支持html5的浏览器上会使用html5的标签audio或者video,而不支持的浏览器上使用swf来播放选择需要播放的Mp3文件。播放、暂停
#ifndef__FONTUPD_H__#define__FONTUPD_H__#include"sys.h" //字库信息结构体定义33字节__packedtypedefstruct{u8fontok;//字库存在标志,0XAA,字库正常;其他,字库不存在u32ugbkaddr;//unigbk的地址u32ugbksize;//unigbk的大小u32f12addr;//gbk12地址u32g
ROM(ReadOnlyMemory)和RAM(RandomAccessMemory)指的都是半导体存储器。ROM在系统停止供电的时候仍然可以保持数据,而RAM通常都是在掉电之后就丢失数据,但是访问速度快。典型的RAM就是计算机的内存。RAM有两大类,一种称为静态RAM(StaticRAM/SRAM),SRAM速度非常快,是目前读写最快的存储
JSpc端和移动端实现复制到剪贴板功能实现在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍。随着HTML5技术的发展,Flash已经在很多场合不适用了,甚至被屏蔽。本文介绍的一款JS插件,实现了纯JS方法复制文本到剪切板。插件名是Clipboard.js,该插件不依
例子:R0=1R1=1R2=10R3=e000ed10R12=0LR=fffffff9(中断返回值)PC=0PSR=60000013或60000016或60000036(Z、C、EXCEPT_NUM:RTC_WKUP_IRQn、EXTI0_IRQn、USART2_IRQn)BFAR=e000ed38(不关心)CFSR=20000(INVSTATE:Invalidstateusagefault thePCvaluestackedf
 内存接口概念首先来分析下操作GPIO控制器和操作UART控制器两者的区别如图是S3C2440是个片上系统,有GPIO控制器(接有GPIO管脚),有串口控制器(接有TXDRXD引脚)配置GPIO控制器相应的寄存器,即可让引脚输出高低电平;配置UART控制器相应的寄存器,即可让引脚输出波形。前者相对简单,类
小编导语:    近几年来,网页游戏成为了游戏界关注的焦点,由于其制作简单,成本低并且收益率较高,因此成为了众多游戏厂商追逐的对象,但是除了商家夸张的炒作宣传外,很少有页游佳作出现。然而,随着Unity3D游戏引擎的出现,网页游戏的3D化成了页游冲出重围的杀手锏,那么在flash网页游戏称
1.指定数组到特定的Flash单元#pragmalocation=0x000FFF00 __rootconstcharFlash_config[]={0x0,0x1,0x2,0x3,0x4,0x5,0x6,0x7,0x8,0x9,0xA,0xB,0xC,0xD,0xE,0xF,0x10,0x11,0x12,0x13,0x14,0x15,0x16,0x17,0x18,0x19,0x1A,0x1B,0x1C,0x1D,0x1E,0x1F,0x20,0x21,0x22,0x23,0
继续研究发现,计算机的固件真的很有趣。参考了一些重要的资料,比如http://donovan6000.blogspot.com/2013/06/insyde-bios-modding-advanced-and-power-tabs.html等,对于IDA的使用也了解了一些。最后,总结一下目前看来可行性的方案:0.基础知识储备,包括UEFIBIOS的概念,InsydeBIOS的
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>navigator对象<itle></head><body><buttononclick="checkFlash()">检测</button>
修改网上流传的flash-marker.js(function(global,factory){typeofexports==='object'&&typeofmodule!=='undefined'?module.exports=factory():typeofdefine==='function'&&define.amd?define(factory
shareObject本地缓存存储位置:win7系统用户到C:\Users\[你的用户名]\AppData\Roaming\Macromedia\FlashPlayer\#SharedObjects\XP或2003用户到:C:\DocumentsandSettings\用户名\ApplicationData\Macromedia\FlashPlayer\#SharedObjects\ ---------------------作者:iteye_
安装谷歌浏览器之后经常遇到Flash崩溃或者浏览器在浏览Flash内容时卡死的情况。在网上查找资料大多都认为应该是浏览器自带的Flash插件工作模式引起的问题,解决方法如下:首先在地址栏输入chrome://plugins/显示浏览器使用的插件。点击右上角的详细信息,可以看到Flash插件为进程外
之前一直使用的W25Q16spiflash都没问题,换了一款W25Q80后发现工作不正常,经过测试,初步定位到问题在于初始化SPI后是否将CS拉高。于是又去查看了一下原厂代码:发现原厂的代码初始化SPI接口时是专门拉高CS的。结论:网上很多代码初始化SPI接口时没有专门拉高CS,对某些型号可能确实
======================================================NANDFlash最小存储单元:写数据操作:通过对控制闸(ControlGate)施加高电压,然后允许源极(SOURCE)和汲极(RRAIN)间的N信道(N-Channel)流入电子,等到电流够强,电子获得足够能量时,便会越过浮置闸(FloatingGate)底下的二氧化硅层(S
安装CnarioPlayer3.8.1.156或其他版本时,有时会出现如下提示:Warning4154.AdobeFlashPlayer13...notcorrectlyinstalled:请前往AdobeFlash网站,并选择下图示的版本下载安装: