html速记

标签

 

<del>删除标签<del>

<s>删除标签</s>

<u>下划线</u>

<sup>上角标</sup>

<sub>下角标</sub>

<!-- 水平线 width宽 size高度 noshade去掉阴影 color颜色 align对齐方式 -->
<hr width="100" size="2" noshade="" color="" align="">
<!-- 预格式化 -->
<pre>
    床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。
</pre>
<!-- 图像映射 -->
<img src="" alt="" usemap="#imgmap">
<map name="imgmap">
    <!-- href 目标地址 shape形状(default所有区域 rect矩形coords=x1,y1,x2,y2 circle圆形:coords=x,y,r poly多边形:coords=x1,y1,x2,y2,...xn,yn) coords坐标-->
    <area shape="circle" coords="10,20,5" href="" alt="">
</map>

    <!-- (a[href target=iframe_a]>b)*3 -->
    <a href="" target="iframe_a"><b></b></a>
    <a href="" target="iframe_a"><b></b></a>
    <a href="" target="iframe_a"><b></b></a>
    <iframe name="iframe_a" src="http://www.baidu.com" frameborder="0" width="800" height="600"></iframe>

---

vscode快捷键

h${这是一个$级的}*3

 ol>li*3

 dl>dt+dl*3

table>tr*4>td*5

---

列表

有序

    <ol type="1" start="5">
        <li>A、b英文顺序</li>
        <li>I、i罗马数字顺序</li>
        <li>1阿拉伯数字顺序</li>
    </ol>

无序

    <ul type="sp">
        <li>disc 实心圆圈</li>
        <li>circle 空心圆圈</li>
        <li>square 实心方块</li>
        <li>none 无</li>
    </ul>

自定义

    <dl>
        <dt></dt>
        <dl></dl>
        <dl></dl>
        <dl></dl>
    </dl>

表格

    <table border="1" width="200" height="150" cellspacing="0" cellpadding="0" align="center" bgcolor="red"
        bordercolor="green">
        <caption>分组一</caption>
        <thead>
            <tr height="50" bgcolor="yellow" align="right" valign="bottom">
                <th width="100" height="30" bgcolor="green" align="left" valign="top">123</th>
                <th>123</td>
                <th>123</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">234234</td>
                <td>234234</td>
                <td>234234</td>
            </tr>
            <tr>
                <td>456</td>
                <td>456</td>
            </tr>
            <tr>
                <td>678</td>
                <td colspan="2">678</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">678</td>
            </tr>
        </tfoot>
    </table>

元素

块元素 block 横向扩展  p  div 

 行元素 inner 内联  不扩展

表单

<form action="" method="post" target="_blank">
    <fieldset>
        <legend>分组</legend>
        <h4>输入框</h4>
        <label for="text">文本框：</label><input type="text" name="text" id="text"><br>
        <label for="password">密码框：</label><input type="password" name="password" id="password"><br>
        <label for="textarea">多行文本：</label><textarea name="textarea" id="textarea" cols="30" rows="10"></textarea><br>
        <h4>选择框</h4>
        <label for="radio">单选框：</label>
            <!-- (label>input[type=radio name=radio])*2 -->
            <label><input type="radio" name="radio" id="radio" checked>男</label>
            <label><input type="radio" name="radio" id="radio2">女</label> 
         <br>
        <label for="checkbox">多选框：</label>
            <label><input type="checkbox" name="html" id="html" checked>html</label> 
            <label><input type="checkbox" name="css" id=""css>css</label> 
            <label><input type="checkbox" name="js" id="js">js</label><br>
        <label for="select">下拉框：</label>
        <select name="select" id="select" multiple size="10">
            <!-- option[value=199$]{199$}*9 -->
            <option value="1991">1991</option>
            <option value="1992">1992</option>
            <option value="1993">1993</option>
            <option value="1994">1994</option>
            <option value="1995" selected>1995</option>
            <option value="1996">1996</option>
            <option value="1997">1997</option>
            <option value="1998">1998</option>
            <option value="1999">1999</option>
        </select>
        <br>
        <h4>其他</h4>
        <label for="file">文件上传：</label><input type="file" name="file" id="file"><br>
        <label for="readonly">只读：</label><input type="text" readonly name="readonly" id="readonly" value="154548784548"><br>
        <label for="disabled">禁用：</label><input type="text" disabled name="disabled" id="disabled" value="154548784548"><br>
    </fieldset>
    <fieldset>
        <legend>按钮</legend>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="普通按钮">
        <input type="image" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="图片按钮" width="50" height="50">
        <button type="button">button按钮</button>
    </fieldset>
</form>

SVG

    <!-- 
    矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>
    
    fill填充颜色  stroke-width 属性定义矩形边框的宽度 stroke 属性定义矩形边框的颜色

    
     fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
     stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
     opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
    -->
    <!-- 矩形 <rect/>
        x 属性定义矩形的左侧位置 y 属性定义矩形的顶端位置 
        rx 和 ry 属性可使矩形产生圆角。
    -->
        <!-- feGaussianBlur 模糊 -->
        <!-- feOffset 阴影 -->
        <!-- linearGradient 线性渐变 -->

    <svg width="500" height="500">
        <defs>
            <filter x="0" y="0" id="f1">
                <feOffset in="SourceAlpha" dx="20" dy="20"/>
                <feGaussianBlur stdDeviation="10"/>
                <feBlend in="SourceGraphic"/>
            </filter>
            <linearGradient x1="0%" y1="0%"  x2="100%" y2="0%" id="g1">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="green"/>
            </linearGradient>
        </defs>
        <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
            style="stroke:black;stroke-width:5;opacity:0.5" fill="url(#g1)" filter="url(#f1)"/>
    </svg>
    <!-- 圆形 - <circle/> 
        cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
        r属性定义圆的半径
    -->
    <!-- radialGradient 径向渐变 -->
    <svg width="500" height="500">
        <defs>
            <radialGradient cx="50%" cy="50%" r="50%" fx="50%" fy="50%" id="g2">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="green"/>
            </radialGradient>
        </defs>
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="url(#g2)"/>
    </svg>

    <!-- 椭圆 - <ellipse/>
    CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径
-->
    <svg width="500" height="500">
        <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    </svg>
    <!-- 直线 - <line/>
    x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
-->
    <svg width="500" height="500">
        <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
    </svg>
    <!-- 多边形 - <polygon>
        points 属性定义多边形每个角的 x 和 y 坐标
    -->
    <svg height="210" width="500">
        <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
    </svg>
    <!-- 多段线 - <polyline></polyline> 
    
    -->
    <svg height="210" width="500">
        <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
    </svg>
    <!-- rotate  旋转 -->
    <svg height="210" width="500">
        <a xlink:href="http://www.baidu.com" target="_blank">
            <text transform="rotate(30 20,40)" fill="red">
                豆腐干豆腐干大概豆腐干
            </text>
        </a>
    </svg>
    <!-- path路径 
    M(moveto) L(lineto)
    stroke-linecap(butt没有线帽 round圆形线帽 square方形线帽)
    stroke-dasharray 虚线
    -->
    <svg height="210" width="500" class="circular" viewBox="-10, -10, 50, 50">
        <path class="path" d="M 30 15
        L 28 17
        M 25.61 25.61
        A 15 15, 0, 0, 1, 15 30
        A 15 15, 0, 1, 1, 27.99 7.5
        L 15 15" style="stroke-width: 4px;"/>
    </svg>