h5笔记

时间 2019-11-10 标签 h5 笔记

可以便于开发者阅读和写出更优雅的代码，代码如诗
同时让浏览器或是网络爬虫能够很好地解析，从而更好分析其中的内容
更好地搜索引擎优化

切记：HTML的职责是描述一块内容是什么（或其意义）而不是它长的什么样子，它的外观应该由CSS来决定。

应用程序标签

【datalist（数据列表）】

datalist数据列表的呈现须要载体javascript

<input type="text" list="input_list">
            <datalist id="datalist">
                <option value="选项框1"></option>
                <option value="选项框2"></option>
            </datalist>

            <input type="text" list="input_list">
            <datalist id="datalist">
                <option value="选项框1"></option>
                <option value="选项框2"></option>
            </datalist>

【progress（进度条）】

要改变他的样式，须要先将-webkit-appearance设置为nonephp

<style>
                .my_progress{
                    -webkit-appearance:none;
                }
                .my-progress::-webkit-progress-bar{
                    //样式
                }
            </style>
            <progress class="my_progress" value="10" max="100"></progress>

【meter（数值显示器）】

不多浏览器支持css

<meter min="0" max="100" low="40" hign="90" optimun="100" value="91"></meter>

显示器的最大最小值：max，min
显示器可以到达的最大最小值：hign，low
显示器的测量范围的最佳值：optimum
显示器显示的当前值：valuehtml

火狐兼容html5

【details（明细）】

点开一个内容能够展开面板，在火狐和谷歌兼容java

属性

连接关系描述：用来描述指定连接与当前文档的关系，便于机器理解文档结构

常见的连接关系表web

alternate       文档的可选版本（例如打印页、翻译页或镜像）
    stylesheet      文档的外部样式表
    start           集合中的第一个文档
    next            集合中的下一个文档
    prev            集合中的前一个文档
    contents        文档目录
    index           文档索引
    glossary        文档中所用字词的术语表或解释
    copyright       包含版权信息的文档
    chapter         文档的章
    section         文档的节
    subsection      文档的子段
    appendix        文档附录
    help            帮助文档
    bookmark        相关文档
    nofollow        用于指定 Google 搜索引擎不要跟踪连接
    licence         通常用于文献，表示许可证的含义
    tag             标签集合
    friend          友情连接


    案例

    <link rel="prev" href="#">
    <link rel="next" href="#">
    <a rel="prev" href="#">上一页</a>
    <a rel="next" href="#">下一页</a>

    <link rel="stylesheet" href="style.css">
    <link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="pingback" href="http://myblog.com/xmlrpc.php">
    <link rel="prefetch" href="http://myblog.com/main.php">

    <a rel="archives" href="http://myblog.com/archives">old posts</a>
    <a rel="external" href="http://notmysite.com">tutorial</a>
    <a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
    <a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
    <a rel="tag" href="http://myblog.com/category/games">games posts</a>

结构数据标记

高级东西，暂时只有谷歌支持
是为了使得容易抓取网页上的数据ajax

<div itemscope itemtype="http://example.com/hello">
      <p>我叫
        <span itemprop="主人">汪磊</span>。
      </p>
      <p>我养了一条叫
        <span itemprop="狗名">旺财</span>的
        <span itemprop="品种">金毛</span>犬。
      </p>
</div>

        好比抓取出：
        主人：汪磊
        狗名：旺财
        品种：金毛

ARIA

####Accessible Rich Internet Application (无障碍富互联网应用程序)
    主要针对于屏幕阅读设备(e.g. NVDA)，更快更好地理解网页
    不只仅是为了盲人用户，更多语义化
1.数据注解，相似lable，只不过label是针对表格
2.能够经过aria知道数据的强相关

aria由一套属性组成，属性分为role以及对应的states和properties，
aria将html元素分为六种role，每种有对应的states和properties，
但有一些是共用的，好比

        aria-atomic
        aria-busy(state)
        aria-describedby
        aria-disabled(state)
        aria-dropeffect
        aria-flowto
        aria-haspopup
        aria-hidden(state)
        aria-invalid(state)
        aria-label
        aria-labelledby
        aria-owns
        aria-relevant

        举个伪元素例子，

        <div role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</div>

        这个div模拟了radio的功能，在平时读屏软件是分辨不出来的，
        可是加上role及aria-checked状态，
        在读屏软件（NVDA）中读出来就是：

