整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5 实体名称A

非下表中的所有实体都能在所有的浏览器中正确地显示。

目前,IE 11 是唯一一个能正确显示所有 HTML5 实体的浏览器。

字符实体名称十六进制
ÁAacute000C1
áaacute000E1
ĂAbreve00102
ăabreve00103
∾ac0223E
∿acd0223F
∾̳acE0223E + 00333
ÂAcirc000C2
âacirc000E2
´acute000B4
АAcy00410
аacy00430
ÆAElig000C6
æaelig000E6
⁡af02061
𝔄Afr1D504
𝔞afr1D51E
ÀAgrave000C0
àagrave000E0
alefsym02135
ℵaleph02135
ΑAlpha00391
αalpha003B1
ĀAmacr00100
āamacr00101
⨿amalg02A3F
&amp00026
⩓And02A53
and02227
⩕andand02A55
⩜andd02A5C
⩘andslope02A58
⩚andv02A5A
ang02220
⦤ange029A4
∠angle02220
∡angmsd02221
⦨angmsdaa029A8
⦩angmsdab029A9
⦪angmsdac029AA
⦫angmsdad029AB
⦬angmsdae029AC
⦭angmsdaf029AD
⦮angmsdag029AE
⦯angmsdah029AF
∟angrt0221F
⊾angrtvb022BE
⦝angrtvbd0299D
∢angsph02222
Åangst000C5
⍼angzarr0237C
ĄAogon00104
ąaogon00105
𝔸Aopf1D538
𝕒aopf1D552
≈ap02248
⩯apacir02A6F
⩰apE02A70
≊ape0224A
≋apid0224B
'apos00027
⁡ApplyFunction02061
≈approx02248
≊approxeq0224A
ÅAring000C5
åaring000E5
𝒜Ascr1D49C
𝒶ascr1D4B6
≔Assign02254
*ast0002A
asymp02248
≍asympeq0224D
ÃAtilde000C3
ãatilde000E3
ÄAuml000C4
äauml000E4
∳awconint02233
⨑awint02A11

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

小伙伴们,感觉我的分享很不错的别忘记“赞赏”我一下哟!

VG 动画有很多种实现方法,也有很大SVG动画库,现在我们就来介绍 svg动画实现方法都有哪些?

一、SVG 的 animation

SVG animation 有五大元素,他们控制着各种不同类型的动画,分别为:

  • set
  • animate
  • animateColor
  • animateTransform
  • animateMotion

1.1、set

set 为动画元素设置延迟,此元素是SVG中最简单的动画元素,但是他并没有动画效果。

使用语法:

<set attributeName="" attributeType="" to="" begin="" />
  • attributeName :是要改变的元素属性名称。
  • attributeType :是表明attributeName属性值的列表,支持三个固定参数 CSS/XML/auto,如x,y以及transform属于XML,opacity属于CSS。auto是浏览器自动判别的意思,也是默认值,如果你不知道该选哪个就填auto,浏览器自己判别。
  • to :动画结束的属性值。
  • begin :动画延迟时间。

eg:绘制一个半径为200的圆,4秒之后,半径变为50。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <set attributeName="r" attributeType="XML" to="50" begin="4s" />
 </circle>
</svg>

1.2、animate

是基础的动画元素,实现单属性的过渡效果。

使用语法:

<animate 
 attributeName="r" 
 from="200" to="50" 
 begin="4s" dur="2s" 
 repeatCount="2"
></animate>
  • from :过渡效果的属性开始值。
  • to:过渡效果的属性结束值。
  • begin:动画开始时间。
  • dur:动画过渡时间,控制动画速度。
  • repeatCount:动画重复次数。

eg:绘制一个半径为200的圆,4秒之后半径在2秒内从200逐渐变为50。

<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
 <animate attributeName="r" from="200" to="50" 
  begin="4s" dur="2s" repeatCount="2"></animate>
</circle>

1.3、animateColor

控制颜色动画,animate也可以实现这个效果,所以该属性目前已被废弃。

1.4、animateTransform

实现transform变换动画效果,与css3的transform变换类似。实现平移、旋转、缩放等效果。

使用语法:

