html学习记录(二)
本文最后更新于227 天前,其中的信息可能已经过时,如有错误请发送邮件到619701626@qq.com

表单

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

若大小不合适,可以用widthheight

双标签button按钮

    <button>按钮名字</button>

如果添加type="button",则button属性变为普通标签

收集表单数据

需要给表单控件添加name属性

表单里敏感信息,不应该显示在地址栏

所以要给form定义method属性

常用的属性值有getpost

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 属性必须设置为iframename属性

SVG

对图像形状的描述

双标签

PNG图片是基于像素处理的,不能在vs code 里直接编辑

SVG 图片是用类似html的代码绘制出来的 ,所以可以用html元素绘制svg图片 , 可以使用svg标签实现

SVG标签是SVG图形的容器

    <svg></svg>

重要属性:widthheight

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 的坐标

如果省略cxcy 则圆心会被设置为(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>

属性:

xy 定义文本的位置坐标

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绝对路径和相对路径

在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 定义渐变的唯一名称

cxcyr 定义最外面的圆

fxfy 定义了最里面的圆

offset 定义渐变颜色的开始和结束位置,属性值是一个描述相对位置的百分比

stop-color 定义渐变的颜色,取值为任何一个合法的颜色值

径向渐变的颜色范围可以由两种或多种颜色组成,每种颜色都用一个stop标签来指定

觉得有帮助可以鼓励下博主哦~感谢!
作者:rainy
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0协议
转载请注明文章地址及作者哦~
上一篇
下一篇