当前位置: 代码迷 >> 综合 >> H5总结(day01)
  详细解决方案

H5总结(day01)

热度:53   发布时间:2023-10-26 18:20:42.0

1.H5优势:替代插件,画布,本地存储,数据提取,位置服务,多媒体

2.增加了有语义的结构标签

<header>

<nav>

<article>

<section>

<aside>

<footer>

<hgroup>

<figure>

<figcaption>

3. H5的差异

A. 文档类型

B. 语言lang

C. 不区分大小写,可以混合使用

D. 允许了布尔值(虽然在4.01有的松散规则下也可以)

E. 可以用引号,单引号,不要引号。

F. 可以省略结束标签,例如<p>测试

G. 可以完全省略的标签(比如bodyhtml,head等,但会降低可读性)

 

4. 新增及删除标签

A. 新增:结构标签,表单标签,媒体标签,其他功能标签(例如:mark标注,progress进度条<max value>time发布日期、更新日期,ruby,rt,wbr,canvas,details,datalist,source等)

B. 删除:能被css替代(比如font),frame

<embed></embed>

H5表单标签,媒体标签,其他标签,语义结构标签


练习:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="radio" value="1" name="a" />男
<inpUt tYpe="radio" value="2" name="a" checked/>女
<!--
//引号,双引号,单引号
//1.文档类型,2.语言,3.布尔值,4.属性的引号,5.可省略结束标签
//不允许写结束符的标签:area,basebr,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr
   //可以省略结束语的标签:li,dt,dd,p,rt,optgroup,option,colgroup,thread,tbody,tr,td,th
   //可以完全省略的标签:html,head,body,colgroup,tbody
   //新增的结构标签:section,article,aside,header,hgroup
//新增/删除标签
//a.结构标签(section,article,aside,header,hgroup,footer,nav,figure)
//  表单标签
//  媒体标签(video,audio,embed)
//  其他功能标签
//b.可以用CSS替代的标签,不再使用frame,只有个别浏览器支持的标签,其他不常用的标签
-->
<br />
<hr />
<form action="" method="">
电子邮箱:<input type="email" name="email" />
日历:<input type="date" name="time" />
范围range:<input type="range" name="range" min="0" max="100"/>
主页:<input type="url" name="url" />
number:<input type="number" name="number" />
搜索:<input type="search" name="search" />
</form>
<p>i want to show <mark>mark</mark></p>
<progress max="100" value="50"></progress>
<h3>time</h3>
更新日期:<time datetime="2013-10-11T09:00">9:00</time>
发布日期:<time datetime="2013-10-11T09:00" pubdate>9:00</time>
<h3>ruby</h3>
<ruby>
图片
<rt>一张用于显示图片的东西</rt>
<rp>一张用于显示图片的东西</rp>
</ruby>
<h3>wbr</h3>
<p>如果想要学好JAVA,必须勤加练习
 <wbr></wbr>
 H5新增了很多标签
</p>
<details>
<summary>我的同学</summary>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</details>
<!--
        作者:464525021@qq.com
        时间:2017-11-28
        描述:wbr转换行,若宽度不够,就换行。ruby用处   pubdate,datalist像select
      -->
<h3>keygen</h3>
<form action="" method="">
用户名:
<label><input type="text" name="username"/></label>
加密方式:
<keygen name="security" />
<input type="submit" value="提交" />
</form>

<h3>menu</h3>
<menu type="toolbar">
<li>
<input type="checkbox" />
red
</li>
<li>
<input type="checkbox" />
blue
</li>
</menu>
</body>
</html>


浏览器显示:

无法显示