HTML教程(2)——基础标签

一、HTML的元数据

标签定义关于 HTML 文档的元数据。元数据是关于数据的数据(信息),其始终位于元素内,通常用于指定字符集、页面描述、关键词、文档作者和视口设置;

元数据不会显示在页面上,但可以被机器解析,浏览器(如何显示内容或重新加载页面)、搜索引擎(关键词)和其他网络服务会用到元数据。

在vs Code中,新创建的HTML文件可以用“!”一键初始化HTML的骨架结构

HTML教程(2)——基础标签_第1张图片

meta标签有两个重要的属性,分别是name和content。

name属性用于指定meta标签的名称,它通常用于表示网页的元数据类型或行为。常见的name属性值包括:

  • keywords:用于指定网页的关键词,有助于搜索引擎优化。
  • description:用于指定网页的描述,有助于搜索引擎优化和用户了解网页内容。
  • author:用于指定网页的作者信息。
  • viewport:用于指定网页的视口大小和缩放比例,对于移动设备适配很重要。
  • robots:用于控制搜索引擎爬虫的行为,如是否允许抓取、索引等。

content属性用于指定meta标签的具体内容。它的值根据name属性的不同而不同。比如:

  • 若name属性为keywords,则content属性的值应该是一串以逗号分隔的关键词。
  • 若name属性为description,则content属性的值应该是网页的简短描述。

通过设置name和content属性,可以为网页提供元数据信息,促进搜索引擎优化和提供更好的用户体验。

meta标签的charset属性用于指定当前网页的字符编码格式。它可以保证浏览器正确地解析和显示网页的文本内容。

这里只对该标签进行介绍,在前期我们只需要vs Code一键生成的就足够了。

二、常用的标签

1.标题——h系列标签

代码

内容

我是第一大标题

我是第二大标题

我是第三大标题

我是第四大标题

我是第五大标题
我是第六大标题

HTML教程(2)——基础标签_第2张图片

该标签中的文字都有加粗,单独占一行且文字变大,从h1到h2逐渐变小,在新闻和文章的页面中,用于突出主题。

2.段落——p

代码

内容

单独占一行的文字

    

我是独占一行的段落

真的

独占

一行

HTML教程(2)——基础标签_第3张图片

 3.换行——br

代码


原神启动:--------------
明日方舟启动:--------------

HTML教程(2)——基础标签_第4张图片

4.主题分割——hr

代码


    

我是第一大标题

我是第二大标题

我是第三大标题

我是第四大标题

我是第五大标题
我是第六大标题

我是独占一行的段落

真的

独占

一行


原神启动:--------------
明日方舟启动:--------------

HTML教程(2)——基础标签_第5张图片

三、新闻网页

通过上面的知识,我们就可以写一篇新闻文章了




    
    
    新闻网页


    

如何提高自我管理能力

摘要:本文介绍了一些提高自我管理能力的方法和技巧,包括制定目标、时间管理、
建立习惯等方面的建议。通过有效的自我管理,我们可以提高工作效率,更好地实
现个人和职业目标。

我是内容一

……
……
……
……
……
……
……
……
……
……

我是第二个话题

我是第二个话题摘要

我是内容二

……
……
……
……
……
……
……
……
……
……

我是第三个话题

我是第三个话题摘要

我是内容三

……
……
……
……
……
……
……
……
……
……

你可能感兴趣的:(前端,HTML,html,前端)