【网页前端设计HTML】HTML结构基本标签

5 12霞

于 2024-07-05 23:36:35 发布

阅读量548

点赞数 13

分类专栏： HTML 文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_53597021/article/details/140219443

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、复习巩固HTML基本结构

在这里插入图片描述

二、 head标签

在HTML中，有6个标签能放在head标签内。
（1）title标签
（2）meta标签
（3）link标签
（4）style标签
（5）script标签
（6）base标签

title标签
在HTML中，title标签唯一的作用就是定义网页的标题。
meta标签
在HTML中，meta标签有两个重要的属性：name和http-equiv。

<!DOCTYPE html>
<html>
<head>
    <!--网页关键字-->
    <meta  name="keywords" content="网页前端设计" />
    <!--网页描述-->
    <meta  name="description" content="
网页前端设计三件套：HTML+CSS+JAVASCRIPT" />
    <!--本页作者-->
    <meta  name="author" content="5 12霞" />
    <!--版权声明-->
    <meta  name="copyright" content="版权声明" />
</head>
<body>
</body>
</html>

name标签的属性

属性值	说明
keywords	网页的关键字，可以是多个，而不仅仅是一个
description	网页的描述
author	网页作者
copyright	版权信息

http-equiv属性
在HTML中，meta标签的http-equiv属性只有两个重要作用：定义网页所使用的编码；定义网页自动刷新跳转。
（1）定义网页所使用的编码
语法：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

简写：<meta charset="utf-8" />
这段代码告诉浏览器该页面所使用的编码是utf-8。如果打开的网页在浏览器中显示是乱码，那么我们要检查有没有定义编码。
（2）定义网页自动刷新跳转
语法：

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

这段代码表示6秒钟之后，网页将会跳转到百度。

style标签

<!DOCTYPE html>
<html >
<head>
    <style type="text/css">
        /*这里写CSS样式*/
    </style>
</head>
<body>
</body>
</html>

script标签

<!DOCTYPE html>
<html >
<head>
    <script>
        /*这里写JavaScript代码*/
    </script>
</head>
<body>
</body>
</html>

link标签

<!DOCTYPE html>
<html >
<head>
    <link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>

base标签

三、body标签

我们看到的网页内容里大部分的标签都是写在body里面。后面我们会学习到很多的标签，比如：h1~h6、p标签、hr标签、br标签、div标签、img标签、table标签、form标签等等，都放在body里面。后面我们会慢慢学习到的了。
举个例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN@5 12霞</title>
</head>
<body>
	<h1>【网页前端设计HTML】HTML结构基本标签</h1>
	<p>网页前端设计三件套：HTML+CSS+JAVASCRIPT</p>
</body>
</html>