6257rv7 发表于 2024-6-29 16:05:14

哪些令人惊叹的 HTML、CSS、JavaScript 器具和库


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/dkwuWwLoRKibgtDFJng55m7vUBZRsOAywoueEHbhgt2lQnau4zoqKAsso1aFuxg7HyqbroE75yrSviapObUpt7iag/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></span></a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">#&nbsp;<span style="color: black;">点击<span style="color: black;">照片</span>报名上海、南京源创会</span>&nbsp;#</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前端<span style="color: black;">研发</span>很<span style="color: black;">奥妙</span>: 它入门很简单，<span style="color: black;">然则</span>想要<span style="color: black;">作为</span>大牛却很难。有太多的事情<span style="color: black;">必须</span><span style="color: black;">思虑</span>，到处都有<span style="color: black;">必须</span>微调的<span style="color: black;">地区</span>，太多的细节处理<span style="color: black;">才可</span><span style="color: black;">保准</span>让一切都<span style="color: black;">刚才</span>好。幸运的是，<span style="color: black;">研发</span>者和设计师<span style="color: black;">始终</span>致力于为<span style="color: black;">咱们</span><span style="color: black;">供给</span>有用的<span style="color: black;">工具</span>和资源，来<span style="color: black;">加强</span><span style="color: black;">咱们</span>的技能、让<span style="color: black;">咱们</span>做的更好。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span>今天我收集一系列省时的、有用的 HTML、CSS 和 JavaScript 资源给<span style="color: black;">大众</span>。我<span style="color: black;">期盼</span>这些<span style="color: black;">工具</span>将<span style="color: black;">帮忙</span>您<span style="color: black;">加强</span>专业技能以及工作流程。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">HTML 和 CSS <span style="color: black;">工具</span></strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Initializr</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">此<span style="color: black;">工具</span>创建一个基于 HTML5 Boilerplate 的可自定义模板。&nbsp;在 JavaScript 和 jQuery 之间进行<span style="color: black;">选取</span>，决定<span style="color: black;">是不是</span>要样本内容，并指定兼容性和服务器配置需求。 您将<span style="color: black;">得到</span>一个<span style="color: black;">持有</span> Boilerplate <span style="color: black;">重点</span>功能的模板，以<span style="color: black;">起始</span>您的项目。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3u2oicrdTQ1dSmYLEu6STHOl4vb46QlIrlwgMqOGib7hnckW78ib5GugqpA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Layer Styles</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个非常简单的<span style="color: black;">工具</span>，以直观的方式来创建 CSS ——非常像一个图形编辑器。该<span style="color: black;">工具</span><span style="color: black;">准许</span>您添加<span style="color: black;">暗影</span>、内<span style="color: black;">暗影</span>、背景、边界和圆角和生成跨浏览器的 CSS 代码。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3usvdopz4yv0qfibY99nTblWVXwXz8nw2lrT04icbuGfFV87moWUPl7LTA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Mobile Boilerplate</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个能够创建丰富的和高性能的移动 Web 应用程序模板。它<span style="color: black;">能够</span><span style="color: black;">保准</span><span style="color: black;">各样</span>浏览器的兼容性，不仅能兼容<span style="color: black;">各样</span>高端智能机，<span style="color: black;">亦</span>能兼容旧版的黑莓、塞班、以及微软的移动平台。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3umAVE2nSCmALXyicN9qFdmjSFlMEndWfFBXXhwdAjrKCVw6QiaibeAWKsA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Vogue</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">该<span style="color: black;">工具</span>在所有浏览器中重新加载页面的样式表（而不是 HTML ），<span style="color: black;">乃至</span><span style="color: black;">能够</span>配置为在多个浏览器中<span style="color: black;">同期</span>自动重新加载页面。 该<span style="color: black;">工具</span>不托管您的网站，而是运行您的网站本身的本地服务器。 要<span style="color: black;">运用</span>它，只需安装 NodeJS 和 npm 。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3uzdpveP0S2pyDG8icmqpgIONneJnm3vhg3ulB9ZUyWibRmFGic1dVKmxpg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">css-x-fire</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">此<span style="color: black;">工具</span><span style="color: black;">准许</span>从 Firebug CSS 编辑器编辑 IDE 中的 CSS 属性，并<span style="color: black;">准许</span><span style="color: black;">研发</span>人员专注于 CSS 样式，而<span style="color: black;">没</span>需刷新浏览器。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3u3YT9cWUzAJCjGCSIwKNibVTxCRVzaUsstVIxRUAw9admBnFr1w0Ydug/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Ffffallback</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个<span style="color: black;">能够</span>让您测试<span style="color: black;">区别</span>字体栈以找到最佳结果的书签。它扫描页面的 CSS 并创建一个克隆页面，您<span style="color: black;">能够</span>在其中测试和分析<span style="color: black;">区别</span>的 fallback 字体。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3ugnWqu3icc1o73S5mSQMCibmCABbXJCIlSRFPePVibz0iba5T7kT2ES48Eg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">CodeKit for Mac OS X</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CodeKit <span style="color: black;">能够</span><span style="color: black;">帮忙</span>您更快更好地构建网站。每次<span style="color: black;">保留</span>时，都会自动编译一切：Process Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript、Javascript 和 Compass 文件。<span style="color: black;">容易</span>设置每种语言的选项。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3uDo2snhzwn7LaFaQtWhkWRtGK7ENJOY09fEvia2cJmAKjxcEAIoVwLHQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Less-Boilerplate</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以 Less 形式编写的 Boilerplate CSS，<span style="color: black;">包含</span> CSS 重置、CSS3 <span style="color: black;">帮忙</span>器，中心列块等等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3u39K7Xiciblygt4o41458Qr3D9fbcWjbu1bJzr0H9E6zjM8ahAAR98kKg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Needle v0.1a1</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Needle 是一个方便的<span style="color: black;">工具</span>，您<span style="color: black;">能够</span><span style="color: black;">经过</span>截取网站的部分内容并与其他屏幕截图进行比较来测试 CSS <span style="color: black;">是不是</span>正确呈现。它还<span style="color: black;">供给</span>测试计算 CSS 值和 HTML 元素位置的<span style="color: black;">工具</span>。</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3umbLwCFEIdtjPlSiaTOZh2kak8a3iaaliaF72sK86DFZwf1hjTdCqbw1Cg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Spritemapper</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">该应用程序将多个图像合并为一个，并为相应的切片生成 CSS 定位; <span style="color: black;">经过</span>减少图像的数量和更好地利用连接，CSS spritemapping <span style="color: black;">能够</span>减少您的网站的加载时间。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3uTBSr03IVlggnl9neg0YicXsYtgdxiaPcLl46t0gH4BhCm4zwlIK3qFXw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Normalize.css</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Normalize.css 对 CSS 重置采取了稍微<span style="color: black;">区别</span>的<span style="color: black;">办法</span>。Jonathan Neal 和 Nicolas Gallagher 并<span style="color: black;">无</span>消除所有的浏览器默认值，而是花时间<span style="color: black;">科研</span><span style="color: black;">区别</span>的浏览器<span style="color: black;">怎样</span>处理<span style="color: black;">区别</span>的代码段，<span style="color: black;">而后</span><span style="color: black;">保存</span><span style="color: black;">哪些</span>有用的默认值。它节省了您<span style="color: black;">做为</span>设计师的时间，<span style="color: black;">同期</span><span style="color: black;">亦</span><span style="color: black;">供给</span>一致的结果。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3u3Pume9MnBrPoo8NUtSLHhdBHjNkshQGicJbyiamvMHmtm4eYNwdvI3dg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Zen Coding</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Zen Coding 是一个高速编码和编辑的编辑器插件。这个插件的核心是一个强大的缩写引擎，它<span style="color: black;">准许</span>您将表达式（类似于 CSS <span style="color: black;">选取</span>器）扩展为 HTML 代码。</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3uNgjloMCs0tI7damTJbvickDuPYZvhAaDRoz7ScGsGxE7xAEOQV4uFJw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">CSS Stress Testing and Performance Profiling</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Andy Edinborough 几乎能在所有浏览器中运行它<span style="color: black;">所说</span>的“ CSS 压力测试”代码。</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3uoQGwibhEKNTplticI5tcHykyOTciaRWXaHy1OVK2IM1hzGIopI25JeibnA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">PCSS</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个 PHP 驱动的 CSS 预处理器，<span style="color: black;">能够</span><span style="color: black;">帮忙</span>您以更少的代码释放 CSS3 的功能，如类嵌套、服务器端浏览器细节、默认单位和变量。该<span style="color: black;">工具</span><span style="color: black;">必须</span> PHP5。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3uyDroichjPicVHejHmEaNd0qUXdtmAbpqU7ZK9gvPe9QvibwUhibicag7qEA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">JavaScript <span style="color: black;">工具</span></strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Modernizr 2</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Modernizr 是一个广泛<span style="color: black;">运用</span>的开源 JavaScript 库，<span style="color: black;">能够</span><span style="color: black;">帮忙</span>您构建 HTML5 和 CSS3-powered 的网站。<span style="color: black;">此刻</span><span style="color: black;">能够</span>将功能检测与<span style="color: black;">媒介</span><span style="color: black;">查找</span>和<span style="color: black;">要求</span>资源加载相结合，这为您<span style="color: black;">供给</span>了在<span style="color: black;">各样</span><span style="color: black;">状况</span>下进行优化的能力和灵活性。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3udKm51ibXlDfkehCz3iab3kH19z7lz5YHicVDkWcC6SsJg1L8fsuNU9tpw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">FitText</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">FitText 是用于响应和流畅布局的 jQuery 插件，<span style="color: black;">能够</span><span style="color: black;">调节</span><span style="color: black;">表示</span>文本的<span style="color: black;">体积</span>以适应父元素。它<span style="color: black;">亦</span>是一个很好的<span style="color: black;">处理</span><span style="color: black;">方法</span>，用于创建从小型移动设备到30英寸桌面<span style="color: black;">表示</span>器，所有内容都能很好<span style="color: black;">表示</span>的标题。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/dkwuWwLoRKibqpUcB7dLEc7Zw2GgeRz3uHj8fGibzU0u9lesNrcDCvXAMP255SIO3NFtFWLvbG8LjgTpib7ibJiaZlw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">jQuery Waypoints</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Waypoint 是一个小型 jQuery 插件，<span style="color: black;">能够</span>在您滚动到组件时<span style="color: black;">容易</span>执行某个功能。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">ligature-js</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">该 Java 脚本<span style="color: black;">准许</span>您<span style="color: black;">经过</span>浏览网页上的文本并在适当的位置<span style="color: black;">插进</span>连字，将文本模式转换为通用的印刷排版连字。</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">StronglyTyped</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个 JS 库，<span style="color: black;">准许</span>您指定<span style="color: black;">各样</span>类型（布尔值、数字、字符串等）和常量（ Java 中的<span style="color: black;">最后</span>属性）的强类型属性。 它<span style="color: black;">运用</span> ES5 getter 和 setter，并在不支持的浏览器中恢复为常规、松散类型的属性。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Kaffeine</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">JavaScript 语法的扩展，试图使其更好用。与 JavaScript 非常类似，代码<span style="color: black;">能够</span>直接编译成JavaScript。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Crossroads.js</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个灵感来自 URL Route / Dispatch 实用程序的 JS 路由库，它们存在于像 Rails、Pyramid、Django、CakePHP、CodeIgniter 等框架上。它解析一个字符串输入，并<span style="color: black;">经过</span>将字符串与多个模式匹配来决定执行哪个操作。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">HEAD.js</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个脚本，<span style="color: black;">能够</span>加快、简化和现代化您的网站 - 简明扼要的<span style="color: black;">处理</span><span style="color: black;">广泛</span>问题。 您<span style="color: black;">能够</span>加载脚本，如图像，以及安全地<span style="color: black;">运用</span> HTML5 和 CSS3 。</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">The JavaScript Grid</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">基于 JavaScript 的覆盖网格——只需将代码片拖动到书签栏中，打开您的 URL 并单击书签。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Grid Calculator</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个<span style="color: black;">能够</span><span style="color: black;">帮忙</span>您<span style="color: black;">容易</span>创建自己的网格并将其下载到 Adobe Illustrator 或 Photoshop 的计算器。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Griddle.it</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一种干净简单的<span style="color: black;">办法</span>来<span style="color: black;">帮忙</span>您<span style="color: black;">调节</span>布局。所有您所<span style="color: black;">必须</span>做的是将尺寸放在<span style="color: black;">供给</span>的 URL 之后，使一个背景引导<span style="color: black;">照片</span><span style="color: black;">能够</span>在您的浏览器上工作。网格是动态创建的，<span style="color: black;">因此</span>任何组合都能工作。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p><strong style="color: blue;">福利</strong>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">只要您于 5 月 12 日 24：00 前在“</span><a style="color: black;">开源中国七大夏日<span style="color: black;">必须</span>编程神器，不容<span style="color: black;">错失</span></a>！<span style="color: black;">”评论区留言，写下你用过最好的开源项目和项目<span style="color: black;">位置</span>，并说明<span style="color: black;">为何</span>觉得最好，点赞数最多的前十名<span style="color: black;">就可</span><span style="color: black;">得到</span>开源中国送出的编程神器一份哦！！！</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p><span style="color: black;"><span style="color: black;">举荐</span>阅读</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">近期</span> Python 有点火? &nbsp;7 个学习它的理由！</a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">假日照片堆积<span style="color: black;">怎样</span>处理？这些<span style="color: black;">工具</span>你可能用得上</a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">这些开源软件</a><span style="color: black;">养活了一票国产软件！</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">40 行代码拿下拉勾网招聘数据</a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p><span style="color: black;">点击<strong style="color: blue;">“阅读原文”</strong>查看<span style="color: black;">更加多</span>精彩内容</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>




星☆雨 发表于 2024-9-5 06:51:56

你说得对，我们一起加油，未来可期。

4zhvml8 发表于 2024-10-22 23:10:06

你的见解独到，让我受益匪浅，期待更多交流。
页: [1]
查看完整版本: 哪些令人惊叹的 HTML、CSS、JavaScript 工具和库