单选2 单选按钮 选中 第1页 共1项

详细属性见：ARIA财付通设计中心.htmlapache

自定义属性 data

经过DOM存储与DOM对象强相关的数据

1.能够给html里的全部dom对象均可以添加一些data-xxx的属性
2.用来记录与当前DOM强相关的数据

<ul id="users">
  <li data-id="1" data-age="18" data-gender="true">张三</li>
  <li data-id="2" data-age="18" data-gender="false">李四</li>
  <li data-id="3" data-age="18" data-gender="true">王二</li>
</ul>

案例一：

编程

<script>
        //键是ID 值是信息
            var data = {
                01:{
                    name:"伟哥哥"，
                    age:"18"
                },
                02:{
                    name:"伟哥哥"，
                    age:"19"
                },
                03:{
                    name:"伟哥哥"，
                    age:"20"
                }

                //jQuery操做必定要作变量本地化
                var list = document.getElementById("list");
                for(var id in data){
                    var item = data[id];
                    var liElement = document.createElement("li");
                    //liElement.innerHTML = item.name;
                    liElement.appendChild(document.createTextNode(item.name));
                    liElement.setAttribute("data-age",item.age);
                    liElement.setAttribute("data-id",item.id);
                    list.appendChild(liElement);//变量本地化

                    //此处才将元素加到界面上
                    liElement.addEventListener("click",function(){
                        //alert(this.name);
                        //this 是当前点击的元素
                        //alert(this.getAttribute("data-age"));
                        console.log(this.dataset["age"]);
                    })
                }

            };
        </script>

案例二：

<body>
            <ul id="users">
                <li class="item" data-id="1" data-age="18" data-gender="true">
                    张三
                    <pre></pre>
                </li>
                <li class="item" data-id="2" data-age="18" data-gender="false">
                  李四
                    <pre></pre>
                </li>
                <li class="item" data-id="3" data-age="18" data-gender="true">
                  王二
                  <pre></pre>
                </li>
            </ul>
        </body>

        <script>
            var ul = document.getElementById('users');

            for (var i = 0; i < ul.children.length; i++) {
                var li = ul.children[i];
                // JS 添加data属性
                i.setAttribute('data-name', li.innerText);
                i.children[0].innerText = '';
                or (var key in li.dataset) {
                    li.children[0].innerText += key + ':' + li.dataset[key] + '\n';
                }
            }
        </script>

案例三：

<body>
                <div class="tabs">
                    <ul>
                        <li data-target=".panel-new">新闻</li>
                        <li data-target=".panel-bagua">八卦</li>
                        <li data-target=".panel-sport">体育</li>
                    </ul>
                    <div class="panel-new"></div>
                    <div class="panel-bagua"></div>
                    <div class="panel-sport"></div>
                </div>
                <script>
                $(function(){
                    //写这个是为了有一个单独做用于，避免污染
                    //api是应用程序编程接口
                    var $lis = $('.tabs>ul>li');
                    $lis.on("click",function(){
                    //获取目标对象的选择器
                    var targetSelector = $(this).data('target');
                    var $target = $(targetSelector);
                    });
                });
                </script>
            </body>

智能表单

新的表单类型

<form action="#">
        //repuired表示必须的，表示填写框不能为空，会有提示可是提示不能更改
        <label>text:<input type="text" required></label></br>

        //只能判断中间是否有@
        <label>email:<input type="email" value="ice@wedn.net"></label><br>
        <label>date:<input type="date" min="2014-10-14" max="2020-10-14" value="2016-08-14"></label><br>

        //拖动条，能够得到拉到的地方的数字
        <label>range:<input type="range" min="0" max="50" value="10"></label> <br>
        <label>search:<input type="search" results="10" placeholder="搜点啥？"></label><br>
        <label>tel:<input type="tel" placeholder="(010) 888-888" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$"></label><br>
        <label>color:<input type="color" placeholder="e.g. #bbbbbb"></label><br>
        <label>number:<input type="number" step="1" min="-5" max="10" value="0"></label><br>
        <input type="submit" value="提交">
    </form>

