一文读懂HTML的头部内容，希望有所帮助 - 码农知识堂

一文读懂HTML的头部内容，希望有所帮助
HTML的头部
- HTML篇_第五章、HTML的``
- 一、HTML ``元素
 二、``元素</a></li><li><a href="#base_37" rel="nofollow" target="_self">三、`<base>`元素</a></li><li><a href="#link_59" rel="nofollow" target="_self">四、`<link>元素`</a></li><li><a href="#style_81" rel="nofollow" target="_self">五、`<style>`元素</a></li><li><a href="#meta_116" rel="nofollow" target="_self">六、`<meta>`元素</a></li><li><ul><li><a href="#61_122" rel="nofollow" target="_self">6.1为搜索引擎定义关键词</a></li><li><a href="#62_130" rel="nofollow" target="_self">6.2为网页定义描述内容</a></li><li><a href="#63_138" rel="nofollow" target="_self">6.3定义网页作者</a></li></ul> </li><li><a href="#script_147" rel="nofollow" target="_self">七、`<script>`元素</a></li></ul> </li></ul> </div> <h2><a name="t1"></a><a id="HTML_HTMLhead_2"></a>HTML篇_第五章、HTML的<code><head></code></h2> <h3><a name="t2"></a><a id="HTML_head_4"></a>一、HTML <code><head></code>元素</h3> <code><head></code>元素包是整个文档的头部区域，它定义了文档信息，包含了所有的头部标签元素。在<code><head></code>元素中可以插入脚本（JavaScript）、样式文件（CSS）以及各种meta信息。可以添加在头部区域的元素见下文中的表格。 <div class="table-box"><table><thead><tr><th align="center">标签</th><th align="center">描述</th></tr></thead><tbody><tr><td align="center"><code><head></code></td><td align="center">定义了文档的信息</td></tr><tr><td align="center"><code><title></code></td><td align="center">定义了文档的标题</td></tr><tr><td align="center"><code><base></code></td><td align="center">定义了页面链接标签的默认链接地址</td></tr><tr><td align="center"><code><link></code></td><td align="center">定义了文档和外部资源之间的联系</td></tr><tr><td align="center"><code><meta></code></td><td align="center">定义了HTML文档中的元数据</td></tr><tr><td align="center"><code><script></code></td><td align="center">定义了客户端的脚本文件</td></tr><tr><td align="center"><code><style></code></td><td align="center">定义了HTML文档的样式文件</td></tr></tbody></table></div> <h3><a name="t3"></a><a id="title_18"></a>二、<code><title></code>元素</h3> <code><title></code>元素定义了不同文档的标题，它在HTML文档中是必须存在的。在浏览器中，该元素的内容在搜索引擎的结果页面作为标题显示。在网页被收藏添加到收藏夹的时候，在收藏夹内也作为标题来显示。 代码演示： <pre data-index="0" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <p>文档内容</p> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <h3><a name="t4"></a><a id="base_37"></a>三、<code><base></code>元素</h3> <code><base></code>标签描述了基本的链接地址/链接目标，则该标签作为HTML文档中所有的链接标签的默认链接 代码演示： <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> <base href="https://www.csdn.net/" target="_blank"> </head> <body> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> <code><base></code>标签指定了页面上所有链接的默认URL，URL需要在该标签的href属性内填写。上述代码中target属性值设置为“_blank”的意思是：链接会在新窗口打开。 <h3><a name="t5"></a><a id="link_59"></a>四、<code><link>元素</code></h3> <code><link></code>标签他定义了文档于外部标签之间的联系，通常用于链接到<a href="https://so.csdn.net/so/search?q=%E6%A0%B7%E5%BC%8F%E8%A1%A8&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%A0%B7%E5%BC%8F%E8%A1%A8&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"样式表\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%A0%B7%E5%BC%8F%E8%A1%A8&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"样式表\"}"}" data-tit="样式表" data-pretit="样式表">样式表</a>。 代码演示： <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> <link rel="stylesheet" type="text/css" href="demo.css"/> </head> <body> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> 上述代码中，rel（全称：relationship）的属性值设置为“stylesheet”的意思是描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表；type属性是类型属性，属性值设置为"text/css"意思是告诉浏览器这里的文本内容（text）要层叠样式表（css）来解析；href属性的值设置为“demo.css”的意思是：当前层叠样式表（css）文件的文件路径。 <h3><a name="t6"></a><a id="style_81"></a>五、<code><style></code>元素</h3> <code><style></code>标签定义了文档样式的引用地址，也可以直接添加样式来渲染HTML文档 代码演示： <pre data-index="3" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> <style type="text/css"> body{ background-color:red； } p{ color:black; } </style> </head> <body> <h1>《桃花源记》</h1> <p>晋·陶渊明</p> <p>晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷，渔人甚异之。复前行，欲穷其林。<br/> 林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田美池桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。<br/> 见渔人，乃大惊，问所从来。具答之。便要还家，设酒杀鸡作食。村中闻有此人，咸来问讯。自云先世避秦时乱，率妻子邑人来此绝境，不复出焉，遂与外人间隔。问今是何世，乃不知有汉，无论魏晋。此人一一为具言所闻，皆叹惋。余人各复延至其家，皆出酒食。停数日，辞去。此中人语云：“不足为外人道也。”<br/> 既出，得其船，便扶向路，处处志之。及郡下，诣太守，说如此。太守即遣人随其往，寻向所志，遂迷，不复得路。<br/> 南阳刘子骥，高尚士也，闻之，欣然规往。未果，寻病终，后遂无问津者</p> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li></ul></pre> 上述代码中type属性值设置为"text/css"意思是告诉浏览器这里的文本内容（text）要层叠样式表（css）来解析。标签内容的意思是设置HTML文档的主题北京颜色为红色，段落的文字颜色为黑色。该部分涉及到层叠样式表（css）的相关知识，性情请参见关于层叠样式表（css）的系列文章，在此不做赘述。 <h3><a name="t7"></a><a id="meta_116"></a>六、<code><meta></code>元素</h3> <code><meta></code>元素提供了元数据，一般放置在<code><head></code>区域通常用于指定网页的描述、关键词、文件的最后修改时间、作者和其他元数据。这些元数据会被浏览器解析，可以使用于浏览器（如何显示内容或加载页面）、搜索引擎（关键词）或者其他<a href="https://so.csdn.net/so/search?q=web%E6%9C%8D%E5%8A%A1&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=web%E6%9C%8D%E5%8A%A1&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"web服务\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=web%E6%9C%8D%E5%8A%A1&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"web服务\"}"}" data-tit="web服务" data-pretit="web服务">web服务</a>，但是这些元数据不会显示在页面上。常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。 接下来举几个<code><meta></code>标签的实际应用例子。 <h4><a name="t8"></a><a id="61_122"></a>6.1为搜索引擎定义关键词</h4> <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><meta name="keywords" content="HTML,CSS,JavaScript"/> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 上述代码中name属性是用来描述网页的，它的值“keywords”用于指定所提供的信息内容，的意思是为搜索引擎提供关键字列表，对应于content（网页内容）属性使用，便于搜索引擎查找分类。content属性的值为设置的关键字，上述代码中设置了三个关键字，各个关键字之间需要用英文逗号隔开。 <h4><a name="t9"></a><a id="62_130"></a>6.2为网页定义描述内容</h4> <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><meta name="description" content="网页简述"/> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 上述代码中name属性的值设置为"description"，意思是：告诉搜索引擎当前页面的主要内容。 <h4><a name="t10"></a><a id="63_138"></a>6.3定义网页作者</h4> <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><meta name="author" content="7旅病娘"/> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 上述代码中name属性的值设置为"author"，定义网页的作者。 <h3><a name="t11"></a><a id="script_147"></a>七、<code><script></code>元素</h3> 这个标签用于加载脚本文件，如：JavaScript。关于JavaScript在这里不做叙述。 <hr> 希望有所帮助！ 关注我，持续更新。 </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/805421">[含lw+源码等]S2SH学生会/社团活动管理系统[包运行成功]适合计算机毕业设计前端毕设程序设计</a> <a href="/Article/Index/1592592">Apache ECharts</a> <a href="/Article/Index/1293333">GIS前端编程-地理事件动态模拟</a> <a href="/Article/Index/1342925">python经典百题之偶数是2个素数之和</a> <a href="/Article/Index/1419324">数组的最长递减子序列</a> <a href="/Article/Index/733806">Java的Class类讲解之Class对象的产生</a> <a href="/Article/Index/794467">JAVA计算机毕业设计养老机构管理信息系统Mybatis+源码+数据库+lw文档+系统+调试部署</a> <a href="/Article/Index/1453523">Oracle 监控的指标有哪些和oracle巡检的内容</a> <a href="/Article/Index/1381618">短视频矩阵系统源码开发</a> <a href="/Article/Index/971201">java计算机毕业设计双峰县在线房屋租售网站源代码+数据库+系统+lw文档</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/Godyanqi/article/details/128180660 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>