常用功能代码模板合集

By | 2025-12-15

常用功能代码模板合集

##HTML/CSS 常用嵌入代码快速参考

1. 基础下划线链接

普通超链接，在新标签页打开目标网址
<a href="https://vip.fmkefu.com/c/zxprhl46" target="_blank">联系客服</a>

2. 彩色高亮链接

自定义颜色的链接，适合重点强调

<a href="https://example.com" 
   style="color:red" 
   target="_blank" 
   rel="noopener noreferrer">
    红色链接
</a>

嵌入图片

响应式图片

自适应屏幕宽度的图片，支持OSS存储

<img src="https://your-bucket.oss-cn-hangzhou.aliyuncs.com/west-lake.jpg" 
     alt="图片描述" 
     style="max-width: 100%; height: auto;" />

嵌入音频

OSS音频播放器

HTML5原生音频控件，支持播放、暂停、进度控制

<audio controls>
    <source src="https://your-bucket.oss-cn-hangzhou.aliyuncs.com/your-audio-file.mp3" 
            type="audio/mpeg">
    您的浏览器不支持音频播放
</audio>

嵌入视频

OSS视频播放器

HTML5视频播放器，自定义尺寸

<video controls width="640" height="360">
    <source src="https://your-bucket.oss-cn-hangzhou.aliyuncs.com/your-video-file.mp4" 
            type="video/mp4">
    您的浏览器不支持视频播放
</video>

图片超链接

可点击图片

将图片作为链接，点击跳转到指定页面（如YouTube视频）

<a href="https://youtu.be/NYGTkj2YLUY" target="_blank">
    <img src="https://aibochinese.oss-cn-beijing.aliyuncs.com/icons8-youtube上播放-48.png" 
         alt="观看视频" 
         style="max-width: 100%; height: auto;" />
</a>

嵌入外部网页

Iframe页面嵌入

在当前页面中嵌入另一个完整网页

<iframe src="https://你的网站.com/目标页面/" 
        width="100%" 
        height="600px" 
        frameborder="0" 
        title="嵌入的页面内容">
</iframe>

AI 辅助指令参考

指令 1：器官部位图文页面

请设计一个HTML页面文件，罗列人体各个器官和部位，仅罗列名称即可，名称有拼音、汉语和英文翻译，匹配图片

指令 2：图片转HTML

请识别图片内容，并转化为html文件输出，且电脑和手机端响应式，尽量保留原有内容排版不变，css样式仅使用在本模块

指令 3：长篇课文排版

请识别图片内容，并转化为html文件输出，且电脑和手机端响应式，尽量保留原有内容排版不变，课文和生词分两栏展示，课文部分字体稍大，生词部分字体缩小，css样式仅使用在本模块