虚拟键盘适配

手机键盘会根据不一样的type类型弹出不一样键盘类型
        如打开数字键盘，密码键盘，邮件键盘
        <input type="text" name="txt_text" id="txt_text">
        <input type="number" name="txt_number" id="txt_number">
        <input type="email" name="txt_email" id="txt_email">
        <input type="tel" name="txt_tel" id="txt_tel">
        <input type="url" name="txt_url" id="txt_url">

网页多媒体

音频

多媒体的dom对象有一些新的方法能够去作播放暂停

单个数据源的方式

默认界面：

        <audio src="music.mp3" controls="controls"></audio>

自定义一个：
        <audio id="audio" src="music.mp3"></audio>
        <button id="btn">播放</button>
        <button id="btn_pause">暂停</button>
        <script>
        var btn = document.getElementById("btn");
        var btn_pause = document.getElementById("btn_pause");
        var audio = document.getElementById("audio");
        btn.addEventListener("click",function(){
            //播放音频
            audio.play();
        });
        btn_pause.addEventListener("click",function(){
            // 暂停音频
            audio.pause();
        });
        </script>

多个数据源的方式

<audio controls="controls">
            <source src="img/music.mp3" type="audio/mpeg"/>
        </audio>

视频

单个数据源的方式

<video src="fun.mp4" controls="controls"></video>

多个数据源的方式

<video controls="controls" poster="top.png" autoplay="autoplay">
             不一样浏览器支持格式不同,由于版权问题
            <source src="fun.ogg" type="video/ogg"></source>
            <source src="fun.mp4" type="video/mp4"></source>
             当浏览器不兼容video标签，就会将他以div方式解析
             用第三方组件代替
             <object type="application/x-shockwave-flash" data="http://static.youku.com/v1.0.0557/v/swf/loader.swf" width="100%" height="100%" id="movie_player">
              <param name="allowFullScreen" value="true">
              <param name="allowscriptaccess" value="always">
              <param name="allowFullScreenInteractive" value="true">
              <param name="flashvars" value="VideoIDS=XMTMwNDAzNzM4NA==&amp;ShowId=0&amp;category=85&amp;Cp=0&amp;ev=1&amp;Light=on&amp;THX=off&amp;unCookie=0&amp;frame=0&amp;pvid=1439005764768c9QpaT&amp;uepflag=1&amp;Tid=0&amp;isAutoPlay=true&amp;Version=/v1.0.1080&amp;show_ce=0&amp;winType=interior&amp;Type=Folder&amp;Fid=25977506&amp;Pt=0&amp;Ob=1&amp;plchid=z&amp;openScanCode=1&amp;scanCodeText=&quot;限时&quot; 扫码免广告&amp;embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&amp;vext=bc%3D%26pid%3D1439005764768c9QpaT%26unCookie%3D0%26frame%3D0%26type%3D1%26fob%3D1%26fpo%3D0%26svt%3D0%26emb%3DAjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&amp;pageStartTime=1439005764766">
              <param name="movie" value="http://static.youku.com/v1.0.0557/v/swf/loader.swf">
              <div class="player_html5">
                <div class="picture" style="height:100%">
                  <div style="line-height:460px;"><span style="font-size:18px">您尚未安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span></div>
                </div>
              </div>
            </object>
        </video>

视频播放器相关属性

属性      值           描述
        autoplay    autoplay    若是出现该属性，则视频在就绪后立刻播放
        controls    controls    若是出现该属性，则向用户显示控件，好比播放按钮
        height      pixels      设置视频播放器的高度
        loop        loop        若是出现该属性，则当媒介文件完成播放后再次开始播放
        muted       muted       规定视频的音频输出应该被静音。【即：静音】
        poster      URL         规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
        preload     preload     若是出现该属性，则视频在页面加载时进行加载，并预备播放
                                若是使用"autoplay"，则忽略该属性
        src         url         要播放的视频的URL
        width       pixels      设置视频播放器的宽度

字幕

