{"id":105,"date":"2025-11-22T10:21:49","date_gmt":"2025-11-22T02:21:49","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=105"},"modified":"2025-11-22T10:21:49","modified_gmt":"2025-11-22T02:21:49","slug":"html5%e8%b6%85%e9%93%be%e6%8e%a5%e5%92%8c%e5%9b%be%e7%89%87%e5%9f%ba%e7%a1%80%e7%94%a8%e6%b3%95%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/22\/html5%e8%b6%85%e9%93%be%e6%8e%a5%e5%92%8c%e5%9b%be%e7%89%87%e5%9f%ba%e7%a1%80%e7%94%a8%e6%b3%95%e8%af%a6%e8%a7%a3\/","title":{"rendered":"HTML5\u8d85\u94fe\u63a5\u548c\u56fe\u7247\u57fa\u7840\u7528\u6cd5\u8be6\u89e3"},"content":{"rendered":"\n

\u597d\u7684\uff0c\u6211\u6574\u7406\u4e86\u4e00\u4efd HTML5 \u8d85\u94fe\u63a5 (<a><\/code>) \u548c\u56fe\u7247 (<img><\/code>) \u7684\u57fa\u7840\u7528\u6cd5\u8be6\u89e3<\/strong>\uff0c\u5185\u5bb9\u4ece\u57fa\u7840\u8bed\u6cd5\u5230\u9ad8\u7ea7\u5c5e\u6027\uff0c\u4ee5\u53ca\u5e38\u89c1\u793a\u4f8b\uff0c\u65b9\u4fbf\u5b66\u4e60\u6216\u6587\u6863\u4f7f\u7528\u3002<\/p>\n\n\n\n

\n\n\n\n

1\ufe0f\u20e3 HTML5 \u8d85\u94fe\u63a5 <a><\/code> \u6807\u7b7e<\/h1>\n\n\n\n

\u57fa\u672c\u8bed\u6cd5<\/h2>\n\n\n
\n&lt;a href="https:\/\/www.example.com">\u8bbf\u95ee\u793a\u4f8b\u7f51\u7ad9&lt;\/a>\n\n<\/pre><\/div>\n\n\n
    \n
  • href<\/code>\uff1a\u6307\u5b9a\u94fe\u63a5\u76ee\u6807\u5730\u5740<\/li>\n\n\n\n
  • \u6587\u672c\u5185\u5bb9\uff1a\u663e\u793a\u7ed9\u7528\u6237\u70b9\u51fb<\/li>\n\n\n\n
  • \u70b9\u51fb\u540e\u4f1a\u5728\u5f53\u524d\u7a97\u53e3\u6253\u5f00\u94fe\u63a5\uff08\u9ed8\u8ba4\u884c\u4e3a\uff09<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n
    \u5e38\u7528\u5c5e\u6027<\/h2>\n\n\n\n
    \u5c5e\u6027<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
    href<\/code><\/td>\u94fe\u63a5 URL\uff0c\u53ef\u4e3a\u7edd\u5bf9\u8def\u5f84\u6216\u76f8\u5bf9\u8def\u5f84<\/td><\/tr>
    target<\/code><\/td>\u6253\u5f00\u65b9\u5f0f\uff1a_self<\/code>\uff08\u5f53\u524d\u9875\uff09\u3001_blank<\/code>\uff08\u65b0\u7a97\u53e3\/\u6807\u7b7e\uff09\u3001_parent<\/code>\u3001_top<\/code><\/td><\/tr>
    rel<\/code><\/td>\u5173\u7cfb\u7c7b\u578b\uff1anofollow<\/code>\u3001noopener<\/code>\u3001noreferrer<\/code> \u7b49\uff0c\u5b89\u5168\u4f18\u5316<\/td><\/tr>
    download<\/code><\/td>\u5f3a\u5236\u4e0b\u8f7d\u94fe\u63a5\u6307\u5411\u7684\u6587\u4ef6<\/td><\/tr>
    title<\/code><\/td>\u9f20\u6807\u60ac\u505c\u663e\u793a\u7684\u63d0\u793a\u4fe1\u606f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n
    \u793a\u4f8b 1\uff1a\u65b0\u7a97\u53e3\u6253\u5f00<\/h2>\n\n\n
    \n&lt;a href="https:\/\/www.example.com" target="_blank" rel="noopener">\u6253\u5f00\u793a\u4f8b\u7f51\u7ad9&lt;\/a>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u793a\u4f8b 2\uff1a\u4e0b\u8f7d\u6587\u4ef6<\/h2>\n\n\n
    \n&lt;a href="files\/sample.pdf" download>\u4e0b\u8f7d PDF \u6587\u4ef6&lt;\/a>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u793a\u4f8b 3\uff1a\u951a\u70b9\u94fe\u63a5\uff08\u9875\u9762\u5185\u8df3\u8f6c\uff09<\/h2>\n\n\n
    \n&lt;a href="#section2">\u8df3\u5230\u7b2c\u4e8c\u90e8\u5206&lt;\/a>\n\n&lt;h2 id="section2">\u7b2c\u4e8c\u90e8\u5206&lt;\/h2>\n&lt;p>\u8fd9\u662f\u7b2c\u4e8c\u90e8\u5206\u5185\u5bb9\u3002&lt;\/p>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u793a\u4f8b 4\uff1a\u90ae\u7bb1\u548c\u7535\u8bdd\u94fe\u63a5<\/h2>\n\n\n
    \n&lt;a href="mailto:abc@example.com">\u53d1\u9001\u90ae\u4ef6&lt;\/a>\n&lt;a href="tel:+8613800000000">\u62e8\u6253\u7535\u8bdd&lt;\/a>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    2\ufe0f\u20e3 HTML5 \u56fe\u7247 <img><\/code> \u6807\u7b7e<\/h1>\n\n\n\n
    \u57fa\u672c\u8bed\u6cd5<\/h2>\n\n\n
    \n&lt;img src="images\/pic.jpg" alt="\u793a\u4f8b\u56fe\u7247">\n\n<\/pre><\/div>\n\n\n
      \n
    • src<\/code>\uff1a\u56fe\u7247\u8def\u5f84\uff08\u76f8\u5bf9\u6216\u7edd\u5bf9\uff09<\/li>\n\n\n\n
    • alt<\/code>\uff1a\u66ff\u4ee3\u6587\u672c\uff08\u56fe\u7247\u65e0\u6cd5\u663e\u793a\u6216\u5c4f\u5e55\u9605\u8bfb\u5668\u4f7f\u7528\uff09<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n
      \u5e38\u7528\u5c5e\u6027<\/h2>\n\n\n\n
      \u5c5e\u6027<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
      src<\/code><\/td>\u56fe\u7247\u5730\u5740<\/td><\/tr>
      alt<\/code><\/td>\u66ff\u4ee3\u6587\u5b57<\/td><\/tr>
      width<\/code> \/ height<\/code><\/td>\u56fe\u7247\u663e\u793a\u5bbd\u9ad8\uff08\u50cf\u7d20\uff09<\/td><\/tr>
      title<\/code><\/td>\u9f20\u6807\u60ac\u505c\u63d0\u793a\u6587\u5b57<\/td><\/tr>
      loading<\/code><\/td>\u5ef6\u8fdf\u52a0\u8f7d\uff1alazy<\/code> \u6216 eager<\/code><\/td><\/tr>
      crossorigin<\/code><\/td>\u8de8\u57df\u8bbe\u7f6e\uff1aanonymous<\/code> \u6216 use-credentials<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      \n\n\n\n
      \u793a\u4f8b 1\uff1a\u57fa\u672c\u56fe\u7247<\/h2>\n\n\n
      \n&lt;img src="https:\/\/picsum.photos\/300\/200" alt="\u793a\u4f8b\u56fe\u7247">\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u793a\u4f8b 2\uff1a\u6307\u5b9a\u5bbd\u9ad8<\/h2>\n\n\n
      \n&lt;img src="https:\/\/picsum.photos\/300\/200" alt="\u793a\u4f8b\u56fe\u7247" width="300" height="200">\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u793a\u4f8b 3\uff1a\u61d2\u52a0\u8f7d\u56fe\u7247\uff08HTML5 \u65b0\u7279\u6027\uff09<\/h2>\n\n\n
      \n&lt;img src="https:\/\/picsum.photos\/300\/200" alt="\u61d2\u52a0\u8f7d\u793a\u4f8b" loading="lazy">\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      \u793a\u4f8b 4\uff1a\u56fe\u7247\u4f5c\u4e3a\u94fe\u63a5<\/h2>\n\n\n
      \n&lt;a href="https:\/\/www.example.com" target="_blank">\n    &lt;img src="https:\/\/picsum.photos\/150\/100" alt="\u793a\u4f8b\u56fe\u7247\u94fe\u63a5">\n&lt;\/a>\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      3\ufe0f\u20e3 \u7efc\u5408\u793a\u4f8b\uff1a\u8d85\u94fe\u63a5 + \u56fe\u7247<\/h1>\n\n\n
      \n&lt;h2>HTML5 \u56fe\u7247\u4e0e\u8d85\u94fe\u63a5\u7efc\u5408\u793a\u4f8b&lt;\/h2>\n\n&lt;p>\u70b9\u51fb\u56fe\u7247\u6253\u5f00\u793a\u4f8b\u7f51\u7ad9\uff1a&lt;\/p>\n&lt;a href="https:\/\/www.example.com" target="_blank" rel="noopener">\n    &lt;img src="https:\/\/picsum.photos\/200\/120" alt="\u793a\u4f8b\u56fe\u7247" width="200">\n&lt;\/a>\n\n<\/pre><\/div>\n\n\n
      \n\n\n\n
      4\ufe0f\u20e3 \u5c0f\u8d34\u58eb<\/h1>\n\n\n\n
        \n
      1. SEO & \u65e0\u969c\u788d<\/strong>\n