HTML积累知识

svg画布

画布

1. 一个svg标签就是一个画布
2. 画布的大小是无限大的
3. 所有的图形都是绘制在画布上的
4. 画布的中心就是坐标的原点

ViewBox(相机)

1. 可以将ViewBox看成一个相机，相机在画布上拍到的东西才能看到
2. ViewBox的属性
   • 第一个值表示ViewBox的位置(x轴)(ViewBox的左上角所在的位置默认情况下是在画布中(0,0)的位置)
   • 第二个值表示ViewBox的位置(y轴)
   • 第三个值表示ViewBox的宽度(如果ViewBox的宽度是100%，会让ViewBox在网页中自适应)
   • 第四个值表示ViewBox的高度

ViewPort(视窗)

1. 用容器来显示相机所拍到的内容，这个容器就是视窗(ViewPort)
2. 用<svg>的width和height来定义视窗的宽高
   
   如果视窗大于相片的大小，则会填满整个容器，小于则会缩小填满容器
   

preserveAspectRatio

• 这个属性有两个值：
  • 第一个值是ViewBox和视窗的对齐方式
    • 相片和容器的对齐方式
  • 第二个值是维持宽高比

第一个值

1. X轴方向的对齐方式

对齐方式	说明
xMin	视窗和ViewBox左边对齐(相片的左边和容器左边对齐)
xMid	视窗和ViewBox中心对齐(相片的中心和容器中心对齐)(在x轴的中心对齐)
xMax	视窗和ViewBox右边对齐(相片的右边和容器右边对齐)

2. Y轴方向对齐

对齐方式	说明
YMin	视窗和ViewBox上边对齐(相片的上边缘和容器上边缘对齐)
YMid	视窗和ViewBox中心对齐(相片的中心和容器中心对齐)(在Y轴的中心对齐)
YMax	视窗和ViewBox右边对齐(相片的下边缘和容器下边缘对齐)

• 可以对这六种当时进行自由的组合
• 方式：X轴对齐方式 + Y轴对齐方式
• 例：xMinYMin(居左居上对齐)

第二个值

属性	说明
meet	保持ViewBox的宽高比，但是放缩ViewBox，以适应视窗的大小。在视窗能够完全显示这个ViewBox的前提下，尽可能的放大这个ViewBox。（总之，在视窗中能看到整个ViewBox）
slice	保持ViewBox的宽高比，但是尽可能的放大ViewBox，以完全填满整个视窗。这种情况下，有可能ViewBox中的内容，会有一部分超出视窗范围
none	不保持宽高比，用ViewBox的内容填满整个容器。这种情况下，ViewBox的内容会完全显示在视窗中，但是ViewBox的宽高比，可能会发生改变

音频与视频

音频

• audio:定义音频。支持的音频格式:MP3、WAV、OGG
  • src:规定音频的URL
  • controls:显示播放控件

视频

• video:定义视频。支持的音频格式:MP4, WebM、OGG
  • src:规定视频的URL
  • controls:显示播放控件

表单

• form：定义表单
  • action：规定当提交表单时向何处发送表单数据，URL
  • method：规定用于发送表单数据的方式
    • get：浏览器会将数据直接附在表单的action URL之后。大小有限制
    • post：浏览器会将数据放到http请求消息体中。大小无限制