11、HTML <head>标签
上一节我们介绍了 HTML 的基本结构,在 HTML 的基本结构中,使用 标签来定义头部的内容。接下来我们一起看一下 标签内部又可以放哪些内容(或标签)呢?
请读者先看一段代码:
<!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>
、
1. <title>
标签
<title>
标签用来表示文档的标题,我们通过一段简单的代码来加以说明:
<!DOCTYPE html>
<html lang="en">
<head><title>文档的标题</title>
</head>
<body>
</body>
</html>
运行效果如下图所示:
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 的路径时会停下对后续文档的处理,造成页面的短暂阻塞。
11、HTML <head>标签相关推荐
- 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增标签
一.html5概述 html5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版本.我们平时所说的html5其实是包含了html5,css3的新特性,以及新增的Jav ...
- 2021-10-20 HTML学习笔记(11)列表标签
列表标签概述 表格是用来显示数据的,而列表则是用来布局页面的.列表最大的特点就是整齐有序. 根据使用场景不同,列表可分为三类:无序列表.有序列表和自定义列表. 无序列表 使用<ul>标签表 ...
- 阿里达摩盘:双11大促人群诊断、DEEPLINK洞察、大促标签定制
作者介绍 画像数据产品@草帽小子 <大数据实践之路:中台+分析+应用>核心作者 著有用户画像.标签体系.广告投放等系列文章 人人都是产品经理专栏作家 "数据人创作者联盟" ...
- struts2标签详解
struts2标签讲解 要使用Struts2的标签,只需要在JSP页面添加如下一行定义即可:<%@ taglib prefix="s" uri="/struts-t ...
- Struts2标签库常用标签(转)
struts2标签讲解 要使用Struts2的标签,只需要在JSP页面添加如下一行定义即可:<%@ taglib prefix="s" uri="/struts-t ...
- JSP常用标签——JSTL标签和EL表达式
一.JSTL简介 1.什么是JSTL JSTL是Java中的一个定制标记库集.(这个标记库集不需要自己编写,可以直接使用) 2.为什么要使用JSTL 实现了JSP页面中的代码复用(基于标签库原理,重复 ...
- iOS开发中标签控制器的使用——UITabBarController
iOS开发中标签控制器的使用--UITabBarController 一.引言 与导航控制器相类似,标签控制器也是用于管理视图控制器的一个UI控件,在其内部封装了一个标签栏,与导航不同的是,导航的管理 ...
- html简介及常用标签
目录 一.html的简介 1.什么是html? 2.第一个html程序 3.html的规范(遵循) 4.html的操作思想 二.html中常用的标签 1.文字标签和注释标签 2.注释标签 3.标题标签 ...
- PythonNote01_HTML标签
>头标签<head> >>位置 头标签要放在头部之间 >>种类 <title> : 指定整个网页的标题,在浏览器最上方显示. <meta&g ...
- 将“softmax+交叉熵”推广到多标签分类问题
©PaperWeekly 原创 · 作者|苏剑林 单位|追一科技 研究方向|NLP.神经网络 一般来说,在处理常规的多分类问题时,我们会在模型的最后用一个全连接层输出每个类的分数,然后用 softma ...
最新文章
- uniapp(一) 项目架构,封装
- however the ssl module in Python is not available
- linux复盘:构架搭建lamp(安装)
- 辅助模式最终考验的是想象力,先来看看怎么用!| Accessibility
- 结对-结对编项目作业名称-需求分析
- 一般处理程序(ashx)和页面处理程序(aspx)的区别
- php dump函数详解,php中var_dump()函数的详解说明
- python多线程编程_python之多线程编程
- [Swift]LeetCode198. 打家劫舍 | House Robber
- Object.defineProperty()属性设置介绍
- 英雄联盟LOL静态HTML网页制作模板DⅣ+CSS学生网页作品代码游戏题材大学生网页设计作业下载
- 什么是驻点和拐点_驻点、极值点、拐点、鞍点的区别与联系
- c语言中字母与allse,几读音是什么
- JSON必备工具之Json Viewer
- iOS开发:对于Xcode的Open Developer Tool中常用功能使用的总结
- (3)DispatcherServlet与初始化主线
- gym100676 [小熊骑士限定]2015 ACM Arabella Collegiate Programming Contest
- WebRtc视频特效
- 实现宏offsetof()
- 谢希仁计算机网络第五版课后习题答案(1~6章)
热门文章
- EL之GB(GBM):利用GB对回归(性别属性编码+调2参)问题(整数值年龄预测)建模
- Py之ipykernel:Python库之ipykernel简介、安装、使用方法之详细攻略
- python与Java线程实现方式的对比
- 开源物联网通讯框架ServerSuperIO,成功移植到Windows10 IOT,在物联网和集成系统建设中降低成本。附:“物联网”交流大纲...
- jquery validation对隐藏的元素不进行验证
- NYOJ 108士兵杀敌(一)
- C++ Primer 5th笔记(chap 16 模板和泛型编程)类型无关和模板编译
- 区块链BaaS云服务(34)新加坡艾达链ASC
- Cosmos VS Palodat
- 数学建模——TOPSIS综合评价模型Python代码