zoukankan      html  css  js  c++  java
  • html5基础知识

    html5

    <!DOCTYPE>标签
    html5只有一种,即:
    <!DOCTYPE HTML>

    示例:
    <!DOCTYPE html>
    <html>
    <head>
    <title>html5_title</title>
    </head>
    <body>
    html5内容
    </body>
    </html>
    ---------------------
    <a>标签
    download属性,下载指定的文件(lin.gif),且下载的文件名为 lin3615.gif
    示例:
    <a href="images/lin3615.gif" download="lin3615.gif">
    <img src="lin.gif" />
    </a>

    media属性

    type属性,规定目标文档的MIME类型
    示例:
    <a href="http://www.lin3615.net/" type="text/html">lin3615</a>
    -----------------
    <article>标签
    规定独立的自包含的内容(只是一种标记而已)
    示例:
    <body>
    <article>
    <h1>hhhh</h1>
    <p>pppp</p>
    </article>
    </body>
    ---------------------
    <aside>标签
    定义其所处内容之外的内容(一种标记而已)
    示例:
    <body>
    <p>ppp</p>
    <aside>
    <h3>hhhhh</h3>
    hhhhh 的详细解释
    </aside>
    </body>
    -----------------
    <audio>标签
    定义声音内容
    示例:
    <body>
    <audio src="myvoice.ogg" controls="controls">
    当浏览器不支持时将显示的内容
    </audio>
    </body>
    其中属性列表:
    autoplay="autoplay"
    则音频在就绪后马上播放

    controls="controls"
    则向用户显示控件,如播放按钮

    loop="loop"
    则每当音频结束时重新开始播放

    muted="muted"
    视频输出应该被静音

    preload="preload"
    音频在页面加载时进行加载,并预备播放,如果用 "autoplay",则 preload 被忽略

    src="url"
    要播放的音频的 url
    ---------------------
    <button>标签,建议用 input代替
    属性列表
    autofocus="autofocus"
    当页面加载时按钮应当自动获得焦点

    form="form_name"
    按钮属于一个或多个表单

    formaction="url"
    覆盖 form元素的 action属性,与 type="submit"配合使用

    formenctype=""
    覆盖form元素的 enctype属性,与 type="submit"配合使用

    formmethod="get" / "post"
    覆盖 form元素的 method属性,与 type="submit"配合使用

    formnovalidate="formnovalidate"
    覆盖form元素 novalidate属性,与 type="submit"配合使用

    formtarget="_blank/_self/_parent/_top"
    覆盖 form元素的 target属性,与 type="submit"配合使用
    --------------------
    <canvas>标签(大学问)
    用来定义图形,只是一个图形容器,必须使用脚本来绘制图形
    <body>
    <canvas id="myCanvas">
    浏览器不支持
    </canvas>
    <script>
    var canvas=document.getElementById('myCanvas');
    var ctx = canvas.getContent('2d');
    ctx.fillStyle='#ff0000';
    ctx.fillRect(10,10,80,100);
    </script>
    </body>
    -------------------------
    command命令按钮,只有ie9支持
    ------------------------
    <datalist>
    定义下拉列表,与 input 结合,datalist及其选项不会被显示出来,仅仅是合法的输入值列表,使用 input元素的 list属性来绑定 datalist
    示例:
    <body>
    <input list="cars" />
    <datalist id="cars">
        <option value="1111"></option>
        <option value="2222"></option>
        <option value="3333"></option>
    </datalist>
    </body>
    ---------------------
    <dialog open="open">标签
    用户交互的,只有 safari/chrome支持
    -------------------
    <embed>标签
    定义外部交互内容或插件
    属性表:
    height: 设置嵌入内容高度
    src:url 嵌入的内容 url
    type:定义嵌入内容的 类型
    设置嵌入内容宽度
    示例:
    <body>
    <embed src="ok.swf" />
    </body>
    -------------------
    <figure>  <figcaption>标签
    <figure>:定义媒介内容的分组,以及其标题,与 figcaption 定义标题结合
    <figcaption>:定义 figure元素的标题, figcaption 元素应该被置于 figure 元素的第一个或最后一个子元素的位置
    示例:会缩进
    <body>
    <p>ppppp</p>
    <figure>
      <figcaption>标题</figcaption>
        <img src="" />
    </figure>
    </body>
    ----------------
    <footer>标签
    定义 section 或 page 的页脚,文档中的页脚部分,里面应该包含别的元素
    示例:
    <body>
    <footer>
    <p>这是页脚部分</p>
    </footer>
    </body>
    --------------------
    <form> 标签
    属性:
    autocomplete="on" / "off" 规定是否启用表单自动完成功能
    novalidate="novalidate":如果使用该属性,则提交表单时不进行验证
    ----------------
    <header>标签
    定义 section 或 page 的页眉
    示例:
    <body>
    <header>
    <p>this is header content</p>
    </header>
    </body>
    ------------------
    <input>
    属性:
    autocomplete=on/off 规定是否使用输入字段的自动完成功能,默认 on
    <body>
    <form autocomplete="on">
    <input type="text" name="xx" value="" />
    <input type="email" name="email" autocomplete="off" />
    <input type="submit" />
    </form>
    </body>
    当在 email 中输入不合法的 email后,点击提交,会提示要求输入正确的 email,不让提交

    autofoucs="autofocus":规定输入字段在页面加载时是否获得焦点

    form="formid":规定输入字段所属的一个或多个表单
    as:(t2也作为 form表单提交的一个元素值)
    <body>
    <form id="form1">
    <input type="text" name="t1" />
    <input type="submit" />
    </form>
    <input type="text" name="t2" form="form1" />
    </body>

    formaction="url" 覆盖 action中的url
    同理
    formenctype, formmethod, formnovalidate, formtarget
    height="value"定义input字段的高度,适用于 type="image",单位为像素
    同理: width

    list 引用包含输入字段的预定义选项 datalist
    as :
    <body>
    <form>
    <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
    <option label="www" value="http://www.xxx.com" />
    <option label="shop" value="http://shop.xxx.com" />
    </datalist>
    <input type="submit" />
    </form>
    </body>
    点击输入 w时会提示 www,选择www时会自动填充 http://www.xxx.com

    max="" min="" 最大值,最小值
    as:
    <form>
    <input type="number" max="100" min="1" />
    <input type="submit" />
    </form>

    multiple="multiple" 允许同时使用多个值
    as:同时选择多个即可
    <form>
    <input type="file" value="" multiple="multiple" />
    </form>

    pattern:输入值的模式和格式
    as:(数字)
    <input type="text" name="tt" pattern="[0-9]*" />

    placeholder="text" 帮助用户填写输入字段的提示信息
    as
    <input type="" name="" placeholder="输入你的内容" />

    required="required"
    提示规定输入字段的必需的
    as:
    <input type="" name="" required="required" />

    step="numbervalue" 规定输入字的合法数字间隙
    as:(点击一次,增加或减少3)
    <input type="" value="" name="" step="3" />
    --------------
    <mark>标签
    定义有记号的文本,突出显示部分文本
    as:
    <body>
    aa bb <mark>ccc</mark>
    </body>
    --------------
    <meter> 标签
    使用 meter 元素来度量给定范围内的数据
    as:
    <body>
    <meter value="3" min="0" max="10"></meter>
    <meter value="0.6">60%</meter>
    </body>
    属性
    form=form_id:规定 <meter>元素所属的一个或多个表单
    height=number: 规定被视作高的值的范围
    low=number: 规定被视作低的值的范围
    max=number:规定范围的最大值
    min=number:规定范围的最小值
    optimum=number:规定度量的优化值
    value=number 规定试题的当前值
    ----------------------
    <nav>标签
    定义导航链接
    <body>
    <nav>
    <a href="">Home</a>
    <a href="">Prev</a>
    <a href="">Next</a>
    </nav>
    </body>
    --------------
    <progress>定义任何类型的任务进度
    属性:
    max=number:规定任务一共需要多少工作
    value=number:规定已经完成多少任务
    as:
    <body>
    <progress value="50" max="100"></progress>
    </body>
    -----------------
    <section>
    文档中的区段,比如章节,页眉,页脚等
    as
    <body>
    <section>
      <h1>RMB</h1>
      <p>这是钱的解释</p>
    </section>
    </body>
    --------------------
    <select>
    属性:
    autofocus="focus"
    form="form_id"
    required="required" 规定文体区域是必填的
    ------------------------
    <source>
    定义媒介源
    属性:
    media="" 规定媒体资源的类型
    src=url: 规定媒体文件的URL
    type="" 规定媒体资源的 MIME类型
    as:
    <body>
    <audio controls>
    <source src="xx.mp3" type="audio/mpeg">
    <source src="xx.ogg" type="audio/ogg">
    你的浏览器不支持
    </audio>
    </body>
    优先考虑支持的,如果两个都不支持,则显示文本
    -------------
    <textarea>
    属性:
    autofocus="autofocus"
    form=form_id
    maxlength=number
    placeholder="text":描述文本区域预期值的简短提示
    required="required"
    wrap="hard/soft" : 规定当前表单元素中提交时,文本区域中的文本如何换行
    -------------------
    <time>
    定义日期/时间
    as:
    <body>
    <p>afsd<time>9:00</time></p>
    <p>xzdf <time datetime="2014-09-03">Now</time></p>
    </body>
    -------------
    <video>
    定义视频
    属性:
    autoplay="autoplay"
    controls="controls"
    height="pixels": 设置视频播放器的高度
    loop="loop":是否播放完后循环播放
    muted="muted": 规定视频的音频输出应该被静音
    poster="url": 规定视频下载时显示的图像,或者在用户点击播放按钮前的图像
    preload="preload": 加载前进行预载,如果有 autoplay出现,则忽略
    src="url":播放视频的 URL
    width="pixel":设置视频播放器的高度
    --------------------




  • 相关阅读:
    Swift 正式开源, 包括 Swift 核心库和包管理器
    Swift 3 新特性
    iOS10 CoreData新特性
    iOS各个版本的新特性介绍
    iOS WKWebView详解
    Swift XML解析库
    ios辅助功能之voiceover实战
    iOS 内存管理机制和循环引用处理方法
    Swift 关键字汇总
    Swift 自动布局框架-SnapKit
  • 原文地址:https://www.cnblogs.com/lin3615/p/3947208.html
Copyright © 2011-2022 走看看