您的位置:68399皇家赌场 > 服务器租用 > HTML5新添元素、标签总计

HTML5新添元素、标签总计

发布时间:2019-05-03 21:49编辑:服务器租用浏览(150)

    连天遇到h五新标签的笔试标题,就翻开了材质来计算一下:

    HTML伍新增成分、标签总括,html5新添成分标签

    连接蒙受h5新标签的笔试标题,就翻开了资料来总计一下:

    1.form相关:

    (1)form属性:在HTML5中表单成分可放在表单之外,通过给该因素加多form属性来指向目标表单(form属性值设为目的表单id)就能够。

    (2)formaction属性:HTML五给提交按键(如button、submit、image等)扩大了formaction属性,以便提交到不一致的服务器地址。

    <input formaction="new.html" type="submit" value="提交到new.html">
    

    (3)formmethod属性:用法同formaction。

    (4)placeholder属性:用于文本框处于未输入状态时的1种文字提醒。

    (5)autofocus属性:自动获得主旨,叁个页面只好有一个控件具有该属性。该属性无值,直接写就好。

    <input name="username" autofocus type="text" id="username">
    

    (6)list属性:用于单行文本框,该属性的值为某些datalist成分的id,扩充该属性后的单行文本框类似选取框(select),但允许用户自定义输入,为了制止未有帮衬该因素的浏览器出现错误,我们平时选用CSS设置不显得。

    <datalist> 标签:定义可选数据的列表。与 input 成分合作使用,就能够创设出输入值的下拉列表。

    order:<input list="list" name="order" autofocus type="text" id="order">
                <datalist id="list" style="display:none">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                </datalist>
    

    (7)autocomplete属性:自动落成允许浏览器预测对字段的输入,HTML5兑现了自定义设置该属性,幸免了任哪个人都得以看出所存在的安全隐患。该属性值有“on”、”off“或“”(不点名)三种,不指定期使用浏览器的暗中认可值。

    (八)input成分连串:

      search:与text文本框类似,用于搜索;

      tel: 与text文本框类似,用于电话;

          url: 与text文本框类似,用于url格式的地址;

          email: 与text文本框类似,用于email格式的地址;

          number: 与text文本框类似,用于数值;

          range: 只同意输入壹段范围内的数值,通过min和max属性来安装限制;

          color: 颜色文本框,“#000000”格式的文字;

          file: 文件采纳文本框,HTML5中通过multiple属性能够多选;

          datetime、date、month、week、time、datetime-local 各个日期与时光输入的文本框;

          output: 定义分化等级次序的出口;

    (玖)表单验证相关:

      机动验证(正是经过为成分增多相应的性质来达到验证的渴求)

      required属性:具备该属性的因素,假如其内容为空则不允许提交,并交付相应的唤醒。

      pattern属性:具备该属性的要素,借使剧情不为空则把内容与pattern的值进行正则匹配,相配不成功则不通过并提醒。

      min属性和max属性:它们是值类型和日期类型的input元素专用属性,限制了输入的界定。

      step属性:调整成分的值扩充或回落的增加率,如输入一-十0之内的数字,且增进率是五,那么只可以输入壹、陆、11....。

      展现验证(除了给成分加多属性来自动验证外,在HTML5中,form元素与输入成分(input)包括select成分和textarea都享有三个checkValidity方法,调用该格局能够进行手动验证,checkValidity方法以boolean的款式重回验证结果)

      

        function check(){
            var email=document.getElementById("email");
            if(email.checkValidity()){
            alert("email格式正确");
            }else{
            alert("email格式不正确");
            }
            }    
    

      撤销验证(裁撤表单验证有八个属性:用于form的novalidate和用来submit的formnovalidate)

             //用于form的novalidate
            <form novalidate>
            <input type="text" name="name" id="name" required>
            <input type="submit" name="button" id="button" value="提交">
            </form>
    
            //用于submit的formnovalidate
            <form>
            <input type="text" name="name" id="name" required>
            <input type="submit" orfmnovalidate name="button" id="button" value="提交">
            </form>        
    

      自定义错误:在HTML第55中学没经过认证的表单浏览器会有默许的唤醒,但也提供了通过JavaScript的来设置自定义错误提醒音信。(笔者感觉正是友善写个函数,点击时候调用就足以)。

    2.加强的页面成分

    (1)figure元素:figure是个结合元素,能够带标题figcaption,二个figure只同意放置四个figcaption。

            <figure>
            <img src="logo.png" alt="图片">
            <figcaption>标志</figcaption>
            </figure>
    

    (2)details元素:details提供了1种代替Javascript的、将镜头上部分区域开始展览拓展或减少的方法.

            <details>
            <summary>点击我查看细节</summary>
            <p>我是细节内容。</p>
            </details>
    

    (3) mark元素:mark元素表示页面必要非凡体现或高亮展现的片段。

    (4)progress元素:貌似用来写进程条,能够给progress设置value和max属性,value表示曾经开始展览的,max表示总的数量,value和max只可以为可行的浮点数,value必须大于0小于等于max。要是不给progress设置那四个属性,则是动态展现正在进行,进程不鲜明。

    (5) meter元素:定义衡量衡。(界定上下的值会有颜色区分)。

       high:定义衡量的值位于哪个点,被限制为高的值。
            low:定义衡量的值位于哪个点,被限制为低的值。
            max:定义最大值。暗许值是 壹。
            min:定义最小值。暗许值是 0。
            optimum:定义什么样的衡量值是最好的值,如若该值高于 "high" 属性,则象征值越高越好。即使该值低于 "low" 属性的值,则代表值越低越好。
            value:定义衡量的值。

    (6)改良的ol列表:在HTML5中为ol成分增多了start属性和reversed属性。

      start:表示列表序号从几始发。

      reversed:表示列表序号为倒序。

    (7) 改良的dl列表:dl是特地用来定义术语的列表,在HTML5中为dt扩大了名字dfn。

            <dl>
            <dt>术语1</dt>
            <dd>描述...</dd>
            <dt><dfn>名字</dfn>术语2</dt>
            <dd>描述...</dd>
            </dl>
    

    (8)cite:用以表示作者。

    (9)small:用来标记“小型文本”。

    (10)<article>标签:定义外部的内容。

    (11)<aside>标签:定义 article 以外的剧情。aside 的剧情应当与 article 的原委相关。aside能够用于网址页尾一排排的广告还是链接,壹竖排为一个aside。也得以用于博客侧栏。

    (12)<audio> 标签:定义声音。

    (13)<canvas> 标签:定义图形(是为了客户端矢量图形而规划的)。

    (14)<command> 标签:定义命令按键,比方单选按钮、复选框或按键。

    (15)<embed> 标签:定义嵌入的剧情,举例插件。

    (16)<footer> 标签:定义 section 或 document 的页脚。

    (17)<header> 标签:定义 section 或 document 的页眉。
    (18)<hgroup> 标签:用于对网页或区段(section)的标题实行重组。

    (19)<hgroup> 标签:用于对网页或区段(section)的标题进行重组。

    (20)<nav> 标签:定义导航链接的壹部分。

    (21)<output> 标签:定义差别门类的输出,比方脚本的输出。

    (22)<rp> 标签:在 ruby 注释中采取,以定义不协助 ruby 元素的浏览器所出示的原委。

    (23)<rt> 标签:定义字符(汉语注音或字符)的表达或发音。

    (24)<ruby> 标签:定义 ruby 注释(汉语注音或字符)。

    (25)<section> 标签:定义文书档案中的节(section、区段)。举例章节、页眉、页脚或文档中的别的一些。
    (26)<source> 标签:为媒介成分(比方 <video> 和 <audio>)定义媒介财富。

    (27)<summary> 标签:details 成分的标题,”details” 成分用于描述有关文书档案或文书档案片段的详细音讯。”summary” 成分应该是 “details” 成分的率先个子成分。

    (28)<time> 标签:定义日期或时刻,大概双方。

    (29)<video> 标签:定义录像,比方电影片段或任何摄像流。

     (30) <dialog>标签:定义对话(会话)dialog成分表示几人里面包车型客车对话。

    如有错误,请你斧正!

     

    作品参考链接:

    一聚教程网>>网页制作>>html5学科
    大前端>>Html伍新标签解释及用法

    总是碰到h伍新标签的笔试标题,就翻开了材质来总括一下: 一.form有关: (1)form属性 :在HTM...

    第八章   使用CSS美化表单

    1.form相关:

    【学习重大】

    • 没错使用各类表单控件
    • 熟悉HTML伍新添的表单控件
    • 明白表单属性的安装
    • 规划易用性表单页面

    (1)form属性:在HTML5中表单成分可放在表单之外,通过给该因素加多form属性来指向目的表单(form属性值设为目的表单id)就可以。

    拾.1  表单的主题结构

    表单包罗四个标签,由众多控件组成。三个完好的表单结构由上边3有的组成:

    • 表单框架(<form>标签):<form>标签是二个包涵框,里面包罗全部表单对象。
    • 表单域(<input>、<select>等标签):用于搜集用户的输入或选用的数码。
    • 表单开关(<input>、<buttom>等标签):用于将数据发送给服务器,还足以用来调整其余脚本行为。

    具有表单元素都蕴涵多个为主品质:

    • name:定义表单对象的名目;
    • id:定义表单对象的ID编码,以便JavaScript和CSS访问该对象。

    name和id属性能够设置同样值。

    <form>标签包涵大多属性,个中HTML5辅助的性情表达如下:

    HTML5中<form>标签属性列表
    属性 取值 说明
    accept-charset charset_list 设置服务器可服务的表单数据字符集
    action URL 设置当提交表单时向何处发送表单数据
    autocomplete On/Off 设置是否启用表单的自动完成功能
    enctype

    application/x-www-form-urlencoded

    multipart/form-data

    text-plain

    设置在发送表单数据之前如何对其进行编码
    method get/post 设置在发送表单数据之前如何对其进行编码
    name form_name 设置表单的名称
    novalidate novalidate 如果使用该属性,则提交表单时不进行验证
    target _blank、_self、_parent、_top、_framename 设置在何处打开actionURL

    (2)formaction属性:HTML五给提交开关(如button、submit、image等)增添了formaction属性,以便提交到差别的服务器地址。

    十.二  成立表单控件

    <input formaction="new.html" type="submit" value="提交到new.html">
    

    十.二.一  输入型控件

    <input>标签可定义八种情势的输入框,基本使用措施如下:

    <input type=" "/>
    

    只要不设置type属性,暗中同意呈现为单行文本框。

    HTML5中<input>标签的性质表达如下:

    HTML5中<input>标签属性列表
    属性 取值 说明
    accept mime_type 设置通过文件上传来提交的文件的类型
    alt text 定义图像输入的替代文本
    autocomplete On/Off HTML5新增,设置是否使用输入字段的自动完成功能
    autofocus autofocus HTML5新增,设置字段在页面加载时是否获得焦点
    checked checked 设置此input元素首次加载时应当被选中
    disabled disabled 当input元素加载时禁用此元素
    form formname HTML5新增,设置输入字段所属的一个或多个表单
    formaction URL 覆盖表单的action属性,适用于type="submit"和type="image"
    formenctype

    application/x-www-form-urlencoded

    multipart/form-data

    text/plain

    HTML5新增,覆盖表单的enctype属性,适用于type="submit"和type="image"
    formmethod

    get

    post

    HTML5新增,覆盖表单的method属性,适用于type="submit"和type="image"
    formnovalidate formnovalidate HTML5新增,覆盖表单的novalidate属性,使用该属性,则提交表单时不进行验证
    formtarget _blank、_self、_parent、_top、framename HTML5新增,覆盖表单的target属性,适用于type="submit"和type="image"
    height 像素、% HTML5新增,定义input字段的高度,适用于type="image"
    list datalist-id HTML5新增,引用包含输入字段的预定义选项的datalist
    max number、date HTML5新增,设置输入字段的最大值,与min属性配合使用,创建合法值的范围
    maxlength number 设置输入字段中字符的最大长度
    min number、date HTML5新增,设置输入字段的最小值,与max属性配合使用,创建合法值的范围
    multiple multiple HTML5新增,如果使用该属性,则允许一个以上的值
    name field_name 定义input元素的名称
    pattern regexp_pattern HTML5新增,设置输入字段的值的模式或格式
    placeholder text HTML5新增,设置帮助用户填写输入字段的提示
    readonly readonly 设置输入字段为只读
    required required HTML新增,指示输入字段的值是必需的
    size number_of_char 定义输入字段的宽度
    src URL 定义以提交按钮形式显示的图像的URL
    step number HTML5新增,设置输入字的合法数字间隔
    type button、checkbox、file、hidden、image、password、radio、reset、submit、text 设置input元素的类型
    value value 设置input元素的值
    width 像素、% HTML5新增,定义input字段的宽度,适用于type="image"

    (3)formmethod属性:用法同formaction。

    10.2.二 选取型控件

    单选开关(<input type="radio">)。多个单选开关能够统一为贰个单选开关组,单选开关组中的name值必须一律,单选按键组同目前刻只可以采纳1个。

    复选框(<input type="select">)组能够允繁多项接纳,每一种复选框都以3个独门的要素,且务必有3个唯一的名目(name)。

    图片 1图片 2

     1 <form>
     2       <p>姓名:<input type="text" value=" " /></p>
     3       <p> 喜欢的运动:
     4             <label>
     5                    <input name="足球" type="checkbox" value="足球"/></label>
     6             <label>
     7                    <input name="排球" type="checkbox" value="排球"/></label>
     8             <label>
     9                    <input name="篮球" type="checkbox" value="篮球"/></label>
    10             <label>
    11                    <input name="羽毛球" type="checkbox" value="羽毛球"/></label>
    12        </p>
    13        <p><input type="submit" value="提交"/></p>
    14 </form>
    

    复选框

    <select>标签与<option>标签同盟使用能够设计下拉菜单或许列表框。<optgroup>标签是对<option>标签的分组,即五个<option>标签放到3个<optgroup>标签内。

    图片 3图片 4

     1 <form>
     2       <p>姓名:<input type="text" value="" /></p>
     3       <p>所在城市:
     4              <select name="选择城市">
     5                   <optgroup label="山东省">
     6                   <option value="潍坊">潍坊</option>
     7                   <option value="青岛" selected="selected">青岛</option>
     8                   </optgroup>
     9                   <optgroup label="山西省">
    10                   <option value="太原">太原</option>
    11                   <option value="榆次">榆次</option>
    12                   </optgroup>
    13               </select>
    14        </p>
    15        <p><input type="submit" value="提交"/></p>
    16 </form>
    

    列表框

    (4)placeholder属性:用于文本框处于未输入状态时的一种文字提醒。

    10.二.三 帮助控件

    使用<田野(field)set>和<ledend>标签能够对表单控件举行分组。

    • <田野(field)set>:为表单对象开始展览分组,3个表单可以涵盖多少个<田野同志set>标签。表单区域分组的外侧会议及展览示八个包围框。
    • <ledend>:定义每组的标题,默许展现在<田野(field)set>包涵框的左上角。

    <label>标签定义表单对象的提示音信,区别意嵌套使用。<label>标签包括for专有属性,可将提醒音信与表单对象绑定在协同;当用户单击提醒音信时,将会激活对应的表单对象。假若不利用for属性,通过<label>标签包括表单对象,也能够兑现平等的统一计划目的。

    HTML伍为表单中的元素提供了四特性子:accesskey(飞速访问键)、tabindex(Tab访问键)、disabled(禁止使用表单域,用户无法输入)。

    (5)autofocus属性:自动获取主题,两个页面只可以有一个控件具备该属性。该属性无值,间接写就好。

    10.三  HTML5新添输入类型

    <input name="username" autofocus type="text" id="username">
    

    10.3.1 email类型

    email类型的input成分是一种尤其用于输入email地址的文本框,用法如下:

    <input type="email" name="user_email"/>
    

    (6)list属性:用于单行文本框,该属性的值为有个别datalist成分的id,扩展该属性后的单行文本框类似采用框(select),但允许用户自定义输入,为了制止未有援救该因素的浏览器出现错误,大家平时选取CSS设置不显得。

    10.3.2 url类型

    url类型的input成分用于输入USportageL地址那类特殊文本的文本框,用法如下:

    <input type="url" name="user_url"/>
    

    <datalist> 标签:定义可选数据的列表。与 input 成分协作使用,就足以创立出输入值的下拉列表。

    10.3.3 number类型

    number类型的input成分提供用于输入数值的文本框。用户能够设定对所承受的数字的界定,包涵安装允许最大值和纤维值、合法的数字间隔或暗许值等。例:

    <form action="demo_form.php" method="get">
    请输入数值:<input type="number" name="number1" min="1" max="20" step="4">
    <input type="submit"/>
    </form>
    

    number类型使用上面包车型地铁性能来设置对数字类型的限制:

    number类型的属性
    属性 取值 说明
    max number 设置允许的最大值
    min number 设置允许的最小值
    step number 设置合法的数字间隔(如果step=“4”,则合法的数字是-4,0,4,8等)
    value number 设置默认值
    order:<input list="list" name="order" autofocus type="text" id="order">
                <datalist id="list" style="display:none">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                </datalist>
    

    10.3.4 range类型

    range类型的input成分提供用于输入包涵一定限制内数字值得文本框,在网页中显示为滑动条。用户还足以设定对所收受的数字的限量。

    range类型和质量和number属性完全壹致,而不一致点仅仅在外观表现上。

    (7)autocomplete属性:自动实现允许浏览器预测对字段的输入,HTML5落到实处了自定义设置该属性,幸免了任什么人都能够看出所存在的安全隐患。该属性值有“on”、”off“或“”(不钦点)三种,不点名时行使浏览器的暗中认可值。

    10.三.五 日期采用器类型

    HTML5提供了陆种日期选拔器控件,分别用于选取:日期、月、星期、时间、日期 时间、日期 时间 时区,如下表所示:

    日期选择器类型
    输入类型 HTML代码 功能和说明
    date <input type="date"> 选取日、月、年
    month <input type="month"> 选取月、年
    week <input type="week"> 选取周和年
    time <input type="time"> 选取时间(小时和分钟)
    datetime <input type="datetime"> 选取时间、日、月、年(UTC时间)
    datetime-local <input type="datetime-local"> 选取时间、日、月、年(本地时间)

    (⑧)input成分种类:

    10.3.6 search类型

    search类型的input成分提供用于输入找寻关键词的文本框。

      search:与text文本框类似,用于找寻;

    10.3.7 tel类型

    tel类型的input成分提供尤其用于输入电话号码的文本框,不限制只输入数字。

      tel: 与text文本框类似,用于电话;

    10.3.8 color类型

    color类型的input成分提供专门用来输入颜色的文本框。当color类型文本框获取关节后,会活动调用系统的水彩窗口。IE和Safari浏览器暂时不帮助。

          url: 与text文本框类似,用于url格式的地方;

    拾.四  HTML5新扩张输入属性

          email: 与text文本框类似,用于email格式的地址;

    10.4.1 autocomplete属性

    autocomplete属性能够支持用户在input类型的输入框中落成自动实现内容输入。

    autocomplete属性有八个值:on、off。

    当autocomplete属性值设置为“on”时,能够选用HTML第55中学新净增的datalist标签和list属性提供叁个数量列表供用户挑选。

          number: 与text文本框类似,用于数值;

    10.4.2 autofocus属性

    HTML伍骤增了autofocus属性,它能够落成在页面加载时,某表单控件自动获取主题。

          range: 只同意输入1段范围内的数值,通过min和max属性来设置限定;

    10.4.3 form属性

    能够把表单内的依据元素写在页面中的任一人置,只须要为这一个因素钦点一下form属性并为其钦点属性值为该表单的id。

          color: 颜色文本框,“#000000”格式的文字;

    10.四.四 表单重写属性

    HTML5猛增了多少个表单重写属性,用于重写form成分的一些质量设定,包蕴:

    • formaction:用于重写表单的action属性。
    • formenctype:用于重写表单的enctype属性。
    • formmethod:用于重写表单的method属性。
    • formnovalidate:用于重写表单的novalidate属性。
    • formtarget:用于重写表单的target属性。

    表单重写属性并不适用于具备的input输入类型,仅适用于submit和image输入类型。

          file: 文件选择文本框,HTML5中经过multiple属性可以多选;

    10.4.5 height和width属性

    height和width属性用于安装image类型的价签的图像中度和宽窄,那五个性子只适用于image类型的<input>标签。

    <form action="testform.asp" method="get">
    请输入用户名:<input type="text" name="user_name"/><br/>
    <input type="image" src="images/1.png" width="72" height="26"/>
    </form>
    

    如以上代码所示,image类型的input标签被限定为7贰X2陆像素。

          datetime、date、month、week、time、datetime-local 各样日期与时光输入的文本框;

    10.4.6 list属性

    HTML第55中学新增添了三个datalist元素,能够完毕数据列表的下拉职能,其外观类似autocomplete,用户可以从列表中甄选,也得以活动输入。

    时下支撑这一质量的浏览器只有Opera。

    图片 5图片 6

     1 <form action="testform.asp" method="get ">
     2     请输入网址:
     3     <input type="url" list="url_list" name="weblink"/>
     4     <datalist id="url_list">
     5         <option label="新浪" value="http://www.sina.com.cn" />
     6         <option label="搜狐" value="http://www.sohu.com" />
     7         <option label="网易" value="http://www.163.com"/>
     8     </datalist>
     9     <input type="submit" value="提交"/>
    10 </form>
    

    list属性示例代码

          output: 定义不相同品类的出口;

    10.4.7 min、max和step属性

    HTML伍猛增了min、max和step属性,用于为涵盖数字或日期的input输入类型设置限值。

    (玖)表单验证相关:

    10.4.8 multiple属性

    在HTML5此前,input输入类型中file类型资助选拔单个文件来上传,而HTML五新添的multiple属性支持一遍性选择多少个文本。

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:HTML5新添元素、标签总计

    关键词: 68399皇家赌场 HTML/CSS

上一篇:ExtJS肆下拉树组件

下一篇:没有了