HTML基本结构和6种＜head＞标签内元素

最新推荐文章于 2022-07-10 15:00:40 发布

weixin_41387874

最新推荐文章于 2022-07-10 15:00:40 发布

阅读量595

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_41387874/article/details/115713478

版权

笔记专栏收录该内容

57 篇文章 0 订阅

订阅专栏

写在之前

在学习HTML之前，我们应该了解学习HTML其实就是学习HTML标签（也叫元素），HTML通过标签定义网页的结构。

一个基本的HTML结构

<!DOCTYPE html>   ### 声明这是一个HTML文档。
<html>
	<head>        ### head标签，表示这是HTML文档的页头，只有6种标签会被放在head标签内。
	</head>
	<body>        ### body标签，表示这是HTML文档的页身，大部分网页内容都定义在body标签内。
	</body>
</html>

只有6种标签能放在head中：
- <title>
- <meta>
- <link>
- <style>
- <script>
- <base>

<title>

title标签唯一的作用就是定义网页标题。

<!DOCTYPE html>
<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>   
    </body>
</html>

<meta>

<meta>的两个重要属性
meta标签有两个重要属性：name和http-equiv
name的两个重要属性
- keywords属性，表示网页的关键字，可以定义多个。
- description属性，表示网页的描述。

<!DOCTYPE html>
<html>
    <head>
        <title>网页标题</title>
        <meta name="keywords" content="这里是keyword1，这里是keyword2"/> 
        ## 定义了两个网页关键字。
        <meta name="description" content="这里是描述"/>  
        ## 网页的描述。
    </head>
    <body>  
    </body>
</html>

http-equiv属性
- http-equiv属性有两个作用：定义网页使用的编码和定义网页的自动跳转
定义网页使用的编码

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" contnet="text/html; charset=utf-8"/>
       ## 定义了网页使用的编码方式是utf-8
   </head>
   <body>  
   </body>
</html>

在HTML5中，可以简写为：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>  
    </body>
</html>

如果打开网页发现全部是乱码很可能就是没有定义网页的编码方式。

定义网页的自动跳转

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="refresh" content="2;url=https://www.baidu.com"/>
       ## 表示这个网页会在2秒之后跳转到https://www.baidu.com
   </head>
   <body>  
   </body>
</html>