网站首页 > 基础教程 正文
作为一个前端,经常写html文档,但是却很少去在意头部的标签有哪些,也很少在意每个标签的作用,下面我们来详细了解下。
头部的标签,也就是写在<head><head/>里。通常会有6个标签:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<base href="http://www.baidu.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
body {font-size:16px}
p {color:blue}
</style>
<script> document.write("Hello World!") </script>
</head>
<body> 文档内容...... </body>
</html>
一、<title>元素。
1.title 标签定义了文档的标题,在HTML文档中是必须的。它会展示在浏览器的工具栏上。
2.如果要展示一个图标,可以再加一个<link>标签,<link>标签的 rel属性为“icon”,后面的
href跟上图片的地址。
<link rel="icon" href="图片url">
二、<base>元素。
base标签描述了基本的链接地址,该标签作为HTML文档中所有的链接的默认链接
<head>
<base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" />
</head>
<body>
<img src="banner7.jpg"/>
</body>
上面的img标签的src链接的地址就是base里的地址加上img里的地址。
三、<link>元素。
link标签定义了文档与外部资源之间的关系,它通常用于链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
四、<style>元素。
style标签定义了HTML文档的样式,这个我们经常会使用到,都不会陌生。
五、<meta>元素。
meta标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。它常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
// 编码格式定义
<meta charset="utf-8">
// 为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
// 为网页定义描述内容:
<meta name="description" content="头部标签 & 使用">
// 定义网页作者:
<meta name="author" content="Runoob">
// 每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
// 视图层的参数定义
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
// content属性值 :
// width:可视区域的宽度,值可为数字或关键词device-width
// height:同width
// intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
// maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
// maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
// user-scalable:是否可对页面进行缩放,no 禁止缩放
六、<script>元素。
script标签用于加载脚本文件,比如说javascript,可以直接书写js,也能用于链接外部的js文件。
<script>
document.write("Hello World!")
</script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
- 上一篇: 幸运召唤师——这个钓鱼网站有点真
- 下一篇: 为什么Facebook的API以一个循环作为开头?
猜你喜欢
- 2024-10-12 面试常客系列之跨域 java跨域面试题
- 2024-10-12 如何根治 Script Error. 如何根治神经性皮炎
- 2024-10-12 只用一个js文件,为你的网站加个黑暗模式
- 2024-10-12 闭包(一):闭包的9个应用场景 闭包一般用在什么地方
- 2024-10-12 LLM工程师应该如何防范提示注入?指导来了
- 2024-10-12 如何实现前端社交媒体分享功能 前端聊天功能如何实现
- 2024-10-12 「WWDC2018」-Web安全策略 web安全进阶
- 2024-10-12 「JS库」3个很棒的小众JavaScript库
- 2024-10-12 如何使用 如何使用验孕棒
- 2024-10-12 2 JavaScript核心 script标签 营养标签中的核心营养素
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)