2 3
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新增常用结构性元素
新增的结构性元素ction:定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容,会在文档流中开始一个新的节。
article:quitted它是一个特殊的ction标签,它比ction具有更明确的语义,它代表一个独立的、完整的相关内容块,可独立于页面其他内容使用。
nav:此标签代表页面的一个部分,表示页面中导航链接的部分
aside:它用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容事分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。
hgroup:hgroup标签是堆网页或区段ction的标题元素(h1-h6)进行组合。
footer:它定义ction或文档的页脚,包含了页面、文章或是部分内容有关的信息。
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 chart="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 rerved</p>18 演讲比赛主持稿 <p>all contedt and graphics on this web site are the property</p>19 </details>20 &l春晚节目名单t;input list="browers">21 <datalist id="br中国新歌声总决赛owers">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>
运行效果如下:
html5废除的相关元素能用css代替的元素,比如:bafont、big、center、font、是、strike、tt、u。
不能再使用frame框架,framet、frame、noframes。html5中不支持frame框架,只支持iframe框架。
只有部分浏览器支持的元素,applet、bgsound、blink、marquee等标签。
其他被废除的元素,比如:废除rb使用ruby替代、废除acronym使用abbr替代、废除dir使用ul替代、废除listing使用pre替代等。
本文发布于:2023-04-03 09:10:32,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/e600284a09738f896b9f8713bf0b374f.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:HTML5部分基础知识.doc
本文 PDF 下载地址:HTML5部分基础知识.pdf
留言与评论(共有 0 条评论) |