Notes organized by h5

tag

UpdateSemantictag

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

Why there are semantic tags

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

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

Application tag

[datalist(data list)]

datalist The presentation of the data list requires a carrier

            cb8c59b3bd1c727d83210c4ed0cd660f
            7da42d751d2e4ed6a1932f9fafc8ef2b
                cc2285245b0d602b24cf114e9eec15414afa15d3069109ac30911f04c56f3338
                bbc713b71258610377da5292438891054afa15d3069109ac30911f04c56f3338
            bbb84e3e75b36eb4260cf6b3db844ca1

            cb8c59b3bd1c727d83210c4ed0cd660f
            7da42d751d2e4ed6a1932f9fafc8ef2b
                cc2285245b0d602b24cf114e9eec15414afa15d3069109ac30911f04c56f3338
                bbc713b71258610377da5292438891054afa15d3069109ac30911f04c56f3338
            bbb84e3e75b36eb4260cf6b3db844ca1

[progress (Progress bar)]

To change its style, you need to first change -webkit- appearanceSet to none

            c9ccee2e6ea535a969eb3f532ad9fe89
                .my_progress{
                    -webkit-appearance:none;
                }
                .my-progress::-webkit-progress-bar{
                    //样式
                }
            531ac245ce3e4fe3d50054a55f265927
            d09da095138acc51c05890a144af0f05a211cb70e7878dbce34a6f8dc0175647

[meter (numeric display)]

Very few browsers support

            a46a30771665aeb9b5e85ec962799a166fd20bd7b615c56cbd536dc339c52b20

The maximum and minimum values ​​of the display: max, min
The maximum and minimum values ​​that the display can reach: high, low
The best value of the measurement range of the display: optimal
The current value displayed by the display: value

[menu (right-click menu)]

Firefox compatible

[details]

Click on a content to expand the panel, compatible with Firefox and Google

Properties

Link relationship description: used to describe the relationship between the specified link and the current document, to facilitate the machine to understand the document structure

Common link relationship table

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


    案例

    f982de946d3aca2cf98953d7e563e7dd
    95d84653f4052f672699c5e27f945b42
    4c8359476223086fa438293d93eb9b4a上一页5db79b134e9f6b82c0b36e0489ee08ed
    78f45beb96436c120f1d47d26f43bd01下一页5db79b134e9f6b82c0b36e0489ee08ed

    c2a2a9e8983225ebc6272b69766aa844
    4595839f8db372d30afea56767a88165
    617e6a8cd949eae40639bb07899efa78
    052580b01d15c892693f2ae88c3be3c8
    a18886eb649ba8e5cc65c7f31dcfde4e

    00d11dca6a5c650cca69a60a93f34bceold posts5db79b134e9f6b82c0b36e0489ee08ed
    baf0dfb9ec08604778bc96d39d234b04tutorial5db79b134e9f6b82c0b36e0489ee08ed
    e3bd948dabad79e7584ee749972015b0license5db79b134e9f6b82c0b36e0489ee08ed
    49a0449f37cdabb1d3115749ff3ae035wannabe5db79b134e9f6b82c0b36e0489ee08ed
    c2871575685eb1f458f9355db9773e20games posts5db79b134e9f6b82c0b36e0489ee08ed

Structured data tag

Advanced stuff, currently only supported by Google
is to make it easy to crawl the data on the webpage

ab18603caa3024d0745c55d2ae1b2812
      e388a4556c0f65e1904146cc1a846bee我叫
        cbeecf2d8e86e4b6feef26aab165ecea汪磊54bdf357c58b8a65c66d7c19c8e4d114。
      94b3e26ee717c64999d7867364b1b4a3
      e388a4556c0f65e1904146cc1a846bee我养了一条叫
        025bed8044e67d69a8d59c6aeac48ff4旺财54bdf357c58b8a65c66d7c19c8e4d114的
        925b576fba4d86fa0341642b2c73a22a金毛54bdf357c58b8a65c66d7c19c8e4d114犬。
      94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

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

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

        举个伪元素例子，

        ba5b346355c6386b1b74298854459131单选tabindex="0"94b3e26ee717c64999d7867364b1b4a3

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

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

For detailed attributes, see: ARIA Tenpay Design Center.html

Custom attribute data

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

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

55188415bb959a4149daa1b24f141c96
  1b72d60e316605a0e13f50ca56c20d53张三bed06894275b65c1ab86501b08a632eb
  1818b904a9a02c013243e3e8c8c0a81d李四bed06894275b65c1ab86501b08a632eb
  0fce591c8a73dfed4013b797ecb3dd80王二bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

Case 1:

##

        3f1c4e4b6b16bbbd69b2ee476dc4f83a
        //键是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"]);
                    })
                }

            };
        2cacc6d41bbb37262a98f745aa00fbf0

