h5整理的筆記

標籤

更語意化標籤

    header标签
    nav标签
    section标签
    article标签
    aside标签
    widget标签
    footer标签

為什麼要有語意化標籤

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

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

應用程式標籤

【datalist（資料列表）】

datalist資料清單的呈現需要載體

            <input>
            <datalist>
                <option></option>
                <option></option>
            </datalist>

            <input>
            <datalist>
                <option></option>
                <option></option>
            </datalist>

【progress（進度列）】

#要改變他的樣式，需要先將-webkit- appearance設定為none

            <style>
                .my_progress{
                    -webkit-appearance:none;
                }
                .my-progress::-webkit-progress-bar{
                    //样式
                }
            </style>
            <progress></progress>

【meter（數值顯示器）】

很少瀏覽器支援

            <meter></meter>

顯示器的最大最小值：max，min
顯示器能夠到達的最大最小值：hign，low
顯示器的測量範圍的最佳值：optimum
顯示器顯示的目前值：value

【menu（右鍵選單）】

火狐相容

【details（明細）】

點開一個內容可以展開面板，在火狐和谷歌相容

屬性

連結關係描述：用來描述指定連結與目前文件的關係，以便於機器理解文件結構

常見的連結關係表

#

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


    案例

    <link>
    <link>
    <a>上一页</a>
    <a>下一页</a>

    <link>
    <link>
    <link>
    <link>
    <link>

    <a>old posts</a>
    <a>tutorial</a>
    <a>license</a>
    <a>wannabe</a>
    <a>games posts</a>

結構資料標記

進階東西，暫時只有Google支援
是為了讓容易抓取網頁上的資料

<p>
      </p><p>我叫
        <span>汪磊</span>。
      </p>
      <p>我养了一条叫
        <span>旺财</span>的
        <span>金毛</span>犬。
      </p>


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

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

        举个伪元素例子，

        <p>单选tabindex="0"</p>

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

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

#詳細屬性請見：ARIA財付通設計中心.html

自訂屬性data

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

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

  
• 张三
  
• 李四
  
• 王二

案例一：

        <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>

案例二：

                
•                     张三                     
                  
                
•                   李四                     
                  
                
•                   王二                   
                  
            

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

案例三：

            
                <p>
                    </p>

                        
• 新闻
                        
• 八卦
                        
• 体育
                    

                    

                    

                    

                                 <script> $(function(){ //写这个是为了有一个单独作用于，避免污染 //api是应用程序编程接口 var $lis = $(&#39;.tabs>ul>li&#39;); $lis.on("click",function(){ //获取目标对象的选择器 var targetSelector = $(this).data(&#39;target&#39;); var $target = $(targetSelector); }); }); </script>             

智慧型表單

新的表單類型

        //repuired表示必须的，表示填写框不能为空，会有提示但是提示不能更改         text:         //只能判断中间是否有@         email:
        date:
        //拖动条，可以获得拉到的地方的数字         range: 
        search:
        tel:
        color:
        number:
             

虛擬鍵盤適配

        手机键盘会根据不同的type类型弹出不同键盘类型
        如打开数字键盘，密码键盘，邮件键盘
        <input>
        <input>
        <input>
        <input>
        <input>

網頁多媒體

#音訊

    多媒体的dom对象有一些新的方法可以去做播放暂停

單一資料來源的方式

默认界面：

        <audio></audio>

自定义一个：
        <audio></audio>
        <button>播放</button>
        <button>暂停</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>
            <source></source>
        </audio>

影片

單一資料來源的方式

<video></video>

多個資料來源的方式

        <video>
             不同浏览器支持格式不一样,因为版权问题
            <source></source>
            <source></source>
             当浏览器不兼容video标签，就会将他以p方式解析
             用第三方组件代替
             <object>
              <param>
              <param>
              <param>
              <param>
              <param>
              <p>
                </p>
<p>
                  </p>
<p><span>您还没有安装flash播放器,请点击<a>这里</a>安装</span></p>
                
              
            </object>
        </video>

影片播放器相關屬性

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

字幕

    字幕案例：
        <video>
            <source></source>
            <track></track>
        </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></iframe>    //推荐
        <object></object>
        <embed>


学完ajax之后推荐方式：

        学习完异步请求之后，我们可以遍历所有SVG节点，把src引入进来，本身他是一个document对象，可以把它直接append到文档中。

        window.addEventListener('load',function(){
            var svgs = document.getElementByTagName('svg');
            for (var i = 0;i <h1 id="補充">補充：</h1>
<p>1、sublime server插件安裝<br>安裝完不要stop serber，不用的時候直接要<a href="http://www.php.cn/code/6835.html" target="_blank">退出</a>sublime，不然sublime會崩潰</p>
<p>2、Google瀏覽器開發者工具右上角展開欄的settings，給show useragent shadow DOM選上鉤後可以看到虛擬出來的DOM</p>
<p>3.<a href="http://www.php.cn/code/6542.html" target="_blank">偽類別</a>物件<br>相當於在weigege後面插入一個，並且可以改變他的樣式</p>
<pre class="brush:php;toolbar:false"><style>
.content::after{
    content: &#39;zuishuai&#39;;
    color: #465;
}
</style>
<p>weigege</p>

4.h5新標籤
h5新標籤因為太新，可能在低階瀏覽器不能識別，不能識別的標籤瀏覽器會自動識別為p進行加載，可以透過以下方式產生標籤
方式一：自己定義

方式二：引入第三方元件html5shiv.js
裡面是將所有h5新標籤透過方式一的方式進行建立

5.在Google控制台輸入一次輸入下面程式碼
1.
document.body (Enter)
document.body.contentEditable = true; (Enter)
然後可以在頁面上直接編輯文字
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

段落直接寫前面不用加東西

• #無序列表

• 前面有空格

1. #有序列表

2. 前面有數字都是有序列表，記得加上空格

<br/>

#

特定的編輯器可以加javascript代表特定的語法，用來寫程式碼

#10.iframe
相當於挖​​了一個坑把其他頁面載入去

以上是h5整理的筆記的詳細內容。更多資訊請關注PHP中文網其他相關文章！