HTML5

坏坏惹人爱 發表於 2020-5-30 18:10:00

<h1>一、什么是HTML5</h1>
<h2>1.1 HTML5 简介</h2>
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，作为新HTML语言，具有新的元素、属性和行为
 
XHTML可扩展超文本标记语言
是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求，基础班学习的是XHTML
HTML5
有更大的技术集，允许更多样化和强大的网站和应用程序
增加了新特性：语义特性，本地存储特性，设备兼容特性，链接特性，网页多媒体特性，三维、图形以及特效特性，性能与集成特性，css特性
 
<h2>1.2 广义的HTML5</h2>
广义的HTML5是HTML5本身+CSS+JavaScript
HTML5的一些特性仍让不被某些浏览器支持，但是他是一种发展趋势
 
<h1>二、HTML5新增语义化标签</h1>
<ol>
<li><header>：头部标签</li>
<li><nav>：导航标签</li>
<li><article>：内容标签</li>
<li><section>：块级标签</li>
<li><aside>：侧边栏标签</li>
<li><footer>：尾部标签</li>
</ol>
<img src="https://img2020.cnblogs.com/blog/1822067/202005/1822067-20200529111138201-1200260205.png">
 
 
 注意：以前经常使用的div标签是没有语义的，
<ul>
<li>这种语义化标准主要针对搜索引擎的</li>
<li>这些新标签也可以使用多次的</li>
<li>在IE9中，需要把这些元素转换为块级元素</li>
<li>其实我们移动端更喜欢使用这些标签</li>
</ul>
 
<h1>三、HTML5新增多媒体标签</h1>
音频：<audio>
视频：<video>
<h3>3.1<audio>音频标签</h3>
<h3>1.音频格式</h3>
<img src="https://img2020.cnblogs.com/blog/1822067/202005/1822067-20200529112010045-70858529.png">
 
 
<h3>2.使用方法</h3>
<div class="cnblogs_code">
<pre><audio src="./media/snow.mp3" controls autoplay></audio></pre>
</div>
 
<div class="cnblogs_code">
<pre>
<audio controls>
<source src="./media/snow.mp3" type="audio/mpeg" />
<source src="./media/snow.ogg" type="audio.mpeg" /> 您的浏览器不支持audio播放 
</audio></pre>
</div>
 
<h3>3.常见属性</h3>
<img src="https://img2020.cnblogs.com/blog/1822067/202005/1822067-20200529112313953-1366313590.png">
 
 
 谷歌浏览器禁用了autoplay属性
 
 
<h2> 3.2 <video>视频标签</h2>
<h3>1.视频格式</h3>
<img src="https://img2020.cnblogs.com/blog/1822067/202005/1822067-20200529114410122-1937531400.png">
 
 
<h3>2.语法格式</h3>
<div class="cnblogs_code">
<pre> <video src="./media/video.mp4" controls="controls"></video></pre>
</div>
 
<h3>3. 参数属性</h3>
<img src="https://img2020.cnblogs.com/blog/1822067/202005/1822067-20200529114618013-819653070.png">
 
<h3> 4. 使用方法</h3>
<div class="cnblogs_code">
<pre>


<video controls="controls" autoplay muted loop poster="./media/pig.jpg">
 <source src="./media/video.mp4" type="video/mp4">
 <source src="./media/video.ogg" type="video/ogg">
</video></pre>
</div>
多媒体标签总结
   - 音频标签与视频标签使用基本一致
   - 多媒体标签在不同浏览器下情况不同，存在兼容性问题
   - 谷歌浏览器把音频和视频标签的自动播放都禁止了
   - 谷歌浏览器中视频添加 muted 标签可以自己播放
   - 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册
<h1>四、HTML5新增input表单、表单属性</h1>
<img src="https://img2020.cnblogs.com/blog/1822067/202005/1822067-20200530175049181-731379612.png">
 
 
 
 
 
 
这些HTML5 的表单大量应用于移动端，PC段不是很常用
<div class="cnblogs_code">
<pre><input type="email"></pre>
</div>
<h3> </h3>
<h3>新增属性</h3>
<img src="https://img2020.cnblogs.com/blog/1822067/202005/1822067-20200530175850287-724922119.png">
 
 
placeholder和value属性的区别在于：placeholder的字体是灰色的，而且点击输入框可以直接定位到开始，而value属性字体是黑色的，点击框框里面的内容要手动清除 
<div class="cnblogs_code">
<pre><form action="">
 用户名：<input type="text" name="username" autocomplete="on">
 <input type="submit" value="提交">
</form></pre>
</div>
 
<img src="https://img2020.cnblogs.com/blog/1822067/202005/1822067-20200530205325669-1110881527.png">
  
来源：https://www.cnblogs.com/ccv2/p/12986705.html

頁: [1]

琼殿技术论坛's Archiver

HTML5