标题:html头部标签 | 作者: catfish | 时间:2019年12月06日
暂无法显示图片

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="X-UA-Compatible" content="ie=edge">               <!-- 浏览器版本适应 -->
    <title>Document</title>
</head>
<body>
    
</body>
</html>

本篇博客主要讲述的是head标签内的相关元素,head标签元素在网页上是不会显示出来的,只供浏览器阅读。

Meta标签

meta标签可以定义的内容十分广泛。例如:HTML网页介绍HTML网页关键字HTML网页编码HTML重定向HTML的robots协议

HTML网页介绍

基本格式:

<meta name="XXX" content="XXX">

name属性是介绍的对象,content属性是介绍内容。一般写的通俗易懂一点。比如可以这样写:

<meta name="author" content="catfish">
<meta name="description" content="这是一个供交流学习的博客网站">
.....

HTML关键字

关键字是供搜索引擎检索的举个例子:

<meta name="keywords" content="学习交流,经验分享,休闲娱乐">

HTML网页编码

规定html文件的编码方式,用法:

<meta charset="utf-8">

HTML重定向

举个例子,访问该网页后,停留一秒,然后跳转到网页https://www.catfish1921.com。

<meta  http-equiv="refresh" content="1;url=https://www.catfish1921.com">

HTML robots协议

robots协议成为机器人协议,告诉搜索引擎和蜘蛛机器人哪些内容是不能被获取到的,这样做可以保证网页个人隐私,但是不是绝对的。用法如下:

<meta name="robots" content="index,follow" />       <!-- 允许蜘蛛爬行,这是默认设置 -->
<meta name="robots" content="noindex,nofollow" />   <!-- 不允许蜘蛛爬行 -->

两个中选一个进行设置,如果设置多个,下面的一个标签会覆盖上面的一个标签的效果。

base标签

规定全局的a标签的默认打开方式,如果不规定默认打开方式是target="_self"。用法示例如下:

<base target="_blank">

link标签

作用:设置网页的图标外链式引入css文件

设置网页的图标

示例如下:

<link rel="icon" href="https://www.catfish1921.com/image/fish.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://www.catfish1921.com/image/fish.ico" type="image/x-icon">

第一条是设置网页标签页的图标,第二条是设置网页收藏页的图标。

外链式引入css样式

示例如下:

<link rel="stylesheet" href="https://www.catfish1921.com/fish.css">

script标签

作用:外链式内嵌式引入js文件。

外链式

示例如下:

<script src="https://www.catfish1921.com/fish.js"></script>

内嵌式

示例如下:

<script>
  ....
</script>

style标签

作用:css内嵌式

<style>
  ...
<style>

title标签

定义html网页的唯一标题。

我要评论

没有登录?请先登录后再评论

最新评论

暂无人评论,来抢个沙发吧!