常用HTML代码大全(初学者必备)

2025-10-25
网站建设限时活动促销

对于前端工作人员来说,每天都会接触到p和css ,有些知识不常用就容易忘了,最近把常用的html代码进行了总结,写了篇文章,方便自己以后查看,同时也分享给大家,希望对你有用。

文件类型 (放在档案的开头与结尾)

文件主题

(必须放在「文头」区块内)<p>文头</p> (描述性资料,像是「主题」)<p>文体</p> (文件本体)<p>立即学习“前端免费学习笔记(深入)”;</p><p>标题<h/>?> (从1到6,有六层选择)</p><p>标题的对齐 <h/>?></p><p>区分</p><p>区分的对齐 </p><p>引文区块</p> (通常会内缩)<p>强调<em/> (通常会以斜体显示)</p><p>特别强调<strong/> (通常会以加粗显示)</p><p>引文<cite/> (通常会以斜体显示)</p><p>码<code/> (显示原始码之用)</p><p>样本<samp/></p><p>键盘输入<kbd/></p><p>变数<var/></p><p>定义<dfn/> (有些浏览器不提供)</p><p>地址 </p><p>大字<big/></p><p>小字<small/></p><p>与外观相关的标签(作者自订的表现方式)</p><p>加粗<b/></p><p>斜体<i/></p><p>底线 (尚有些浏览器不提供)</p><p>删除线<s/> (尚有些浏览器不提供)</p><p>下标</p><p>上标</p><p>打字机体<tt/> (用单空格字型显示)</p><p>预定格式</p><pre/> (保留文件中空格的大小)<p>预定格式的宽度</p><pre width="?"/>(以字元计算)<p>向中看齐</p><center/> (文字与图片都可以)<p>闪耀<blink/> (有史以来最被嘲弄的标签)</p><p>字体大小 (从1到7)</p><p>改变字体大小 </p><p>基本字体大小 <basefontsize> (从1到7; 内定为3)</basefontsize></p><p>字体颜色 ($$为颜色代码)</p></div> <p> <strong>标签:</strong> <a href="/k-html%E4%BB%A3%E7%A0%81%E5%A4%A7%E5%85%A8.html" title="html代码大全">html代码大全</a> </p> <p><strong>本文地址:</strong><a href="https://www.lifejia.cn/news/212015.html" target="_blank" title="常用HTML代码大全(初学者必备)">https://www.lifejia.cn/news/212015.html</a></p> <p><strong>免责声明:</strong>本站内容仅用于学习参考,信息和图片素材来源于互联网,如内容侵权与违规,请联系我们进行删除,我们将在三个工作日内处理。联系邮箱:cloudinto#qq.com(把#换成@) </p> </div> </div> <div class="articles_page clearfix lj-ie1d"> <a href="/news/212014.html" class="articles_page_l lj-8rz7" title="mbps和mb/s怎么换算"> <div class="articles_page_l_btn lj-nu4y"> <img class="btn_icon lj-08xl" style="margin-right:5px;" src="/static/default/styles/images/icon_pre.png" alt="mbps和mb/s怎么换算"> <span class="btn_text lj-336m">上一篇</span> </div> <div class="articles_page_l_text lj-auc3">mbps和mb/s怎么换算</div> </a> <a href="/news/212016.html" class="articles_page_r lj-afqx" title="人民币小写转大写"> <div class="articles_page_r_btn lj-dyky" > <span class="btn_text lj-336m">下一篇</span> <img class="btn_icon lj-08xl" style="margin-left:5px;" src="/static/default/styles/images/icon-next.png" alt="人民币小写转大写"> </div> <div class="articles_page_r_text lj-a71n" >人民币小写转大写</div> </a> </div> <div class="recommArticle lj-l8cj"> <div class="preArtTitle clearfix lj-ao9c" > <h2 class="title lj-syxa">文章推荐</h2> </div> <div> <div class="recArticleItems clearfix lj-m24w"> <div class="articleItem lj-mkxn"> <a href="/news/212015.html" title="常用HTML代码大全(初学者必备)"> <div class="articleItemTop lj-p68q"> <img class="articleItemImg lj-fzn9" src="/static/default/styles/imgs/230.jpg" alt="常用HTML代码大全(初学者必备)"> <div class="viewNum lj-okxk"> <img class="viewNumIcon lj-mwh3" src="/static/default/styles/images/lookIcon.png" alt="常用HTML代码大全(初学者必备)"> <span class="tipViewNum lj-rtnj">5903</span> </div> </div> <div class="articleItemInfo lj-mwa4"> <div class="articleItemText lj-aoi4">常用HTML代码大全(初学者必备)</div> <div class="articleItemBottomInfo lj-nx8w"> <span class="articleItemBottomTip lj-cpky">2025-10-25</span> </div> </div> </a> </div> </div> </div></div> </div> <div class="right contentRight lj-uzi2" style="position:relative;"> <div class="recommRead lj-kgy9"> <div class="recommReadTitle yellowafter lj-nk6r" > <h2>推荐阅读</h2> </div> <div class="readList lj-y5i2"> <a href="/news/241176.html" title="多用户商城系统开发的具体事项?" class="readList-item lj-41eg"> <img class="readList-item-l lj-q0zr" src="/static/default/styles/imgs/230.jpg" alt="多用户商城系统开发的具体事项?"> <div class="readList-item-r lj-ysj4" style="width: 197px;"> <div class="readList-title lj-ucsa">多用户商城系统开发的具体事项?</div> <div class="readList-tips lj-djxc"> <span class="readList-date lj-30lz">2025-10-25</span> </div> </div> </a> <a href="/news/226329.html" title="战争雷霆闪退解决办法" class="readList-item lj-41eg"> <img class="readList-item-l lj-q0zr" src="/static/default/styles/imgs/23.jpg" alt="战争雷霆闪退解决办法"> <div class="readList-item-r lj-ysj4" style="width: 197px;"> <div class="readList-title lj-ucsa">战争雷霆闪退解决办法</div> <div class="readList-tips lj-djxc"> <span class="readList-date lj-30lz">2025-10-25</span> </div> </div> </a> <a href="/news/257071.html" title="日本人口增长率为什么那么低(日本人口为何出现负增长)" class="readList-item lj-41eg"> <img class="readList-item-l lj-q0zr" src="/static/default/styles/imgs/239.jpg" alt="日本人口增长率为什么那么低(日本人口为何出现负增长)"> <div class="readList-item-r lj-ysj4" style="width: 197px;"> <div class="readList-title lj-ucsa">日本人口增长率为什么那么低(日本人口为何出现负增长)</div> <div class="readList-tips lj-djxc"> <span class="readList-date lj-30lz">2025-10-25</span> </div> </div> </a> <a href="/news/207681.html" title="wps如何带格式复制整页" class="readList-item lj-41eg"> <img class="readList-item-l lj-q0zr" src="/static/default/styles/imgs/9.jpg" alt="wps如何带格式复制整页"> <div class="readList-item-r lj-ysj4" style="width: 197px;"> <div class="readList-title lj-ucsa">wps如何带格式复制整页</div> <div class="readList-tips lj-djxc"> <span class="readList-date lj-30lz">2025-10-25</span> </div> </div> </a> <a href="/news/170855.html" title="360浏览器如何设置主页 360浏览器设置主页方法" class="readList-item lj-41eg"> <img class="readList-item-l lj-q0zr" src="/static/default/styles/imgs/3.jpg" alt="360浏览器如何设置主页 360浏览器设置主页方法"> <div class="readList-item-r lj-ysj4" style="width: 197px;"> <div class="readList-title lj-ucsa">360浏览器如何设置主页 360浏览器设置主页方法</div> <div class="readList-tips lj-djxc"> <span class="readList-date lj-30lz">2025-10-25</span> </div> </div> </a> <a href="/news/177036.html" title="xp开机密码操作方法" class="readList-item lj-41eg"> <img class="readList-item-l lj-q0zr" src="/static/default/styles/imgs/200.jpg" alt="xp开机密码操作方法"> <div class="readList-item-r lj-ysj4" style="width: 197px;"> <div class="readList-title lj-ucsa">xp开机密码操作方法</div> <div class="readList-tips lj-djxc"> <span class="readList-date lj-30lz">2025-10-25</span> </div> </div> </a> <a href="/news/223383.html" title="广州移动选号码(广州移动号码选号网上购买)" class="readList-item lj-41eg"> <img class="readList-item-l lj-q0zr" src="/static/default/styles/imgs/109.jpg" alt="广州移动选号码(广州移动号码选号网上购买)"> <div class="readList-item-r lj-ysj4" style="width: 197px;"> <div class="readList-title lj-ucsa">广州移动选号码(广州移动号码选号网上购买)</div> <div class="readList-tips lj-djxc"> <span class="readList-date lj-30lz">2025-10-25</span> </div> </div> </a> <a href="/news/215982.html" title="什么叫全网营销" class="readList-item lj-41eg"> <img class="readList-item-l lj-q0zr" src="/static/default/styles/imgs/141.jpg" alt="什么叫全网营销"> <div class="readList-item-r lj-ysj4" style="width: 197px;"> <div class="readList-title lj-ucsa">什么叫全网营销</div> <div class="readList-tips lj-djxc"> <span class="readList-date lj-30lz">2025-10-25</span> </div> </div> </a> <a href="/news/199631.html" title="寰球项目工程管理有限公司怎么样" class="readList-item lj-41eg"> <img class="readList-item-l lj-q0zr" src="/static/default/styles/imgs/14.jpg" alt="寰球项目工程管理有限公司怎么样"> <div class="readList-item-r lj-ysj4" style="width: 197px;"> <div class="readList-title lj-ucsa">寰球项目工程管理有限公司怎么样</div> <div class="readList-tips lj-djxc"> <span class="readList-date lj-30lz">2025-10-25</span> </div> </div> </a> <a href="/news/250068.html" title="京东与今日头条达成合作 边看新闻边购物" class="readList-item lj-41eg"> <img class="readList-item-l lj-q0zr" src="/static/default/styles/imgs/184.jpg" alt="京东与今日头条达成合作 边看新闻边购物"> <div class="readList-item-r lj-ysj4" style="width: 197px;"> <div class="readList-title lj-ucsa">京东与今日头条达成合作 边看新闻边购物</div> <div class="readList-tips lj-djxc"> <span class="readList-date lj-30lz">2025-10-25</span> </div> </div> </a> </div></div><div class="hotTag lj-3pjg" style="margin-bottom: 12px;"> <h2 class="hotFindTitle yellowafter lj-q0hf" style="line-height:normal;padding-left:16px;font-size:20px;">热门标签</h2> <div class="hotFindList clearfix lj-nd45"> <a href="/tags/65536.html" title="电脑任务栏颜色怎么调" class="hotList left lj-i9yi">电脑任务栏颜色怎么调</a> <a href="/tags/131072.html" title="黑龙茶官网" class="hotList left lj-i9yi">黑龙茶官网</a> <a href="/tags/256.html" title="喵触" class="hotList left lj-i9yi">喵触</a> <a href="/tags/65792.html" title="微信小程序游戏怎么在电脑上玩" class="hotList left lj-i9yi">微信小程序游戏怎么在电脑上玩</a> <a href="/tags/131328.html" title="模板王" class="hotList left lj-i9yi">模板王</a> <a href="/tags/66048.html" title="webview是什么意思" class="hotList left lj-i9yi">webview是什么意思</a> <a href="/tags/131584.html" title="沛县人才网" class="hotList left lj-i9yi">沛县人才网</a> <a href="/tags/66304.html" title="excel中格式刷怎么用" class="hotList left lj-i9yi">excel中格式刷怎么用</a> <a href="/tags/131840.html" title="火爆招商网" class="hotList left lj-i9yi">火爆招商网</a> <a href="/tags/1024.html" title="竞价广告哪个平台好" class="hotList left lj-i9yi">竞价广告哪个平台好</a> <a href="/tags/66560.html" title="token" class="hotList left lj-i9yi">token</a> <a href="/tags/132096.html" title="亲和力旅行社官网" class="hotList left lj-i9yi">亲和力旅行社官网</a> </div></div><div class="new-question lj-5pdb"> <div class="recommReadTitle yellowafter lj-nk6r" > <h2>推荐百科</h2> <a class="lookMore lj-3fwv" href="/c/67.html" title="推荐百科">查看更多</a> </div> <div class="question-list lj-mc2i"> <a href="/news/216927.html" class="question-list-item text2 lj-neqb" title="Instagram介绍"> <span class="question-list-item-dot lj-8ch7"></span> <span class="list-item-text text2 lj-f9gz">Instagram介绍</span> </a> <a href="/news/231558.html" class="question-list-item text2 lj-neqb" title="淘宝保证金在哪里退?手机淘宝退保证金步骤?"> <span class="question-list-item-dot lj-8ch7"></span> <span class="list-item-text text2 lj-f9gz">淘宝保证金在哪里退?手机淘宝退保证金步骤?</span> </a> <a href="/news/249999.html" class="question-list-item text2 lj-neqb" title="亳州网站代运营"> <span class="question-list-item-dot lj-8ch7"></span> <span class="list-item-text text2 lj-f9gz">亳州网站代运营</span> </a> <a href="/news/234642.html" class="question-list-item text2 lj-neqb" title="支付宝抢红包活动攻略(活动时间、活动玩法)"> <span class="question-list-item-dot lj-8ch7"></span> <span class="list-item-text text2 lj-f9gz">支付宝抢红包活动攻略(活动时间、活动玩法)</span> </a> <a href="/news/196050.html" class="question-list-item text2 lj-neqb" title="设置无线路由器出现网络异常怎么办"> <span class="question-list-item-dot lj-8ch7"></span> <span class="list-item-text text2 lj-f9gz">设置无线路由器出现网络异常怎么办</span> </a> </div></div><div class="hotTag lj-3pjg" style="margin-bottom: 12px;"> <h2 class="hotFindTitle yellowafter lj-q0hf" style="line-height:normal;padding-left:16px;font-size:20px;">友情链接</h2> <div class="hotFindList clearfix lj-nd45"> <a href="https://www.cloudinto.cn/" title="支点网络" class="hotList left lj-i9yi">支点网络</a> <a href="https://www.join-mu.com/" title="上海江木" class="hotList left lj-i9yi">上海江木</a> </div></div> </div></div></div><div class="footer mobileHide lj-jo0t"> <div class="footerLi lj-jko0"> <div class="container footerBottom lj-3o5v"> <p> <span>Powered by CLOUDINTO PTE. LTD. © 2010-2025 有料笔记 </span> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow" title=""></a> </p> <p><a href="/sitemap.xml">网站地图</a></p> </div> </div></div><script src="/static/default/styles/js/jquery-2.1.1.min.js"></script><script src="/static/default/styles/js/swiper.min.js"></script><script src="/static/default/styles/js/main.js"></script></html>