<animateTransform attributeName="transform"  type="scale" 
 from="1.5" to="0" 
 begin="2s"  dur="3s" 
 repeatCount="indefinite"></animateTransform>
  • repeatCount:重复次数,设置为 indefinite 表示无限循环,一直执行。
  • type:添加 transform 变换类型。
  • eg:绘制一个半径为200的圆,4秒之后开始缩放,在2秒内从1.5缩小到0倍。
<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <animateTransform attributeName="transform" begin="4s"  
   dur="2s" type="scale" from="1.5" to="0" 
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

1.5、animateMotion

可以定义动画路径,让SVG各个图形,沿着指定路径运动。

使用语法:

<animateMotion 
 path="M 0 0 L 320 320" 
begin="4s" dur="2s"></animateMotion>
  • path:定义路径,使用语法与《HTML5(八)——SVG 之 path 详解》path的d属性一致。
  • begin:延迟时间。
  • dur:动画执行时间。

eg:绘制一个半径为10的圆,延迟4秒从左上角运动的右下角。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">
  <animateMotion 
   path="M 0 0 L 320 320" 
   begin="4s" dur="2s"
   ></animateMotion>
 </circle>
</svg>

实际制作动画的时候,动画太单一不酷,需要同时改变多个属性时,上边的四种元素可以互相组合,同类型的动画也能组合。以上这些元素虽然能够实现动画,但是无法动态地添加事件,所以接下来我们就看看 js 如何制作动画。

二、JavaScript 控制

上篇文章我们介绍js可以操作path,同样也可以操作SVG的内置形状元素,还可以给任意元素添加事件。

给SVG元素添加事件方法与普通元素一样,可以只用on+事件名 或者addEventListener添加。

eg:使用SVG绘制地一条线,点击线条地时候改变 x1 ,实现旋转效果。

<svg width="800" height="800" id="svg">
    <line id="line" x1="100" y1="100" 
    x2="400" y2="300" 
    stroke="black" stroke-width="5"></line>  
  </svg>
<script>
 window.onload = function(){
  var line = document.getElementById("line")
  line.onclick = function(){
   let start = parseInt(line.getAttribute("x1")),
       end=400,dis = start-end
   requestAnimationFrame(next)
   let count = 0;
   function next(){
    count++
    let a = count/200,cur = Math.abs(start+ dis*a)
    line.setAttribute('x1',cur)
    if(count<200)requestAnimationFrame(next)
   }
  }
 }
</script>

js制作的SVG动画,主要利用 requestAnimationFrame 来实现一帧一帧的改变。

我们上述制作的 SVG 图形、动画等,运行在低版本IE中,发现SVG只有IE9以上才支持,低版本的并不能支持,为了兼容低版本浏览器,可以使用 VML ,VML需要添加额外东西,每个元素需要添加 v:元素,样式中还需要添加 behavier ,经常用于绘制地图。由于使用太麻烦,所以我们借助 Raphael.js 库。

三、Raphaël.js (拉斐尔)

Raphael.js是通过SVG/VML+js实现跨浏览器的矢量图形,在IE浏览器中使用VML,非IE浏览器使用SVG,类似于jquery,本质还是一个javascript库,使用简单,容易上手。

使用之前需要先引入Raphael.js库文件。cdn的地址为:https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js

3.1、创建画布

Rapheal有两种创建画布的方式:

第一种:浏览器窗口上创建画布

创建语法:

var paper = Raphael(x,y,width,height)

x,y是画布左上角的坐标,此时画布的位置是绝对定位,有可能会与其他html元素重叠。width、height是画布的宽高。

第二种:在一个元素中创建画布

创建语法:

var paper = Raphael(element, width, height);

element是元素节点本身或ID width、height是画布的宽度和高度。

3.2、绘制图形

画布创建好之后,该对象自带SVG内置图形有矩形、圆形、椭圆形。他们的方法分别为:

paper.circle(cx, cy, r); // (cx , cy)圆心坐标 r 半径
paper.rect(x, y, width, height, r); // (x,y)左上角坐标 width宽度 height高度 r圆角半径(可选)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圆心坐标 rx水平半径 ry垂直半径

eg:在div中绘制一个圆形,一个椭圆、一个矩形。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 paper.circle(150,150,150)
 paper.rect(0,0,300,300)
 paper.ellipse(150,150,100,150)
</script>

运行结果如下:

除了简单图形之外,还可以绘制复杂图形,如三角形、心型,这时就使用path方法。

