HTML5 --CSS3

一.HTML5

HTML5 包含： HTML的升级版、CSS的升级版、JavaScript API的升级版。
HTML5是新一代开发 Web 富客户端应用程序整体解决方案。
包括：
–HTML5，CSS3，Javascript API在内的一套技术组合。
----------------------------------------------------------------------------------------------------------------------------
HTML5新增的内容：

1. 大量增加的语义化标签
2. 新增的表单标签，表单属性
3. 音频和视频
4. Canvas绘图
5. SVG绘图
6. 地理定位
7. 拖放API
8. WebStorage
9. WebSocket

语义化标签

 HTML5中的语义化标签(大量增加)：
            --语义化标签：-能够便于开发者阅读和写出更优雅的代码。
                         -同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
                         -更好地搜索引擎优化。
            --传统网页： 头部 
                        <div class="header">
                             <ul class="nav"></ul>
                        </div>
                        主体部分 
                        <div class="main">
                            文章
                            <div class="article"></div>
                            侧边栏 
                            <div class="aside"></div>
                        </div>
                        底部
                        <div class="footer"></div>

            --HTML5网页：
                        头部 --
                        <header>
                            <ul class="nav"></ul>
                        </header>

                        主体部分
                        <div class="main">
                            文章
                            <article></article>
                            侧边栏
                            <aside></aside>
                        </div>
                        底部 
                        <footer></footer>
            --常用的语义化标签：<nav>--导航
                            <header>--页眉
                            <footer>--页脚
                            <section>--表示区块
                            <article>--表文章，如文章，评论，帖子，博客
                            <aside>--表侧边栏，如文章的侧栏
                            <figure>--媒介内容分组
                            <mark>--表示标记
                            <progress>--表示进度
                            <time>--表示日期

增强型表单

 HTML5中新增的表单：
            --新增的表单类型：- email 只能输入email格式。自动带有验证功能。
                            - tel 手机号码。
                            - url 只能输入url格式。
                            - number 只能输入数字。
                            - search 搜索框
                            - range 滑动条
                            - color 拾色器
                            - time	时间
                            - date 日期。
                            - datetime 时间日期
                            - month 月份
                            - week 星期

            --新增的表单元素：--datalist--数据列表
                                <input type="text" list="myData">
                                <datalist id="myData">
                                    <option>本科</option>
                                    <option>研究生</option>
                                    <option>不明</option>
                                </datalist>
                                //input中的list属性已经和datalist进行了绑定，通过id
                            
                            --<Keygen>:keygen 元素的作用是提供一种验证用户的可靠方法。
                                      keygen 元素是密钥对生成器（key-pair generator）。
                                      当提交表单时，会生成两个键：一个公钥，一个私钥。
                                      私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。
                                      公钥可用于之后验证用户的客户端证书（client certificate）。

                            --<meter>:度量器 
                                        --low:低于该值后警告
                                        --high：高于该值后警告
                                        --value：当前值
                                        --max:最大值
                                        --min：最小值
                                    --<meter value="80" min="0" max="100" high="80" low+"60"/> 
                        
            --新增的表单属性：
                --<label for="">
                    用户名：<input type="text" placeholder="例如：smyhvae" autofocus name="userName" autocomplete="on" required/>
                </label>

                --placeholder：提示文字
                --autofocus：自动获取焦点
                --multiple：文件上传多选或者多个邮箱地址
                --autocomplete：自动完成(填充的)。on开启(默认)，off(关闭)
                --required：表示必填项
                --pattern:自定义正则，验证表单

            --表单事件：
                --oninput():用户输入内容时触发，可用于输入字数统计
                --oninvalid():验证表单不通过时触发

音频和视频

 HTML音频和视频：
            --音频--<audio>
                <audio src="music/yinyue.mp3" autoplay controls> </audio>
                    autoplay--自动播放
                    controls--控制条
                    loop--循环播放
                    preload--预加载
            --视频--<video>
                <video src="video/movie.mp4" controls autoplay></video>
                    autoplay--自动播放
                    controls--控制条
                    loop--循环播放
                    preload--预加载

HTML5中的自定义属性：

 自定义属性：
 --HTML5中，添可以直接在标签里添加自定义属性，但必须通过"data-"开头的方式添加自定义属性，
 data-index......