记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 8825|回复: 0
收起左侧

[HTML5/CSS3] 10分钟读懂html5 多了啥?

[复制链接]
发表于 2017-8-27 22:57:20 | 显示全部楼层 |阅读模式
<article>
                                        <html>
<head></head>
<body>
  <p><strong>更加语义化标签</strong>(开发者可以更加优雅,浏览器也可以更好的理解)</p>
  <p>搜索引擎检索,为什么会检索标题,不会检索“简介” ? 这是因为结构的不同。但是结构每个人的class命名习惯都会不一样,无法做到规范,于是不如出新的标签。</p>
  <p>在有一些低版本的浏览器中,h5标签不兼容,会被认为是div,并不会影响我们的功能。也可以在 script 中新加一行代码 document.createElement("header") ,但是用了多少标签,就要写多少行的 document.createElement("") ,于是有一个第三方的插件 html5shiv.js</p>
  <p>使用方法:</p>
  <pre>
<code class="language-javascript">&lt;!--[if lt IE 9]&gt;
&lt;script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;</code></pre>
  <p>注意:在页面中调用Html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。</p>
  <p><strong>应用程序标签</strong></p>
  <p>DataList</p>
  <p>progress</p>
  <p>属性<br> <strong>链接关系描述</strong></p>
  <p>链接到的地方和当前文档的关系是什么</p>
  <pre>
<code class="language-javascript">&lt;a href="01-sementic-tags.html" rel="pre"&gt;&lt;/a&gt;
&lt;a href="02-application-tags.html" rel="next"&gt;&lt;/a&gt;</code></pre>
  <p>rel还出现在其他地方,</p>
  <pre>
<code class="language-javascript">&lt;link rel="stylesheet" href="css.css"&gt;</code></pre>
  <p>link本身不会请求文件,而是rel="stylesheet"才会请求文件</p>
  <p><em>目前国内不流行</em></p>
  <p><strong>结构数据标记</strong></p>
  <pre>
<code class="language-javascript">&lt;div itemscope itemtype="www.baidu.com"&gt;
        &lt;div itemprop="主人"&gt;主人&lt;/div&gt;
        &lt;div itemprop="小狗"&gt;小狗一&lt;/div&gt;
        &lt;div itemprop="小狗"&gt;小狗二&lt;/div&gt;
    &lt;/div&gt;</code></pre>
  <p>可以方便搜索引擎重点抓取</p>
  <p><em>很高级,但是只有google支持</em></p>
  <p><strong>ARIA</strong></p>
  <p>无障碍富互联网应用程序</p>
  <pre>
<code class="language-javascript">&lt;label for="myinput"&gt;请输入您的名字&lt;/label&gt;
&lt;input type="text" id="myinput"&gt;</code></pre>
  <p>为什么上面一定要label for呢?</p>
  <p>是为了搜索引擎的理解</p>
  <p><strong>自定义属性</strong></p>
  <p>也就是 data-* 之类的属性,他们没有功能性,只是为了保存dom节点的强相关的数据。</p>
  <pre>
<code class="language-javascript">&lt;ul id="list"&gt;&lt;/ul&gt;
    &lt;div id="info"&gt;&lt;/div&gt;
    &lt;script&gt;
        var data={
            01:{
                name:"张三",
                age:18
            },
            02:{
                name:"李四",
                age:19
            },
            03:{
                name:"王五",
                age:20
            }
        };
        for (var X in data) {
            var item=data[X];
            var oli=document.createElement("li");
            var olist=document.getElementById("list");
            oli.appendChild(document.createTextNode(item.name));
            olist.appendChild(oli);
            oli.setAttribute("data-name",item.name);
            oli.setAttribute("data-age",item.age );
            oli.addEventListener("click", function () {
                var name=this.getAttribute("data-name");
                var age=this.getAttribute("data-age");
                alert(age+name)
            })
        }
    &lt;/script&gt;</code></pre>
  <p>上面的代码用 setattribue 方法来定义了自定义属性,然后用getattribute又获取到了自定义属性。js也针对自定义属性出了新的api,也就是 dataset['string'] ,使用这个api可以代替 getAttribute 的方法:</p>
  <pre>
<code class="language-javascript">oli.addEventListener("click",function(){
    console.log(this.dataset["name"]);
})</code></pre>
  <p>智能表单<br> <strong>新的表单类型</strong></p>
  <pre>
<code class="language-javascript">&lt;input type="date"&gt;
&lt;input type="color"&gt;
&lt;input type="range"&gt;</code></pre>
  <p>但是尽量不要在pc端使用,用户体验较差,不能自定义样式。主要适配在移动端。</p>
  <p>虚拟键盘适配</p>
  <pre>