Case 2:

        6c04bd5ca3fcae76e30b72ad730ca86d
            55188415bb959a4149daa1b24f141c96
                7d8bbe895324ecaaa463dfe8a60673aa
                    张三
                    e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec
                bed06894275b65c1ab86501b08a632eb
                8c3c5c0859bca259241054435258aa24
                  李四
                    e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec
                bed06894275b65c1ab86501b08a632eb
                835222f56f60aa7bb9381bea4867b018
                  王二
                  e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec
                bed06894275b65c1ab86501b08a632eb
            929d1f5ca49e04fdcb27f9465b944689
        36cc49f0c466276486e50c850b7e4956

        3f1c4e4b6b16bbbd69b2ee476dc4f83a
            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';
                }
            }
        2cacc6d41bbb37262a98f745aa00fbf0

Case 3:

            6c04bd5ca3fcae76e30b72ad730ca86d
                5abfae0d0c5377a1c32d1cb4295b7e3a
                    ff6d136ddc5fdfeffaf53ff6ee95f185
                        e71a14d35fad9dae03215f5184d21c9a新闻bed06894275b65c1ab86501b08a632eb
                        2e2f6f4cf3630ec8bc0e8c0d0de86da3八卦bed06894275b65c1ab86501b08a632eb
                        7bc3b64437273a87382f74c679c0bdfb体育bed06894275b65c1ab86501b08a632eb
                    929d1f5ca49e04fdcb27f9465b944689
                    0e1db7c0d910d6a5bad328a32e5bf5d594b3e26ee717c64999d7867364b1b4a3
                    d96d8637faead70e78e60016290964f794b3e26ee717c64999d7867364b1b4a3
                    c9cd6baee48204250f2718c473c0025294b3e26ee717c64999d7867364b1b4a3
                94b3e26ee717c64999d7867364b1b4a3
                3f1c4e4b6b16bbbd69b2ee476dc4f83a
                $(function(){
                    //写这个是为了有一个单独作用于，避免污染
                    //api是应用程序编程接口
                    var $lis = $('.tabs>ul>li');
                    $lis.on("click",function(){
                    //获取目标对象的选择器
                    var targetSelector = $(this).data('target');
                    var $target = $(targetSelector);
                    });
                });
                2cacc6d41bbb37262a98f745aa00fbf0
            36cc49f0c466276486e50c850b7e4956

Smart form

New form type

    b75414e04c642145443924ca99d735de
        //repuired表示必须的，表示填写框不能为空，会有提示但是提示不能更改
        2e1cf0710519d5598b1f0f14c36ba674text:c24c7afc83ec4afe3fb02f8ded0bbfbe8c1ecd4bb896b2264e0711597d40766c0b9f73f8e206867bd1f5dc5957dbcb38

        //只能判断中间是否有@
        2e1cf0710519d5598b1f0f14c36ba674email:08ff178fde649c92ccf063e3bb567edd8c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a
        2e1cf0710519d5598b1f0f14c36ba674date:11bb4683223cc6aee9e1e3b4b507e8158c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a

        //拖动条，可以获得拉到的地方的数字
        2e1cf0710519d5598b1f0f14c36ba674range:90a4666e88b2187cf2d3987c348b75ce8c1ecd4bb896b2264e0711597d40766c 0c6dc11e160d3b678d68754cc175188a
        2e1cf0710519d5598b1f0f14c36ba674search:f136344e4bf4152119f95b93a33225d98c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a
        2e1cf0710519d5598b1f0f14c36ba674tel:1a10eaf3310d2adc44c0ac7399fe855f8c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a
        2e1cf0710519d5598b1f0f14c36ba674color:e6c6995dacbb0051990ec7884498551e8c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a
        2e1cf0710519d5598b1f0f14c36ba674number:aceb7144f742d78ea10e529ac9b15f1d8c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a
        10c88813b1d79313d0132c5ec3999828
    f5a47148e367a6035fd7a2faa965022e

Virtual keyboard adaptation

        手机键盘会根据不同的type类型弹出不同键盘类型
        如打开数字键盘，密码键盘，邮件键盘
        a1869a0fab1119b10395fb0740fdd997
        2903e50b107d02bd744cd340aa803d45
        3760599e2bb0a48e0485621a4afef5cb
        8aa2a4efadc557a509c1e268ee119b1a
        db5d515e020586877b6233f209ea344e

Web page

Multimedia

Audio

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

Single data source method

默认界面：

        253e4f887fbe2a44684b0837a440f15481d2bc32cafa2076a27f10cdd878d0ab

自定义一个：
        fb20f59c3cab471700857c5011af959a81d2bc32cafa2076a27f10cdd878d0ab
        ddbd97e11a826e220b707861b3166e92播放65281c5ac262bf6d81768915a4a77ac0
        d73940ac8a67a5eb165937b79784b595暂停65281c5ac262bf6d81768915a4a77ac0
        3f1c4e4b6b16bbbd69b2ee476dc4f83a
        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();
        });
        2cacc6d41bbb37262a98f745aa00fbf0

