web前端开发

一个XML的简单应用

代码如下：

 <?xml version="1.0" encoding="utf-8"?>

 <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">

 <!---->

     <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2"/>

 <!--    -->

     <path d="M0,300 S150,100 200,200 S400,400 500,0" fill="none" stroke="red" stroke-width="2"/>

 <!---->

     <g stroke-width="5" stroke="black">

 <!--    -->

         <circle cx="0" cy="-45" r="10" fill="black"/>

         <line x1="-20" y1="-30" x2="0" y2="-25"/>

         <line x1="20" y1="-30" x2="0" y2="-25"/>

         <line x1="-20" y1="0" x2="0" y2="-10"/>

         <line x1="20" y1="0" x2="0" y2="-10"/>

         <line x1="0" y1="-10" x2="0" y2="-45"/>

     <circle cx="-30" cy="-45" r="10" fill="black"/>

         <line x1="-50" y1="-30" x2="-30" y2="-25"/>

         <line x1="-10" y1="-30" x2="-30" y2="-25"/>

         <line x1="-50" y1="0" x2="-30" y2="-10"/>

         <line x1="-10" y1="0" x2="-30" y2="-10"/>

         <line x1="-30" y1="-10" x2="-30" y2="-45"/>

 <!---->

         <animateMotion path="M0,300 S150,100 200,200 S400,400 500,0" dur="8s" repeatCount="indefinite" rotate="auto"/>

 </g>

 </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语义性元素示例

代码如下：

 <!doctype html>

 <html lang="en">

 <head>

 <meta charset="utf-8">

 <title>2语义性元素示例</title>

 </head>

 <body>

     <p>I <mark>love</mark> you</p>

     downloading progress:<progress value="22" max="100"></progress>

     <p>we open at <time>10:00</time> every morning</p>

     <p>I have a date on<time datetime="2019-9-10">教师的节日</time></p>

     <details open>

         <summary>

             Copyright 1999-2011.

         </summary>

         <p>-by refsnes data.all rights reserved</p>

         <p>All contedt and graphics on this web site are the property</p>

     </details>

     <input list="browers">

     <datalist id="browers">

         <option value="ie"></option>

         <option value="opera"></option>

         <option value="chrome"></option>

     </datalist>

     <ruby>漢

     <rt>han</rt><rp>汉</rp>

     </ruby>

 </body>

 </html>

运行效果如下：

  • HTML5废除的相关元素

能用css代替的元素，比如：basefont、big、center、font、是、strike、tt、u。

不能再使用frame框架，frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架。

只有部分浏览器支持的元素，applet、bgsound、blink、marquee等标签。

其他被废除的元素，比如：废除rb使用ruby替代、废除acronym使用abbr替代、废除dir使用ul替代、废除listing使用pre替代等。

HTML5部分基础知识的更多相关文章

  1. html5系列.基础知识

    兼容性问题 创建一个html5页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. HTML5 Canvas基础知识

    HTML5画布 1.创建一个画布         <canvas id="myCanvas" width="200" height="100&q ...

  3. 前端html5/css基础知识

    https://www.cnblogs.com/clschao/articles/10073124.html

  4. Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识

    基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...

  5. HTML5 Canvas（基础知识）

    最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...

  6. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  7. HTML基础知识

    一个完美的web前端攻城狮,所具备的专业素养有:HTML5.XHTML.CSS3.JavaScript.JQuery.PS.PHP等.所以说,我要学的东西还有很多... 没别得,我也是一个H5的初学者 ...

  8. HTML5零基础学习Web前端需要知道哪些？

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

  9. HTML基础知识总结

    经过这段时间的学习,对于html的一些基础知识有了一定的了解.所谓好记性不如烂笔头,唯有一点点累积,才能汇聚成知识的海洋.现在,我对这段时间的学习做一个总结. 一.HTML的定义 HTML,超文本标记 ...

随机推荐

  1. JavaScript 类型 检测

    前言 ECMAScript中有5种数据类型,分别为Number,Boolean,Null,Undifined和String,以及一种复杂的数据类型Object(由名值对组成,是这门语言所有对象的基础类 ...

  2. html 试题试卷（包含latex）下载成word - - java

    html 试题试卷(包含latex)下载成word 主要目的: 分享将带latex的html格式的试题试卷以word的格式下载,并且加一些灵活的排版样式 接受群众的检阅,获得反馈 骗取打赏,或者git ...

  3. linux shell 统计当前目录下的文件个数

    shell 统计当前目录下文件个数,使用管道组合命令: ls -1 | wc -l 解释: ls -1 表示一行一个列出文件名. wc -l 表示打印统计的行数. 两个命令通过管道连在一起表示打印列出 ...

  4. WebGL简易教程(十一)：纹理

    目录 1. 概述 2. 实例 2.1. 准备纹理 2.2. 配置纹理 2.3. 使用纹理 3. 结果 4. 参考 1. 概述 在之前的之前的教程<WebGL简易教程(九):综合实例:地形的绘制& ...

  5. Java中NIO及基础实现

    NIO:同步非阻塞IO 来源:BIO是同步阻塞IO操作,当线程在处理任务时,另一方会阻塞着等待该线程的执行完毕,为了提高效率,,JDK1.4后,引入NIO来提升数据的通讯性能 NIO中采用Reacto ...

  6. 【USACO 5.3.1】量取牛奶

    农夫约翰要量取 Q(1 <= Q <= 20,000)夸脱(夸脱,quarts,容积单位——译者注) 他的最好的牛奶,并把它装入一个大瓶子中卖出.消费者要多少,他就给多少,从不有任何误差. ...

  7. java23种设计模式（二）抽象工厂模式

    我们接着上一章的工厂方法模式继续学习一下抽象工厂模式. 抽象工厂模式:在工厂模式中,如果有多个产品,则就是抽象工厂模式. 例子: 有一个工厂开了两个子公司,专门用来生产电脑配件键盘和鼠标,一个是联想工 ...

  8. 窥见云技术未来大势，腾讯云Techo开发者大会即将在京召开

    云.物联网.5G.人工智能……一项项技术的突破带来了天翻地覆的变化,开发者们是如何一次次地进行天马行空的创意和极限突破?2019年11月6日-7日,由腾讯云主办的首届Techo开发者大会将在北京嘉里大 ...

  9. Redis学习三（进阶功能）.

    一.排序 redis 支持对 list,set 和 zset 元素的排序,排序的时间复杂度是 O(N+M*log(M)).(N 是集合大小,M 为返回元素的数量) sort key [BY patte ...

  10. Python_深拷贝和浅拷贝

    深拷贝与浅拷贝 import copy v = 123 v1 = copy.copy(v) #浅拷贝 v2 = copy.deepcopy(v) #深拷贝 **拷贝只拷贝可变数据类型,浅拷贝只拷贝第一 ...