首页 › HTML论坛 › HTML5

桃圆 發表於 2019-12-13 21:53:00

HTML5

<p>html5是最新版的html的标签和标签属性，虽然是最新版的，也过了好多年了</p>
<p><strong>》》html5之新标签</strong></p>
<p><strong>div语义化</strong><br>
只是看起来更整齐，可读性，语义化</p>
<ul>
<li>Header</li>
<li>nav（导航）</li>
<li>article（区域）</li>
<li>section（主题）</li>
<li>aside（广告）</li>
<li>footer</li>
</ul>
<p><strong>视频标签video和一个音频标签audio和一个画布canvas</strong><br>
视频标签也就是html播放器，这个标签的出现直接秒杀了flash播放器<br>
这三个标签有很多的api，很强大</p>
<pre><code class="language-html">&lt;!-- canvas画布 --&gt;
&lt;canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"&gt;
您的浏览器不支持 HTML5 canvas 标签。
&lt;/canvas&gt;

&lt;!-- video视频 --&gt;
&lt;video id="mp4"&gt;
&lt;source src="mov_bbb.mp4" type="video/mp4"&gt;
&lt;source src="mov_bbb.ogg" type="video/ogg"&gt;
您的浏览器不支持 HTML5 video标签。
&lt;/video&gt;

&lt;!-- audio视频 --&gt;
&lt;audio src="someaudio.wav" id="mp3"&gt;
您的浏览器不支持 audio 标签。
&lt;/audio&gt;
</code></pre>
<p><strong>还有input出了新的type，有date，color</strong></p>
<pre><code class="language-html">&lt;input type="date"&gt;
&lt;input type="datetime"&gt;
&lt;input type="color"&gt;
&lt;input type="range"&gt;
...
</code></pre>
<p><strong>input-file的属性</strong><br>
accept表示打开的系统文件目录<br>
capture表示的是系统所捕获的默认设备，camera：照相机；camcorder：摄像机；microphone：录音；<br>
其中还有一个属性multiple，支持多选，当支持多选时，multiple优先级高于capture</p>
<pre><code class="language-html">&lt;input type="file" accept="image/*" capture="camera"&gt;
&lt;input type="file" accept="video/*" capture="camcorder"&gt;
&lt;input type="file" accept="audio/*" capture="microphone"&gt;
&lt;input type="file" accept="image/*" multiple&gt;
</code></pre>
<p><strong>iframe</strong></p>
<pre><code class="language-html">&lt;!-- 去除iframe自带的滚动条 --&gt;
&lt;iframe id="iframe" src="xxx" frameborder="0" scrolling="no" style="width: 100%;"&gt;&lt;/iframe&gt;
</code></pre>
<p><strong>》》html5之新属性</strong></p>
<ol>
<li>hidden的隐藏属性</li>
<li>input的pattern=/reg/用于表单内容判断（示例查看css的艺术）</li>
<li>input的placeholder是提示语</li>
<li>input的required   是必填，但只能在form标签提交时生效</li>
<li>在标签内加上contenteditable="true" 可以让标签变成可编辑的区域，富文本编辑器就是用这个属性做的</li>
<li>input的list属性（实现下拉带搜索的功能）</li>
</ol>
<pre><code class="language-html">&lt;input type="text" list="names" multiple /&gt;
&lt;datalist id="names"&gt;
   &lt;option value="kris"&gt;
   &lt;option value="陈大鱼头"&gt;
   &lt;option value="深圳金城武"&gt;
&lt;/datalist&gt;

&lt;input type="email" list="emails" multiple /&gt;
&lt;datalist id="emails"&gt;
   &lt;option value="chenjinwen77@foxmail.com" label="kris"&gt;
   &lt;option value="chenjinwen77@gmail.com" label="kris"&gt;
&lt;/datalist&gt;

&lt;input type="date" list="dates" /&gt;
&lt;datalist id="dates"&gt;
   &lt;option value="2019-09-03"&gt;
&lt;/datalist&gt;
</code></pre><br><br>
来源：https://www.cnblogs.com/pengdt/p/12037482.html

查看完整版本: HTML5