关于html5的新知识

Html大前端

       发布时间为2014年

       为什么推出html5

              手机移动，pc电脑，pad 兼容优化

              用户体验上做出的优化

       Html5更新了哪些技术

              新增了语义化标签、header、footer、main

              新增了属性  placeholder

              新增了api（数据接口。操作）七天免登录

       强大之处

              面试问题：说出h5新增的15个标签

              单页面应用 spa

              替代部分的原生开发

新增的哪些语义化标签

Section： 元素 表示页面中的一个内容区块

header：元素 表示页面中一个内容区块或整个页面的标题

nav、元素 表示页面中导航链接部分

main、元素 表示页面中的主要的内容

aside、元素 在article之外的，与article内容相关的辅助信息

articl、元素 表示一块与上下文无关的独立的内容

footer、元素 表示页面中一个内容区块或整个页面的脚注

figure、元素 表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

figcaption、

hgroup、标题组 类似ul>li

mark，高亮 文本自带黄色背景颜色

dialog、标签定义对话框或窗口

canvas、画布 – 三阶段才学习

video、视频标签

audio、音频标签

属性open     规定 dialog 元素是活动的，用户可与之交互。

<dialog open>这是打开的对话窗口</dialog>

音视频的使用

注意: 之前浏览器都是支持显示并且自动播放音视频的,后来为了追求浏览

器载速度和性能，全部禁止

           音视频的使用：

音频标签 audio

视频标签 video

   属性

    - src        路径

    - controls   控制属性：如果出现该属性，则向用户显示控件，比如播放按钮。

    - autoplay  自动播放属性：如果出现该属性，则视频在就绪后马上播放。

    - muted    属性：静音属性。

    - poster    属性：规定视频正在下载时显示的图像，直到用户点击播放按钮

-loop      属性：重复播放属性。

       音视频都有浏览器兼容的问题使用以下格式：

              <audio controls autoplay >

               这里添加资源

               <source src="images/晴天.mp3"> 不同的浏览器兼容属性都不同。

               <source src="images/晴天.ogg">

             </audio>

以下是浏览器兼容的音视频类型

Html5智能表单的使用：

Type=“email” 限制用户必须输入email类型

Type=“number” 限制用户必须输入数字类型

Type=“url” 限制用户必须输入url类型

Type=“range” 产生一个滑动条表单

Type=“search” 产生一个搜索意义的表单

Type=“color” 生成一个颜色选择的表单

Type=“time” 限制用户必须输入时间类型

Type=“date” 限制用户必须输入时间类型

Type=“month” 限制用户必须输入月类型

Type=“week” 限制用户必须输入周类型

Type=“datetime-local” 选取本地时间

表单控件必须包含在form表单内才能使用

<form action="" novalidate>

        邮件: <input type="email" required>

        数字: <input type="number" min="0" max="10" step="4">步幅 间隔

        地址: <input type="url">

        滑块:0 <input type="range" min="0" max="10" > 10<br> <!-- 0~100 -->

        搜索: <input type="search">

        颜色: <input type="color">

        时分: <input type="time">

        年月日: <input type="date">

        年月: <input type="month">

        周数: <input type="week">

        本地时间: <input type="datetime-local">

        <input type="submit">

</form>

新增的属性：

       placeholder属性：文本框处于未输入状态时文本框中显示的输入提示。不占位置

autofocus 属性：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得焦点，一个页面只能有一个。

       autocomplete属性：输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。属性值：on/off。on可是显示指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以将该datalist元素中的数据作为候补输入的数据在文本框中显示：简单的理解就是在输入框内增加可向下显示的历史搜索记录，增加属性和属性值autocomplete="on/ off "表示打开历史搜索记录属性或者关闭这个属性q

       novalidate取消验证 可以对form表单添加novalidate属性，即使form表单中的某一个input添加了required，也将不进行验证partten，input属性中required表示验证表单内的内容是否输入正确，如果在父级form内添加novalidate表示不用验证即可提交

       multiple:可以输入一个或多个值，每个值之间用逗号分开     例：<input type=“email” multiple/> 还可以应用于file （file表示选择或者上传本地的某个文件）