当前位置: 首页>前端>正文

h5 可以用 axios h5新的api

1、简化的文档类型和字符集

(1)文档类型


<!DOCTYPE HTML>


  之所以如此简单,是因为HTML5不再是SGML( Standard Generalized Markup language,标准通用标记语言)的一部分,而是独立的标记语言,不需要再考虑文档类型

(2)字符集


<meta charset="UTF-8">


  只需要utf-8即可

2、富有语义化的新结构元素


<header>
  <h1>HTML5新结构<h1/>
  <nav>导航部分</nav>
  <p></p>
</header>
<section></section>
<footer></footer>


section元素 可以认为div是section元素,一个普通的分块元素,可用来定义网站中的特定的可区别的区域

header元素包括标题,logo,导航和其他页眉的内容,可以在网站上加多个header,就像给内容加多个标题

hgroup元素 即将标题进行分组的元素

footer元素版权声明和作者信息,包涵一些链接

nav元素主要用于主导航菜单

article元素独立成文且以其他格式重用的内容应该置于一个article元素中

aside元素用途包涵内容周围的相关内容

3、新增的内联元素  


<figure>
    <p>图片</p>
    <img src="img1.jpg" width="100" height="100">
</figure>


figure元素一个典型用途是包含图像,代码和其他内容对主要内容进行说明,删除不会影响主内容

figcaption元素主要用于figure的标题

mark元素突出显示以表示引用的内容,或者突出显示与用户当前活动相关的内容,他不同于en或strong元素

time元素,当需要在内容中显示时间或者日期时,则建议使用time元素

time元素可以包涵两个属性,一个datetime表示在元素中指定的确切日期和世家,pubdate表示文章或者整个文档发布时time元素所指定的日期和时间

  meter元素用于定义度量衡,规定最大最小宽高,通常要结合css一起作用,效果如下:

h5 可以用 axios h5新的api,h5 可以用 axios h5新的api_h5新特性,第1张

progress元素用于定义一个进度条,有max(完成值)和value(进度条当前值)两个属性。

4、支持动态页面

  1)菜单<menu>

  用于表单中组织控件列表,常用属性如下:

h5 可以用 axios h5新的api,h5 可以用 axios h5新的api_表单_02,第2张

定义一个选择列表的例子:


<menu>
    <li><input type="checkbox"/>a</li>  
    <li><input type="checkbox"/>b</li> 
     <li><input type="checkbox"/>c</li> 
</menu>		<!--目前主流浏览器都不支持-->


  2)右键菜单<menitem>

h5 可以用 axios h5新的api,h5 可以用 axios h5新的api_表单_03,第3张

  3)在<script>标签中使用async属性

  用于指定异步执行的脚本

  4)<detail>元素

  用于描述文档或文档某个部分的细节


<details>
    <summary>details</summary>
    <p>用于描述文档细节<p>
</details>


  效果:

  

h5 可以用 axios h5新的api,h5 可以用 axios h5新的api_h5新特性_04,第4张

展开后:

  

h5 可以用 axios h5新的api,h5 可以用 axios h5新的api_数据_05,第5张

5、全新的表单设计


  HTML5 新的 Input 类型

  HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

  • email、url、number、range、Date pickers (date, month, week, time, datetime, datetime-local)、search、color


  HTML5 的新的表单元素:

  • datalist、keygen、output


  新的 form 属性:

  • autocomplete、novalidate

  新的 input 属性:

  • autocomplete、autofocus、form、form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)、height 和 width、list、min, max 和 step、multiple
  • pattern (regexp)、placeholder、required

  autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
  当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
  实例:


<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
<p>请填写并提交此表单,然后重载页面,来查看自动完成功能是如何工作的。</p>


6、强大的绘图功能和多媒体功能

可以动态地绘制各种效果精美的图形,结合js就能让网页图形动起来

绘制可伸缩的矢量图形

和 video 可以不依赖任何插件播放音频和视频

7、打造桌面应用的一系列新功能

Web Storage(为HTML5开发移动应用提供了基础)

web应用程序中,数据处理都由服务器处理,html只负责展示数据,cookie只能存储少量的数据,跨域通信只能通过web服务器。

扩充了文件存储的能力,多达5MB,支持WebSQL等轻量级数据库,可以开发支持离线web应用程序。

HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少网络流量。

“操作记录”,而不占用任何后台资源,减轻设备硬件压力,增加运行流畅性。

8、获取地理位置信息

Geolocation API,可以通过浏览器获取用户的地理位置,不再需要借助第三方地址数据库或专业的开发包,提供很大的方便。

9、支持多线程

Web Worker对象,可以在后台运行js脚本,也就是支持多线程,从而提高了页面加载效率。


10、history对象


History 对象包含用户(在浏览器窗口中)访问过的 URL。

1)history.go(); 加载 history 列表中的某个具体页面。


2)history.back(); 加载 history 列表中的前一个 URL。


3)history.forward();加载 history 列表中的下一个 URL。


11、废弃的标签

  1.表现性元素

  2.框架类元素

  3.属性类

  4.其他类



https://www.xamrdz.com/web/2mu1925834.html

相关文章: