非下表中的所有实体都能在所有的浏览器中正确地显示。
目前,IE 11 是唯一一个能正确显示所有 HTML5 实体的浏览器。
字符 | 实体名称 | 十六进制 |
---|---|---|
Á | Aacute | 000C1 |
á | aacute | 000E1 |
Ă | Abreve | 00102 |
ă | abreve | 00103 |
∾ | ac | 0223E |
∿ | acd | 0223F |
∾̳ | acE | 0223E + 00333 |
 | Acirc | 000C2 |
â | acirc | 000E2 |
´ | acute | 000B4 |
А | Acy | 00410 |
а | acy | 00430 |
Æ | AElig | 000C6 |
æ | aelig | 000E6 |
⁡ | af | 02061 |
𝔄 | Afr | 1D504 |
𝔞 | afr | 1D51E |
À | Agrave | 000C0 |
à | agrave | 000E0 |
ℵ | alefsym | 02135 |
ℵ | aleph | 02135 |
Α | Alpha | 00391 |
α | alpha | 003B1 |
Ā | Amacr | 00100 |
ā | amacr | 00101 |
⨿ | amalg | 02A3F |
& | amp | 00026 |
⩓ | And | 02A53 |
∧ | and | 02227 |
⩕ | andand | 02A55 |
⩜ | andd | 02A5C |
⩘ | andslope | 02A58 |
⩚ | andv | 02A5A |
∠ | ang | 02220 |
⦤ | ange | 029A4 |
∠ | angle | 02220 |
∡ | angmsd | 02221 |
⦨ | angmsdaa | 029A8 |
⦩ | angmsdab | 029A9 |
⦪ | angmsdac | 029AA |
⦫ | angmsdad | 029AB |
⦬ | angmsdae | 029AC |
⦭ | angmsdaf | 029AD |
⦮ | angmsdag | 029AE |
⦯ | angmsdah | 029AF |
∟ | angrt | 0221F |
⊾ | angrtvb | 022BE |
⦝ | angrtvbd | 0299D |
∢ | angsph | 02222 |
Å | angst | 000C5 |
⍼ | angzarr | 0237C |
Ą | Aogon | 00104 |
ą | aogon | 00105 |
𝔸 | Aopf | 1D538 |
𝕒 | aopf | 1D552 |
≈ | ap | 02248 |
⩯ | apacir | 02A6F |
⩰ | apE | 02A70 |
≊ | ape | 0224A |
≋ | apid | 0224B |
' | apos | 00027 |
⁡ | ApplyFunction | 02061 |
≈ | approx | 02248 |
≊ | approxeq | 0224A |
Å | Aring | 000C5 |
å | aring | 000E5 |
𝒜 | Ascr | 1D49C |
𝒶 | ascr | 1D4B6 |
≔ | Assign | 02254 |
* | ast | 0002A |
≈ | asymp | 02248 |
≍ | asympeq | 0224D |
à | Atilde | 000C3 |
ã | atilde | 000E3 |
Ä | Auml | 000C4 |
ä | auml | 000E4 |
∳ | awconint | 02233 |
⨑ | awint | 02A11 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
小伙伴们,感觉我的分享很不错的别忘记“赞赏”我一下哟!
VG 动画有很多种实现方法,也有很大SVG动画库,现在我们就来介绍 svg动画实现方法都有哪些?
SVG animation 有五大元素,他们控制着各种不同类型的动画,分别为:
1.1、set
set 为动画元素设置延迟,此元素是SVG中最简单的动画元素,但是他并没有动画效果。
使用语法:
<set attributeName="" attributeType="" 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>
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>
<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>
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 如何制作动画。
上篇文章我们介绍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 库。
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:指动画缓动类型。常用值有:
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的动画库挺多了,我们介绍了拉斐尔,有兴趣的小伙伴可以自行找找其他库。
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">
将页面重定向到另一个网站
title标签的内容会作为搜索结果的超链接上的文字显示
<title>Document</title>
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>
使用ol标签来创建无序列表,使用li表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
使用ul标签来创建无序列表,使用li表示列表项
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
使用dl标签来创建一个定义列表, 使用dt来表示定义的内容,使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
</dl>
<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>
超链接可以让我们从一个页面跳转到其他页面, 或者是当前页面的其他的位置
使用 a 标签来定义超链接
<a href="https://www.baidu.com">超链接</a>
指定跳转的目标路径
值可以是一个外部网站的地址
也可以写一个内部页面的地址
超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素
用来指定超链接打开的位置
_self 默认值 在当前页面中打开超链接
_blank 在一个新的要么中打开超链接
<a href="07.列表.html" target="_blank">超链接</a>
将#作为超链接的路径的展位符使用
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>
img标签来引入外部图片,img标签是一个自结束标签
属性:src 属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示
<img src="./img/1.gif" alt="松鼠">
用于向当前页面中引入一个其他页面
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
audio 标签用来向页面中引入一个外部的音频文件的
<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>
与 audio 相似
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<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>
<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: 0px;
border-collapse: collapse;
<input type="text" name="username">
<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="注册">
<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>
<!--
我是注释中的注释 注释不能嵌套
-->
<!doctype html>
*请认真填写需求信息,我们会在24小时内与您取得联系。