如今，网上已经存在大量前端教程。虽然教程内容充足，但是往往过于繁杂，导致萌新学了忘，忘了学，学了用不到，用到了还记岔了，于是便怀疑自己。我也有着这样的感触。但有幸遇到了suency666前辈，前辈授课输出精华，绝不拖泥带水，作为萌新感激不尽。
一、什么是HTML
超文本标记语言（英语： HyperText Markup Language ，简称 HTML ）是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点， HTML 运行在浏览器上，由 浏览器 来解析。
二、HTML标准的文档结构
Document 声明为 HTML5 文档
元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8
元素描述了文档的标题</p><p><body> 元素包含了可见的页面内容</p><p>其他不用管</p><p>三、HTML语法</p><p>双标签</p><p><元素> 受标记影响的内容 </元素></p><p><元素 属性 1= 属性值 属性 2= 属性值...> 受元素影响的内容 </元素></p><p><h1>内容</h1></p><p><div id="news">这是我的一条新闻</div></p><p>单标签</p><p><元素/></p><p><img src="https://www.huoban.com/news/zb_users/upload/2022/05/20220529211507_77493.png" /></p><p>四、HTML常用标签</p><p><a>, <br>, <div>, <h1>-<h6>, <textarea>, <select>, <label>, <hr>, <img>, <input>, <p>, <span>, <table></p><p>其他标签用到再查：HTML <a> 标签</p><p>五、HTML <a> 标签</p><p>可以分为三大类：块级元素，内联元素，内联块级元素</p><p>⚫ 块级元素</p><p>◼ 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）</p><p>◼ 元素的高度(height)，宽度(width)，行高(line-height)以及顶和底边距(margin,padding)都可设置</p><p>◼ 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）常用的块元素有：</p><p><div>,<p>,<h1>...<h6>,<ul>,<ol>,<dl>,<table>,<address>,<blockquote>,<form>设置display:block，可以将元素转换块级元素</p><p>⚫ 内联元素</p><p>◼ 和其它元素都在一行上</p><p>◼ 元素的高度，宽度及顶部和底部边距不可设置</p><p>◼ 元素的宽度就是他包含的文字和图片的宽度，不可改变。</p><p>◼ 常用的内联元素有：<a>,<span>，<br>,<strong>,<em></p><p>◼ 设置display:inline；可以将块级元素转换为内联元素</p><p>⚫ 内联块级元素</p><p>◼ 和其它元素都在一行上</p><p>◼ 元素的高度，宽度及顶部和底部边距可设置</p><p>◼ 常用的内联块状元素有：<img> , <input></p><p>display:inline-block;</p><p>float:left/right;</p><p>position: absolute/fixed;可以将元素设置为内联块级元素</p><p>六、明明展示效果可以由css解决，为何还要那么多语义化标签？</p><p>为了搜索引擎优化（SEO）</p><p>搜索引擎：百度、搜狗、Bing、Googel，每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码，如果不使用语义化，搜索引擎没办法识别网页的大致内容。</p><p>语义化做的越好，搜索引擎就越能理解我们网页的内容，提高网页被搜索到的可能</p><p>为了让浏览器理解网页</p><p>阅读模式 、语音模式</p><p>像div这样没有任何语义的元素很有可能被阅读模式插件给忽略掉</p><p>标签语义化很重要，但不意味着萌新要把HTML所有标签吃个遍，而是学好基础的几个，等掌握前端绝大多数技术栈，需要精益求精时，再回头学</p><p>HTML</p><p>
<strong>版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。</strong>
</p></div>
<div class="article_footer clear">
<div class="fr tag">标签：<a href="https://www.huoban.com/news/tags-1610.html">前端</a>
<a href="https://www.huoban.com/news/tags-1945.html">html</a>
</div>
<div class="bdsharebuttonbox fl share">
<div class="share-widget fl">
<div class="social-share" data-sites="wechat,weibo, qq, qzone"></div>
</div>
</div>
</div>
<!-- 广告位ad4 -->
<div class="post-navigation clear">
<div class="post-previous fl">
<span>上一篇:</span><a href="https://www.huoban.com/news/post/10651.html">银行家算法课程设计（附源代码）</a>
</div>
<div class="post-next fr">
<span>下一篇:</span><a href="https://www.huoban.com/news/post/10653.html">【非原创】关于ansible的一些学习资料的整理</a>
</div>
</div>
</div>
<div class="related_article">
<div class="box_title clear">
<span><i class="icon fa fa-paper-plane"></i>相关文章</span>
</div>
<div class="related_list clear">
<article class="fl">
<div class="related_img"><a href="https://www.huoban.com/news/post/69535.html"><img src="https://www.huoban.com/news/zb_users/cache/ly_autoimg/n/Njk1MzU.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.huoban.com/news/post/69535.html" title="wps怎么解除限制编辑（手机wps怎么解除限制编辑）">wps怎么解除限制编辑（手机wps怎么解除限制编辑）</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>628</span>
<span><i class="fa fa-clock-o"></i>2022-05-29</span>
</div>
</div>
</article>
<article class="fl">
<div class="related_img"><a href="https://www.huoban.com/news/post/45808.html"><img src="https://www.huoban.com/news/zb_users/cache/ly_autoimg/n/NDU4MDg.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.huoban.com/news/post/45808.html" title="前端开发的核心技术是什么（web前端核心技术）">前端开发的核心技术是什么（web前端核心技术）</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>628</span>
<span><i class="fa fa-clock-o"></i>2022-05-29</span>
</div>
</div>
</article>
<article class="fl">
<div class="related_img"><a href="https://www.huoban.com/news/post/44893.html"><img src="https://www.huoban.com/news/zb_users/cache/ly_autoimg/n/NDQ4OTM.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.huoban.com/news/post/44893.html" title="HTML5前端包括什么技术">HTML5前端包括什么技术</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>628</span>
<span><i class="fa fa-clock-o"></i>2022-05-29</span>
</div>
</div>
</article>
</div>
</div>
<!--<p class="comment-disable sb br mb"><i class="iconfont icon-cry"></i>抱歉，评论功能暂时关闭!</p>-->
</div>
</div>
<div class="sidebar">
<div id="推荐文章" class="part clear 推荐文章">
<div class="top">
<h3 class="title">推荐文章</h3>
</div>
<div class="side 推荐文章"><ul><ul class="hot_posts"> <li><h4><a href="https://www.huoban.com/news/post/132763.html" title="企业生产管理是什么，企业生产管理软件">企业生产管理是什么，企业生产管理软件</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/136160.html" title="盘点进销存软件排行榜前十名">进盘点进销存软件排行榜前十名</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132779.html" title="进销存系统哪个简单好用？进销存系统优点">进销存系统哪个简单好用？进销存系统优点</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/133648.html" title="工厂生产管理（工厂生产管理流程及制度）">工厂生产管理（工厂生产管理流程及制度）</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132780.html" title="生产管理软件，机械制造业生产管理，制造业生产过程管理软件">生产管理软件，机械制造业生产管理，制造业生产过程管理软件</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132776.html" title="进销存软件和ERP有什么区别？进销存与erp软件理解">进销存软件和ERP有什么区别？进销存与erp软件理解</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132974.html" title="进销存如何进行库存管理">进销存如何进行库存管理</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132269.html" title="excel销售订单管理系统（销售订单录入系统）">如何利用excel制作销售订单管理系统？</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/136946.html" title="数据库订单管理系统有哪些功能？数据库订单管理系统怎么设计？">数据库订单管理系统有哪些功能？数据库订单管理系统怎么设计？</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132312.html" title="数据库订单管理系统（订单系统数据流图）">什么是数据库管理系统？</a></h4></li></ul></ul></div>
</div>
<div id="divPrevious" class="part clear previous">
<div class="top">
<h3 class="title">最近发表</h3>
</div>
<div class="side divPrevious"><ul><li><a title="提升软件开发与招投标效率的五个方法与技术方案" href="https://www.huoban.com/news/post/157788.html">提升软件开发与招投标效率的五个方法与技术方案</a></li>
<li><a title="提升软件开发效率与招投标质量的五个方法" href="https://www.huoban.com/news/post/157787.html">提升软件开发效率与招投标质量的五个方法</a></li>
<li><a title="提升软件开发与招投标效率：AI智写助手如何优化智能文档编写" href="https://www.huoban.com/news/post/157786.html">提升软件开发与招投标效率：AI智写助手如何优化智能文档编写</a></li>
<li><a title="提升软件开发与招投标效率：AI智写助手如何实现智能文档编写" href="https://www.huoban.com/news/post/157785.html">提升软件开发与招投标效率：AI智写助手如何实现智能文档编写</a></li>
<li><a title="提升软件开发与招投标文档编写效率的AI智写助手" href="https://www.huoban.com/news/post/157784.html">提升软件开发与招投标文档编写效率的AI智写助手</a></li>
<li><a title="网店运营的关键从订单管理到用户体验" href="https://www.huoban.com/news/post/157783.html">网店运营的关键从订单管理到用户体验</a></li>
<li><a title="选择适合你的库存盘点软件指南" href="https://www.huoban.com/news/post/157782.html">选择适合你的库存盘点软件指南</a></li>
<li><a title="电商ERP解决方案助力企业实现业务飞跃" href="https://www.huoban.com/news/post/157781.html">电商ERP解决方案助力企业实现业务飞跃</a></li>
<li><a title="云ERP：企业高效管理与数字化转型的利器" href="https://www.huoban.com/news/post/157780.html">云ERP：企业高效管理与数字化转型的利器</a></li>
<li><a title="销售报表分析的秘密，掌握数据让业绩飞跃" href="https://www.huoban.com/news/post/157779.html">销售报表分析的秘密，掌握数据让业绩飞跃</a></li>
</ul></div>
</div>
<div id="sidebar_ad" class="part clear sidebar_ad">
<div class="part sidebar_ad"><div class="active"><a href='https://mrhnug.r.huobanbot.com/wxwork/pub/landings/426?app_id=1960&company_id=54&corp_id=wwbd4b7b6e7b0ccdaa&app_company_id=1' target='_blank'><img style='width:100%;height:100%' src='https://www.huoban.com/news/zb_users/upload/2023/08/erwei3.jpg'></a><br>
<a href='https://www.huoban.com/crm.html?utm=jiasouadv' target='_blank'><img style='width:100%;height:100%' src='https://www.huoban.com/news/zb_users/upload/2023/03/20230321171645167939020583758.png'></a><br>
</div></div>
</div>
<div id="hot_posts" class="part clear hot_posts">
<div class="top">
<h3 class="title">热评文章</h3>
</div>
<ul class="hot_posts"><li><h4><a href="https://www.huoban.com/news/post/104011.html" title="零代码开发是什么？2022低代码平台排行榜">零代码开发是什么？2022低代码平台排行榜</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/131019.html" title="智能进销存库存管理系统（智慧进销存）">智能进销存库存管理系统（智慧进销存）</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/73907.html" title="在线文档哪家强？8款在线文档编辑软件推荐">在线文档哪家强？8款在线文档编辑软件推荐</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/102663.html" title="WPS2016怎么绘制简单的价格表?">WPS2016怎么绘制简单的价格表?</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/144333.html" title="智能定制家居管理系统：重新定义家庭生活方式">智能定制家居管理系统：重新定义家庭生活方式</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/76010.html" title="用在线电子表格，居家办公更轻松">用在线电子表格，居家办公更轻松</a></h4></li></ul> </div>
<div id="divLinkage" class="part clear link">
<div class="top">
<h3 class="title">友情链接</h3>
</div>
<div class="side divLinkage"><ul><li class="link-item"><a href="https://www.huoban.com/" target="_blank" title="伙伴云">伙伴云</a></li><li class="link-item"><a href="https://www.huoban.com/news/category-19.html" title="进销存管理">进销存管理</a></li><li class="link-item"><a href="https://www.huoban.com/news/category-3.html" title="低代码">低代码</a></li><li class="link-item"><a href="https://www.huoban.com/news/tags-12.html" target="_blank" title="Excel表格">Excel表格</a></li><li class="link-item"><a href="http://www.lvyuanlin.net/" title="海威行">海威行</a></li><li class="link-item"><a href="https://www.finclip.com/news/" title="FinClip">FinClip</a></li></ul></div>
</div> </div>
</div>
</section>
</div>
<footer class="p-footer">
<div class="contant_box">
<div class="discover_tmt">
<h5 class="" style="font-size: 1px; color: white;">伙伴云</h5>
<div class="text_box">
<a href="https://www.jiasou.cn/article/" title="toB数字化营销SEO" style="font-size: 1px; color: white;">加搜toBSEO</a>
<a href="https://www.finclip.com/news/category-1.html" title="小程序工具" style="font-size: 1px; color: white;">前端框架</a>
<a href="https://www.jia-ai.com/info/" title="小红书营销攻略" style="font-size: 1px; color: white;">小红书营销攻略</a>
<a href="https://www.yanyin.tech/cms/" title="生物研究资讯" style="font-size: 1px; color: white;">生物研究资讯</a>
<a href="https://www.finclip.com/news/" title="FinClip 技术文档" style="font-size: 1px; color: white;">小程序容器帮助中心</a>
<a href="https://www.finclip.com/news/article/" title="小程序开发行业洞察" style="font-size: 1px; color: white;">小程序开发行业洞察</a>
<a href="https://www.foneplatform.com/jscms/" title="全面预算管理资讯" style="font-size: 1px; color: white;">全面预算管理资讯</a>
<a href="https://www.weiling.cn/article/" title="企微SCRM客户管理干货" style="font-size: 1px; color: white;">企微SCRM客户管理干货</a>
<a href="https://www.marketup.cn/info/" title="营销管理系统资讯" style="font-size: 1px; color: white;">营销管理系统资讯</a>
<a href="https://www.transfertech.cn/news/" title="制造行业新闻动态" style="font-size: 1px; color: white;">制造行业新闻动态</a>
</div> </div>
<div class="collaboration_box">
</div>
<div class="we_img_box clear">
<div class="img_box">
<img src="https://www.huoban.com/news/zb_users/theme/zblog5_news/image/ewm.png" alt="" class="hover_tmt">
</div>
</div>
</div>
<p class="info"> <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">京ICP备12038259号</a>
<span>
<a href="#"></a></span>
</p>
</footer>
<div id="backtop" class="backtop">
<div class="bt-box top">
<i class="fa fa-angle-up fa-2x"></i>
</div>
</div>
<script charset="UTF-8" src="https://www.huoban.com/assets/js/sensorsdata.1.22.2.min.js"></script>
<script charset="UTF-8">
var sensors = window['sensorsDataAnalytic201505'];
sensors.init({
server_url: 'https://saapi.huoban.com/sa?project=production',
heatmap:{scroll_notice_map:'not_collect'},
use_client_time:true,
send_type:'beacon'
});
sensors.quick('autoTrack');
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6444c045836d6bf27124085a4f62c2a8";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
(()=>{const e="https://analyze.jiasou.cc/api/v1/page_view/report/",n="9fe06d4884e0461caaa1de5651164d43";let t=null;const o=new Proxy({},{get:(e,n)=>localStorage.getItem(window.btoa(n)),set:(e,n,t)=>!!t&&(localStorage.setItem(window.btoa(n),t),!0)});new Promise((t=>{if(o.fingerprint)t();else{const a=function(){var e={};if(e.userAgent=navigator.userAgent||"",e.plugins=[],navigator.plugins&&navigator.plugins.length>0)for(var n=0;n<navigator.plugins.length;n++){var t={name:navigator.plugins[n].name||"",filename:navigator.plugins[n].filename||"",description:navigator.plugins[n].description||""};e.plugins.push(t)}e.languages=navigator.languages||[navigator.language||""],e.timezone=(new Date).getTimezoneOffset(),e.screenResolution={width:window.screen.width||0,height:window.screen.height||0,pixelDepth:window.screen.pixelDepth||0,colorDepth:window.screen.colorDepth||0};var o=document.createElement("canvas").getContext("2d"),a=[],i=["monospace","sans-serif","serif"];for(n=0;n<i.length;n++){var r=i[n];o.font="12px "+r,o.measureText("abcdefghijklmnopqrstuvwxyz0123456789").width>0&&a.push(r)}return e.fonts=a,e.cookieEnabled=navigator.cookieEnabled||!1,e.localStorage=void 0!==window.localStorage,e.sessionStorage=void 0!==window.sessionStorage,e.doNotTrack="1"===navigator.doNotTrack||"1"===window.doNotTrack||"1"===navigator.msDoNotTrack||"yes"===navigator.doNotTrack,e}();fetch(`${e}u/`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:n,f:window.btoa(JSON.stringify(a))})}).then((e=>{console.debug("browser fingerprint sent"),200===e.status&&e.json().then((e=>{console.debug("browser fingerprint received",e),o.fingerprint=e.fp,t()}))}))}})).then((()=>{e&&o.fingerprint&&fetch(e+`?${new URLSearchParams({token:n}).toString()}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({c:window.btoa(JSON.stringify({u:o.fingerprint,l:window.location.href,r:document.referrer}))})}).then((e=>{200==e.status&&e.json().then((e=>{e.track_id&&(t=e.track_id)}))}))})),window.addEventListener("beforeunload",(async n=>{t&&fetch(e+`?${new URLSearchParams({track_id:t}).toString()}`,{method:"GET",headers:{"Content-Type":"text/plain"},keepalive:!0}),n.returnValue=""}))})();
</script><script language="javascript" src="https://www.huoban.com/news/zb_users/plugin/ZF_ad/js/index.js?id=587"></script>
<script language="javascript" src="https://www.huoban.com/news/zb_users/plugin/ZF_ad/js/ZF_ad__cookie.js"></script>
</body>
</html>
<!--128.00 ms , 17 queries , 3709kb memory , 0 error-->
