HTML5

一夜尘埃 發表於 2021-12-8 19:38:00

<p>一、什么是HTML5</p>
<p>（一）HTML5简介</p>
<p>1、万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，作为新HTML语言，具有新的元素、属性和行为。</p>
<p>（1）XHTML 可拓展超文本标记语言</p>
<p>XHTML是一种增强了的HTML，它的可拓展性和灵活性将适应未来网络应用更多的需求。</p>
<p>（2）HTML5</p>
<p>它有更大的技术集，允许更多样化和强大的网站和应用程序。</p>
<p>增加了新特征：语义特征、本地存储特征，设备兼容特性，设备兼容特性，连接特性，网页多媒体特性，三维，图形及特效特性，性能与集成特性，CSS3特性。</p>
<p>这个集合有时称为HTML5和朋友，通常缩写为HTML5。</p>
<p>（二）广义的HTML</p>
<p>1、广义的HTML5是HTML5本身+CSS3+JavaScript</p>
<p>2、这个集合有时称为HTML5和朋友，通常缩写为HTML5</p>
<p>3、虽然HTML5的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势</p>
<p>二、H5新增语义化标签</p>
<p>（一）标签语义化</p>
<p>1、以前布局，我们基本用 div 来做，div 对于搜索引擎来说，是没有语义的。</p>
<p>（二）新增语义化标签</p>
<p>1、  <header> 头部标签</p>
<p>　　<nav> 导航标签</p>
<p>　　<article> 内容标签</p>
<p>　　<section> 块级标签</p>
<p>　　<aside> 侧边栏标签</p>
<p>　　<footer> 尾部标签</p>
<p>2、注意：</p>
<p>（1）这种语义化标准主要针对搜索引擎的；</p>
<p>（2）这些新标签页面中可以使用多次的；</p>
<p>（3）在IE9，需要把这些元素转换为块级元素；</p>
<p>（4）其实，我们移动端更喜欢使用这些标签。</p>
<p>三、H5新增多媒体标签</p>
<p>1、多媒体标签包含两个，具体如下：</p>
<p>（1）音频：<audio></p>
<p>（2）视频：<video></p>
<p>使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览器插件。</p>
<p>（一）<audio>音频标签</p>
<p>HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。</p>
<p>1、音频格式</p>
<p>当前，<audio>元素支持三种音频格式：</p>
<table style="height: 130px; width: 628px" border="0" align="left">
<tbody>
<tr>
<td>格式</td>
<td>IE9</td>
<td>Firefox3.5</td>
<td>Opera10.5</td>
<td>Chrome3.0</td>
<td>Safari3.0</td>
</tr>
<tr>
<td>Ogg Vorbis</td>
<td><strong> </strong></td>
<td><strong>√ </strong></td>
<td><strong>√ </strong></td>
<td><strong>√ </strong></td>
<td> </td>
</tr>
<tr>
<td>MP3</td>
<td><strong>√ </strong></td>
<td> </td>
<td> </td>
<td><strong>√ </strong></td>
<td><strong>√ </strong></td>
</tr>
<tr>
<td>Wav</td>
<td> </td>
<td><strong>√ </strong></td>
<td><strong>√ </strong></td>
<td> </td>
<td><strong>√ </strong></td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>2、<audio>音频标签语法格式</p>
<p>（1）</p>
<p><audio src="文件地址" controls="controls"></audio></p>
<p>（2）</p>
<div>
<div><audio controls="controls"></div>
<div>        </div>
<div>        <source src="media/snow.mp3" type="audio/mpeg"></div>
<div>        <source src="media/snow.ogg" type="audio/ogg"></div>
<div>        </div>
<div> </audio></div>
</div>
<p>3、<audio>音频标签常见属性</p>
<table style="height: 163px; width: 575px" border="0" align="left">
<tbody>
<tr>
<td>属性</td>
<td>值</td>
<td>描述</td>
</tr>
<tr>
<td>autoplay</td>
<td>autoplay</td>
<td>如果出现该属性，则音频在就绪后马上播放</td>
</tr>
<tr>
<td>controls</td>
<td>controls</td>
<td>如果出现该属性，则向用户显示控件，比如播放按钮</td>
</tr>
<tr>
<td>loop</td>
<td>loop</td>
<td>如果出现该属性，则每当音频结束时重新开始播放</td>
</tr>
<tr>
<td>src</td>
<td>url</td>
<td>要播放的音频的URL</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>（二）<video> 视频标签</p>
<p>1、<video>元素支持三种视频格式：</p>
<table style="height: 130px; width: 772px" border="0" align="left">
<tbody>
<tr>
<td>格式</td>
<td>IE</td>
<td>Firefox</td>
<td>Opera</td>
<td>Chrome</td>
<td>Safari</td>
</tr>
<tr>
<td>Ogg</td>
<td>No</td>
<td>3.5+</td>
<td>10.5+</td>
<td>5.0+</td>
<td>No</td>
</tr>
<tr>
<td>MPEG 4</td>
<td>9.0+</td>
<td>No</td>
<td>No</td>
<td>5.0+</td>
<td>3.0+</td>
</tr>
<tr>
<td>WebM</td>
<td>No</td>
<td>4.0+</td>
<td>10.6+</td>
<td>6.0+</td>
<td>No</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>2、</p>
<p>（1）</p>
<div><video src="media/video.mp4" controls="controls"></video></div>
<p>（2）</p>
<div>
<div><video controls="controls" width="300"></div>
<div>        <source src="media/video.ogg" type="video/ogg"></div>
<div>        <source src="media/video.mp4" type="video/mp4"></div>
<div>        </div>
<div>    </video></div>
<div>3、<video>视频标签常见属性</div>
<div>
<table style="height: 387px; width: 686px" border="0" align="left">
<tbody>
<tr>
<td>属性</td>
<td>值</td>
<td>描述</td>
</tr>
<tr>
<td>autoplay</td>
<td>autoplay</td>
<td>视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放方案）</td>
</tr>
<tr>
<td>controls</td>
<td>controls</td>
<td>向用户显示播放控件</td>
</tr>
<tr>
<td>width</td>
<td>pixels（像素）</td>
<td>设置播放器宽度</td>
</tr>
<tr>
<td>height</td>
<td>pixels（像素）</td>
<td>设置播放器宽度</td>
</tr>
<tr>
<td>loop</td>
<td>loop</td>
<td>播放完是否继续播放该视频，循环播放</td>
</tr>
<tr>
<td>preload</td>
<td>
<p>auto（预先加载视频）</p>
<p>none（不应加载视频）</p>
</td>
<td>规定是否预先加载视频（如果有了autoplay就忽略该属性）</td>
</tr>
<tr>
<td>src</td>
<td>url</td>
<td>视频url地址</td>
</tr>
<tr>
<td>poster</td>
<td>lmgurl</td>
<td>加载等待的画面图片</td>
</tr>
<tr>
<td>muted</td>
<td>muted</td>
<td>静音播放</td>
</tr>
</tbody>
</table>
</div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div>（三）总结</div>
<div>1、音频标签和视频标签使用基本一致</div>
<div>2、浏览器支持情况不同</div>
<div>3、谷歌浏览器把音频和视频自动播放禁止了</div>
<div>4、我们可以给视频标签添加 muted 属性可以自己播放视频，音频不可以</div>
<div>5、视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性</div>
<div>四、H5新增input表单、表单属性</div>
<div>1、</div>
<div>
<table style="height: 357px; width: 671px" border="0" align="left">
<tbody>
<tr>
<td>属性值</td>
<td>说明</td>
</tr>
<tr>
<td>type="email"</td>
<td>限制用户输入必须为Email类型</td>
</tr>
<tr>
<td>type="url"</td>
<td>限制用户输入必须为URL类型</td>
</tr>
<tr>
<td>type="date"</td>
<td>限制用户输入必须为日期类型</td>
</tr>
<tr>
<td>type="time"</td>
<td>限制用户输入必须为时间类型</td>
</tr>
<tr>
<td>type="month"</td>
<td>限制用户输入必须为月类型</td>
</tr>
<tr>
<td>type="week"</td>
<td>限制用户输入必须为周类型</td>
</tr>
<tr>
<td><span style="color: rgba(255, 0, 0, 1)">type="number"</span></td>
<td>限制用户输入必须为数字类型</td>
</tr>
<tr>
<td><span style="color: rgba(255, 0, 0, 1)">type="tel"</span></td>
<td>手机号码</td>
</tr>
<tr>
<td><span style="color: rgba(255, 0, 0, 1)">type="search"</span></td>
<td>搜索框</td>
</tr>
<tr>
<td>type="color"</td>
<td>生成一个颜色选择表单</td>
</tr>
</tbody>
</table>
</div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div>2、</div>
<div>
<table style="height: 362px; width: 822px" border="0" align="left">
<tbody>
<tr>
<td>属性</td>
<td>值</td>
<td>说明</td>
</tr>
<tr>
<td>required</td>
<td>required</td>
<td>表单拥有该属性表示其内容不能为空，必填</td>
</tr>
<tr>
<td><span style="color: rgba(255, 0, 0, 1)">placeholder</span></td>
<td>提示文本（占位符）</td>
<td>表单的提示信息，存在默认值将不显示</td>
</tr>
<tr>
<td>autofocus</td>
<td>autofocus</td>
<td>自动聚焦属性，页面加载完成自动聚焦到指定表单</td>
</tr>
<tr>
<td>autocomplete</td>
<td>off/on</td>
<td>
<p>当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。</p>
<p>默认已经打开，如autocomplete="on"</p>
<p>关闭 autocomplete="off"</p>
<p>---需要放在表单内同时加上name属性</p>
<p>---同时成功提交过</p>
</td>
</tr>
<tr>
<td><span style="color: rgba(255, 0, 0, 1)">multiple</span></td>
<td>multiple</td>
<td>可以多选文件提交</td>
</tr>
</tbody>
</table>
</div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div><br><br>
来源：https://www.cnblogs.com/hunanxyz/p/15657394.html

頁: [1]

琼殿技术论坛's Archiver

HTML5