html标签+css样式

选择文件：

<input type="file"> 属性：file

标签lable：

<form action="">

   <label for="username">光标闪烁：label>

<input type="text" id="username">

 <br>

禁用表单: <input type="text" value="12345678" readonly> value：值

<br>

    性别：<input type="radio" name="geder">男

   <input type="radio" name="geder">女

    <input type="radio" name="geder" disabled>保密

<form>

表单分组：

<fieldset>

   <legend>基础信息legend>

    用户名：<input type="text">br>

    密码:<input type="password">

<fieldset>

登录按钮：

按钮：<input type="submit"> submit提交 reset重置

<input type="button" value="普通按钮"> button普通按钮

<input type="image" src=""> 图片按钮 src图片路径

<button>button按钮<button>

表单数据采集和提交：

<form action="" method=""></form> method=“get”或“post”

get:是默认值，浏览器会把收集号的表单数据，加到服务地址的后面，提交给服务器。

Post：值不但能够收集表单的数据，而且不会在地址栏里暴露隐私数据

标签：

<hr width="控制水平线的宽度" size="控制水平线的高度" noshade="用来去掉水平线阴影" color="用来定义水平线颜色"

 align="用来调整水平线水平对齐方式">

 <pre>预格式化文本对齐</pre>

<map name="">

    <area shape="用来定义区域的形状" coords="用来定义可点击区域的坐标" href="用来定义热点区域连接的目标地点" alt="">

    Shape=“default：所有区域  rect：矩形 circle：圆形  poly：多边形”

</map>

iframe作用：用来在一个网页中显示另一个网页

<iframe src="页面路径" width="数组" height="数组" frameborder="0" scrolling="auto">iframe>

<frameborder：框架  scrolling：滚动="auto"始终,"no","yes"

初始SVG：Svg：xml语法的图像格式

绘制矩形、圆形、椭圆形：

在Svg里

<rect width="" height="" fill="定义矩形填充颜色" stroke-width="定义了矩形的边框宽度"

stroke="定义矩形边框的颜色" opacity=“整个元素不透明度值”

矩形 rect 圆形 circle 路径 path 多边形 polygon 圆 ellipse 线条 line 多线条 polyline

r=” 定义圆形的半径” stroke=”” stroke-width=”” fill=””/>w

绘制线条、多边形、多线条：标签

<polygon points="200,20 250,190 160,210 220" fill="lime" stroke="purple" stroke-width="1"/>

Points：“多个点”

SVG绘制文本：<text></text>标签

<text x="" y="" font-size="" text-anchor="" transform=”rotate(旋转值 x，y)”>

<tspan x="10" y="45">first  line<tspan>

<text>                                  font-size=文字大小

text-anchor=“start”左边对齐 “middle”文本中间对齐 “end”文本末尾对齐

超链接： <svg width="200" height="30" xmlns:xlink="https://www.baidu.com/?tn=15007414_8_dg">

        <a xlink:href="SVG.html" target="_blank">

        <text x="10" y="15" fill="red">信阳职业技术学院</text>

        </a>

    </svg>

SVG绘制路径：标签 贝塞尔曲线模拟静态图

<svg width="450" height="400">

       <path d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none"/>

        <path d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none"/>

        <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none"/>

        <path d="M 100 350 q 150 -300 300 0" stroke="black" stroke-width="6" fill="none"/>

            <g fill="black">

               <circle cx="100" cy="350" r="3"/>

               <circle cx="250" cy="50" r="3"/>

              <circle cx="400" cy="350" r="3"/>

        </g>

        <g font-size="30" fill="black" text-anchor="middle">

           < text x="100" y="350" dx="-30">Atext>

            <text x="250" y="50" dx="-10">Btext>

            <text x="400" y="350" dx="30">Ctext>

        <g>

   </svg>

SVG描边属性：

<g fill="none" stroke="black" stroke-width="6">

            <path stroke-linecap="butt" d="M5 20 l215 0"/>

<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0"/>

Stroke:笔画属性

stroke：笔画宽度属性

stroke-linecap：笔画笔帽属性 stroke-dasharray：虚线笔画属性

SVG模糊和阴影效果： 属性<defs><filter></filter></defs>

<defs>

          <filter x="0" y="0" width="200" height="200" id="f2

          高斯模糊      模糊值<feGaussianBlur stdDeviation="15"/>

          偏移图像<feOffset in="SourceAlpha" dx="20" dy="20"/><FeBlend in="SourceGraphic"/>

         </filter>

<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)"/>

defs>

线性渐变：

<svg width="400" height="150">

        <defs>

            <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="grad1">

X1!=x2,y1=y2水平渐变 x1=x2,y1!=y2垂直渐变 x1!=x2,y1!=y2角度渐变

                <stop offset="0%" stop-color="rgb(255,255,0)"/>

                <stop offset="110%" stop-color="rgb(255,0,0)"/>

            </linearGradient>

        </defs>

        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>

    </svg>

和径向渐变：

 <svg width="500" height="150">

       < defs>

            <radialGradient cx="0%" cy="0%" r="50%" fx="0%"fy="0%" id="grad2">

                <stop offset="0%" stop-color="rgb(255,255,255)"/>

                <stop offset="100%" stop-color="rgb(0,0,255)"/>

           </radialGradient>

        </defs>

       <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)"/>

    </svg>