HTML5中占位符属性有什么用

  介绍

本文将为大家详细介绍”HTML5中占位符属性有什么用”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“HTML5中占位符属性有什么用“能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。

html是什么

html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签。通过这些标签可以将网络上的文档格式统一,使分散的互联网资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形,动画,声音,表格,链接等,主要和css + js配合使用并构建优雅的前端网页。

,,,,,,,,,,,,,,,,,,,,,,,,,,,,占位符(占位符)是HTML5新增的一个HTML属性,用来对可输入字段的期望值提供提示信息,目前已经得到主流浏览器的广泛支持,使用方式非常简单:

& lt; input  id=皍sername", name=皍sername",占位符=扒胧淙胗没?类型=皌ext"在

该属性适用于<代码> & lt; textarea>代码> 类型属性值为文本、密码、搜索、电话、网址或者电子邮件等的<代码> & lt; input>

 HTML5中占位符属性有什么用“> </p> <h4>自定义样式</h4> <p>如果想改变占位符的默认呈现样式,应该使用<代码>::占位符</代码>伪元素选择器,不过当前还没有浏览器支持,因此只能根据不同浏览器的不同实现方式分别定义:</p> <pre类=八?HTML;工具栏:假;”>::-webkit-input-placeholder  {,/* Chrome或Safari/Opera  */,,颜色:绿色;}:-moz-placeholder {/*大敌;Firefox  19 +, */,,颜色:绿色;}:-ms-input-placeholder {/*大敌;IE  10 +,注意这里只有一个冒号,*/,,颜色:绿色;}</pre> <p>为什么样式要分别定义呢,如果像下面这样组合到一起:</p> <pre类=八?html;工具栏:假;”>::-webkit-input-placeholder,:: -moz-placeholder  {
  ,,颜色:绿色;}</pre> <p>不应该把针对不同浏览器的选择器写在一起,这样写会因为无法识别的选择器而造成这整个规则集被忽略(当然,像类似IE 7这种具有超强错误处理能力的浏览器除外,不过这里和IE 7没什么关系)。</p> <h4> Firefox定义方式的改变</h4> <p>如果需要兼容老版本的Firefox浏览器,还需要添加下面这种只有一个冒号的样式规则:</p> <pre类=八?html;工具栏:假;”>:-moz-placeholder {/*大敌;Firefox  4,安康;18,*/,,颜色:绿色;}</pre> <p>因为从Firefox 19开始一个冒号的伪类定义方式<代码>:-moz-placeholder> </代码被废弃了,切换为两个冒号的伪元素定义方式。与此同时,它还添加了一个默认的<代码>不透明度:0.54> </代码不透明度样式,如果需要,可以覆盖掉该样式,否则文字是半透明的:</p> <pre类=八?html;工具栏:假;”>::-moz-placeholder  {
  ,,颜色:绿色;
  ,,不透明度:1;}</pre> <h4>伪类和伪元素</h4> <p>伪类和伪元素有什么区别呢?伪类可以理解为给某个元素添加了一个类,比如<代码>:第一个孩子</代码>伪类,选择第一个子元素:</p> <pre类=八?html;工具栏:假;”> p: first-child  {
  ,,字体大小:16 px;} </pre> <p>也可以理解为元素当前的状态,同样也可以通过添加一个真正的类来实现类似效果:</p> <pre类=八?html;工具栏:假;”> p.first-child  {
  ,,字体大小:16 px;} </pre> <p>无论是伪类还是真正的类,样式都是直接添加到<代码> & lt; p> </代码>元素上的。</p> <p>而伪元素可以理解为添加了一个虚拟的元素,比如<代码> p:在</代码>伪元素,可以像下面这个伪代码这样理解:</p> <pre类=八?html;工具栏:假;”> & lt; before> p: before</before> & lt; p> paragraph</p> </pre> <p>这里<代码> & lt; p> </代码>元素和p <代码>:</代码>之前可以理解为是两个不同的元素。如果被绕晕了,没关系,毕竟这不是本文的重点,更多伪元素与伪类的信息可以参考CSS伪类- | MDN和伪元素——CSS | MDN </p> <h4>关于伪类选择器引发的问题</h4> <p>因为IE浏览器使用的是伪类<代码>:-ms-input-placeholder </代码>选择器来定义占位符的样式,实际上样式是作用于文本输入框的,如果另外还有针对文本输入框的选择器特殊性更高的样式规则,将会覆盖掉该样式,参考下面代码:</p> <pre类=八?html;工具栏:假;”>输入:-ms-input-placeholder  {,/* 0, 0, 1, 1, */,,颜色:绿色;}# username  {,/* 0,, 1,, 0, 0, */,,颜色:蓝色;}</pre> <p>注释中的数字用来表示该选择器的特殊性。</p> <p>上面两个样式规则当中使用ID选择器的特殊性更高,所以10/11在IE中测试会看到占位符显示为蓝色,与期望的有点不一样。同样使用伪类选择器的旧版本火狐也会出现这个问题,因此,在书写样式的时候需要特别注意,实在搞不定,别忘了还有<h2 class=HTML5中占位符属性有什么用