HTML——一个简单的完整的网页完整结构

三三木木七 2022-05-14 14:32:05 阅读数:834

简单html网页一个完整

前言:本文简单总结了一下 一个简单完整的网页结构包含的主要元素。


目录

HTML——声明文档格式:DOCTYPE

HTML——根元素:HTML 

HTML——头元素:head 

HTML——网页标题元素:title

HTML——元信息元素:meta

meta——meta 简介

meta——编码格式:charset

meta——描述:description

meta——关键词:keywords

HTML——主题元素:body

最后举个简单的例子吧


HTML——声明文档格式:DOCTYPE

为什么要声明文档类型呢?

因为在Web世界里,有很多各式各样的文档类型,所以我们首先需要做的便是声明该文档是HTML,以便浏览器正确显示网页。

举个例子

<!DOCTYPE HTML>  声明了该文档是HTML5

HTML——根元素:HTML 

<HTML>元素告知浏览器其本身是一个HTML文档。

除去第一行外,其余的页面内容都应该包含在<HTML>元素中,所以它也被称为根元素。

HTML——头元素:head 

属性会给元素增添附加信息一样,head元素能为整个网页增添更多信息。可以用在head中的标签有<base>, <link>, <meta>, <script>, <style>, 以及 <title>

HTML——网页标题元素:title

title元素的内容即网页标题,它是一个网页必需的元素之一。

<title>的内容一般作为网页标签名,写法如下:

<title>标题内容</title>

HTML——元信息元素:meta

meta——meta 简介

meta元素提供元数据信息,主要包括:

  1. 页面编码;

  2. 网页标题;

  3. 网页描述;

  4. 网页关键词。

这些信息,一方面可用于告知浏览器如何展示页面,另一方面可以提供给搜索引擎检索。
因为搜索引擎会通过meta元素的namecontent属性来检索页面,所以当我们加入了合适的关键字和描述内容时,页面就更容易被搜索引擎发现。

meta——编码格式:charset

用法如下:

<meta charset="utf-8">

该行定义了浏览器解析网页文档时使用的编码方式。通常,我们使用utf-8编码以支持各国语言。 

meta——描述:description

主要用来:描述信息,使用一句话告知搜索引擎我们网页的主要内容是什么。

用法如下:

<meta name="description" content="一句话描述网页内容">

meta——关键词:keywords

主要用来:同描述类似,keyword同样是给搜索引擎传递信息。

keywords 关键字信息可以使用多个并行的关键字告知搜索引擎我们网页内容的关键字是什么。

用法如下:

<meta name="keywords" content="关键词一,关键词二,关键词三">

HTML——主题元素:body

<body>元素是一个文档的主体,文档内容都包含在<body>元素中,最终呈现在网页上。

用法如下

<body>

</body>

最后举个简单的例子吧

<!DOCTYPE html>
<html>
<head>
<title>自我简介</title>
<meta charset="utf-8" >
<meta name="description" content="一个输出你好的网站">
<meta name="keywords" content="你好">
</head>
<body>
<h1 align="center">你好</h1>
</body>
</html>

 自我总结:本来想要简单的总结一下meta 元信息元素的,但是发现其带入网页完整结构中总结更方便理解。


一起加油!

版权声明:本文为[三三木木七]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/m0_62894677/article/details/124640950