本系列文章是在学习寒假重学前端（极客课程）的过程中梳理自己的前端知识体系时间）。文章并没有严格按照寒假的每一节来写，而是在看了某类（如HTML）相关课程后，再结合自己已有的知识体系进行相关梳理，最终产生了这一系列的文章。winter提出的一些问题，我会写在自己的思考中，但是答案并不是按照winter的原话写的，而是去网上搜索一些资料或者结合自己的知识体系来回答。如果我的回答有不对的地方，希望大家指出，谢谢。HTML系列文章主要涉及到HTML标签，会列出HTML标签的分类、HTML布局语义标签、比较常用的标签、一些常见问题、冬天提出的问题。本系列文章的主要理论来源是MDN，里面对HTML讲的很详细。强烈建议一些觉得自己基础薄弱的同学学习一下。HTMLHypertextMarkupLanguage（英文：HypertextMarkupLanguage，简称：HTML）的总体概述和细节：是一种用于构造网页及其内容的标记语言。HTML不是一种编程语言，而是一种用于定义内容结构的标记语言。HTML由一系列的元素（elements）组成，可以用来包围内容的不同部分，使其以某种方式出现或工作。HTML标签的特点：HTML标签是不区分大小写的，也就是说在输入标签的时候可以使用大小写字母。例如标签
可以写成<title>、<Title>、<TITLE>、<TiTle>等，但从一致性、可读性等方面考虑，最好只使用小写字母.元素中的空格（空白字符、换行符）：在呈现这些代码时，HTML解释器会将连续出现的空格字符减少为单个空格字符。因此，HTML中的空白字符应该用实体字符来表示。HTML评论：评论标签<!--评论内容-->用于在HTML中插入评论。自定义组件名称：W3C规范中的自定义组件名称（字母全部小写且必须包含连字符），可以避免与之前和以后的HTML元素冲突。HTML元素定义HTML元素：是指开始标签、结束标签和内容的组合，是一个完整的元素。HTML元素语法：1)开始标签：包含元素的名称，由左右尖括号包围。指示元素从此处开始或起作用。HTML元素以开始标签开始2)结束标签：与开始标签类似，只是它在元素名称前包含一个斜线。这表示元素的结尾。HTML元素以结束标签结束3）内容（Content）：是开始标签和结束标签之间的内容。4）部分HTML元素内容为空5）空元素在开始标签中关闭（以开始标签结束）6）大多数HTML元素可以有属性删除HTML元素的分类块级元素：1.特点：1)块级元素会占一行，默认宽度为100%2)可以设置width,height,padding,margin,border<nav>/<main>,<article>,<section>,<aside>,<footer>,<address>,<div>,<p>,<ul>,<ol>,<li>,<h1>~<h6>,<table>,<thead>,<tbody>、<tfoot>、<tr>、<td>、<th>、<form>、<fieldset>、<blockquote>、<hr>等。行内块级元素：1.特点：1）同行显示>etc.内联元素：1.特点：1）在同一行显示<a>,<i>,<b>,<em>,<strong>等。空元素：没有内容的HTML元素称为空元素。空元素在开始标签中关闭。在开始标记中添加斜杠，例如<br/>，是关闭空元素的正确方法，并且被HTML、XHTML和XML接受。尽管<br>适用于所有浏览器，但使用<br/>实际上是更长期的安全性。(w3school)相关标签：<img/>、<input/>、<hr/>、<br/>、<link>、<meta>等替换元素：1.特点专业讲：可替换的显示效果elements不受CSS控制，它是一个外部对象，其外观的渲染是独立于CSS的。它们的内容不受当前文档样式的影响。CSS可以影响被替换元素的位置，但不会影响被替换元素本身的内容。CSS对可替换元素的唯一影响是某些属性支持控制元素内容在其框内的位置或方式。两者都使用src属性来引用文件。通俗地说：可替换元素是指浏览器根据元素的标签和属性来决定元素的具体显示内容，而不可替换元素则直接显示内容。比如<imgsrc="test.png">，<img>的内容会根据src属性的值来决定显示的内容；不可替换元素是直接显示内容，比如<h1>浏览器直接显示标签里面的文字。2.相关标签：典型的有：<img>,<video>,<audio>,<embed>,<iframe>,<inputtype="image">有些元素只是在特定情况下才被视为可替换元素，对于example:<option>,<audio>,<canvas>来源：ReplacementElementsExplainedMDNPresentationElements：出现在人们想在文本中使用粗体、斜体、下划线但CSS还没有完全支持的时期。像这样的元素只影响外观，没有语义，不应该再使用。如<b>、<i>、<u>。使用心得：<i>：用于传达传统上用斜体表达的含义：外文、分类学名称、技术术语、想法<b>：用于传达传统上用粗体表达的含义：关键词、产品名称、介绍句<u>：传统上用来传达意思下划线：专有名词，拼写错误来源：MDN以上内容如有错误，希望大家指出，谢谢。</p>
</div>
</div>
<div class="zuowen_sxy">
<div class="prev">上一篇：<a title="制作思维导图哪个软件好" href="/webqianduan/247679.html">制作思维导图哪个软件好</a> </div>
<div class="prev">下一篇：<a title="js--原生jsDOM操作（增删改查）" href="/webqianduan/247681.html">js--原生jsDOM操作（增删改查）</a> </div>
</div>
<div class="related_about">
<div class="related_about_t"><code>重学HTML前端（一）HTML总体概述及元素分类相关文章</code></div>
<ul>
<li><a href="/bianchengyuyan/273907.html" target="_blank" title="从sql渲染html-webmatrix分享">从sql渲染html-webmatrix分享</a></li>
<li><a href="/bianchengyuyan/273750.html" target="_blank" title="ASP.NETMVC-TroublePassingModel">ASP.NETMVC-TroublePassingModel</a></li>
<li><a href="/bianchengyuyan/273360.html" target="_blank" title="Html.Labelfor使用对象的DisplayName代">Html.Labelfor使用对象的DisplayName代</a></li>
<li><a href="/bianchengyuyan/273342.html" target="_blank" title="Html Agility Pack无法使用xpath查找列表">Html Agility Pack无法使用xpath查找列表</a></li>
<li><a href="/bianchengyuyan/273284.html" target="_blank" title="使用控制器操作过滤器捕获HTML输出">使用控制器操作过滤器捕获HTML输出</a></li>
<li><a href="/bianchengyuyan/273199.html" target="_blank" title="AspMVC4Createacustomhtmlhelper">AspMVC4Createacustomhtmlhelper</a></li>
<li><a href="/bianchengyuyan/273190.html" target="_blank" title="如何在C#中使用XSLT将XML转换为HTML？Share">如何在C#中使用XSLT将XML转换为HTML？Share</a></li>
<li><a href="/bianchengyuyan/273185.html" target="_blank" title="设置'cshtml'数据并返回一个字符串分享">设置'cshtml'数据并返回一个字符串分享</a></li>
<li><a href="/bianchengyuyan/273119.html" target="_blank" title="如何在MVC Html.DropDownList（）中添加静">如何在MVC Html.DropDownList（）中添加静</a></li>
<li><a href="/bianchengyuyan/273091.html" target="_blank" title="ConvertHTMLcontenttoPdfusingc#">ConvertHTMLcontenttoPdfusingc#</a></li>
<li><a href="/bianchengyuyan/272711.html" target="_blank" title="C#HtmlEncode-ISO-8859-1实体名称和编号">C#HtmlEncode-ISO-8859-1实体名称和编号</a></li>
<li><a href="/bianchengyuyan/272707.html" target="_blank" title="MVC4：自定义路由和Html.Action不同步分享">MVC4：自定义路由和Html.Action不同步分享</a></li>
<li><a href="/bianchengyuyan/272695.html" target="_blank" title="如何编辑MVC3中Html.DisplayFor方法的CSS">如何编辑MVC3中Html.DisplayFor方法的CSS</a></li>
<li><a href="/bianchengyuyan/272550.html" target="_blank" title="htmlagilitypack-删除脚本和样式？分享">htmlagilitypack-删除脚本和样式？分享</a></li>
<li><a href="/bianchengyuyan/272381.html" target="_blank" title="如何在ASP.NETMVC的验证消息中呈现html？Shar">如何在ASP.NETMVC的验证消息中呈现html？Shar</a></li>
<li><a href="/bianchengyuyan/272244.html" target="_blank" title="使用c＃MVC3 Html.ActionLink渲染引导程序">使用c＃MVC3 Html.ActionLink渲染引导程序</a></li>
<li><a href="/bianchengyuyan/271867.html" target="_blank" title="如何在选择另一个@ Html.DropDownList 后填">如何在选择另一个@ Html.DropDownList 后填</a></li>
<li><a href="/bianchengyuyan/271720.html" target="_blank" title="C#学习教程：.net-C#的Html解析器和对象模型sha">C#学习教程：.net-C#的Html解析器和对象模型sha</a></li>
<li><a href="/bianchengyuyan/271665.html" target="_blank" title="C#，将html所有特殊字符替换为普通文本字符的函数分享">C#，将html所有特殊字符替换为普通文本字符的函数分享</a></li>
<li><a href="/bianchengyuyan/271332.html" target="_blank" title="根据部分ID列表过滤HtmlElements列表Share">根据部分ID列表过滤HtmlElements列表Share</a></li>
</ul>
</div>
</div>
<div class="main-right">
<div class="right_fix">
<div class="r_con">
<div class="r_title">最新推荐</div>
<ul>
<li><em>1</em><a href="/kejifunen/363342.html" title="有必要安装前端净水器吗？个人经验，请勿模仿！ " target="_blank">有必要安装前端净水器吗？个人经验，请勿模仿！ </a></li>
<li><em>2</em><a href="/kejifunen/358594.html" title="可穿戴设备！走在行业最前端的行业" target="_blank">可穿戴设备！走在行业最前端的行业</a></li>
<li><em>3</em><a href="/kejifunen/354257.html" title="前端售价500万的Spotcat S200智能猫眼评测" target="_blank">前端售价500万的Spotcat S200智能猫眼评测</a></li>
<li><em>4</em><a href="/kejifunen/353692.html" title="iTutorGroup首届前端技术沙龙！如何最大化用户体验" target="_blank">iTutorGroup首届前端技术沙龙！如何最大化用户体验</a></li>
<li><em>5</em><a href="/kejifunen/345353.html" title="肖洪波太感人了！前端智能化三大挑战堪比螺丝道场 - GTIC" target="_blank">肖洪波太感人了！前端智能化三大挑战堪比螺丝道场 - GTIC</a></li>
<li><em>6</em><a href="/kejifunen/341659.html" title="解密自动驾驶前端设备量产，文远智行文远知行公开WMP自动驾驶" target="_blank">解密自动驾驶前端设备量产，文远智行文远知行公开WMP自动驾驶</a></li>
<li><em>7</em><a href="/kejifunen/340018.html" title="聚焦“云开发圆桌论坛”，大前端Serverless大佬释放这" target="_blank">聚焦“云开发圆桌论坛”，大前端Serverless大佬释放这</a></li>
<li><em>8</em><a href="/jishutupo/318398.html" title="使用HTML5和JavaScript构建Windows商店应" target="_blank">使用HTML5和JavaScript构建Windows商店应</a></li>
<li><em>9</em><a href="/shujuyingyong/287989.html" title="前端开发者如何选择合适的数据库：MongoDB还是MySQL" target="_blank">前端开发者如何选择合适的数据库：MongoDB还是MySQL</a></li>
<li><em>10</em><a href="/shujuyingyong/287860.html" title="MongoDB是什么？它在前端和后端的作用和优势" target="_blank">MongoDB是什么？它在前端和后端的作用和优势</a></li>
</ul>
</div>
<div class="r_con">
<div class="r_title">猜你喜欢</div>
<ul class="you_like">
<li><em>1</em><a href="/shujuyingyong/286815.html" title="前端开发者为什么需要学习mongodb？" target="_blank">前端开发者为什么需要学习mongodb？</a></li>
<li><em>2</em><a href="/shujuyingyong/285508.html" title="如何使用redis缓存提高前端性能" target="_blank">如何使用redis缓存提高前端性能</a></li>
<li><em>3</em><a href="/bianchengyuyan/275294.html" title="HtmlAgilityPack替换节点分享" target="_blank">HtmlAgilityPack替换节点分享</a></li>
<li><em>4</em><a href="/bianchengyuyan/275217.html" title="htmlagilitypackgzip加密异常分享" target="_blank">htmlagilitypackgzip加密异常分享</a></li>
<li><em>5</em><a href="/bianchengyuyan/275215.html" title="Helper方法生成小型HTML片段Share" target="_blank">Helper方法生成小型HTML片段Share</a></li>
<li><em>6</em><a href="/bianchengyuyan/275139.html" title="发送包含嵌入图像和纯文本的html电子邮件，其中包含与C＃中" target="_blank">发送包含嵌入图像和纯文本的html电子邮件，其中包含与C＃中</a></li>
<li><em>7</em><a href="/bianchengyuyan/275136.html" title="如何将viewbag显示为html？分享" target="_blank">如何将viewbag显示为html？分享</a></li>
<li><em>8</em><a href="/bianchengyuyan/274986.html" title="在C＃中将HTML实体转换为Unicode字符分享" target="_blank">在C＃中将HTML实体转换为Unicode字符分享</a></li>
<li><em>9</em><a href="/bianchengyuyan/274921.html" title="HtmlAgilityPack中的NullReference" target="_blank">HtmlAgilityPack中的NullReference</a></li>
<li><em>10</em><a href="/bianchengyuyan/274907.html" title="如何在C#中以最快的方式获取HTMLDocument的所有文" target="_blank">如何在C#中以最快的方式获取HTMLDocument的所有文</a></li>
<li><em>11</em><a href="/bianchengyuyan/274889.html" title="HtmlAgilityPack-removeelements" target="_blank">HtmlAgilityPack-removeelements</a></li>
<li><em>12</em><a href="/bianchengyuyan/274795.html" title="在没有DocumentViewer的情况下显示HTML文档的" target="_blank">在没有DocumentViewer的情况下显示HTML文档的</a></li>
<li><em>13</em><a href="/bianchengyuyan/274727.html" title="ItextSharp尝试解析html进行pdf转换时出错分享" target="_blank">ItextSharp尝试解析html进行pdf转换时出错分享</a></li>
<li><em>14</em><a href="/bianchengyuyan/274635.html" title="为什么在确实有匹配元素的情况下，这个HtmlAgilityP" target="_blank">为什么在确实有匹配元素的情况下，这个HtmlAgilityP</a></li>
<li><em>15</em><a href="/bianchengyuyan/274621.html" title="htmlagilitypack-删除脚本和样式？分享" target="_blank">htmlagilitypack-删除脚本和样式？分享</a></li>
<li><em>16</em><a href="/bianchengyuyan/274584.html" title="为自定义ActionLinkHelper扩展添加到htmlA" target="_blank">为自定义ActionLinkHelper扩展添加到htmlA</a></li>
<li><em>17</em><a href="/bianchengyuyan/274531.html" title="如何使用Silverlight-C#删除HtmlElemen" target="_blank">如何使用Silverlight-C#删除HtmlElemen</a></li>
<li><em>18</em><a href="/bianchengyuyan/274494.html" title="C#学习教程：.net-C#的Html解析器和对象模型sha" target="_blank">C#学习教程：.net-C#的Html解析器和对象模型sha</a></li>
<li><em>19</em><a href="/bianchengyuyan/274256.html" title="“System.Web.WebPages.Html.Html" target="_blank">“System.Web.WebPages.Html.Html</a></li>
<li><em>20</em><a href="/bianchengyuyan/273999.html" title="使用HtmlAgilityPack解析时去除空格和换行符分享" target="_blank">使用HtmlAgilityPack解析时去除空格和换行符分享</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="related_article"></div>
<div class="footer">
<p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p>
<p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。
如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p>
</div>
<!-- 应用插件标签 start -->
<!-- 应用插件标签 end -->
</body>
</html>
