html文档的头部元素有哪些

html文档的头部元素有：元素，元素，元素，<style>元素，<link>元素，<script>元素和<base>元素。<br/></p><p>文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等；而头部元素就是用来定义这些信息。本篇文章就给大家介绍一下<a href="/tag-news-name-html-p-1.html">html</a>文档的头部元素，让大家了解<a href="/tag-news-name-html-p-1.html">html</a>文档的头部元素的作用，希望对你们有所帮助。【视频教程推荐：<a href="/tag-news-name-HTML-p-1.html">HTML</a>教程】</p><p style="text-align: center;"><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/5c18b67545a8c134.jpg"/ alt="html文档的头部元素有哪些" ></p><p><span style="max-width:90%"><strong><a href="/tag-news-name-html-p-1.html">html</a> <head>元素</strong></span></p><p><head>元素是用于定义文档的头部的，是所有其他头部元素的容器。<a href="/tag-news-name-HTML-p-1.html">HTML</a>文档的各种属性和信息就是在<head>元素中定义的。</p><p>下面我们来看看一个简单<a href="/tag-news-name-html-p-1.html">html</a>文档，她具有最基本的必需的元素：</p><pre><!DOCTYPE <a href="/tag-news-name-html-p-1.html">html</a>> <<a href="/tag-news-name-html-p-1.html">html</a>> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> </body> </<a href="/tag-news-name-html-p-1.html">html</a>></pre><p>可以看出，<head>元素位于<<a href="/tag-news-name-html-p-1.html">html</a>>标签和<body>标签之间，把其他的头部元素包含在其中。</p><p><span style="font-size: 18px;"><strong><a href="/tag-news-name-html-p-1.html">html</a> <meta>元素</strong></span></p><p><meta>元素是用于指定网页上的字符集，页面描述，关键字，作者和其他元数据。</p><p>其中，元数据主要是提供给浏览器，搜索引擎和其他Web服务使用的，以便更好地对网页进行排名。</p><p>下面我们来看看如何使用<meta>元素：</p><pre>//定义字符集 <meta charset = "UTF-8" > //为搜索引擎定义关键字 <meta name = "keywords" content = "php教程,php入门教程,php视频教程,php源码下载,php手册" > //定义网页的说明 <meta name = "description" content = "https://www.sxiaw.com/提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！" > //定义网页的作者 <meta name = "author" content = "https://www.sxiaw.com/" > //定义每30秒刷新一次文档： <meta http-equiv = "refresh" content = "30" > //控制视口（<a href="/tag-news-name-HTML-p-1.html">HTML</a>5提供的新属性） <meta name = "viewport" content = "width = device-width，initial-scale = 1.0" ></pre><p>说明：视口是用户在网页上的可见区域。它在不同设备之间变化，在手机上看起来比计算机屏幕小。</p><p><span style="font-size: 18px;"><strong><a href="/tag-news-name-html-p-1.html">html</a> <title>元素</strong></span></p><p><title>元素是用于定义文档的标题；适用于所有<a href="/tag-news-name-HTML-p-1.html">HTML</a> 或者 X<a href="/tag-news-name-HTML-p-1.html">HTML</a>文档。</p><p><title>元素的作用：</p><p>1、可以在浏览器选项卡中定义标题。</p><p>2、可以在添加到收藏夹时为页面提供标题。</p><p>3、可以在搜索引擎结果中显示页面的标题。</p><p>例：</p><pre><!DOCTYPE <a href="/tag-news-name-html-p-1.html">html</a>> <<a href="/tag-news-name-html-p-1.html">html</a>> <head> <meta charset="UTF-8"> <title>https://www.sxiaw.com/</title> </head> <body> <p>正文的内容显示在浏览器窗口中。</p> <p>title元素的内容显示在浏览器标签，收藏夹和搜索引擎结果中。</p> </body> </<a href="/tag-news-name-html-p-1.html">html</a>></pre><p>效果图：</p><p style="text-align: center;"><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/5c18b92ec6088231.jpg"/ alt="html文档的头部元素有哪些" ></p><p><strong><span style="max-width:90%"><a href="/tag-news-name-html-p-1.html">html</a> <style>元素</span></strong></p><p><style>元素用于设置<a href="/tag-news-name-HTML-p-1.html">HTML</a>页面的样式，内联的css样式代码就是写在<style>元素内的。例：</p><pre><style> body {background-color：pink;} h1 {color：red;} p {color：blue;} </style> <h1>这是一个标题</h1> <p>这是一个段落。</p></pre><p>效果图：<br/></p><p style="text-align: center;"><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/5c18babb18bf2202.jpg"/ alt="html文档的头部元素有哪些" ></p><p><span style="max-width:90%"><strong><a href="/tag-news-name-HTML-p-1.html">HTML</a> <link>元素</strong></span></p><p><link>元素用于将外部的css样式表链接到网页中。基本语法为：</p><pre><link rel="stylesheet" href="css文件" /></pre><p>例：</p><pre><link rel="stylesheet" href="css/style.css" /></pre><p><strong><span style="font-size: 18px;"><a href="/tag-news-name-HTML-p-1.html">HTML</a> <script> 元素</span></strong></p><p><script> 元素是用于定义客户端脚本，比如 JavaScript。</p><p>我们可以在<script> 元素中包含脚本语句，例：</p><pre><script> console.log("<script> 元素"); </script></pre><p>输出：</p><p style="text-align: center;"><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1545124751943473.jpg" title="1545124751943473.jpg" alt="4.jpg"/></p><p>也可以通过 src 属性链接外部脚本文件到网页中，例：</p><pre><script type="text/javascript" src="js/style.js" ></script></pre><p><span style="max-width:90%"><strong><a href="/tag-news-name-HTML-p-1.html">HTML</a> <base>元素</strong></span></p><p><base>元素用于指定页面中所有相对URL的基本URL和基本目标。例：</p><pre><base href = “http://www.sxiaw.com” target = “_ blank” ></pre><p>总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。</p><p>以上就是<a href="/tag-news-name-html-p-1.html">html</a>文档的头部元素有哪些的详细内容，更多请关注https://www.sxiaw.com/其它相关文章！</p></span> </div> </article> <aside class="swnetnews"> <div class="lis"> <span><i>推荐内容</i></span> <ul> <li><a href="/doc/9539.html" title="小米路由器4设置wifi隐藏的图文教程" target="_blank">小米路由器4设置wifi隐藏的图文教程</a></li><li><a href="/doc/8799.html" title="查看支付宝账号的具体步骤" target="_blank">查看支付宝账号的具体步骤</a></li><li><a href="/doc/1496.html" title="谈谈Golang的HTTP转发技术" target="_blank">谈谈Golang的HTTP转发技术</a></li><li><a href="/doc/1015.html" title="如何用Golang实现用户的登录功能" target="_blank">如何用Golang实现用户的登录功能</a></li><li><a href="/doc/9933.html" title="强烈推荐一款免费的、带CRM的开源电商系统！" target="_blank">强烈推荐一款免费的、带CRM的开源电商系统！</a></li><li><a href="/doc/3393.html" title="2021最常用的8个代码编辑器推荐" target="_blank">2021最常用的8个代码编辑器推荐</a></li><li><a href="/doc/3162.html" title="详解linux oracle11g安装教程" target="_blank">详解linux oracle11g安装教程</a></li><li><a href="/doc/4999.html" title="vscode如何设置缩进" target="_blank">vscode如何设置缩进</a></li><li><a href="/doc/8981.html" title="redis集群有什么作用" target="_blank">redis集群有什么作用</a></li><li><a href="/doc/4212.html" title="openjudge 2971:抓住那头牛解题过程（附代码）" target="_blank">openjudge 2971:抓住那头牛解题过程（附代码）</a></li> </ul> </div> </aside> </main> <script> // first, find all the div.code blocks document.querySelectorAll('pre').forEach(el => { // then highlight each hljs.highlightElement(el); hljs.lineNumbersBlock(el); }); </script> <link rel="stylesheet" type="text/css" href="/kan/css/basezb.css"> <script type="text/javascript" src="/kan/js/read.js"></script> <div style="display:none"> <div class="login-box" id="login-dialog"> <div class="login-top"><a rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div> <div class="login-form" id="nav-signin">  <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"> <p class="int-text"> <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p> <p class="int-text"> <input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" > </p> <p class="int-info"> <label class="ui-label"> </label> <label for="agreement" class="ui-label-checkbox"> <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000"> <input type="hidden" name="notforward" id="notforward" value="1"> <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label> <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p> <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> </form> </div> </div> </div> </div> </div> <script type="text/javascript" src="/kan/js/foot_js.js"></script> <div id="footer"> <div class="w1200"> <p class="tips_text">本网站为非赢利性站点，本网站所有内容均来源于互联网相关站点自动搜索采集信息，相关链接已经注明来源。</p> <p class="tips_text">Copyright © 2004-2018 https://www.sxiaw.com/. All Rights Reserved.<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?fa236be8ec7680639fbd4ee307fd0c69"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <a href="http://beian.miit.gov.cn/" target="_blank">津ICP备2023001793号-1</a></p> </div> </div> </body> </html>