HTML5简单笔记

最新推荐文章于 2024-10-13 21:08:36 发布

Kim丶

最新推荐文章于 2024-10-13 21:08:36 发布

阅读量1.2k

点赞数 1

分类专栏： web 文章标签： html5 html5使用

本文链接：https://blog.csdn.net/u010689561/article/details/82934651

版权

本文详细介绍了HTML5的新标签和特性，包括语义标签如<header>, <nav>, <main>, <footer>等，新增的表单元素和输入类型，多媒体标签<audio>和<video>的使用，网络状态改变事件，全屏接口，文件读取接口，拖拽接口，以及Web Storage和Web Socket等。此外，还探讨了不同浏览器的兼容性和多浏览器支持的解决方案。" 96357248,6870083,Android 源码解析：选择解锁方式与图案密码设置,"['Android开发', '源码分析', '安全', '用户界面']

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

HTML5新标签与特性

w3c手册中文官网 : http://w3school.com.cn/

语义标签

注意：在IE9及以上才支持，**但可能解析为行内元素，需转换为块级元素。**IE8及以下可以引入第三方插件html5shiv.js来达到兼容。

header：定义文档的页眉头部
nav：定义导航链接的部分
main：定义主要内容
footer：定义文档或节的页脚底部
article：定义文章。
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容侧边

<header> 语义 :定义页面的头部  页眉</header>
<nav>  语义 :定义导航栏 </nav> 
<main> 语义：主要内容</main>
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义:  定义文章</article>
<section> 语义： 定义区域</section>
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>

新增表单元素

datalist 标签定义选项列表。请与 input 元素配合使用该元素(各浏览器略有不同，少用)

<input type="text" value="输入明星" list="star"/><!-- input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  
      <option value="刘德华" label="提示信息（辅助）"></option>
      <option value="刘若英" label="提示信息（辅助）"></option>
      <option value="刘晓庆" label="提示信息（辅助）"></option>
      <option value="郭富城" label="提示信息（辅助）"></option>
      <option value="张学友" label="提示信息（辅助）"></option>
      <option value="郭郭" label="提示信息（辅助）"></option>
</datalist>

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<fieldset>
    <legend>用户登录</legend>  <!-- 标题 -->
    用户名: <input type="text"><br /><br />
    密　码: <input type="password">
</fieldset>

新增的input type属性值：

类型	使用示例	含义
email	`<input type="email">`	输入邮箱格式
tel	`<input type="tel">`	输入手机号码格式
url	`<input type="url">`	输入url格式
number	`<input type="number">`	输入数字格式
search	`<input type="search">`	搜索框（体现语义化）
range	`<input type="range">`	自由拖动滑块
time	`<input type="time">`	小时分钟
date	`<input type="date">`	年月日
datetime	`<input type="datetime">`	时间
month	`<input type="month">`	月年
week	`<input type="week">`	星期年
color	`<input type="color">`	拾色器