zoukankan      html  css  js  c++  java
  • 第四章 HTML5概述

    HTML5概述
    1.HTML5优势:
    解决跨浏览器问题;
    部分代替原来的js
    更明确地语义支持:不再单纯使用div
    增强WEB应用程序地功能:拖拽API等

    2.HTML5语法改变
    标签不再区分大小写
    元素可以省略结束标签
    允许省略属性的属性值
    允许属性值不适用引号

    3.新增元素
    (1)文档结构元素:
    <article> 表示一篇文章
    <nav> 表示导航栏
    <aside> 侧表导航栏

    (2)语意相关元素:
    <mark> 重点关注内容(黄色显示)
    <time> 显示时间或日期
    <details> 详细信息
    <sumary> 详细信息中的摘要信息【只有Chrome(谷歌浏览器)支持】

    (3)特殊功能元素:

    Web运用标签
    <metar> 计数仪表(拥有最小值和最大值),状态、温度等
    <progress> 进度条

    注释标签

    <ruby>标记注释或音标

    <rp>不支持<ruby>的浏览器显示

    <rt>标记定义对<ruby>的注释内容和文本

    ————————————————————————————————————
    (4)表单新增元素和属性
    <keygen> 表单公钥标签
    <time>时间和日期
    <output>输出类型    <list> <datalist……/>的转换列表属性

    属性:

    autofocus自动获得焦点属性、placeholder 显示提示信息属性
    ——————————————————————————————————————————
    input元素新增type属性值:
    color颜色选择器 date日期选择器 time时间选择器
    datetime日期时间选择器 week选择周次文本框 month月份选择器
    email电子邮箱输入框 tel电话输入框 url网址输入框
    number数字输入框 range拖动条 search搜索框
    ——————————————————————————————————————————
    【required:必须填写;pattern="正则表达式"】 正则表达式:/^ $/(/^表达开始,$/表达结束)
    ——————————————————————————————————————————
    用户: <input type="text" placeholder="用户类型" list="usertype"/><br />
    颜色: <input type="color" /><br />
    日期: <input type="date" /><br />
    时间: <input type="time" /><br />
    日期-时间: <input type="datetime-local"><br />
    周: <input type="week" /><br />
    月: <input type="month" /><br />
    E-mail: <input type="email" /> <br />
    电话: <input type="tel" /><br />
    网址: <input type="url"><br />
    数字: <input type="number"><br />
    拖动条: <input type="range" step="5" min="5" max="100" /><br />
    搜索框: <input type="search" required="required" pattern="S{6}" /><br />
    必填字段: <input type="text" required="required" pattern="1d{10}" />
    提交: <input type="submit" />
    ——————————————————————————————————————————
    (5)HTML5绘图支持
    <canvas> 画布元素——在js中绘制CanvasRenderingContext2D对象

    <svg>矢量图—— SVG 意为可缩放矢量图形(Scalable Vector Graphics)
    ——————————————————————————————————————————
    绘制矩形实例:
    <canvas id="mc">不支持canvas标签</canvas>
    <script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas=document.getElementById("mc");
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx=canvas.getContext("2d");
    // 设置填充颜色
    ctx.fillStyle="#F00";
    // 绘制矩形
    ctx.fillRect(40,50,60,70);
    </script>
    ——————————————————————————————————————————

    (6)新增多媒体支持
    <audio src="音频路径" controls>不支持audio元素</dudio>
    <video src="音频路径" controls>不支持video元素</video>

    <source>可定义多个媒体资源
    注:各个浏览器对音频的视频的支持格式不一,音频推荐WAV格式,视频推荐VP8
    ——————————————————————————————————————————
    属性名 说明
    src url地址
    autoplay 装载完成自动播放
    controls 显示播放控制条
    loop 在此重复播放
    width、height <video>元素 视频的宽高
    ——————————————————————————————————————————

    4.HTML5新增通用属性
    contentEditable 内容可编辑属性【truefalse】
    designMode 设计模式属性【onoff】——JS
    hidden 隐藏属性【truefalse】
    spellcheck 查错属性【truefalse】
    ——————————————————————————————————————————

    5.HTML5 修改:

    文档类型申明:
    <!doctype html>

    <meta charset="utf-8">

    重新定义的标签

    dd:可以同details与figure一同使用,定义包含文本,dialog也可用

    dt:可以同details与figure一同使用,汇总细节,dialog也可用

    hr:表示主题结束,而不是水平线,虽然显示相同

    menu:重新定义用户界面的菜单,配合commond或者menuitem使用

    small:表示小字体,例如打印注释或者法律条款

    strong:表示重要性而不是强调符号

  • 相关阅读:
    VS.NET 2005 常用的快捷键
    路径,文件,目录,I/O常见操作汇总
    c#中cookies的存取操作
    ASP.NET AJAX入门系列(1):概述
    RS2008中控件ID冲突问题
    [书名]各种计算机语言的经典书籍
    终于把课件做好了~~
    还是两个数的交换问题
    自制简易图片尺寸调整工具[源]
    被点名了~~~[游戏]
  • 原文地址:https://www.cnblogs.com/suola/p/8275775.html
Copyright © 2011-2022 走看看