HTML5新结构标签和移动端页面布局

最新推荐文章于 2024-07-16 07:44:56 发布

我是楠楠

最新推荐文章于 2024-07-16 07:44:56 发布

阅读量1.6k

点赞数

分类专栏：技术文章文章标签： HTML5新结构标签和移动端页面布局

本文链接：https://blog.csdn.net/qq_40208605/article/details/80842873

版权

本文详细介绍了HTML5中的新结构标签，如header、nav、article、section、aside和footer，并提及了PC端的兼容性处理。此外，还讲解了HTML5新增的表单控件和属性，如网址、邮箱、日期等输入类型，以及音频和视频标签的使用。在移动端页面布局部分，讨论了原生App、混合型App和Web App的区别，视口、视网膜屏幕的解决方案，流体布局、响应式布局、基于rem的布局和弹性盒模型布局的应用。

摘要由CSDN通过智能技术生成

--------------------HTML5新结构标签--------------------
1、h5新增的主要语义化标签如下：
　　1、header 页面头部、页眉
　　2、nav 页面导航
　　3、article 一篇文章
　　4、section 文章中的章节
　　5、aside 侧边栏
　　6、footer 页面底部、页脚

pc端兼容需要引用对应的js脚本
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

2、HTML5 新增表单控件：网址邮箱日期时间星期数量范围电话颜色搜索
　　<label>网址:</label><input type="url" name="" required><br><br>
　　<label>邮箱:</label><input type="email" name="" required><br><br>
　　<label>日期:</label><input type="date" name=""><br><br>
　　<label>时间:</label><input type="time" name=""><br><br>
　　<label>星期:</label><input type="week" name=""><br><br>
　　<label>数量:</label><input type="number" name=""> <br><br>
　　<label>范围:</label><input type="range" name=""><br><br>
　　<label>电话:</label><input type="tel" name=""><br><br>
　　<label>颜色:</label><input type="color" name=""><br><br>
　　<label>搜索:</label><input type="search" name=""><br><br>
新增常用表单控件属性：
　　1、placeholder 设置文本框默认提示文字
　　2、autofocus 自动获得焦点
　　3、autocomplete 联想关键词

3、HTML5 音频和视频
　　音频：audio标签
　　格式：ogg、wav、mp3
　　对应属性：
　　　　1、autoplay 自动播放
　　　　2、controls 显示播放器
　　　　3、loop 循环播放
　　　　4、preload 预加载
　　　　5、muted 静音　　

[AppleScript] 纯文本查看复制代码

1

2

3

4

 
         1 
         < 
         audio  autoplay controls loop preload 
         > 
        
 
         2     
         < 
         ! 
         -- <source src="source/audio.mp3" type=""> --> 
        
 
         3     
         < 
         source src 
         = 
         "source/audio02.wav" 
        