• html5学习笔记


    随着html5标准出来,html5将会逐渐取代过去的html4.1和XHTML 1.0而成为主流。俺最近也在学HTML5,首先,还是先从书本开始。

    一、《论道HTML》(作者:秀野堂主)

    1.标签分类:

     (1)结构性标签:

    seciton:用于表达书的一部分或一章,或者一章内的一节。也可用于区域的章节表述。

    header:页面主体上的头部,区别于head标签。

    footer:页面的底部(页脚)。

    nav:专门用于菜单导航、连接导航的标签,navigation的缩写。

    article:表示一篇文章的主体内容,一般为文字集中显示的区域。

     (2)块级性标签:

    aside:用以表达注记、贴士、侧栏、摘要、插入的应用等作为补充主体的内容。

    figure:多个标签进行组合并展示的标签,通常与figcaption联合使用。

    code:表示一段代码块。

    dialog:表达人与人之间的对话。该标签还包括dt和dd这两个组合标签,常同时使用。dt表示说话者,dd用来表示说话者的内容。

     (3)行内语义性标签:

    meter:表示特定范围内的数值,可用于工资、数量、百分比等。

    time:时间值。

    progress:表示进度条,可通过对其max、min、step等属性进行控制,完成对进度的表示和监视。

    video:视频标签。

    audio:音频标签。

     (4)交互性标签:

    details:表示一段具体的内容,但是默认可能不显示,通过某种手段(如点击)与legend交互才会显示出来。

    datagrid:用来控制客户端数据与显示,可以由动态脚本即时更新。

    menu:主要用于交互菜单。

    command:用来处理命令按钮。

    2.表单:

     (1)表单数据类型:

    type="url" 网址专用的数据类型。

    type="email" 电子邮件专用的数据类型。

    type="data/month/week/time/datetime/datetime-local" 日期/时间专用的数据类型。

    type="number" 数据专用的数据类型。

    type="range" 滑动条(表示区间、范围等)。

    type="search" 搜索框。

    type="color" 颜色。

    type="telephone" 电话类型。

     (2)表单属性:

    required / required="yes" 必填项属性,放空白提交。

    placeholder="请输入内容" 占位属性,即还未输入内容的input中默认显示的占位字符。

    max/min 数字类型控件提供的属性。

    pattern="正则表达式" 正则表达式属性,判断只能填写的字符。

    data="http://domain/数据源文件" data属性,可外联数据源,eg:<select data="http://"></select>

    autocomplete="on/off" 自动完成属性(双向属性),开启时可以帮助用户尽快完成表单填写,关闭后又可以防止泄露个人隐私数据。

    step 步长设定属性。限制输入的数字,step为上一个数字与下一个数字的间隔,eg:<input type="number" max="9" min="0" step="2"/>

     (3)其他新增属性:

    onerror 当发生错误时运行脚本。

    onhaschange 当发生变化时运行脚本。

    onforminput 当表单获得用户输入时运行脚本。

    oninput 当元素获得用户输入时运行脚本。

    oninvalid 当元素无效时运行脚本。

  • 相关阅读:
    求集合的子集总结及案例
    静态资源(JS/CSS)存储在localStorage
    js 数组&字符串 去重
    跨域iframe高度计算
    Xshell5连接虚拟机出现连Could not connect to '192.168.47.128' (port 22): Connection failed,解决办法
    sql server中常用方法函数
    sql中union和union all的用法
    python(1) -文件操作
    python(1)
    python(1)
  • 原文地址:https://www.cnblogs.com/qingguo/p/5686306.html
Copyright © 2020-2023  润新知