使用语法:paper.path(pathString)

pathString是由一个或多个命令组成,每个命令以字母开始,多个参数是由逗号分隔。

eg:绘制一个三角形。

let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")

还可以绘制文字,如果需要换行,使用 \n 。

文字语法:paper.text(x,y,text)

(x,y)是文字坐标,text是要绘制的文字。

3.3、设置属性

图形绘制之后,我们通常会添加stroke、fill、stroke-width等让图形更美观,Raphael使用attr给图形设置属性。

使用语法:circle.attr({"属性名","属性值","属性名","属性值",...})

如果只有属性名没有属性值,则是获取属性,如果有属性值,则是设置属性。

注意:如果只设置一个属性时,可以省略‘{}’。如:rect.attr('fill','pink')

eg:给上边的矩形添加边框和背景色。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 let rect = paper.rect(100,100,150,200)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
</script>

3.4、添加事件

RaphaelJS一般具有以下事件:
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及对应的解除事件,只要在前面加上“un”就可以了(unclick、undblclick)。

使用语法:

obj.click(function(){
 //需要操作的内容
})

3.5、添加动画

animate为指定图形添加动画并执行。

使用语法:

obj.animate({
 "属性名1":属性值1,
 "属性名2":属性值2,
  ...
},time,type)

属性名和属性值就根据你想要的动画类型加就ok。

time:动画所需时间。

type:指动画缓动类型。常用值有:

  • linear - 线性渐变
  • ease-in | easeIn | < - 由慢到快
  • ease-out | easeOut | > - 由快到慢
  • ease-in-out | easeInOut | <> - 由慢到快再到慢
  • back-in | backIn - 开始时回弹
  • back-out | backOut - 结束时回弹
  • elastic - 橡皮筋
  • bounce - 弹跳

eg:点击矩形,矩形缓缓变大。

<div id="box"></div>
<script>
 var paper = Raphael("box",800,500)
 let rect = paper.rect(100,100,150,100)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
 rect.attr('fill','pink')
 rect.click(function(){
  rect.animate({
   "width":300,
   "height":300
  },1000,"bounce")
 })
</script>

复制上边的代码,分别在各个浏览器和低版本IE浏览器运行,发现都可以正常运行。SVG的动画库挺多了,我们介绍了拉斐尔,有兴趣的小伙伴可以自行找找其他库。

.标签

1.1meta标签

meta主要用于设置网页中的一些元数据,元数据不是给用户看 charset 指定网页的字符集 name 指定的数据的名称 content 指定的数据的内容

keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

description 用于指定网站的描述

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

将页面重定向到另一个网站

1.2title标签

title标签的内容会作为搜索结果的超链接上的文字显示

<title>Document</title>

1.3标题

  • h1 ~ h6 一共有六级标题
  • 从h1~h6重要性递减,h1最重要,h6最不重要
  • h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1
  • 标题元素是块元素
  • <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

  • hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup
  • <hgroup>
    <h1>回乡偶书二首</h1>
    <h2>其一</h2>
    </hgroup>
  • 其他标签
    • p标签表示页面中的一个段落
    • <p>在p标签中的内容就表示一个段落</p>
    • em标签用于表示语音语调的一个加重
    • <p>今天天气<em></em>不错!</p>
    • strong表示强调,重要内容!
    • <p>你今天必须要<strong>完成作业</strong></p>
    • blockquote 表示一个长引用
    • <blockquote>
      这句话我是从来没有说过的!
      </blockquote>
    • q表示一个短引用
    • 子曰<q>学而时习之,乐呵乐呵!</q>
    • br标签表示页面中的换行
    • <br>

1.4布局标签

header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网页的底部 nav 表示网页中的导航 aside 和主体相关的其他内容(侧边栏) article 表示一个独立的文章 section 表示一个独立的区块,上边的标签都不能表示时使用section

div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素

span 行内元素,没有任何的语义,一般用于在网页中选中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分类

1.1.1.1有序列表

使用ol标签来创建无序列表,使用li表示列表项

<ul>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ul>

1.1.1.2 无序列表

使用ul标签来创建无序列表,使用li表示列表项

<ol>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ol>

1.1.1.3定义列表

使用dl标签来创建一个定义列表, 使用dt来表示定义的内容,使用dd来对内容进行解释说明

