HTML5属性运用

HTML5

接触移动端,或专注于支持HTML5浏览器进行前端开发的工作者都不会陌生,这个已经普及很广,对于我专注于PC端开发的人来说,觉得陌生但又觉得很熟悉,大家都知道做PC前端开发为了兼容IE老版本浏览器,一直被限制在HTML5门外,真是憋屈!HTML5指定了一套新的HTML规范体系,相当于在原理的HTML结构中多加了些HTML标签,和一些新的处理机制(离线模式,地理位置,应用缓存,画布等。。。),总结一些HTML5有意思的属性,给自己积攒知识。

快捷键设置accesskey:

对于想在页面加一些快捷键效果的话,只要用此属性就可以达到效果,举例:拿input输入框为例,让input输入以快捷键的方式获得焦点

<input type="text"  name="name" accesskey="n" /><br/>

很简单,只要在input标签加入一个accesskey属性,并设置里面的值最好为一个字节的值! 根据浏览器设置是用"Alt" + 设置的值进行快捷键操作的,但这里有区别,在IE和谷歌都是以“Alt” + 设置值,但是在火狐侧需要这样“Alt” + “Shift” +设置值,才能让对应

HTML标签获得焦点。

contenteditable:

用于设置其HTML标签在页面可以编辑,打个比方:原先的<P>标签在页面只展示内容,但不可以操作编辑,不能像<input>输入框那样,但有个这个属性之后,世界瞬间变的那么美好!

<p contenteditable="true">true为可编辑状态,false为不可编辑状态</p>

这样在页面就可以编辑p标签里面内容了,真爽。

dir:

此属性实现方式像css中的margin或left:‘0px‘,right:‘0px‘,让元素 居左居右

<p dir="ltr">居左</p>
<p dir="rtl">居右</p>

在页面展示效果如下:

设置属性ltr是居左 ,rtl是居右的意思。

时间: 2024-10-10 19:42:39

HTML5属性运用的相关文章

html5 属性

滚动速度属性 scrollamount 例子<marquee scrollamount="3">这个速度是3</marquee> <marquee scrollamount="5">这个速度是5</marquee> 滚动停止属性 loop 例子<marquee loop>循环次数</marquee> 滚动范围 width    height <marquee width="&qu

razor 添加html5属性

在 HTML5 中, 可以使用 data- 属性来表示用户数据,这些数据甚至可以是 JSON 格式的数据,对 Web 前端开发带来很大的方便. 在 MVC 的 Razor 中,可以使用匿名对象来生成定制的属性,不过,这样的属性可不能通过 Razor  的语法检查. new{ data-id= 1 } 编译器会直接报告错误.  The name 'data' does not exist in the current context   ,原因很简单,把 - 号当作运算符了.其实,HtmlHelp

html5属性placeholder的js 向下兼容支持(jquery版)

placeholder是html5表单特性中比较好用的一条,但是苦于其向下兼容性,所以一般要做向下兼容的站点都不敢用,如果有用到的地方,也是用js简单模拟而实现的,那么有没有一个一劳永逸的方法去解决这个问题呢? 接下来我就来带大家实现这个方案: if ('placeholder' in document.createElement('input')) return; 这句代码的意思是判断是否是支持placeholder属性的,如果支持则return,不执行下面代码. if (this.type

2.2 HTML5属性使用方法

1.标签可以拥有属性为元素提供更多的信息 2.属性以键值对的形式出现,如:href="www.jikexueyuan.com"(当前地址只用写文件名即可) 3.常用的标签属性: <h1>:align对其方式 <body>:bycolor背景颜色 <a>:target规定在何处打开链接 4.通用属性: class:规定元素的类名 id:规定元素唯一ID style:规定元素的样式 title:规定元素的额外信息

html5程序设计(一)http://caniuse.com--&gt;查看是否支持html5属性的网站(牛B)

1.基于html5的各类API的优秀设计,比如:从video元素中抓取的帧可以显示在canvas里面,用户单击canvas即可播放这帧的应用: 2.Modernizr 一个javascript库,它提供了非常先进的html5和css3检测功能:它是检测浏览器支持某些特性的最佳工具: 3.canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不可能像SVG图像那样可以放大缩小,此外用canvas绘制的对象不属于页面DOM结构或者任何命名空间:SVG图像可以在不同的分辨率下流畅的缩放,并且支

html5属性

herder,头部nav,导航article,内容footer,底部 section,web页面中的一块区域 aside,相关内容或引文 address,在文档中定义联系信息 search,输入关键字收索文本框 menu,菜单列表 date,选取日,月,年month,选取月和年week,选取周和年time,选取时间datetime,获取年,月,日,时间datetime-local,获取本地时间 引用css3样式,需要block声明,js脚本跟css样式document.createElement

HTML5全局属性和事件

全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等.HTML5中又新增了一些特殊功能的全局属性和事件. 属性: HTML5属性能够赋给标签元素含义和语境,下面的全局属性可用于任何 HTML5 元素. 属性 描述 contenteditable 规定是否允许用户编辑内容. contextmenu 规定元素的上下文菜单. draggable 规定是否允许用户拖动元素. dropzone 规定当被拖动的项目/数据被拖放到元素中时会发生什么. hidden 规定

HTML5元素、属性和格式化

-----------------siwuxie095 HTML5 元素 1.元素指的是从开始标签到结束标签的所有代码 开始标签 元素内容 结束标签 <p> this is my web page </p> <br /> 开始标签也被称为开放标签,结束标签也被称为闭合标签 <br /> 标签:用于换行,因为里面没有元素内容,所以 被称为 空标签 2.HTML 元素语法 · 元素的内容是开始标签与结束标签之间的内容 · 空元素在开始标签中进行关闭 · 大多数

小习html5为表单添加的新属性

输入框html5新增属性 在学习任何一种语言时都提到“渐进增强”原则,说白了就是兼容性有木有.虽然html5一些新属性在实际使用中受到限制,但是依然阻挡不了伟大的同伴们学习的脚步.近来有点儿忙,这是2016年第一篇文章.内容比较简单只是了解学习. 输入框按输入的内容分,也就是单行输入和多行输入,既是<input type="">和<textarea></textarea> <textarea></textarea>标签属性 a