<code class="language-javascript">&lt;input type="text" name="txt_text" id="txt_text"&gt;
&lt;input type="number" name="txt_number" id="txt_number"&gt;
&lt;input type="email" name="txt_email" id="txt_email"&gt;
&lt;input type="tel" name="txt_tel" id="txt_tel"&gt;
&lt;input type="url" name="txt_url" id="txt_url"&gt;</code></pre>
  <p>上面的代码在pc端上没有用处,主要是用在移动端可以根据不同的input的 type 来唤出不同的键盘。</p>
  <p>虽然 input type="email" 看似可以验证表单,但是真是太弱了,只是验证有没有 @ ,真的要验证的话,还是要自己写正则表达式</p>
  <p>页面多媒体</p>
  <p><strong>音频</strong></p>
  <pre>
<code class="language-javascript">&lt;audio src="A Moment of Reflection.mp3" controls="controls"&gt;&lt;/audio&gt;</code></pre>
  <p>但是默认的播放器太丑了,我们一般是自己写一个button,然后为这个button添加一个事件:</p>
  <pre>
<code class="language-javascript">&lt;script&gt;
        var btn=document.getElementById("btn");
        var btn1=document.getElementById("btn1");
        var audio=document.getElementsByTagName("audio")[0];
        btn.addEventListener("click", function () {
            audio.play();
        })
        btn1.addEventListener("click",function (argument) {
            audio.pause();
        })
&lt;/script&gt;</code></pre>
  <p><strong>视频</strong></p>
  <pre>
<code class="language-javascript">&lt;video src="A Moment of Reflection.mp4" controls="controls"&gt;&lt;/video&gt;</code></pre>
  <p>但是我们一般不是这样用的,因为视频有版权,有些浏览器只能支持一两个,我们一般是source:</p>
  <pre>
<code class="language-javascript">&lt;video controls="controls"&gt;
&lt;source src="下午03-网页多媒体.web.mp4"&gt;
&lt;source src="下午03-网页多媒体.web.ogg"&gt;
&lt;p&gt;您的浏览器不支持&lt;/p&gt;
&lt;/video&gt;</code></pre>
  <p>还有一个插件,是可以帮我们做兼容的,是https://html5media.info/的组件,ie7以上都可以兼容。</p>
  <p>以下是多媒体的属性;</p>
  <p>[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]</p>
  <p><strong>字幕</strong></p>
  <p>兼容性不是很好,现在还没有人用</p>
  <p>canvas</p>
  <ol>
   <li>2d</li>
   <li>3d</li>
  </ol>
  <p>svg<br> 优势:体积小,质量高,效果好,可控程度高。</p>
  <p>&nbsp;</p>
  <p>来自:http://www.cnblogs.com/dujuncheng/p/6139580.html</p>
  <p>&nbsp;</p>
</body>
</html><h2><strong>扩展阅读</strong></h2><a title=五分钟学会HTML5!(二) href="/lib/view/open1326878383577.html"><span class=title>五分钟学会HTML5!(二)</span></a><br><a title= 机器学习入门资源不完全汇总  href="/lib/view/open1420957787359.html"><span class=title> 机器学习入门资源不完全汇总 </span></a><br><a title=JavaScript多线程之HTML5 web worker href="/lib/view/open1447857791916.html"><span class=title>JavaScript多线程之HTML5 Web Worker</span></a><br><a title=HTML5的多人游戏:Colonizers href="/lib/view/open1417706354308.html"><span class=title>HTML5的多人游戏:Colonizers</span></a><br><a title=HtML5多文件上传:Bootstrap file input href="/lib/view/open1401417333886.html"><span class=title>HtML5多文件上传:Bootstrap File Input</span></a><br><h2><strong>为您推荐</strong></h2><a title=SpringMVC 清晰简单教程 href="/lib/view/open1415373235887.html"><span class=title>SpringMVC 清晰简单教程</span></a><br><a title=嵌入式设备web服务器比较  href="/lib/view/open1399209680078.html"><span class=title>嵌入式设备web服务器比较 </span></a><br><a title=Struts2自定义过滤器 + 百度富文本控件ueditor smb上传图片到独立服务器 href  =/lib/view/open1346510502537.html><span class=title>Struts2自定义过滤器 + 百度富文本控件UEditor + Smb上传图片到独立服务器 </span></a><br><a title=Bootstrap3 css样式基本用法总结 href="/lib/view/open1455964564761.html"><span class=title>Bootstrap3 CSS样式基本用法总结</span></a><br><a title=机器学习开源项目、类库、软件集合 href="/lib/view/open1412995833374.html"><span class=title>机器学习开源项目、类库、软件集合</span></a><br><h2><strong>更多</strong></h2><a title=HTML5 href="https://www.baidu.com/s?wd=site:open-open.com HTML5"><span class=title>HTML5</span></a><br>
                                </article>




上一篇:使用HTML5开发Kinect体感游戏
下一篇:移动端HTML5页面开发备忘录
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】

QQ|QQ群:133515734|站长博客|百度网盘|许进龙|手机触屏版|国际动画教程网 ( ICP13037175 )