这篇博客介绍了网页HTML的基本概念和创建步骤。首先解释了HTML是超链接文本，用于让计算机理解的文章，并讲解了和
标签的作用。接着，详细描述了如何在计算机上创建HTML文件，包括显示文件扩展名、创建文本文档和更改后缀名。最后，推荐了两款前端开发软件HBuilderX和Visual Studio Code，并鼓励读者学习CSS和JavaScript，以进一步提升前端开发技能。
</div>
<span>摘要由CSDN通过智能技术生成</span>
</div>
</div>
<article class="baidu_pl">
<div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-044f2cf1dc.css">
<div id="content_views" class="htmledit_views">
<blockquote>
<p id="main-toc"><strong>目录</strong></p>
<p id="%E5%89%8D%E8%A8%80-toc" style="margin-left:0px;"><a href="#%E5%89%8D%E8%A8%80" rel="nofollow">前言</a></p>
<p id="%E4%B8%80%E3%80%81%E7%BD%91%E9%A1%B5HTML%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F-toc" style="margin-left:0px;"><a href="#%E4%B8%80%E3%80%81%E7%BD%91%E9%A1%B5HTML%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F" rel="nofollow">一、网页HTML是什么？</a></p>
<p id="%E4%BA%8C%E3%80%81%E5%88%9B%E5%BB%BA%E6%AD%A5%E9%AA%A4-toc" style="margin-left:0px;"><a href="#%E4%BA%8C%E3%80%81%E5%88%9B%E5%BB%BA%E6%AD%A5%E9%AA%A4" rel="nofollow">二、创建步骤</a></p>
<p id="1.%E6%89%93%E5%BC%80%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%B8%8A%E7%9A%84%E6%96%87%E4%BB%B6%E5%90%8E%E7%BC%80%E5%90%8D-toc" style="margin-left:40px;"><a href="#1.%E6%89%93%E5%BC%80%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%B8%8A%E7%9A%84%E6%96%87%E4%BB%B6%E5%90%8E%E7%BC%80%E5%90%8D" rel="nofollow">1.打开计算机上的文件后缀名</a></p>
<p id="2.%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3-toc" style="margin-left:40px;"><a href="#2.%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3" rel="nofollow">2.创建一个文本文档</a></p>
<p id="3.%E7%BC%96%E8%BE%91%E7%BD%91%E9%A1%B5%E5%86%85%E5%AE%B9-toc" style="margin-left:40px;"><a href="#3.%E7%BC%96%E8%BE%91%E7%BD%91%E9%A1%B5%E5%86%85%E5%AE%B9" rel="nofollow">3.编辑网页内容</a></p>
<p id="%E6%80%BB%E7%BB%93-toc" style="margin-left:0px;"><a href="#%E6%80%BB%E7%BB%93" rel="nofollow">总结</a></p>
</blockquote>
<p></p>
<hr>
<h2 id="%E5%89%8D%E8%A8%80"><a id="_7"></a>前言</h2>
<p><code>提示：这里可以添加本文要记录的大概内容：</code></p>
<p>例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。</p>
<h2 id="%E4%B8%80%E3%80%81%E7%BD%91%E9%A1%B5HTML%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><a id="pandas_16"></a>一、网页HTML是什么？</h2>
<p>要创建网页首先我们得先了解网页的本质，网页又名为超链接文本，和我们经常看到的书籍一样，但是网页是一种能让计算机读懂的文章。既然是文章，就会有文章的规则，例如：<span style="background-color:#f3f3f4;"><head></head></span>中间写的是这篇文章的标题<span style="background-color:#f3f3f4;"><head></head></span>中有一个<span style="background-color:#fef2f0;"><title></title></span>，它中间写的是题目，可以显示在浏览器上面的标题。</p>
<h2 id="%E4%BA%8C%E3%80%81%E5%88%9B%E5%BB%BA%E6%AD%A5%E9%AA%A4"><a id="_19"></a>二、创建步骤</h2>
</div>
</div>
<div id="treeSkill"></div>
</article>
<script>
$(function() {
setTimeout(function () {
var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode');
if (mathcodeList.length > 0) {
for (let i = 0; i < mathcodeList.length; i++) {
if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) {
var alt = mathcodeList[i].alt;
alt = '\\(' + alt + '\\)';
var curSpan = $('<span class="img-codecogs"></span>');
curSpan.text(alt);
$(mathcodeList[i]).before(curSpan);
$(mathcodeList[i]).remove();
}
}
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
}, 1000)
});
</script>
</div>
<div class="hide-article-box hide-article-pos text-center ">
<div class="vip-mask">
<a id="getVipUrl" class="openvippay unlogin" data-report-view='{"mod":"popu_786","spm":"3001.4249","strategy":"pc_vip_readmore","ab":"new","extra":{"abTest":"t_1"}}' data-report-click='{"mod":"popu_786","spm":"3001.4249","strategy":"pc_vip_readmore","ab":"new","extra":{"abTest":"t_1"}}'>
<img class="lock-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/lock.png" alt="">最低0.47元/天 解锁文章
<img class="btn-tag" src="https://img-home.csdnimg.cn/images/20240717034654.png" alt="">
</a>
</div>
</div>
<div class="directory-boxshadow-dialog" style="display:none;">
<div class="directory-boxshadow-dialog-box">
</div>
<div class="vip-limited-time-offer-box-new" id="vip-limited-time-offer-box-new">
<img class="limited-img limited-img-new" src="https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-newWhite.png">
<div class="vip-limited-time-top">
确定要放弃本次机会？
</div>
<span class="vip-limited-time-text">福利倒计时</span>
<div class="limited-time-box-new">
<span class="time-hour"></span>
<i>:</i>
<span class="time-minite"></span>
<i>:</i>
<span class="time-second"></span>
</div>
<div class="limited-time-vip-box">
<p>
<img class="coupon-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-roup.png">
<span class="def">立减 ¥</span>
<span class="active limited-num"></span>
</p>
<span class="">普通VIP年卡可用</span>
</div>
<a class="limited-time-btn-new" href="https://mall.csdn.net/vip" data-report-click='{"spm":"1001.2101.3001.9621"}' data-report-query='spm=1001.2101.3001.9621'>立即使用</a>
</div>
</div> <div class="more-toolbox-new" id="toolBarBox">
<div class="left-toolbox">
<div class="toolbox-left">
<div class="profile-box">
<a class="profile-href" target="_blank" href="https://blog.csdn.net/m0_65014101"><img class="profile-img" src="https://profile-avatar.csdnimg.cn/default.jpg!1">
<span class="profile-name">
霞娶
</span>
</a>
</div>
<div class="profile-attend">
<a class="tool-attend tool-bt-button tool-bt-attend" href="javascript:;" data-report-view='{"mod":"1592215036_002","spm":"1001.2101.3001.4232","extend1":"关注"}'>关注</a>
<a class="tool-item-follow active-animation" style="display:none;">关注</a>
</div>
</div>
<div class="toolbox-middle">
<ul class="toolbox-list">
<li class="tool-item tool-item-size tool-active is-like" id="is-like">
<a class="tool-item-href">
<img style="display:none;" id="is-like-imgactive-animation-like" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarThumbUpactive.png" alt="">
<img class="isactive" style="display:none" id="is-like-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2021Active.png" alt="">
<img class="isdefault" style="display:block" id="is-like-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2021Black.png" alt="">
<span id="spanCount" class="count ">
1
</span>
</a>
<div class="tool-hover-tip"><span class="text space">点赞</span></div>
</li>
<li class="tool-item tool-item-size tool-active is-unlike" id="is-unlike">
<a class="tool-item-href">
<img class="isactive" style="margin-right:0px;display:none" id="is-unlike-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newUnHeart2021Active.png" alt="">
<img class="isdefault" style="margin-right:0px;display:block" id="is-unlike-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newUnHeart2021Black.png" alt="">
<span id="unlikeCount" class="count "></span>
</a>
<div class="tool-hover-tip"><span class="text space">踩</span></div>
</li>
<li class="tool-item tool-item-size tool-active is-collection ">
<a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"popu_824","spm":"1001.2101.3001.4130","ab":"new"}'>
<img style="display:none" id="is-collection-img-collection" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive.png" alt="">
<img class="isdefault" id="is-collection-img" style="display:block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectBlack.png" alt="">
<img class="isactive" id="is-collection-imgactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectActive.png" alt="">
<span class="count get-collection " data-num="6" id="get-collection">
6
</span>
</a>
<div class="tool-hover-tip collect">
<div class="collect-operate-box">
<span class="collect-text" id="is-collection">
收藏
</span>
</div>
</div>
<div class="tool-active-list">
<div class="text">
觉得还不错?
<span class="collect-text" id="tool-active-list-collection">
一键收藏
</span>
<img id="tool-active-list-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/collectionCloseWhite.png" alt="">
</div>
</div>
</li>
<li class="tool-item tool-item-size tool-active tool-item-comment">
<div class="guide-rr-first">
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward01.png" alt="">
<button class="btn-guide-known">知道了</button>
</div>
<a class="tool-item-href" href="#commentBox" data-report-click='{"spm":"1001.2101.3001.7009"}'>
<img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newComment2021Black.png" alt="">
<span class="count">
2
</span>
</a>
<div class="tool-hover-tip"><span class="text space">评论</span></div>
</li>
<li class="tool-item tool-item-bar">
</li>
<li class="tool-item tool-item-size tool-active tool-QRcode" data-type="article" id="tool-share">
<a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"1582594662_002","spm":"1001.2101.3001.4129","ab":"new"}'>
<img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newShareBlack.png" alt="">
</a>
<div class="QRcode active" id="tool-QRcode">
<div class="share-bg-icon icon1" id="shareBgIcon"></div>
<div class="share-bg-box">
<div class="share-content">
<img class="share-avatar" src="https://profile-avatar.csdnimg.cn/default.jpg!1" alt="">
<div class="share-tit">
了解前端开发及简单的网页制作h5
</div>
<div class="share-dec">
简单了解前端知识
</div>
<a id="copyPosterUrl" class="url" data-report-click='{"spm":"1001.2101.3001.7493"}' data-report-view='{"spm":"1001.2101.3001.7493"}'>复制链接</a>
</div>
<div class="share-code">
<div class="share-code-box" id='shareCode'></div>
<div class="share-code-text">扫一扫</div>
</div>
</div>
<div class="share-code-type">
</div>
</div>
</li>
</ul>
</div>
<div class="toolbox-right">
</div>
</div>
</div>
<script type=text/javascript crossorigin src="https://csdnimg.cn/release/phoenix/production/qrcode-7c90a92189.min.js"></script>
<script src="//g.csdnimg.cn/??sharewx/1.2.1/sharewx.js" type="text/javascript"></script>
<script type="text/javascript" crossorigin src="https://g.csdnimg.cn/common/csdn-login-box/csdn-login-box.js"></script>
<script type="text/javascript" crossorigin src="https://g.csdnimg.cn/collection-box/2.1.2/collection-box.js"></script> <div class="first-recommend-box recommend-box ">
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_44859233/article/details/131628482" data-report-view='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-131628482-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"1","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_44859233/article/details/131628482"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://blog.csdn.net/qq_44859233/article/details/131628482" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-131628482-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"1","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_44859233/article/details/131628482"}' data-report-query='spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-131628482-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-131628482-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>h5</em><em>页面</em>如何与原生交互</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info">
<a href="https://blog.csdn.net/qq_44859233" target="_blank"><span class="blog-title">qq_44859233的博客</span></a>
</div>
<div class="info display-flex">
<span class="info-block time">07-09</span>
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
3863
</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://blog.csdn.net/qq_44859233/article/details/131628482" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-131628482-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"1","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_44859233/article/details/131628482"}' data-report-query='spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-131628482-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-131628482-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">本文讲述<em>h5</em><em>页面</em>跟原生通信，比如在app内，调用相机，获取相册内的图片，在app内拉起微信小程序等等，<em>h5</em><em>页面</em>没有这么多权限能够直接调用移动端的原生能力，这个时候就需要与原生进行通讯，传递一个信号给原生这边，然后原生直接调用手机端的能力。下面分别讲解<em>h5</em>与Android，ios系统通信。</div>
</a>
</div>
</div>
</div>
</div>
<script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_commontools-9d6d0707b4.min.js" type="text/javascript" async></script>
<div class="second-recommend-box recommend-box ">
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/fudaihb/article/details/138570567" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~YuanLiJiHua~Position-1-138570567-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"1","strategy":"2~default~YuanLiJiHua~Position","dest":"https://blog.csdn.net/fudaihb/article/details/138570567"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://blog.csdn.net/fudaihb/article/details/138570567" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~YuanLiJiHua~Position-1-138570567-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"1","strategy":"2~default~YuanLiJiHua~Position","dest":"https://blog.csdn.net/fudaihb/article/details/138570567"}' data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-1-138570567-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-1-138570567-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>H5</em>新特性解读：让<em>前端开发</em>更<em>简单</em></div>
<div class="tag">最新发布</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info">
<a href="https://blog.csdn.net/fudaihb" target="_blank"><span class="blog-title">fudaihb的博客</span></a>
</div>
<div class="info display-flex">
<span class="info-block time">05-10</span>
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
1326
</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://blog.csdn.net/fudaihb/article/details/138570567" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~YuanLiJiHua~Position-1-138570567-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"1","strategy":"2~default~YuanLiJiHua~Position","dest":"https://blog.csdn.net/fudaihb/article/details/138570567"}' data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-1-138570567-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-1-138570567-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">随着互联网的不断发展，网页技术也在不断更新迭代。其中，<em>HTML</em>5（以下简称<em>H5</em>）作为一项重要的更新，为<em>前端开发</em>者带来了诸多便利和新特性。在本文中，我们将深入探讨<em>H5</em>的种种新特性，以及它们对<em>前端开发</em>的影响。</div>
</a>
</div>
</div>
</div>
</div>
<a id="commentBox" name="commentBox"></a>
<div id="pcCommentBox" class="comment-box comment-box-new2 unlogin-comment-box-new" style="display:none">
<div class="unlogin-comment-model">
<span class="unlogin-comment-tit">2 条评论</span>
<span class="unlogin-comment-text">您还未登录，请先</span>
<span class="unlogin-comment-bt">登录</span>
<span class="unlogin-comment-text">后发表或查看评论</span>
</div>
</div>
<div class="recommend-box insert-baidu-box recommend-box-style ">
<div class="recommend-item-box no-index" style="display:none"></div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/SmartCodeTech/article/details/123519422" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2-123519422-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"2","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/SmartCodeTech/article/details/123519422"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://blog.csdn.net/SmartCodeTech/article/details/123519422" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2-123519422-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"2","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/SmartCodeTech/article/details/123519422"}' data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-123519422-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-123519422-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1">写给后端开发工程师的<em>H5</em><em>前端开发</em>知识</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info">
<a href="https://blog.csdn.net/SmartCodeTech" target="_blank"><span class="blog-title">SmartCodeTech的博客</span></a>
</div>
<div class="info display-flex">
<span class="info-block time">03-16</span>
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
2326
</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://blog.csdn.net/SmartCodeTech/article/details/123519422" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2-123519422-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"2","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/SmartCodeTech/article/details/123519422"}' data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-123519422-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-123519422-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">一、引言
web发展到目前为止已经有将近30年的历史，在web兴起的早期，并没有<em>前端</em>这个概念。最初所有的开发工作都是由后端开发工程师完成，随着业务越来越复杂，工作量逐渐的增加，项目中的可视化部分和一部分交互功能的开发工作逐渐从业务中剥离出来，形成了<em>前端开发</em>。大约在2000年左右，雅虎等公司开始设立<em>前端</em>工程师职位，从2005年开始，正式的<em>前端</em>工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，<em>前端开发</em>的工作越来越重要，<em>前端</em>领域的技术发展也越来越快，各种新的思想、设计模式、工具和平台都快速发展</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_52799985/article/details/131881085" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-131881085-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_52799985/article/details/131881085"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://blog.csdn.net/qq_52799985/article/details/131881085" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-131881085-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_52799985/article/details/131881085"}' data-report-query='spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-131881085-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-131881085-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>前端</em>必知：19.<em>H5</em>新标签</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info">
<a href="https://blog.csdn.net/qq_52799985" target="_blank"><span class="blog-title">qq_52799985的博客</span></a>
</div>
<div class="info display-flex">
<span class="info-block time">07-23</span>
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
779
</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://blog.csdn.net/qq_52799985/article/details/131881085" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-131881085-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_52799985/article/details/131881085"}' data-report-query='spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-131881085-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-131881085-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">学习<em>HTML</em>5的新标签对于<em>前端开发</em>者来说非常重要，因为它们提供了更好的语义化和结构化的网页内容。以下是关于学习<em>H5</em>新标签的一些总结要点：<em>了解</em>新标签的语义：<em>HTML</em>5的新标签主要用于增强网页的结构和表达意义。在学习新标签之前，先理解每个标签的语义和用途。这样可以更好地选择适当的标签来描述<em>页面</em>内容。<em>了解</em>浏览器的兼容性：虽然<em>HTML</em>5已成为主流标准，但不同的浏览器对新标签的支持可能有所差异。在使用新标签之前，务必检查各个浏览器的兼容性，并根据需要添加必要的兼容性代码或使用Polyfill来提供支持。</div>
</a>
</div>
</div>
</div>
<dl id="recommend-item-box-tow" class="recommend-item-box type_blog clearfix">
</dl>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_46683645/article/details/115819516" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-4-115819516-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"4","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_46683645/article/details/115819516"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://blog.csdn.net/weixin_46683645/article/details/115819516" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-4-115819516-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"4","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_46683645/article/details/115819516"}' data-report-query='spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-4-115819516-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-4-115819516-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>前端</em>学习之<em>H5</em></div>
</a>
</div>
<div class="info-box display-flex">
<div class="info">
<a href="https://blog.csdn.net/weixin_46683645" target="_blank"><span class="blog-title">weixin_46683645的博客</span></a>
</div>
<div class="info display-flex">
<span class="info-block time">04-18</span>
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
308
</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://blog.csdn.net/weixin_46683645/article/details/115819516" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-4-115819516-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"4","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_46683645/article/details/115819516"}' data-report-query='spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-4-115819516-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-4-115819516-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">一、<em>HTML</em>5
可调整视频的大小和选择视频的类型（type=video/mp4/webm/ogg）
使用play()和pause()方法可实现视频的暂停和播放
元素支持多个 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" ty</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/yihuliunian/article/details/104684226" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-104684226-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"5","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/yihuliunian/article/details/104684226"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://blog.csdn.net/yihuliunian/article/details/104684226" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-104684226-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"5","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/yihuliunian/article/details/104684226"}' data-report-query='spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-104684226-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-104684226-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>H5</em><em>页面</em>开发怎么做？分析<em>H5</em><em>页面</em>开发令人期待的 5 项功能。</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info">
<a href="https://blog.csdn.net/yihuliunian" target="_blank"><span class="blog-title">yihuliunian的博客</span></a>
</div>
<div class="info display-flex">
<span class="info-block time">03-05</span>
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
1100
</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://blog.csdn.net/yihuliunian/article/details/104684226" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-104684226-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"5","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/yihuliunian/article/details/104684226"}' data-report-query='spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-104684226-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-5-104684226-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">来源品略网：http://www.pinlue.com/article/2020/03/0518/019985707535.<em>html</em>
<em>H5</em><em>页面</em>开发怎么做-<em>H5</em><em>页面</em>开发令人期待的 5 项功能
<em>HTML</em> 5 是超文本置标语言下一个重要版本，<em>HTML</em> 自1999年发布 <em>HTML</em> 4.01 以来，其开发一直处于停顿状态，而1999年至今正好是 Web 飞速发展的时间，现在的 <em>HTML</em> 版本已经无...</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/qq_36668399/85416544" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-6-85416544-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"6","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/qq_36668399/85416544"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://download.csdn.net/download/qq_36668399/85416544" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-6-85416544-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"6","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/qq_36668399/85416544"}' data-report-query='spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-6-85416544-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-6-85416544-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>前端</em>网页+<em>h5</em>+js 用于送给女朋友</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info display-flex">
<span class="info-block">05-19</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://download.csdn.net/download/qq_36668399/85416544" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-6-85416544-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"6","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/qq_36668399/85416544"}' data-report-query='spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-6-85416544-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-6-85416544-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">标题中的“<em>前端</em>网页+<em>h5</em>+js 用于送给女朋友”表明这是一个...这个项目展示了<em>前端开发</em>的灵活性和创造力，也是技术与情感相结合的一个美好示例。对于想要学习或提升<em>前端</em>技能的人来说，这样的项目提供了很好的实践机会。</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/weixin_45893742/85006650" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-7-85006650-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"7","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_45893742/85006650"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://download.csdn.net/download/weixin_45893742/85006650" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-7-85006650-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"7","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_45893742/85006650"}' data-report-query='spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-7-85006650-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-7-85006650-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1">移动Web网页开发笔记</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info display-flex">
<span class="info-block">03-20</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://download.csdn.net/download/weixin_45893742/85006650" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-7-85006650-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"7","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_45893742/85006650"}' data-report-query='spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-7-85006650-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-7-85006650-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">这份“移动Web网页开发笔记”详细地介绍了这一过程，旨在帮助开发者掌握<em>网页制作</em>的关键技能。使用Typora这款轻量级 Markdown 编辑器打开这些笔记，可以使阅读和学习体验更加流畅。 首先，我们从01-<em>H5</em>C3 进阶资料...</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/Fend2019/35449196" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-8-35449196-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"8","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/Fend2019/35449196"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://download.csdn.net/download/Fend2019/35449196" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-8-35449196-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"8","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/Fend2019/35449196"}' data-report-query='spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-35449196-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-35449196-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>H5</em><em>前端</em>实战案例_<em>前端开发</em>_窗边风景动画（css+js）.rar</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info display-flex">
<span class="info-block">10-30</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://download.csdn.net/download/Fend2019/35449196" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-8-35449196-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"8","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/Fend2019/35449196"}' data-report-query='spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-35449196-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-35449196-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">在本<em>H5</em><em>前端</em>实战案例中，我们探讨的主题是利用CSS和JavaScript来创建一个窗边风景动画。这个项目展示了如何...对于<em>前端开发</em>人员来说，这样的实践有助于提升技能，同时也能激发创新思维，设计出更多吸引人的网页效果。</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/qq_43770056/88340348" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-9-88340348-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"9","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/qq_43770056/88340348"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://download.csdn.net/download/qq_43770056/88340348" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-9-88340348-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"9","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/qq_43770056/88340348"}' data-report-query='spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-88340348-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-88340348-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>H5</em> 微场景动画<em>网页制作</em></div>
</a>
</div>
<div class="info-box display-flex">
<div class="info display-flex">
<span class="info-block">09-14</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://download.csdn.net/download/qq_43770056/88340348" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-9-88340348-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"9","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/qq_43770056/88340348"}' data-report-query='spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-88340348-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-88340348-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">在现代数字媒体领域，<em>H5</em>微场景动画<em>网页制作</em>已经成为一种流行的互动式内容创作方式，尤其在营销、教育和娱乐行业中广泛应用。<em>H5</em>是指基于<em>HTML</em>5标准的网页技术，它提供了丰富的功能和强大的交互性，使得网页可以<em>制作</em>出...</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/qq_42483468/10902717" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-10-10902717-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"10","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/qq_42483468/10902717"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://download.csdn.net/download/qq_42483468/10902717" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-10-10902717-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"10","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/qq_42483468/10902717"}' data-report-query='spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-10-10902717-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-10-10902717-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>简单</em>的<em>H5</em><em>网页制作</em></div>
</a>
</div>
<div class="info-box display-flex">
<div class="info display-flex">
<span class="info-block">01-08</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://download.csdn.net/download/qq_42483468/10902717" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-10-10902717-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"10","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/qq_42483468/10902717"}' data-report-query='spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-10-10902717-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-10-10902717-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1"><em>制作</em>的一个很<em>简单</em>的关于民谣的<em>H5</em>网页，里面有一些<em>简单</em>的hover动画和JQL动画，拿来应付大学作业够了</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/ztj188/10194800" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-11-10194800-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"11","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/ztj188/10194800"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://download.csdn.net/download/ztj188/10194800" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-11-10194800-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"11","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/ztj188/10194800"}' data-report-query='spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-11-10194800-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-11-10194800-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1">非常好用的<em>前端</em>模板<em>h5</em></div>
</a>
</div>
<div class="info-box display-flex">
<div class="info display-flex">
<span class="info-block">01-08</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://download.csdn.net/download/ztj188/10194800" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendFromBaidu~Rate-11-10194800-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"11","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://download.csdn.net/download/ztj188/10194800"}' data-report-query='spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-11-10194800-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendFromBaidu%7ERate-11-10194800-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">这是非常漂亮、好用的<em>前端</em>模板，帮助我在多个项目中快速整合了展示<em>页面</em>，感谢</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/2301_77550592/88151266" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-12-88151266-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"12","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/2301_77550592/88151266"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://download.csdn.net/download/2301_77550592/88151266" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-12-88151266-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"12","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/2301_77550592/88151266"}' data-report-query='spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-12-88151266-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-12-88151266-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1">407_<em>HTML</em>手机电脑网站_网页源码移动端<em>前端</em>_<em>H5</em>模板_自适应响应式源码.zip</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info display-flex">
<span class="info-block">08-02</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://download.csdn.net/download/2301_77550592/88151266" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-12-88151266-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"12","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/2301_77550592/88151266"}' data-report-query='spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-12-88151266-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-12-88151266-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">总之，“407_<em>HTML</em>手机电脑网站_网页源码移动端<em>前端</em>_<em>H5</em>模板_自适应响应式源码.zip”是一个全面的<em>前端开发</em>工具，不仅提供了跨平台兼容的网页模板，还展现了现代网页设计的最佳实践。无论你是新手还是资深开发者，都有...</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://chenchuang.blog.csdn.net/article/details/126198687" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-13-126198687-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"13","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://chenchuang.blog.csdn.net/article/details/126198687"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://chenchuang.blog.csdn.net/article/details/126198687" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-13-126198687-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"13","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://chenchuang.blog.csdn.net/article/details/126198687"}' data-report-query='spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-126198687-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-126198687-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>静态网页作业——我的家乡安庆</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info">
<a href="https://blog.csdn.net/QQ_____365392777" target="_blank"><span class="blog-title">QQ_____365392777的博客</span></a>
</div>
<div class="info display-flex">
<span class="info-block time">08-11</span>
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
3146
</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://chenchuang.blog.csdn.net/article/details/126198687" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-13-126198687-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"13","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://chenchuang.blog.csdn.net/article/details/126198687"}' data-report-query='spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-126198687-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-126198687-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">1网页简介：此作品为学生个人主页网页设计题材，<em>HTML</em>+CSS 布局<em>制作</em>,web<em>前端</em>期末大作业,大学生网页设计作业源码，这是一个不错的<em>网页制作</em>，画面精明，代码为<em>简单</em>学生水平, 非常适合初学者学习使用。2.网页编辑等任意<em>html</em>编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级<em>页面</em>等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_44519342/article/details/123596732" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-14-123596732-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"14","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_44519342/article/details/123596732"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://blog.csdn.net/weixin_44519342/article/details/123596732" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-14-123596732-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"14","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_44519342/article/details/123596732"}' data-report-query='spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-123596732-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-123596732-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1">第一个<em>h5</em><em>页面</em></div>
</a>
</div>
<div class="info-box display-flex">
<div class="info">
<a href="https://blog.csdn.net/weixin_44519342" target="_blank"><span class="blog-title">weixin_44519342的博客</span></a>
</div>
<div class="info display-flex">
<span class="info-block time">03-23</span>
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
67
</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://blog.csdn.net/weixin_44519342/article/details/123596732" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-14-123596732-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"14","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_44519342/article/details/123596732"}' data-report-query='spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-123596732-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-123596732-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">第一个<em>h5</em><em>页面</em></div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_43703144/article/details/104925421" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-15-104925421-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"15","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_43703144/article/details/104925421"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://blog.csdn.net/weixin_43703144/article/details/104925421" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-15-104925421-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"15","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_43703144/article/details/104925421"}' data-report-query='spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-104925421-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-104925421-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1">小白入门：<em>H5</em><em>页面</em>需要做什么?</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info">
<a href="https://blog.csdn.net/weixin_43703144" target="_blank"><span class="blog-title">weixin_43703144的博客</span></a>
</div>
<div class="info display-flex">
<span class="info-block time">03-17</span>
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
427
</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://blog.csdn.net/weixin_43703144/article/details/104925421" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-15-104925421-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"15","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_43703144/article/details/104925421"}' data-report-query='spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-104925421-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-104925421-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1"><em>H5</em>需要做什么?很多人问千锋广州小编这个问题，而问这个问题的人基本上都是刚听说过<em>H5</em>，处在懵懂的阶段，他们往往会被一些网上炫酷<em>页面</em>所吸引，开始的目的也很<em>简单</em>，能通过自己的努力做出这些<em>页面</em>，而这些<em>页面</em>效果一般只要通过<em>简单</em>的<em>HTML</em>和CSS就能实现，但这仅仅是表面现象，做出来与做好是两码事。而要做好它，必须要深入地去<em>了解</em>什么是<em>H5</em>。
网上有很多说法，说<em>H5</em>就是<em>HTML</em>的第5个版本，其实这不完全正确，H...</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_30304193/article/details/82700842" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-16-82700842-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"16","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_30304193/article/details/82700842"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://blog.csdn.net/qq_30304193/article/details/82700842" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-16-82700842-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"16","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_30304193/article/details/82700842"}' data-report-query='spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-82700842-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-82700842-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>H5</em><em>前端开发</em>入门学习（基于vs+vue开发）</div>
<div class="tag">热门推荐</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info">
<a href="https://blog.csdn.net/qq_30304193" target="_blank"><span class="blog-title">qq_30304193的博客</span></a>
</div>
<div class="info display-flex">
<span class="info-block time">12-04</span>
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
1万+
</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://blog.csdn.net/qq_30304193/article/details/82700842" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-16-82700842-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"16","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_30304193/article/details/82700842"}' data-report-query='spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-82700842-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-82700842-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">文章仅供初学入门，只讲学习套路，如何去学习，具体知识点不具体叙述。
<em>h5</em>开发即无线端的web开发
学习<em>h5</em>开发，整体<em>了解</em>一下各种技术与工具：
常用开发框架
排名前三框架：react.js 、vue.js、Angular
常用ui框架
mui、mint-ui等等
node.js
Javascript运行环境，意思就是你开发的<em>h5</em>项目需要的运行环境
npm
通...</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_34109408/article/details/94541157" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-94541157-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_34109408/article/details/94541157"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://blog.csdn.net/weixin_34109408/article/details/94541157" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-94541157-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_34109408/article/details/94541157"}' data-report-query='spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-94541157-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-94541157-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1">倾力总结40条常见的移动端Web<em>页面</em>问题解决方案</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info">
<a href="https://blog.csdn.net/weixin_34109408" target="_blank"><span class="blog-title">weixin_34109408的博客</span></a>
</div>
<div class="info display-flex">
<span class="info-block time">05-30</span>
<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
3240
</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://blog.csdn.net/weixin_34109408/article/details/94541157" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-94541157-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_34109408/article/details/94541157"}' data-report-query='spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-94541157-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-94541157-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1">原文链接：http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651493053&idx=1&sn=8409bc267cd73229425a915f27f6a27f&scene=0#wechat_redirect
1.安卓浏览器看背景图片，有些设备会模糊。
用同等比例的图片在PC机上很清楚，但是手机上很...</div>
</a>
</div>
</div>
</div>
<div class="recommend-item-box type_chatgpt clearfix" data-url="https://wenku.csdn.net/answer/a963ba7fba234b31bda4d453c99f024a" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-chatgpt-2~default~OPENSEARCH~Position-18-a963ba7fba234b31bda4d453c99f024a-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"18","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/answer/a963ba7fba234b31bda4d453c99f024a"}'>
<div class="content-box">
<div class="content-blog display-flex">
<div class="title-box">
<a href="https://wenku.csdn.net/answer/a963ba7fba234b31bda4d453c99f024a" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-chatgpt-2~default~OPENSEARCH~Position-18-a963ba7fba234b31bda4d453c99f024a-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"18","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/answer/a963ba7fba234b31bda4d453c99f024a"}' data-report-query='spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-18-a963ba7fba234b31bda4d453c99f024a-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-18-a963ba7fba234b31bda4d453c99f024a-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="left ellipsis-online ellipsis-online-1"><em>h5</em>开发和<em>前端开发</em>区别</div>
</a>
</div>
<div class="info-box display-flex">
<div class="info display-flex">
<span class="info-block">04-04</span>
</div>
</div>
</div>
<div class="desc-box">
<a href="https://wenku.csdn.net/answer/a963ba7fba234b31bda4d453c99f024a" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-chatgpt-2~default~OPENSEARCH~Position-18-a963ba7fba234b31bda4d453c99f024a-blog-126649597.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1722024081884_75167\"}","dist_request_id":"1722024081884_75167","ab_strategy":"landing_bge","index":"18","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/answer/a963ba7fba234b31bda4d453c99f024a"}' data-report-query='spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-18-a963ba7fba234b31bda4d453c99f024a-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-chatgpt-2%7Edefault%7EOPENSEARCH%7EPosition-18-a963ba7fba234b31bda4d453c99f024a-blog-126649597.235%5Ev43%5Epc_blog_bottom_relevance_base2'>
<div class="desc ellipsis-online ellipsis-online-1"><em>H5</em>开发和<em>前端开发</em>都是涉及<em>网页制作</em>的领域，但是有一些区别：
1. <em>H5</em>开发更专注于移动端的<em>网页制作</em>，包括手机网站和APP<em>页面</em>，而<em>前端开发</em>更偏向于桌面端的<em>网页制作</em>。
2. <em>H5</em>开发需要关注移动端的特性，例如屏幕大小、分辨率、触控操作等等，而<em>前端开发</em>则更多考虑浏览器兼容性和<em>页面</em>性能优化。
3. <em>H5</em>开发需要掌握一些移动端开发的技术，例如Hybrid开发、微信开发等等，而<em>前端开发</em>则更多使用<em>HTML</em>、CSS、JavaScript等技术。
4. <em>H5</em>开发跨平台性更强，可以在多个移动端平台上运行，而<em>前端开发</em>则更多针对不同浏览器进行开发和优化。
综上所述，<em>H5</em>开发和<em>前端开发</em>虽然有一些区别，但是两者都是<em>网页制作</em>领域的重要方向，需要掌握相关技术才能进行开发。</div>
</a>
</div>
</div>
</div>
</div>
<div class="blog-footer-bottom" style="margin-top:10px;"></div>
<script src="https://g.csdnimg.cn/common/csdn-footer/csdn-footer.js" data-isfootertrack="false" type="text/javascript"></script>
<script type="text/javascript">
window.csdn.csdnFooter.options = {
el: '.blog-footer-bottom',
type: 2
}
</script> </main>
<aside class="blog_container_aside">
<div id="asideProfile" class="aside-box">
<div class="profile-intro d-flex">
<div class="avatar-box d-flex justify-content-center flex-column">
<a href="https://blog.csdn.net/m0_65014101" target="_blank" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4121","dest":"https://blog.csdn.net/m0_65014101","ab":"new"}'>
<img src="https://profile-avatar.csdnimg.cn/default.jpg!1" class="avatar_pic">
</a>
</div>
<div class="user-info d-flex flex-column profile-intro-name-box">
<div class="profile-intro-name-boxTop">
<a href="https://blog.csdn.net/m0_65014101" target="_blank" class="" id="uid" title="霞娶" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4122","dest":"https://blog.csdn.net/m0_65014101","ab":"new"}'>
<span class="name " username="m0_65014101">霞娶</span>
</a>
<span>
</span>
<span class="flag expert-blog">
<span class="bubble">CSDN认证博客专家</span>
</span>
<span class="flag company-blog">
<span class="bubble">CSDN认证企业博客</span>
</span>
</div>
<div class="profile-intro-name-boxFooter">
<span class="personal-home-page personal-home-years" title="已加入 CSDN 3年">码龄3年</span>
<span class="personal-home-page">
<a class="personal-home-certification" href="https://i.csdn.net/#/uc/profile?utm_source=14998968" target="_blank" title="暂无认证">
<img src="https://csdnimg.cn/identity/nocErtification.png" alt="">
暂无认证
</a>
</span>
</div>
</div>
</div>
<div class="data-info d-flex item-tiling">
<dl class="text-center" title="2">
<a href="https://blog.csdn.net/m0_65014101" data-report-click='{"mod":"1598321000_001","spm":"1001.2101.3001.4310"}' data-report-query="t=1">
<dt><span class="count">2</span></dt>
<dd class="font">原创</dd>
</a>
</dl>
<dl class="text-center" data-report-click='{"mod":"1598321000_002","spm":"1001.2101.3001.4311"}' title="1851164">
<a href="https://blog.csdn.net/rank/list/weekly" target="_blank">
<dt><span class="count">185万+</span></dt>
<dd class="font">周排名</dd>
</a>
</dl>
<dl class="text-center" title="1828702">
<a href="https://blog.csdn.net/rank/list/total" data-report-click='{"mod":"1598321000_003","spm":"1001.2101.3001.4312"}' target="_blank">
<dt><span class="count">182万+</span></dt>
<dd class="font">总排名</dd>
</a>
</dl>
<dl class="text-center" style="min-width:58px" title="3611">
<dt><span class="count">3611</span></dt>
<dd>访问</dd>
</dl>
<dl class="text-center" title="1级,点击查看等级说明">
<dt><a href="https://blog.csdn.net/blogdevteam/article/details/103478461" target="_blank">
<img class="level" src="https://csdnimg.cn/identity/blog1.png">
</a>
</dt>
<dd>等级</dd>
</dl>
</div>
<div class="item-rank"></div>
<div class="data-info d-flex item-tiling">
<dl class="text-center" title="22">
<dt><span class="count">22</span></dt>
<dd>积分</dd>
</dl>
<dl class="text-center" id="fanBox" title="0">
<dt><span class="count" id="fan">0</span></dt>
<dd>粉丝</dd>
</dl>
<dl class="text-center" title="1">
<dt><span class="count">1</span></dt>
<dd>获赞</dd>
</dl>
<dl class="text-center" title="2">
<dt><span class="count">2</span></dt>
<dd>评论</dd>
</dl>
<dl class="text-center" title="8">
<dt><span class="count">8</span></dt>
<dd>收藏</dd>
</dl>
</div>
<div class="aside-box-footer" data-report-view='{"spm":"3001.4296"}'>
<div class="badge-box d-flex">
<div class="badge d-flex">
<div class="icon-badge" title="新秀勋章">
<div class="mouse-box">
<img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/xinxiu@240.png" alt="新秀勋章">
</div>
</div>
<div class="icon-badge" title="创作能手">
<div class="mouse-box">
<img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/qixiebiaobing4@240.png" alt="创作能手">
</div>
</div>
</div>
</div>
</div>
<div class="profile-intro-name-boxOpration">
<div class="opt-letter-watch-box">
<a rel="nofollow" class="bt-button personal-letter" href="https://im.csdn.net/chat/m0_65014101" target="_blank" rel="noopener">私信</a>
</div>
<div class="opt-letter-watch-box">
<a class="personal-watch bt-button" id="btnAttent" >关注</a>
</div>
</div>
</div>
<a id="remuneration" data-report-click='{"spm":"1001.2101.3001.9809"}' rel="nofollow" href="" class="remuneration-box">
<img src="" alt="">
</a>
<div id="asideWriteGuide" class="aside-box side-write-guide-box type-2" data-report-view='{"spm":"3001.9728"}'>
<div class="content-box">
<a rel="nofollow" href="https://mp.csdn.net" target="_blank" class="btn-go-write" data-report-query="spm=3001.9728" data-report-click='{"spm":"3001.9728"}'>
<img src="https://img-home.csdnimg.cn/images/20240218021830.png" alt="写文章">
</a>
</div>
</div>
<div id="asideSearchArticle" class="aside-box">
<div class="aside-content search-comter">
<div class="aside-search aside-search-blog">
<input type="text" class="input-serch-blog" name="" autocomplete="off" value="" id="search-blog-words" placeholder="搜博主文章">
<a class="btn-search-blog" data-report-click='{"spm":"1001.2101.3001.9182"}'>
<img src="//csdnimg.cn/cdn/content-toolbar/csdn-sou.png?v=1587021042">
</a>
</div>
</div>
</div>
<div id="asideHotArticle" class="aside-box">
<h3 class="aside-title">热门文章</h3>
<div class="aside-content">
<ul class="hotArticle-list">
<li>
<a href="https://blog.csdn.net/m0_65014101/article/details/126649597" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/m0_65014101/article/details/126649597","ab":"new"}'>
了解前端开发及简单的网页制作h5
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
<span class="read">2819</span>
</a>
</li>
<li>
<a href="https://blog.csdn.net/m0_65014101/article/details/126646574" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/m0_65014101/article/details/126646574","ab":"new"}'>
网页中的放大镜
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt="">
<span class="read">791</span>
</a>
</li>
</ul>
</div>
</div>
<div id="asideNewComments" class="aside-box">
<h3 class="aside-title">最新评论</h3>
<div class="aside-content">
<ul class="newcomment-list">
<li>
<a class="title text-truncate" target="_blank" href="https://blog.csdn.net/m0_65014101/article/details/126649597#comments_27428211" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/m0_65014101/article/details/126649597#comments_27428211","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/m0_65014101/article/details/126649597#comments_27428211","ab":"new"}'>了解前端开发及简单的网页制作h5</a>
<p class="comment ellipsis">
<a href="https://blog.csdn.net/community_717" class="user-name" target="_blank">CSDN-Ada助手: </a>
<span class="code-comments">非常感谢博主分享关于前端开发和网页制作h5的知识，这篇博客对于想要了解前端开发的读者非常有帮助。我认为，下一篇博客可以围绕着“前端框架的选择和应用”，详细介绍常用的前端框架及其应用场景，让读者更好地了解如何选择和使用不同的前端框架来进行网页制作。我相信这样的技术文章对其他用户也会非常有启发和帮助，期待您的下一篇博客！
为了方便博主创作，提高生产力，CSDN上线了AI写作助手功能，就在创作编辑器右侧哦～（https://mp.csdn.net/edit?utm_source=blog_comment_recall ）诚邀您来加入测评，到此（https://activity.csdn.net/creatActivity?id=10450&utm_source=blog_comment_recall）发布测评文章即可获得「话题勋章」，同时还有机会拿定制奖牌。</span>
</p>
</li>
</ul>
</div>
</div>
<div id="asideArchive" class="aside-box" style=" width:300px;">
<h3 class="aside-title">最新文章</h3>
<div class="aside-content">
<ul class="inf_list clearfix">
<li class="clearfix">
<a href="https://blog.csdn.net/m0_65014101/article/details/126646574" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/m0_65014101/article/details/126646574","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/m0_65014101/article/details/126646574","ab":"new"}'>网页中的放大镜</a>
</li>
</ul>
<div class="archive-bar"></div>
<div class="archive-box">
<div class="archive-list-item"><a href="https://blog.csdn.net/m0_65014101?type=blog&year=2022&month=09" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/m0_65014101?type=blog&year=2022&month=09"}'><span class="year">2022年</span><span class="num">2篇</span></a></div>
</div>
</div>
</div>
<!-- 详情页显示目录 -->
<!--文章目录-->
<div id="asidedirectory" class="aside-box">
<div class='groupfile' id="directory">
<h3 class="aside-title">目录</h3>
<div class="align-items-stretch group_item">
<div class="pos-box">
<div class="scroll-box">
<div class="toc-box"></div>
</div>
</div>
</div>
</div>
</div>
</aside>
<script>
$("a.flexible-btn").click(function(){
$(this).parents('div.aside-box').removeClass('flexible-box');
$(this).parents("p.text-center").remove();
})
</script>
<script type="text/javascript" src="https://g.csdnimg.cn/user-tooltip/2.7/user-tooltip.js"></script>
<script type="text/javascript" src="https://g.csdnimg.cn/user-medal/2.0.0/user-medal.js"></script> </div>
<div class="recommend-right align-items-stretch clearfix" id="rightAside" data-type="recommend">
<aside class="recommend-right_aside">
<div id="recommend-right" >
<div class='flex-column aside-box groupfile' id="groupfile">
<div class="groupfile-div">
<h3 class="aside-title">目录</h3>
<div class="align-items-stretch group_item">
<div class="pos-box">
<div class="scroll-box">
<div class="toc-box"></div>
</div>
</div>
</div>
</div>
</div>
<div id="asideArchive" class="aside-box" style=" width:300px;">
<h3 class="aside-title">最新文章</h3>
<div class="aside-content">
<ul class="inf_list clearfix">
<li class="clearfix">
<a href="https://blog.csdn.net/m0_65014101/article/details/126646574" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/m0_65014101/article/details/126646574","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/m0_65014101/article/details/126646574","ab":"new"}'>网页中的放大镜</a>
</li>
</ul>
<div class="archive-bar"></div>
<div class="archive-box">
<div class="archive-list-item"><a href="https://blog.csdn.net/m0_65014101?type=blog&year=2022&month=09" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/m0_65014101?type=blog&year=2022&month=09"}'><span class="year">2022年</span><span class="num">2篇</span></a></div>
</div>
</div>
</div>
</div>
</aside>
</div>
<div class="recommend-right1 align-items-stretch clearfix" id="rightAsideConcision" data-type="recommend">
<aside class="recommend-right_aside">
<div id="recommend-right-concision" >
<div class='flex-column aside-box groupfile' id="groupfileConcision">
<div class="groupfile-div1">
<h3 class="aside-title">目录</h3>
<div class="align-items-stretch group_item">
<div class="pos-box">
<div class="scroll-box">
<div class="toc-box"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
<div class="mask-dark"></div>
<script type="text/javascript">
var timert = setInterval(function() {
sideToolbar = $(".csdn-side-toolbar");
if (sideToolbar.length > 0) {
sideToolbar.css('cssText', 'bottom:64px !important;')
clearInterval(timert);
}
}, 200);
</script>
<div class="skin-boxshadow"></div>
<div class="directory-boxshadow"></div>
<div class="comment-side-box-shadow comment-side-tit-close" id="commentSideBoxshadow">
<div class="comment-side-content">
<div class="comment-side-tit">
<div class="comment-side-tit-count">评论 <span class="count">2</span></div>
<img class="comment-side-tit-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/closeBt.png"></div>
<div id="pcCommentSideBox" class="comment-box comment-box-new2 unlogin-comment-box-new" style="display:none">
</div>
<div id="pcFlodCommentSideBox" class="pc-flodcomment-sidebox">
<div class="comment-fold-tit"><span id="lookUnFlodComment" class="back"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowLeftWhite.png" alt=""></span>被折叠的 <span class="count"></span> 条评论
<a href="https://blogdev.blog.csdn.net/article/details/122245662" class="tip" target="_blank">为什么被折叠?</a>
<a href="https://bbs.csdn.net/forums/FreeZone" class="park" target="_blank">
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/iconPark.png">到【灌水乐园】发言</a>
</div>
<div class="comment-fold-content"></div>
<div id="lookBadComment" class="look-bad-comment side-look-comment">
<a class="look-more-comment">查看更多评论<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowDownWhite.png" alt=""></a>
</div>
</div>
</div>
<div class="comment-rewarddialog-box">
<div class="form-box">
<div class="title-box">
添加红包
<a class="btn-form-close"></a>
</div>
<form id="commentRewardForm">
<div class="ipt-box">
<label for="txtName">祝福语</label>
<div class="ipt-btn-box">
<input type="text" name="name" id="txtName" autocomplete="off" maxlength="50">
<a class="btn-ipt btn-random"></a>
</div>
<p class="notice">请填写红包祝福语或标题</p>
</div>
<div class="ipt-box">
<label for="txtSendAmount">红包数量</label>
<div class="ipt-txt-box">
<input type="text" name="sendAmount" maxlength="4" id="txtSendAmount" placeholder="请填写红包数量(最小10个)" autocomplete="off">
<span class="after-txt">个</span>
</div>
<p class="notice">红包个数最小为10个</p>
</div>
<div class="ipt-box">
<label for="txtMoney">红包总金额</label>
<div class="ipt-txt-box error">
<input type="text" name="money" maxlength="5" id="txtMoney" placeholder="请填写总金额(最低5元)" autocomplete="off">
<span class="after-txt">元</span>
</div>
<p class="notice">红包金额最低5元</p>
</div>
<div class="balance-info-box">
<label>余额支付</label>
<div class="balance-info">
当前余额<span class="balance">3.43</span>元
<a href="https://i.csdn.net/#/wallet/balance/recharge" class="link-charge" target="_blank">前往充值 ></a>
</div>
</div>
<div class="opt-box">
<div class="pay-info">
需支付：<span class="price">10.00</span>元
</div>
<button type="button" class="ml-auto btn-cancel">取消</button>
<button type="button" class="ml8 btn-submit" disabled="true">确定</button>
</div>
</form>
</div>
</div>
<div class="rr-guide-box">
<div class="rr-first-box">
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward02.png" alt="">
<button class="btn-guide-known next">下一步</button>
</div>
<div class="rr-second-box">
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward03.png" alt="">
<button class="btn-guide-known known">知道了</button>
</div>
</div>
</div>
<div class="redEnvolope" id="redEnvolope">
<div class="env-box">
<div class="env-container">
<div class="pre-open" id="preOpen">
<div class="top">
<header>
<img class="clearTpaErr" :src="redpacketAuthor.avatar" alt="" />
<div class="author">成就一亿技术人!</div>
</header>
<div class="bot-icon"></div>
</div>
<footer>
<div class="red-openbtn open-start"></div>
<div class="tip">
领取后你会自动成为博主和红包主的粉丝
<a class="rule" target="_blank">规则</a>
</div>
</footer>
</div>
<div class="opened" id="opened">
<div class="bot-icon">
<header>
<a class="creatorUrl" href="" target="_blank">
<img class="clearTpaErr" src="https://profile-avatar.csdnimg.cn/default.jpg!2" alt="" />
</a>
<div class="author">
<div class="tt">hope_wisdom</div> 发出的红包
</div>
</header>
</div>
<div class="receive-box">
<header></header>
<div class="receive-list">
</div>
</div>
</div>
</div>
<div class="close-btn"></div>
</div>
</div>
<div class="pay-code">
<div class="pay-money">实付<span class="pay-money-span" data-nowprice='' data-oldprice=''>元</span></div>
<div class="content-blance"><a class="blance-bt" href="javascript:;">使用余额支付</a></div>
<div class="content-code">
<div id="payCode" data-id="">
<div class="renovate">
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-time-out.png">
<span>点击重新获取</span>
</div>
</div>
<div class="pay-style"><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/weixin.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/zhifubao.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/jingdong.png"></span><span class="text">扫码支付</span></div>
</div>
<div class="bt-close">
<svg t="1567152543821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10924" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
<defs>
<style type="text/css"></style>
</defs>
<path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="10925"></path>
</svg>
</div>
<div class="pay-balance">
<input type="radio" class="pay-code-radio" data-type="details">
<span class="span">钱包余额</span>
<span class="balance" style="color:#FC5531;font-size:14px;">0</span>
<div class="pay-code-tile">
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-help.png" alt="">
<div class="pay-code-content">
<div class="span">
<p class="title">抵扣说明：</p>
<p> 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。<br> 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。</p>
</div>
</div>
</div>
</div>
<a class="pay-balance-con" href="https://i.csdn.net/#/wallet/balance/recharge" target="_blank"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/recharge.png" alt=""><span>余额充值</span></a>
</div>
<div style="display:none;">
<img src="" onerror='setTimeout(function(){if(!/(csdn.net|iteye.com|baiducontent.com|googleusercontent.com|360webcache.com|sogoucdn.com|bingj.com|baidu.com)$/.test(window.location.hostname)){window.location.href="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x77\x77\x77\x2e\x63\x73\x64\x6e\x2e\x6e\x65\x74"}},3000);'>
</div>
<div class="keyword-dec-box" id="keywordDecBox"></div>
</body>
<!-- 富文本柱状图 -->
<link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/chart.css" />
<script type="text/javascript" src="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/lib/chart.min.js"></script>
<script type="text/javascript" src="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/widget2chart.js"></script>
<script src="https://csdnimg.cn/release/blogv2/dist/components/js/axios-83fa28cedf.min.js" type="text/javascript"></script>
<script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_highlight-8defd55d6e.min.js" type="text/javascript"></script>
<script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_common-be82269d23.min.js" type="text/javascript"></script>
<script src="https://csdnimg.cn/release/blogv2/dist/components/js/edit_copy_code-bf594a7338.min.js" type="text/javascript"></script>
<script src="https://g.csdnimg.cn/lib/cboxEditor/1.1.5/embed-editor.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://g.csdnimg.cn/lib/cboxEditor/1.1.5/embed-editor.min.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/codesnippet/lib/highlight/styles/atom-one-light.css">
<script src="https://g.csdnimg.cn/user-accusation/1.0.6/user-accusation.js" type="text/javascript"></script>
<script>
// 全局声明
if (window.csdn === undefined) {
window.csdn = {};
}
window.csdn.sideToolbar = {
options: {
report: {
isShow: true,
},
qr: {
isShow: false,
},
guide: {
isShow: true
}
}
}
$(function() {
$(document).on('click', "a.option-box[data-type='report']", function() {
window.csdn.loginBox.key({
biz: 'blog',
subBiz: 'other_service',
cb: function() {
window.csdn.feedback({
"type": 'blog',
"rtype": 'article',
"rid": articleId,
"reportedName": username,
"submitOptions": {
"title": articleTitle,
"contentUrl": articleDetailUrl
},
"callback": function() {
showToast({
text: "感谢您的举报，我们会尽快审核！",
bottom: '10%',
zindex: 9000,
speed: 500,
time: 1500
})
}
})
}
})
});
})
</script>
<script src="https://g.csdnimg.cn/baidu-search/1.0.12/baidu-search.js" type="text/javascript"></script>
<script src="https://csdnimg.cn/release/download/old_static/js/qrcode.js"></script>
<script src="https://g.csdnimg.cn/lib/qrcode/1.0.0/qrcode.min.js"></script>
<script src="https://g.csdnimg.cn/user-ordercart/3.0.1/user-ordercart.js" type="text/javascript"></script>
<script src="https://g.csdnimg.cn/user-ordertip/5.0.3/user-ordertip.js" type="text/javascript"></script>
<script src="https://g.csdnimg.cn/order-payment/4.0.5/order-payment.js" type="text/javascript"></script>
<script src="https://csdnimg.cn/release/blogv2/dist/pc/js/common-a425354f6a.min.js" type="text/javascript"></script>
<script src="https://csdnimg.cn/release/blogv2/dist/pc/js/detail-42804b7534.min.js" type="text/javascript"></script>
<script src="https://csdnimg.cn/release/blogv2/dist/pc/js/column-f814d377e0.min.js" type="text/javascript"></script>
<script src="https://g.csdnimg.cn/side-toolbar/3.4/side-toolbar.js" type="text/javascript"></script>
<script src="https://g.csdnimg.cn/copyright/1.0.4/copyright.js" type="text/javascript"></script>
<script>
$(".MathJax").remove();
if ($('div.markdown_views pre.prettyprint code.hljs').length > 0) {
$('div.markdown_views')[0].className = 'markdown_views';
}
</script>
<script type="text/javascript" src="https://csdnimg.cn/release/blog_mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
linebreaks: { automatic: true, width: "94%container" },
imageFont: null
},
tex2jax: {
preview: "none",
ignoreClass:"title-article"
},
mml2jax: {
preview: 'none'
}
});
</script>
<script type="text/javascript" crossorigin src="https://g.csdnimg.cn/common/csdn-login-box/csdn-login-box.js"></script></html> 
