HTML中head标签内容介绍

在利用VScode编写代码时,我们利用VScode的!键自动生成头部代码时,会自动生成以下内容

<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>Html</title>
</head>

  对于<head>中的内容又有什么意义,<head> 标签用于定义文档的头部,头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。在<head>标签中,我们可以使用如下标签,<meta>元信息标签,<title>用于定义网页标题,<rel>用于定义网页的引用内容,如样式表,图标等,<script>定义网页引用的脚本或者我们可以直接在其中编写脚本,但最好不要头部中编写脚本,因为这会导致浏览器加载效率,最好将脚本放置在页面尾部。<style>标签用于定义网页的样式表。

  接下来我们讲述<meta>标签的作用。<meta>标签主要用来描述网页的相关信息。

  <meta>标签主要有有三个属性,charset,name,http-equiv。

  charset用来定义此网页是采用什么编码方式,我们常用UTF-8的编码方式

  name则主要用来描述网页的内容信息,如author,keywords,description等。name采用名值对方式,name中的为属性名,content中的则是具体的值。例如

<meta name="keywords" content="计算机,前端,head标签">

利用name,我们可以定义我们自己想用来描述这个页面的有关信息。  

  http-equiv则主要用来向浏览器传输一些有关网页的信息,用来精确的显示网页信息

  它采用和name一样采用名值对方式,可用来重刷新页面并重指向页面以及制定是否使用cookie等。例如,页面添加以下语句,将在三秒后刷新,并重定位到百度页面

 <meta http-equiv="refresh" content="3; url=http://www.baidu.com">

  VScode的自动生成代码中的X-UA-Compatible则是微软IE8的专有属性,它告诉IE8采用何种浏览器的方式去渲染页面。

<title>标签则用于定义网页的标题

<link>标签用于定义外部资源与文档的关系,其中rel定义与文档的关系,href定义内容地址,type定义资源类型

例:添加外部样式表

<link rel="stylesheet" href="CSS\index.css">

例:添加网页自定义图标

 <link rel="shortcut icon" href="images\favicon.ico" type="image/x-icon">

 以上就是head标签中部分常用标签的介绍,具体meta标签和link标签的具体值使用情况,可参考以下两位大神文章。

meta标签:http://www.divcss5.com/html/h50455.shtml

link标签:https://blog.csdn.net/lengye7/article/details/86763608

  

  

  

原文地址:https://www.cnblogs.com/ffyd-0511/p/11159281.html

时间: 2024-10-04 14:35:51

HTML中head标签内容介绍的相关文章

Android manifest文件中的标签详细介绍

概要 每一个Android应用都应该包含一个manifest文件,即AndroidManifest.xml.它包含了程序运行的一些必备信息,比如: --为Java应用程序指定一个独一无二的名字. --描述程序所包括的成分,如activities, services, broadcast receivers和content providers等内容. --定义哪一个成分是主要的.比如主线程等. --声明程序正常运行所需要的权限.比如,读写SD卡等. --声明该程序的API Level,低于该API

css中a标签内容超出最大字数隐藏处理

问题:a标签内容超出最大字数显示问题 1.超出是最后显示为“...” 2.鼠标放在上面显示完整内容 3.点击新窗口打开链接内容 解决方法: css部分: .list{font:Georgia, "Times New Roman", Times, serif;font-size:14px;width:200px;display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellips

去除HTML中的标签内容

采集后的数据都带有'<>'html标签: <img src="http://i4.hdfimg.com/www/images/giftrans/3d/da/7b/18414.gif" border="0"/><span class='WmoJPQM2AzpQMA'>科研<span class='WmoJPQM2AzhQMQ'>最早和<span class='WmoJPQM2AzxQNw'>一项<spa

03_MyBatis基本查询,mapper文件的定义,测试代码的编写,resultMap配置返回值,sql片段配置,select标签标签中的内容介绍,配置使用二级缓存,使用别名的数据类型,条件查询ma

 1 PersonTestMapper.xml中的内容如下: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <!-- namespace:命名空间

Struts2中UI标签之表单标签介绍

1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.checkboxlist.select.doubleselect.combobox.optiontransferselect.optgroup.updownselect.textarea.hidden.file.label.submit.token.head.datepicker.reset.richte

【转】html的meta总结,html标签中meta属性使用介绍

转自 http://www.haorooms.com/post/html_meta_ds 引子 之前的我的博客中对于meta有个介绍,例如:http://www.haorooms.com/post/liulanq_think_ie 浏览器安全性想到的这篇文章,中间介绍了meta下面IE的一些属性,可以实现页面之间的过渡转换.已经SEO优化中有所提及.下面具体介绍一下meta的功能和使用. 前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好met

Laravel 模板引擎Blade中标签详细介绍

这篇文章主要介绍了Laravel模板引擎Blade中section的一些标签的区别介绍,需要的朋友可以来看看. Laravel 框架中的Blade模板引擎很好用,但是官方文档介绍的并不详细,我接下来将详细的介绍下: @yield与@section 首先,@yield是不可拓展的,如果你要定义的部分没有默认内容让子模版扩展,那么用@yield($name,$default)的形式会比较方便,如果你在子模版中并没有指定这个区块的内容,它就会显示默认内容,如果定义了,就会显示你定义的内容. 与之比较,

HTML5中&lt;template&gt;标签的详细介绍

HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板HTML,往往是类似这样的写法: 1 2 3 <script type="text/template"> /

html的meta总结,html标签中meta属性使用介绍

html的meta总结 meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能. 1.name属性 name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的. meta标签的name属性语法格式是: <meta name="参数"content="具体的参数值">. 其中n