HTML <head>标签
上一节我们介绍了 HTML 的基本结构,在 HTML 的基本结构中,使用 <head> 标签来定义头部的内容。接下来我们一起看一下 <head> 标签内部又可以放哪些内容(或标签)呢?
请读者先看一段代码:
图1:<title> 文档的标题
请读者先看一段代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="expires" content="31 Dec 2090"> <title>文档的标题</title> <link rel="stylesheet" href="url"> <style></style> <script src="url"></script> </head> <body> </body> </html>
从这段代码中我们可以看出,<meta>、<title>、<link>、<style> 以及 <script> 标签是可以放在 <head> 标签内部的,我们来分别解释一下各个标签的含义。
<meta> 标签会在下一节进行详细讲解。
1. <title>标签
<title> 标签用来表示文档的标题,我们通过一段简单的代码来加以说明:<!DOCTYPE html> <html lang="en"> <head> <title>文档的标题</title> </head> <body> </body> </html>运行效果如下图所示:
图1:<title> 文档的标题
2. <link>标签
在 HTML 中,允许使用 <link> 标签配合 href 属性来引用外部 CSS(Casecading Style Sheets)文件,其中 href 属性值为外部 CSS 文件的路径。在 CSS 章节中会详细进行讲解,这里不做过多解释。3. <style>标签
<style> 标签同 <link> 标签类似,不同的是,<link> 标签是引用外部 CSS 样式文件,而 <style> 标签则是用来在内部编写 CSS 样式。我们建议在 <head> 标签中使用 <link> 或 <style> 标签,而不是在其他标签中使用。当浏览器加载页面时,会自上而下执行代码。如果这两个标签写的靠近下方,在加载页面样式时,可能会有短暂的延迟,影响用户使用效果。
4. <script>标签
<script> 标签用来引入外部文件。与 <link> 标签不同的是,<script> 标签配合 src 属性引入外部 JavaScript 文件,而 <link> 标签则是配合 href 属性引用外部 CSS 文件。一个是使用 href,另一个是使用 src,那么它们到底有什么区别呢?5. href与src的区别
- src 是 source 的简写,表示来源地址,用来引入地址中的内容。引入的内容会嵌入到当前标签所在的位置,所以浏览器在解析引入文件时,会停止对后续文档的处理,直到 src 的内容加载完毕。
- href 是 Hypertext Reference 的简写,表示超文本引用。在使用 href 时,浏览器不会停止解析当前文件。因为 href 属性中的内容只是与当前页面有关联,然后当前页面对它进行一次引用。
提示:以上讲到的标签不是必须写在 <head></head> 里面,只是 <head> 里面可以写入这些标签。例如, <script> 标签我们就不建议写在 <head></head> 内部,因为浏览器在解析 src 的路径时会停下对后续文档的处理,造成页面的短暂阻塞。
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算