<dl>
       <dt>结构</dt>
       <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
       <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
       <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
   </dl>

1.1.1.4列表之间可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超链接

1.6.1 作用

超链接可以让我们从一个页面跳转到其他页面, 或者是当前页面的其他的位置

1.6.2 定义

使用 a 标签来定义超链接

<a href="https://www.baidu.com">超链接</a>

1.6.3 属性

1.6.3.1属性1:href

指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素

1.6.3.2 属性2:target

用来指定超链接打开的位置

_self 默认值 在当前页面中打开超链接

_blank 在一个新的要么中打开超链接

<a href="07.列表.html" target="_blank">超链接</a>

1.6.4其他

将#作为超链接的路径的展位符使用

javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生

将超链接的href属性设置为#,这样点击超链接以后 页面不会发生跳转,而是转到当前页面的顶部的位置

跳转到页面的指定位置,只需将href属性设置 #目标元素的id属性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三个自然段</a>
   <br><br>
<p>
  内容多一点
</p>
<a href="#">这是一个新的超链接</a>
   <br><br>
<a href="javascript:;">这是一个新的超链接</a>
   <br><br>
<a id="bottom" href="#">回到顶部</a>

1.7图片标签

img标签来引入外部图片,img标签是一个自结束标签

属性:src 属性指定的是外部图片的路径(路径规则和超链接是一样的)

alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示

<img src="./img/1.gif" alt="松鼠">

1.8内联框架

用于向当前页面中引入一个其他页面

  • src 指定要引入的网页的路径
  • frameborder 指定内联框架的边框
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音视频标签

1.8.1音频

audio 标签用来向页面中引入一个外部的音频文件的

1.8.1.1 属性

  • controls 是否允许用户控制播放
  • autoplay 音频文件是否自动播放
    • 如果设置了autoplay 则音乐在打开页面时会自动播放
  • loop 音乐是否循环播放
<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通过src来指定外部文件的路径以外,还可以通过source来指定文件的路径

<audio controls>
       <!-- 对不起,您的浏览器不支持播放音频!请升级浏览器!-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2视频

与 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>


2.表格table

  • 在table中使用tr表示表格中的一行,有几个tr就有几行
  • 在tr中使用td表示一个单元格,有几个td就有几个单元格
  • rowspan 纵向的合并单元格
  • colspan 横向的合并单元格
<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

长表格

  • 可以将一个表格分成三个部分:
    • 头部 thead
    • 主体 tbody
    • 底部 tfoot
  • th 表示头部的单元格
<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合计</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合计</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格样式

  • border-spacing: 指定边框之间的距离
border-spacing: 0px;
  • border-collapse: collapse; 设置边框的合并
border-collapse: collapse;
  • 如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全都放到tbody中tr不是table的子元素

3.表单(form)

  • 使用form标签来创建一个表单
  • action 表单要提交的服务器的地址
  • 数据要提交到服务器中,必须要为元素指定一个name属性值
<input type="text" name="username">
  • 单选按钮
    • 像这种选择框,必须要指定一个value属性,value属性最终会作为用户的填写的值传递给服务器
    • checked 可以将单选按钮设置为默认选中
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
  • 多选框
<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>
  • 下拉列表
<select name="haha">
          <option value="i">选项一</option>
          <option selected value="ii">选项二</option>
          <option value="iii">选项三</option>
      </select>
  • 提交按钮
<input type="submit" value="注册">

属性

  • autocomplete="off" 关闭自动补全
  • readonly 将表单项设置为只读,数据会提交
  • disabled 将表单项设置为禁用,数据不会提交
  • autofocus 设置表单项自动获取焦点
<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按钮 -->
      <input type="reset">
      <!-- 普通的按钮 -->
      <input type="button" value="按钮">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按钮</button>
  </form>

4.注释

<!--
我是注释中的注释 注释不能嵌套
-->

5.属性

  • 属性,在标签中(开始标签或自结束标签)还可以设置属性
  • 属性是一个名值对(x=y)
  • 属性用来设置标签中的内容如何显示
  • 属性和标签名或其他属性应该使用空格隔开
  • 属性不能瞎写,应该根据文档中的规定来编写,有些属性有属性值,有些没有。如果有属性值,属性值应该使用引号引起来

6.文档声明

<!doctype html>