表单
表单标签使用form
<form></form>单行文本框控件
文本框
input 单标签：单行文本框
属性为type：输入控件的类型
type的值为text也就是文本，也是type的默认值
密码框
type的值为password也就是口令/密码，输入时内容会被 屏蔽，只显示**或··
多行文本框控件
textarea 双标签：多行文本框
cols 指定一个文本区的可见宽度，值为数字
rows 指定一个文本区的可见行数，值为数字
但是实际开发项目中，为了美观和输入文本的多样性，一般通过css来控制它的样式
取值按钮
单选
通过type属性值
radio
多选
type属性值 checkbox
单选多选的默认选中
checked 只要值不为空都可以
下拉菜单控件
select 包含一个或多个option子标签，均为双标签
且select中只能包含option
下拉菜单的默认选中
selected 不需要值
多选下拉菜单
给select 标签定义一个multiple属性
快捷键：Alt+Shift+下键 ，可以复制当前这条
size属性定义控件的默认可见行数
选择文件
通过input的type属性值
file
label标签
双标签
id具有唯一性，不能有重复的id
label的for里面要跟对应的id一样
<form action="">
<label for="username">请输入用户名：<input type="text" id="username"></label>
</form>只读效果
默认显示文字，需要定义value属性
readonly
禁用属性
不可用不可点击的
disbaled不需要值
分组控件
最外层fieldset 双标签
里面包裹legend
表单按钮
提交按钮
通过input的type属性值
submit
提交到服务器之后需要服务器地址
服务器地址
<form action=""></form>若要保存原来的内容
<form target="_blank/_self"></form>重置按钮
通过input的type属性值
reset
普通按钮
通过input的type属性值
button
这是一个空按钮，可以用value定义
value可以定义这些按钮的名字
图像按钮
通过input的type属性值
image
引入图片属性src：图片路径
<form>
<input type="image" src="">
</form>若大小不合适，可以用width和height
双标签button按钮
<button>按钮名字</button>如果添加type="button"，则button属性变为普通标签
收集表单数据
需要给表单控件添加name属性
表单里敏感信息，不应该显示在地址栏
所以要给form定义method属性
常用的属性值有get和post
get是默认值，浏览器会把收集好的表单数据，加到服务器地址的后面，提交给服务器
post值不但能够收集表单的数据，而且不会在地址栏里暴露隐私数据
实用性标签
水平线
<hr> 单标签
属性：
width 水平线宽度
size 水平线高度
noshade 去掉水平线阴影
color 水平线颜色
align 水平线对齐方式（水平线需要有宽度，默认水平居中对齐）
预格式化的文本
pre 双标签 里面的文本以固定宽度的字体显示，并且文本保留了空格和换行，文本将完全按照HTML源代码中的内容显示
图像映射
map
map 双标签
属性 name 要与img标签中的usemap属性相关联
<img src="" alt="" usemap="#xxx">
<map name="xxx"></map>在图像和地图之间创建关系
area
area 子标签 单标签 ， 定义图片上的热点区域实现相应区域的目标跳转
通过area标签可以设置热点区域的位置、大小及形状
属性：
href 定义热点区域链接的目标地址，互联网和本地的网页及图片地址都可以
shape 定义区域的形状 取值为：default 所有区域 rect 矩形 circle 圆形 poly 多边形
coords 定义可点击区域的坐标 需要与shape属性配合使用
例如：
<area shape="circle" coords="x,y,r" href="" alt="">圆形
<area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="" alt="">多边形
<area shape="rect" coords="x1,y1,x2,y2" href="" alt="">矩形0,0原点在左上角
多个坐标组成了多边形
案例：
iframe
双标签
用来在一个网页中显示另外一个网页
属性：
src 资源，用于引入其他网站的页面，值 为一个页面的路径
width 宽度，用于控制引入页面的宽度，值 为数字
height 高度，用于控制引入页面的宽度，值 为数字
frameborder 框架边框，默认引入的框架带有边框，通常情况下将该属性的值设为”0″，来取消框架的边框
scrolling 滚动，用于控制是否显示框架的滚动条，值 有三个：auto 在需要的情况下出现滚动条，默认值。yes 始终显示滚动条。no 从不显示滚动条
iframe 也可以作为一个链接的目标框架，链接的target 属性必须设置为iframe的name属性
SVG
对图像形状的描述
双标签
PNG图片是基于像素处理的，不能在vs code 里直接编辑
SVG 图片是用类似html的代码绘制出来的 ，所以可以用html元素绘制svg图片 ， 可以使用svg标签实现
SVG标签是SVG图形的容器
<svg></svg>重要属性：width 和 height
SVG绘制矩形、圆形和椭圆形
矩形
rect 单标签
<rect />任何HTML单标签都可以在后>前写一个/ ，表示标签闭合了
属性：
width 定义矩形的宽度
height 定义矩形的高度
fill 定义矩形的填充颜色
stroke-width 定义矩形的边框宽度
stroke 定义矩形边框的颜色
x 定义矩形左边的位置（左下角）
y 定义矩形顶部的位置（右上角）
fill-opacity 定义填充颜色的不透明度，合法值的范围是0-1
stroke-opacity 定义描边颜色的不透明度， 合法值的范围是0-1
opacity 定义整个元素的不透明度，合法值的范围是0-1
rx 定义圆角x轴方向的半径长度
ry 定义圆角y轴方向的半径长度
如果rx,ty值相等，则为一个圆形的角，值不相等，则为一个椭圆的额角
其中：
fill定义矩形的填充颜色
stroke-width定义矩形的边框宽度
stroke定义矩形边框的颜色常见的图形绘制都可以使用这三个
例子：（矩形）
<svg width="100" height="200">
<rect width="100" height="200" fill="red" stroke-width="50" stroke="50" />
</svg>效果：
例子：（透明度）
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150" fill="blue" stroke="tomato" stroke-width="5" fill-opacity="0.1" stroke-opacity="0.9"/>
</svg>效果：
例子：（圆角矩形）
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150" fill="red" stroke="black" stroke-width="5" opacity="0.5" rx="20" ry="20"/>
</svg>效果：
圆形
circle 单标签
<circle />属性：
cx 定义圆形的 x 的坐标
cy 定义圆形的 y 的坐标
如果省略cx和cy 则圆心会被设置为(0,0)
r 定圆形的半径
椭圆形
ellipse 单标签
<ellipse />属性：
cx 定义椭圆中心的 x 的坐标
cy 定义椭圆中心的 y 的坐标
rx 定义水平半径
ry 定义垂直半径
SVG绘制线条、多边形和多线条
线条
line
<line />属性：
x1 定义 x 轴上直线的起点坐标
y1 定义 y 轴上直线的起点坐标
x2 定义 x 轴上直线的末端坐标
y2 定义 y 轴上直线的末端坐标
圆点(0,0)为左上角
多边形
polygon 单标签
用于创建一个至少包含三个边的图形
<polygon />属性：
points 多个点，定义了多边形每个角的x和y的坐标
示例（五角星）：
<svg width="500" height="210">
<polygon points="100,10 40,198 198,78 10,78 160,198" fill="red"/>
</svg>多线条
polyline 单标签
可以创建任何只由直线组成的形状，一般是把几个点连接起来，不要求封闭
<polyline />属性：
points 两个以上的x和y的坐标i对
SVG绘制文本
文本
text 双标签
<text></text>属性：
x和y 定义文本的位置坐标
font-size 定义文本的大小，值为数字
text-anchor 定义文本的对齐方式，有三个值start：以文本左端对齐middle：以文本中间对齐end：以文本末尾对齐
transform 值为rotate函数，在小括号里定义两个参数，第一个参数为旋转角度，第二个参数为旋转的中心坐标（缺省情况下默认0,0）
<transform="rotate(30 40,20)">text元素可以包裹多个tspan子元素
每个tspan元素可以包含不同的格式和位置
text文本添加链接：把text标签用a标签包裹起来
给a标签添加xlink:href属性，属性值为链接的地址，也可以定义targe属性
svg是应用xml语法定义元素的，还要在svg标签上定义一个命名空间的属性xmlns:xlink，属性值一般写w3c的网址
示例：
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="" target="">
<text></text>
</a>
</svg>SVG绘制路径
路径
path
<path />应用路径可绘制任意形状的图形
属性：
d 定义绘制路径的命令
有M命令 定义图形的起点坐标
<path d="M 150 0"/>
<path d="M150 0"/>L命令 定义图形的结束坐标
命令的大小写表示的意义是不同的
大写字母为绝对定位，小写字母为相对定位
在svg中，可以使用g标签把多个绘图元素包裹起来，在g标签上定义公共的属性
<g>
<path />
<circle />
<text></text>
</g>SVG描边属性
描边
stroke 笔画属性 定义了一个元素的线条、文本或轮廓的颜色，值为合法的颜色值
stroke-width 笔画宽度属性 定义了一个元素的线条、文本或轮廓的厚度， 值为数字
stroke-linecap 笔画笔帽属性 定义一个开放路径的不同类型的结束点， 值有三个butt没有线帽 默认值，round圆形线帽，square方形线帽
stroke-dasharray 虚线笔画属性 创建虚线，值为一个数字序列 以此定义虚线的线条与空隙的大小，序列值是个数字，至少要定义两个值
所有的描边属性都可以应用于任何类型的 线条、文本和元素的轮廓 如circle
SVG模糊和阴影属性
模糊
filter 双标签
包含一个或多个效果滤镜
filter元素都是在defs元素中定义的
defs 双标签
<defs>
<filter id=""></filter>
</defs>必要属性： id 用于识别过滤器,图形通过这个id指向要使用的过滤器
模糊效果可以通过feGaussianBlur滤镜来创建（高斯模糊），需要定义在filter标签里面 单标签
<feGaussianBlur />通过stdDeviation属性定义模糊的数量
例子：（高斯模糊）
阴影
阴影效果可以通过feOffset滤镜和feBlend滤镜来实现
原理为将一个SVG图形、图像或元素在xy平面上做一定的偏移，需要定义在filter标签里面
单标签
<filter>
<feOffset />
</filter>属性：
dx 表示阴影在x轴上的偏移量
dy 表示阴影在y轴上的偏移量
in 表示阴影图像的来源，若定义黑色阴影，值可以为SourceAlpha；若使用原始图像作为阴影，值可以设置为SourceGraphic
在偏移的图像上混合原始图像，要用feBlend标签
feBlend 单标签
例子：（阴影效果）
SVG线性渐变和径向渐变
线性渐变
用linearGradient元素来定义，必须嵌套在defs标签中，可以实现水平渐变、垂直渐变或角度渐变
linearGradient 双标签
<defs>
<linearGradient></linearGradient>
</defs>有两组坐标属性：x1,y1,x2,y2 用于定义线性渐变的开始位置和结束位置
当y1,y2相等，x1,x2不相等时，就会变成水平渐变
当x1,x2相等，y1,y2不相等时，就会变成垂直渐变
当x1,x2不相等，y1,y2也不相等时，就会产生角度渐变
线性渐变的颜色范围可以由两种或多种颜色组成，每种颜色都用一个stop标签来指定
stop 单标签
属性：
offset 定义渐变颜色的开始和结束位置，属性值是一个描述相对位置的百分比
stop-color 定义渐变的颜色，取值为任何一个合法的颜色值
径向渐变
用radialGradient元素来定义，必须嵌套在defs标签中
radialGradient 双标签
属性：
id 定义渐变的唯一名称
cx、cy、r 定义最外面的圆
fx、fy 定义了最里面的圆
offset 定义渐变颜色的开始和结束位置，属性值是一个描述相对位置的百分比
stop-color 定义渐变的颜色，取值为任何一个合法的颜色值
径向渐变的颜色范围可以由两种或多种颜色组成，每种颜色都用一个stop标签来指定
