表单
表单标签使用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
标签来指定