9.HTML头部
程序员文章站
2022-05-07 17:18:33
...
HTML<head>元素
1.<head>元素中<title>元素
<title>元素是页面的标题,实例如下
<!DOCTYPE html>
<html>
<head>
<title>这是页面的标题</title>
</head>
<body>
<p>浏览器中包含body元素的内容</p>
<p>浏览器的标题中包含title元素的内容</p>
</body>
</html>
<head>元素中的<base>标签
使用<base>单标签
定义所有链接目标默认的地址
实例:
<!DOCTYPE html>
<html>
<head>
<title>这是标题</title>
<base href="//A/B/C/" target="_blank" />
<!--注意了,base是但标签-->
</head>
<body>
<img src="1.png">
<!--相当于src="//A/B/C/1/png",且由于base设置,所以target属性为
_blank-->
</body>
</html>
<head>元素中的<meta>元素(但标签)
使用<meta>元素来表述HTML文档的字符集,关键字,作者。实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题</title>
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,Javascript,CSS">
<meta name="author" content="YF">
</head>
<body>
<p>注意了,head元素的所有内容都在页面标题上显示</p>
</body>
</html>
HTML<title>
元素
1.<title>元素定义了不同文档的标题。
2.<title>元素在HTML中是必须的
3.<title>元素是显示在搜索引擎页面的标题,也是显示在收藏夹中的标题,也定义了浏览器工具栏的标题
<!DOCTYPE html>
<html>
<head>
<title>这是标题</title>
</head>
<body>
</body>
</html>
HTML<link>
元素
1.<link>标签常常用于链接到样式表(CSS)
2.<link>标签是单标签
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML<style>
元素
HTML中<style>
标签用于定义样式标签的引用地址
可以在<style>
元素中直接添加样式来渲染HTML文档
<!DOCTYPE html>
<html>
<head>
<title>这是标题</title>
<style type="text/css">
body {
background-color: yellow
}
p {
color: blue
}
</style>
</head>
<body>
<p>段落1号</p>
<p>段落2号</p>
</body>
</html>
HTML<meta>
元素
HTML的<meta>元素描述了一些基本的元数据,元数据不显示在页面上,但是会被浏览器解析
<meta>元素提供了网页的描述,作者,关键词,文件的最后修改时间。
<meta>一般放于 <head>元素里面
HTML<script>
元素
<script>标签用于加载脚本文件,如:JavaScript.
<script>会在以后的章节中描述
总结
<head>元素中常常包含的标签为:
1.<title>元素:定义了文档的标题
2.<base>元素:定义了文档中所有链接的基地址
3.<link>元素:定义了文档和外部资源之间的联系
4.<style>元素:定义了HTML文档的样式文件
5.<script>元素:定义了客户端的脚本文件
6.<meta>元素:定义了文档的元数据