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

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

로그인 후 복사

애플리케이션 태그

[datalist(data list)]

The 데이터 목록 데이터 목록을 표시하려면 캐리어

            <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 (Progress bar)]

스타일을 변경하려면 먼저 -webkit-을 변경해야 합니다. 모양이 없음으로 설정됨

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

로그인 후 복사

[미터(숫자 표시)]

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

로그인 후 복사

디스플레이의 최대 및 최소값을 지원하는 브라우저는 거의 없습니다. max, min
디스플레이가 도달할 수 있는 최대 및 최소값: 높음, 낮음
디스플레이 측정 범위의 최고 값: 최적
디스플레이에 표시되는 현재 값: 값

[메뉴(오른쪽 클릭 메뉴)]

Firefox 호환

[세부정보]

콘텐츠를 클릭하면 패널이 확장되고 Firefox와 호환되며 Google

속성

링크 관계 설명: 지정된 링크와 현재 문서 간의 관계를 설명하는 데 사용되며, 기계가 문서 구조를 쉽게 이해할 수 있도록 합니다.

공통 링크 관계 테이블

    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>

로그인 후 복사

구조 데이터 마크업

고급 기능, 현재 Google에서만 지원
을 만드는 것입니다. 웹페이지의 데이터를 쉽게 크롤링할 수 있습니다

<p itemscope itemtype="http://example.com/hello">
      <p>我叫
        <span itemprop="主人">汪磊</span>。
      </p>
      <p>我养了一条叫
        <span itemprop="狗名">旺财</span>的
        <span itemprop="品种">金毛</span>犬。
      </p>
</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 role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</p>

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

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

로그인 후 복사

자세한 속성은 ARIA Tenpay Design Center.html

사용자 정의 속성 데이터

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

로그인 후 복사

사례 1:

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

로그인 후 복사

사례 2:

        <body>
            <ul id="users">
                <li class="item" data-id="1" data-age="18" data-gender="true">
                    张三
                    <pre class="brush:php;toolbar:false">

李四

王二

로그인 후 복사

사례 3:

            <body>
                <p class="tabs">
                    <ul>
                        <li data-target=".panel-new">新闻</li>
                        <li data-target=".panel-bagua">八卦</li>
                        <li data-target=".panel-sport">体育</li>
                    </ul>
                    <p class="panel-new"></p>
                    <p class="panel-bagua"></p>
                    <p class="panel-sport"></p>
                </p>
                <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标签，就会将他以p方式解析
             用第三方组件代替
             <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">
              <p class="player_html5">
                <p class="picture" style="height:100%">
                  <p style="line-height:460px;"><span style="font-size:18px">您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span></p>
                </p>
              </p>
            </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
        大家好，我是伟哥哥

로그인 후 복사

캔버스

3D(WebGL)

SVG

Scalable Vector Graphics Scalable VectorShape

svg

Image 출처: 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删除，以便我们进行更改样式

로그인 후 복사

추가:

1. 플러그인 설치

설치 후 서버를 중지하지 마세요. 바로
종료sublime입니다. 그렇지 않으면 sublime이 충돌합니다

2. Google Chrome 개발자의 오른쪽 상단에 있는 설정을 확장합니다. 도구에서 show useragent Shadow DOM을 선택하면 가상 결과를 볼 수 있습니다. 결과 DOM

Pseudo classObject는 weigege 뒤에 하나를 삽입하는 것과 동일하며 스타일을 변경할 수 있습니다.

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

로그인 후 복사

4.h5 새 태그

새 h5 태그는 너무 새롭기 때문에 하위 수준 브라우저에서 인식되지 않을 수 있습니다. p로 인식할 수 없는 태그는 브라우저가 자동으로 식별하여 로드합니다. 다음과 같은 방법으로 태그를 생성할 수 있습니다.
방법 1: 직접 정의

방법 2: 타사 구성 요소 html5shiv.js 소개
여기서 모든 h5 새 태그는 방법 1을 통해 생성됩니다.

5. Google 콘솔에 다음 코드를 한 번 입력하세요

1.
document.body(Enter)
document.body.contentEditable = true(Enter)
페이지에서 직접 텍스트 편집
2.
접속에서 직접 입력
data:text/html, (Enter)
페이지에서 직접 텍스트 편집 가능

6 . 타사 멀티미디어 플레이어 라이브러리: jwplayer

7. 특히 모바일 단말기용 구성 요소는 zepto를 사용합니까?

구현된 api는 기본적으로 jQuery와 동일합니다
중복처리 호환코드는 잘렸습니다
jQuery를 대체할 수 있을 것 같습니다

8.! important는 이전 버전에서 인라인 스타일을 지원하지 않습니다

9.Markdown

오픈 소스 프로젝트 설명 파일은 모두 이런 방식으로 작성됩니다
구문 링크: http://wowubuntu.com/markdown/
일반 텍스트로 서식 있는 텍스트를 설명하는 구문
Extension md, markdown
Case
h tag

HEADER1

HEADER2

HEADER3

앞에 아무것도 추가하지 않고 문단 바로 쓰기