Multiple data source method

        3a0b47d6b7d1a713eedf1cb6300fd493
            091e872d3dd629481706e3ebce2bcb63
        81d2bc32cafa2076a27f10cdd878d0ab

Video

Single data source method

efc19e3039b38fd86983760a147cecd1a6a9c6d3f311dabb528ad355798dc27d

Multiple data source method

        0bdb2adc2073320e0c1dfc3f376eae1c
             不同浏览器支持格式不一样,因为版权问题
            42bba746458018f1ce8f2af691262690055a816595e1cf5e4b7c6fe05c404a6c
            5b3e5a5eda4bca5196a7a4eff304a9e1055a816595e1cf5e4b7c6fe05c404a6c
             当浏览器不兼容video标签，就会将他以p方式解析
             用第三方组件代替
             109bc084877bc4ee3a4a2e0b72fbbc75
              77e5a664aaa7ac48148dc60355f4dd9a
              3fba71c3bc835a392031c12e70a6a998
              990bfbd58a95dc25e049c2d4e43296f7
              f6a01e56c6245d9f4a0f971e9009873b
              54d3401fb8d25424029c60b836b8de78
              f93f3bb348fc608b7378ea092dc0185c
                0ba208064e3422ae2c07ba163cbe84b9
                  cc50b0bbcaeca591cb39322b2255483e7f0e93927bce2ed112529fe553df68ea您还没有安装flash播放器,请点击030006a66c28caf0e30980aa7e4ec9ed这里5db79b134e9f6b82c0b36e0489ee08ed安装54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3
                94b3e26ee717c64999d7867364b1b4a3
              94b3e26ee717c64999d7867364b1b4a3
            eb50c9ec568c9b96871b9e94a1ff3fd1
        a6a9c6d3f311dabb528ad355798dc27d

Video player related properties

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

Subtitles

    字幕案例：
        4ee8829483bb2064d602cb8fcadceb4f
            4dc992bec4c660650ba8307f200c8aac
            7d10e6b9b373469853fd5a7cdc5b3cb2
        a6a9c6d3f311dabb528ad355798dc27d

    字幕文件内容示例：
        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 Scalable Vector Shape

svg

ImageSource: via AI, File-->Script-->Save document as SVG

svg can be like a tag Paste it directly to the page like that, but we prefer to load it like a picture

可以借助三个标签载入：

        afe316ced42f90865dfeace516a5f233065276f04003e4622c4fe6b64f465b88    //推荐
        65614834c6ab912992d4e9c8160b1141eb50c9ec568c9b96871b9e94a1ff3fd1
        dec32c229f8a4cb4007cf118e91cfc40


学完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删除，以便我们进行更改样式

Additional:

1. Sublime server plug-in installation

Do not stop serber after installation. Directly
exitsublime, otherwise sublime will crash

2. Expand the settings in the upper right corner of the Google Chrome developer tools, select show useragent shadow DOM and you can see the virtual The DOM that comes out

3.

Pseudo classObject is equivalent to inserting one after weigege, and its style can be changed

c9ccee2e6ea535a969eb3f532ad9fe89
.content::after{
    content: 'zuishuai';
    color: #465;
}
531ac245ce3e4fe3d50054a55f265927
bf6874f3abc615a5ee665c11de5510dfweigege94b3e26ee717c64999d7867364b1b4a3

4.h5 new tag

h5 The new tag may not be recognized by low-level browsers because it is too new. The unrecognized tag browser will automatically recognize it as p and load it. The tag can be generated in the following ways
Method 1: Define it yourself

Method 2: Introduce the third-party component html5shiv.js
In it, all h5 new tags are created through method 1

5. Enter the following code once in the Google console

1.
document.body (Enter)
document.body.contentEditable = true; (Enter)
Then you can edit the text directly on the page
2.
Enter directly at the connection
data:text/html, (Enter)
You can edit text directly on the page

6. Third-party multimedia player library: jwplayer

7. Specifically for mobile terminals Component used zepto?

The implemented api is basically the same as jQuery
Redundant processing and compatible codes have been cut off
It seems that it can replace jQuery

8.! important cannot support the inline style in the old version

9.Markdown

Open source project description files are written in this way
Syntax link: http://wowubuntu.com/markdown/
Use normal text to describe the syntax of rich text
Extension md, markdown
Case
h tag

HEADER1

HEADER2

HEADER3

Write the paragraph directly without adding anything in front

• Unordered list

• There are spaces in front

1. Ordered list

2. The numbers in front are all ordered lists, remember to add spaces

<br/>

SpecificEditorYou can add javascript to represent specific syntax for writing code

10.iframe
It is equivalent to digging a pit to load other pages

The above is the detailed content of Notes organized by h5. For more information, please follow other related articles on the PHP Chinese website!