码迷,mamicode.com
首页 > Web开发 > 详细

前端随心记---------HTML5+CSS系列8.0

时间:2019-11-26 17:48:41      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:拖动   title   宽度   value   搜索结果   rom   最小   添加   图片   

HTML5新增标签(二)

  HTML5新增的其他元素

    mark

高亮显示文字,典型应用搜索结果中高亮显示搜素关键字。

写法: <mark></mark>

    source 标签

标签为媒介元素(比如 <video> <audio>)定义媒介资源。

    video

定义视频,比如电影片段或其他视频流;

写法: <video src=””  ></video>

ogg 文件,适用于FirefoxOpera 以及 Chrome 浏览器。

当前, <video> 元素支持三种视频格式: .MP4,    .WebM,   .ogg:

可设置属性:

src :视频的路径

Width:  视频播放器的宽度

height: 视频播放器的高度

autoplayautoplay ; 表示立刻播放

controlscontrols;显示播放控制组键

looploop;  反复播放;布尔值,如果设置了就会重复播放否则不会;

mutedmuted ; 处于静音状态

poster;  指定视频数据载入时显示的图片

preload: auto / metadata / none  ;表示预先载入视频

    取值none不预先载入;auto一旦页面加载就会开始加载视频,默认值;

     metadata 页面加载后仅加载元数据,和默认有点类似;

  (主流浏览器都不支持,除了IE;)

兼容浏览器的写法: 

<video  width=”200”height=”200”controls=”controls”>
     
     <source src="movie.mp4" type="video/mp4"></source>
     <source src="movie.ogg" type="video/ogg"></source> 
                        
   (还可以加载其他格式)
 
    您的浏览器不支持 video 标签。
</video>
注:<source> 定义多种媒体类型,例如<video>、<audio>中的文件类型

    audio

定义音频,比如音乐或其他音频流

写法:

<audio    src=“ ”>  </audio>

Safari 浏览器,音频文件必须是 MP3 Wav 类型 mpeg。 

兼容浏览器写法:

<audio   controls=”controls”>
      <source src="horse.mp3" type="audio/mpeg">
      <source src="horse.ogg" type="audio/ogg">
      <embed height="50" width="100" src="horse.mp3">   
</audio>

 

  新增表单标签以及属性

    Html表单一直都是web的核心技术之一,html5为表单添加了新的js功能和结构上更加自由的写法,极大的提高了开发效率,xhtml中需要放在form中,而html5中表单元素可以放在页面任何位置;

  新增表单类型元素:

    email       邮箱

    url            网址

    number    数值

    range       范围数值

    date        日期

    search     搜索

    color        颜色 

 

1 email: 邮箱类型的文本框验证  

应用:    

 <input  name=”email1”   type=”email”   required   />

2  url  :      输入URL地址的文本框

      应用:    

<input  name=”url1”   type="url"  required  />

3  color :  用来选取颜色。

  应用:

 <input  name=”color1”  type="color"  required />

4 number:   用来输入数字的文本框。

   属性:min :允许的最小值

            max: 允许的最大值

      step: 规定的间隔值

           value:默认值

  应用:

<input  name=”number1”  type="number"  value="20"  minn="10"  max="100"       step="5"  required />

5   range: 用来只允话输入一段范围内数值的文本框 

   属性:   min  最小值 

                max  最大值 

                step  拖动的步幅间隔值

                value:默认值

 应用:

 <input  name="range1"  type="range"  value="25"  min="0"  max="100"   step="5"  />

6   search : 用于搜索域,显示为常规的文本框,除了火狐浏览器其他都会在输入框里显示一个取消搜索的符号

应用:

<input  name=”search1”   type="search"  />

7    date :   提供多个选取日期和时间的新输入类型 

   属性:

·date -   选取日、月、年

·month - 选取月、年

·week -  选取周和年

·time -   选取时间(小时和分钟)

.datetime - 选取时间、日、月、年(UTC世界标准时间)

·datetime-local - 选取时间、日、月、年(本地时间)

8    output :用于不同类型的输出,比如计算或脚本输出,显 示计算结果

注:必须从属于某个表单。即,必须将它书写在表单内部,或对它添加form属性。

应用:

第一种:
<form oninput="out.value=parseInt(a.value)+parseInt(b.value)">
      "0"
      <input type="range" id="a" value="50" >
      "100"
      <input type="number" id="b" value="50" >
      "="
      <output name="out"   for="a b">
       "120"
      </output>
    </form>
第二种:
<form   oninput="cun.value=num1.valueAsNumber + num2.valueAsNumber">
 <input type="number" value="30"  id="num1">  +
<input type="number"  value="20" id="num2"/>  =
<output   name="cun" for="num1 num2">
50
 </output>
 </form>

 对新元素样式的使用:

注意,跟 input  标签设置样式一样,但是要设置标签中局部的样式不能实现。如改变日历的背景色,颜色框的按钮效果,等,这些都不可以实现。

9  form :可以通过id  匹配所属表单,可以实现表单元素放在表单之外; 

  应用:

 <form id=”myform”></form>
<input type=”text”   form=”myform” />

   

  表单验证

HTML5增加了大量在提交时对表单及表单元素内容有效性验证的功能。 

  自动验证 

   1)   required

      可以应用在大多数输入元素上(除了隐藏元素和图片),在提交时如果元素内容为空白,则不允许提交,同时显示提示文字。 

  2)   pattern

      将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。 

    例:

<input pattern = “[0-9][A-Z]{3}” title="输入内容:一个数与三个大写字母" placeholder=‘输入内容:一个数与三个大写字母’>

 1:用户名验证规则 : 用户名长度为6~12并且由字母组成

    pattern="[A-z]{6,12}"

  2:密码验证规则 : 密码必须是数组与字母组合

    pattern="[A-Za-z].*[0-9]|[0-9].*[A-Za-z]"

3   placeholder属性:

文本框处于未输入状态时文本框中显示的输入提示。

4 autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得焦点,一个页面只能有一个。

5  autocomplete属性:输入富足和所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能。只有三种:on/off/""。on可显示指定候补输入的数据列表,使用datalist元素与list属性提供候补输入的数据列表,自动完成时,可以将该datalist元素中的数据作为候补输入的数据在文本框中显示: 

<input type="text" name="greeting" autocomplete="on"  list ="greeting">

6)Novalidate属性  取消验证     可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证

Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。

 

前端随心记---------HTML5+CSS系列8.0

标签:拖动   title   宽度   value   搜索结果   rom   最小   添加   图片   

原文地址:https://www.cnblogs.com/hudunyu/p/11937019.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!