HTML-head头部浅析 绝地灬酷狼 2022-05-24 09:57 198阅读 0赞 ## HTML结构 ## 在sublime或HBuildr新建HTML文件,输入html:5,按下tab键后,自动生成的代码大致如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> ### 文档声明头 ### 标准的HTML页面,第一行以 <!DOCTYPE... 开头,而这一行就被称为文档声明头。 DocType Declaration,简称DTD。 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 HTML4.01一共有6种DTD,也就是说HTML第一行语句一共有6种: ![HTML_DTD.png][] 上图中的三种小规范进行解释: * strict:表示“严格的”,这种模式里面的要求更为严格。 * Transitional:表示“普通的”,这种模式就是没有一些别的规范。 * Frameset:表示“框架”,在框架的页面使用。 strict这种严格体现在哪里?有一些标签不能使用。 比如,u标签,就是给一个本文加下划线,但是这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u这个下划线是样式。所以,在strict中是不能使用u标签的。那怎么给文本增加下划线呢?可以使用css属性来解决。XHTML1.0更为严格,因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。 在sublime输入的html:xt,x表示XHTML,t表示transitional。 HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了。 ### 头标签(head) ### head标签是所有头部元素的容器。 <head>内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息等。 可添加到head部分的标签:<title>、<base>、<meta>、<link>、<script>、<style>: <title>:指定整个网页的标题,在浏览器最上方显示。 <base>:为页面上的所有链接规定默认地址或默认目标(target)。 <meta>:提供有关页面的基本信息。 <link>:定义文档与外部资源的关系。 <script>:定义客户端脚本,如JavaScript。 <style>:定义内部样式表与网页的关系。 #### meta标签 #### 可提供有关页面的原信息(mata-information), 针对搜索引擎和更新频度的描述和关键词。 元数据(metadata)是关于数据的信息。 <meta> 标签提供关于 HTML 文档的元数据。 元数据不会显示在页面上,但是对于机器是可读的。 典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 <meta> 标签始终位于 head 元素中。 元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 * http-equiv属性 * 用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容。 * 与之对应的属性值为content,content中的内容其实就是各个参数的变量值。 <!--重定向 2秒后跳转到对应的网址,注意分号--> <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge"> * name属性 * 用于页面的关键字和描述,是写给搜索引擎看的, * 关键字可以有多个,用 ‘,’号隔开。 * 与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" /> <meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务, 开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" /> <!-- 只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句, 这个技术叫做SEO(search engine optimization,搜索引擎优化) --> <meta name=viewport content="width=device-width, initial-scale=1"> <!-- 让网页支持移动端,移动设备优先 --> #### title 标签 #### <title> 标签定义文档的标题。 title 元素在所有 HTML/XHTML 文档中都是必需的。 title 元素能够: \* 定义浏览器工具栏中的标题 \* 提供页面被添加到收藏夹时显示的标题 \* 显示在搜索引擎结果中的页面标题 \* 告诉用户和搜索引擎这个网页的主要内容是什么, \* 搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。 #### base 标签 #### <base> 标签为页面上的所有链接设置默认的地址或默认的目标(target): 例: <head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head> 实例2: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank"> </head> <body> <img src="logo.png"> - 注意这里我们设置了图片的相对地址。 能正常显示是因为我们在 head 部分设置了 base 标签, 该标签指定了页面上所有链接的默认 URL, 所以该图片的访问地址为 "http://www.w3cschool.cn/statics/images/w3c/logo.png" <br><br> <a href="http://www.w3cschool.cn">W3Cschool教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。 因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。 </body> </html> ![w3cschool][] #### link 标签 #### <link> 标签定义文档与外部资源之间的关系。 <link> 标签最常用于连接样式表: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> #### style 标签 #### <style> 标签用于为 HTML 文档定义样式信息。 您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式: <head> <style type="text/css"> body { background-color:yellow} p { color:blue} </style> </head> 注:link和style详细会在讲到样式和css时再详解和列实例。 #### script标签 #### script 标签用于定义客户端脚本,比如JavaScript。 HTML头部元素 标签描述 <head> 定义关于文档的信息。 <title> 定义文档标题。 <base> 定义页面上所有链接的默认地址或默认目标。 <link> 定义文档与外部资源之间的关系。 <meta> 定义关于 HTML 文档的元数据。 <script> 定义客户端脚本。 <style> 定义文档的样式信息。 参考: 1、[w3cschool][w3cschool 1] 2、[小马哥][Link 1] [HTML_DTD.png]: /images/20220524/8d02a2d853584787a6bc6d38fe766928.png [w3cschool]: /images/20220524/87e30badd89b48f1945f8e01d6ae9d85.png [w3cschool 1]: http://www.w3cschool.cn [Link 1]: https://www.cnblogs.com/majj/p/9056951.html
还没有评论,来说两句吧...