• html5


    HTML5 中的一些有趣的新特性:
    用于绘画的 canvas 元素
    用于媒介回放的 video 和 audio 元素
    对本地离线存储的更好的支持
    新的特殊内容元素,比如 article、footer、header、nav、section
    新的表单控件,比如 calendar、date、time、email、url、search

    video 元素支持三种视频格式:Ogg MP4 WebM
    <video src="movie.ogg" controls="controls"></video>

    audio 元素支持三种音频格式:Ogg M3 Wav
    <audio src="song.ogg" controls="controls"></audio>

    Canvas :<canvas id="myCanvas" width="200" height="100"></canvas>
    canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成(区别svg)
    适合图像密集型的游戏
    依赖分辨率
    不支持事件处理器

    SVG 指可伸缩矢量图形,是一种使用 XML 描述 2D 图形的语言(区别canvas)
    用于定义用于网络的基于矢量的图形,图像在放大或改变尺寸的情况下其图形质量不会有损失
    适合带有大型渲染区域的应用程序(比如谷歌地图)
    不依赖分辨率
    支持事件处理器

    Canvas 和 SVG 都允许在浏览器中创建图形

    两种在客户端存储数据的新方法:
    localStorage - 没有时间限制的数据存储
    sessionStorage - 针对一个 session 的数据存储 当用户关闭浏览器窗口后,数据会被删除。
    之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
    HTML5 使用 JavaScript 来存储和访问数据。

    应用程序缓存(IE不支持)为应用带来三个优势:
    如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性:
    manifest 文件的建议的文件扩展名是:".appcache"。
    manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。
    离线浏览 - 用户可在应用离线时使用它们
    速度 - 已缓存资源加载得更快
    减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

    Server-Sent 事件指的是网页自动获取来自服务器的更新。


    Input 类型
    email ---在提交表单时,会自动验证 email 域的值。
    url ---提交表单时,会自动验证 url 域的值。(如网址)
    number --<input type="number" name="points" min="0" max="10" step="3" value="6" />
    默认6最大10最小0数数相差3
    range ---range 类型显示为滑动条。
    Date pickers (date, month, week, time, datetime, datetime-local)
    search
    color

    option 元素永远都要设置 value 属性。

    表单元素:
    datalist
    keygen
    output

    新的 form 属性:
    autocomplete --规定 form 或 input 域应该拥有自动完成功能
    autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
    novalidate
    form表单中写novalidate="true" 则表单中的验证不需要了

    新的 input 属性:
    autocomplete ---"ON"在页面加载时,浏览器应该在该域中显示填写的选项 "OFF"则不显示
    autofocus ---在页面加载时,域自动地获得焦点。适用于所有 <input> 标签的类型。
    <input type="text" name="user_name" autofocus="autofocus" />
    form --利用form表单id实现form标签对外的标签也属于form表单**【好,布局】
    <form id="aaa"></form> <input form="aaa"> 则form内部提交也会把次in普通提交
    form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)【重!表单重写】
    <input type="submit" formnovalidate="true" value="Submit without validation" />
    注释:表单重写属性适用于以下类型的 <input> 标签:submit 和 image。
    结合<button>标签
    height 和 width
    <input type="image" src="/i/eg_submit.jpg" width="99" height="99" />
    list
    min, max 和 step
    multiple ----multiple 属性规定输入域中可选择多个值。
    适用于以下类型的 <input> 标签:email 和 file。
    Select images: <input type="file" name="img" multiple="multiple" />
    pattern (regexp) 【正则 难】
    placeholder
    【search标签】
    <input type="search" name="user_search" placeholder="Search W3School" />
    required
    提交之前填写输入域(不能为空)【相当于简单的验证限制】
    <input type="text" name="usr_name" required="required" />

    bgcolor 是标签body的属性


    新标签:
    <article>
    <aside> 标签定义其所处内容之外的内容。
    <audio>
    <h1> - <h6> 来表示标题,使用 <em> 标签来表示强调的文本,<i>,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。
    <b> 标签规定粗体文本。 CSS "font-weight" 属性来设置粗体文本。

    <button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

    caption 元素定义表格标题。
    caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

    <cite> 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

    <datalist> 标签定义下拉选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。【select标签】
    datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
    请使用 input 元素的 list 属性来绑定 datalist。

    <dd> 在定义列表中定义条目的定义部分。

    <del> 定义文档中已被删除的文本。 下划线的形式显示

    <fieldset> 标签没有必需的或唯一的属性。 --- 可能有特殊的边界
    将表单内的相关元素分组
    <legend> 标签为 fieldset 元素定义标题。
    <form>
    <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
    </fieldset>
    </form>

    <figcaption> 标签定义 figure 元素的标题(caption)
    <figure>用作文档中插图的图像:
    <figure>
    <figcaption>黄浦江上的的卢浦大桥</figcaption>
    <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>

    <frame> 一个特定的窗口
    <frame scrolling="auto">在需要的时候显示滚动条。
    区别<iframe>


    <input type="value">
    button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
    checkbox 定义复选框。
    file 定义输入字段和 "浏览"按钮,供文件上传。
    hidden 定义隐藏的输入字段。
    image 定义图像形式的提交按钮。 必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。
    <input type="image" src="submit.gif" alt="Submit" />
    password 定义密码字段。该字段中的字符被掩码。
    radio 定义单选按钮。
    reset 定义重置按钮。重置按钮会清除表单中的所有数据。 请单击重置按钮,可以清空表单【登陆注册ok】
    submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
    text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

    <ins> 标签定义已经被插入文档中的文本。【改 下划线】
    请与 <del> 一同使用,来描述文档中的更新和修正。【删 删除线】

    <mark>
    <p>Do not forget to buy <mark>milk</mark> today.</p>

    <option>
    <select>
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    </select>

    <output> 标签定义不同类型的输出 IE不支持

    <progress value="5" max="100"></progress> 默认初始5 最大100 【下载进度】

    wrap属性 当在表单中提交时,textarea 中的文本换行必须结合cols属性
    <textarea rows="1" cols="10" wrap="hard"></textarea> 【rows控制高 cols控制宽 超出显示滚动条】

    <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
    用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。
    目前所有主流浏览器都不支持 <track> 标签。

  • 相关阅读:
    Throwable
    Format
    Serializable
    IfcAbsorbedDoseMeasure
    Iterable
    IfcAmountOfSubstanceMeasure
    Queue
    IfcCurveOnSurface
    unity3d修改对象属性
    Deque
  • 原文地址:https://www.cnblogs.com/fenglee/p/7258532.html
Copyright © 2020-2023  润新知