字幕案例：
        <video id="clip" controls>
            <source src="fun.mp4" type="video/mp4" />
            <track label="English subtitles" kind="subtitles"
            srclang="en" src="video-subtitles-en.vtt" default />
        </video>

    字幕文件内容示例：
        WEBVIT  FILE

        1
        00:00:00.000 --> 00:00:12.000 D:vertical A:start

        2
        00:00:12.000 --> 00:00:15.300
        你们好，我是伟哥哥

Canvas

2D

3D (WebGL)

SVG

Scalable Vector Graphics 可缩放矢量图形

svg图片来源：经过AI，文件-->脚本-->将文档存储为SVG

svg能够像标签那样子直接黏贴到页面上，可是咱们更但愿像图片那样载入进来

能够借助三个标签载入：

        <iframe src="demo.svg" frameborder="0"></iframe>    //推荐
        <object data="demo.svg" type=""></object>
        <embed src="demo.svg" type="">


学完ajax以后推荐方式：

        学习完异步请求以后，咱们能够遍历全部SVG节点，把src引入进来，自己他是一个document对象，能够把它直接append到文档中。

        window.addEventListener('load',function(){
            var svgs = document.getElementByTagName('svg');
            for (var i = 0;i < svgs.length; i++){
                //console.log(svg[i].dataset);
                var src = $(svgs[i].data('src'));
                //向服务器发送请求 获得svg
                $.get(src,function(data){
                    var el = data.documentElement;
                    $(document.body).append($(el));
                    });
            }
            });
        同时将svg文件里面的style删除，以便咱们进行更改样式

补充：

一、sublime server插件安装
安装完不要stop serber，不用的时候直接要退出sublime，否则sublime会崩溃

二、谷歌浏览器开发者工具右上角展开栏的settings，给show useragent shadow DOM选上钩后能够看到虚拟出来的DOM

3.伪类对象
至关于在weigege后面插入一个 zuishuai ，而且能够改变他的样式

<style>
.content::after{
    content: 'zuishuai';
    color: #465;
}
</style>
<div class="content">weigege</div>

4.h5新标签
h5新标签由于太新，可能在低级浏览器不能识别，不能识别的标签浏览器会自动识别为div进行加载，能够经过如下方式生成标签
方式一：本身定义

方式二：引入第三方组件html5shiv.js
里面是将全部h5新标签经过方式一的方式进行建立

5.在谷歌控制台输入一次输入下面代码
1.
document.body (回车)
document.body.contentEditable = true; (回车)
而后能够在页面上直接编辑文字
2.
直接在链接处输入
data:text/html, (回车)
能够直接在页面上编辑文字

6.第三方多媒体播放器库：jwplayer

7.专门为移动端使用的组件 zepto？
实现的api与jQuery基本相同
冗余处理兼容的代码都砍掉了
彷佛能够代替jQuery

8.！important在老版本是顶不掉行内样式的

9.Markdown
开源项目说明文件都是用这种写的
语法连接：http://wowubuntu.com/markdown/
用普通文本描述富文本的语法
扩展名md，markdown
案例
h标签

HEADER1

HEADER2

HEADER3

段落直接写前面不用加东西

无序列表
前面有空格

有序列表
前面有数字都是有序列表，记得加空格

特定的编辑器能够加javascript表明特定的语法，用于编写代码

10.iframe 至关于挖了一个坑把其余页面载入进来

h5笔记

标签

更语义化标签

为何要有语义化标签

应用程序标签

【datalist（数据列表）】

【progress（进度条）】

【meter（数值显示器）】

【menu（右键菜单）】

【details（明细）】

属性

连接关系描述：用来描述指定连接与当前文档的关系，便于机器理解文档结构

结构数据标记

ARIA

自定义属性 data

智能表单

新的表单类型

虚拟键盘适配

网页多媒体

音频

单个数据源的方式

多个数据源的方式

视频

单个数据源的方式

多个数据源的方式

视频播放器相关属性

字幕

Canvas

2D

3D (WebGL)

SVG

Scalable Vector Graphics 可缩放矢量图形

svg图片来源：经过AI，文件-->脚本-->将文档存储为SVG

svg能够像标签那样子直接黏贴到页面上，可是咱们更但愿像图片那样载入进来

补充：

HEADER1

HEADER2

HEADER3