HTML5部分基础知识

来源：cnblogs　　作者：恶魔岛　　时间：2019/11/8 16:59:19　　对本文有异议

web前端开发

一个XML的简单应用

代码如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 
 3 <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
 4 <!---->
 5     <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2"/>
 6 <!--    -->
 7     <path d="M0,300 S150,100 200,200 S400,400 500,0" fill="none" stroke="red" stroke-width="2"/>
 8 <!---->
 9     <g stroke-width="5" stroke="black">
10 <!--    -->
11         <circle cx="0" cy="-45" r="10" fill="black"/> 
12         <line x1="-20" y1="-30" x2="0" y2="-25"/>
13         <line x1="20" y1="-30" x2="0" y2="-25"/>
14         <line x1="-20" y1="0" x2="0" y2="-10"/>
15         <line x1="20" y1="0" x2="0" y2="-10"/>
16         <line x1="0" y1="-10" x2="0" y2="-45"/>
17         
18     <circle cx="-30" cy="-45" r="10" fill="black"/> 
19         <line x1="-50" y1="-30" x2="-30" y2="-25"/>
20         <line x1="-10" y1="-30" x2="-30" y2="-25"/>
21         <line x1="-50" y1="0" x2="-30" y2="-10"/>
22         <line x1="-10" y1="0" x2="-30" y2="-10"/>
23         <line x1="-30" y1="-10" x2="-30" y2="-45"/>
24 <!---->
25         <animateMotion path="M0,300 S150,100 200,200 S400,400 500,0" dur="8s" repeatCount="indefinite" rotate="auto"/>
26 </g>
27     
28 </svg>

具体请看效果图

　　HTML5新增常用结构性元素

新增的结构性元素

　　section：定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一个新的节。

　　article：它是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其他内容使用。

　　nav：此标签代表页面的一个部分，表示页面中导航链接的部分

　　aside：它用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容事分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。

　　hgroup：hgroup标签是堆网页或区段section的标题元素（h1-h6）进行组合。

　　footer：它定义section或文档的页脚，包含了页面、文章或是部分内容有关的信息。

　　header：定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。

　　figure：用于对元素进行组合。多用于图片与图片描述组合。

在之前的HTML页面中，大家基本上都是用了Div+CSS定义的布局方式

在之前的HTML页面中，大家基本上都是用了Div+CSS布局方式，而这个则精简了许多

新增的常用语义性元素

　　mark：定义带有标记的文本，需要突出显示文本时使用<mark>标签。

　　progress：标签定义运行中的任务进度（进程）.

　　time：表示时间日期值。

　　datalis：此标签规定了用户可见的或隐藏的需求的补充细节。

　　datalist：定义选项列表。请与input元素配合使用你该元素，来定义input可能的值。

　　ruby：此标签定义ruby注释，往往与<rt>和<rp>标签一起配合使用。

　　menu：表示菜单列表。

　　command：commend标签可以定义用户可能调用的命令（比如单选按钮、复选按钮或按钮）。

2语义性元素示例

代码如下：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="utf-8">
 5 <title>2语义性元素示例</title>
 6 </head>
 7 
 8 <body>
 9     <p>I <mark>love</mark> you</p>
10     downloading progress:<progress value="22" max="100"></progress>
11     <p>we open at <time>10:00</time> every morning</p>
12     <p>I have a date on<time datetime="2019-9-10">教师的节日</time></p>
13     <details open>
14         <summary>
15             Copyright 1999-2011.
16         </summary>
17         <p>-by refsnes data.all rights reserved</p>
18         <p>All contedt and graphics on this web site are the property</p>
19     </details>
20     <input list="browers">
21     <datalist id="browers">
22         <option value="ie"></option>
23         <option value="opera"></option>
24         <option value="chrome"></option>
25     </datalist>
26     <ruby>漢
27     <rt>han</rt><rp>汉</rp>
28     </ruby>
29 </body>
30 </html>