网站首页 > 知识剖析正文

html——head部分元素介绍

nixiaole 2024-11-23 20:34:25 知识剖析 18 ℃

html--head部分

<head> 元素包含了所有的头部标签元素。

用head定义我们网页的标题，字符集等属性，写给浏览器怎么运行我们的html网页，用户不可见。

在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

1. title标签

title标签是用来定义网页标题。
title在html文档中必须的。
title元素：
1.定义了浏览器工具栏的标题
2.当网页添加到收藏夹时，显示在收藏夹中的标题
3.显示在搜索引擎结果页面的标题

<!DOCTYPE html>
<!--html是html文档的根元素-->
<html >
    <!--head定义文档标题等属性，用户不可见-->
    <head>
        <!--网页使用的字符集-->
        <meta charset="utf-8">
        <!--title设置网页的标题-->
        <title>我的第一个网页</title>
    </head>
    <!--body显示给用户的内容-->
    <body>
        Hello world, 我是阿布都萨拉木
    </body>
</html>

2. mate元素

mate标签的作用和使用很重要。用来定义网页字符集，关键字，描述等等

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元素数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<!DOCTYPE html>
<!--html是html文档的根元素-->
<html >
    <!--head定义文档标题等属性，用户不可见-->
    <head>
        <!--网页使用的字符集-->
        <meta charset="utf-8">
        <!--关键字，为搜索引擎定义关键词:-->
        <meta name="keywords" content="HTML, CSS">
        <!--为网页定义描述内容:-->
        <meta name="description" content=" Web html">
        <!--定义网页作者:-->
        <meta name="author" content="Abdusalam">
        <!--每30秒钟刷新当前页面:-->
        <meta http-equiv="refresh" content="30">
        <!--title设置网页的标题-->
        <title>我的第一个网页</title>
    </head>
    <!--body显示给用户的内容-->
    <body>
        Hello world, 我是阿一个男孩！
    </body>
</html>

3. link元素

<!DOCTYPE html>
<!--html是html文档的根元素-->
<html >
    <!--head定义文档标题等属性，用户不可见-->
    <head>
        <!--网页使用的字符集-->
        <meta charset="utf-8">
        <!--title设置网页的标题-->
        <title>我的第一个网页</title>
        <!--link元素用于引入外部资源，css,js等文件-->
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <!--body显示给用户的内容-->
    <body>
        Hello world, 我是一个男孩！
    </body>
</html>

4. base标签

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接，如a标签不设置 href属性和target属性则默认使用base的属性。

<head>
    <base href="http://www.baidu.com/" target="_blank">
</head>

上一篇：前端面试题之css中让元素消失的几种方法
下一篇： html中的元素类型种类及特点

网站首页 > 知识剖析 正文