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

一、HTML的元数据

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

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

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

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系列标签

代码

<h1>内容</h1>

<h1>我是第一大标题</h1>
<h2>我是第二大标题</h2>
<h3>我是第三大标题</h3>
<h4>我是第四大标题</h4>
<h5>我是第五大标题</h5>
<h6>我是第六大标题</h6>

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

2.段落——p

代码

<p>内容</p>

单独占一行的文字

    <p>我是独占一行的段落</p><h1><p>我</p>真的<p>独占</p>一行<p>哦</p></h1>

 3.换行——br

代码

<br>

原神启动:--------------<br>明日方舟启动:--------------<br>

4.主题分割——hr

代码

<hr>

    <h1>我是第一大标题</h1><h2>我是第二大标题</h2><h3>我是第三大标题</h3><h4>我是第四大标题</h4><h5>我是第五大标题</h5><h6>我是第六大标题</h6><hr><p>我是独占一行的段落</p><h1><p>我</p>真的<p>独占</p>一行<p>哦</p></h1><hr>原神启动:--------------<br>明日方舟启动:--------------<br>

三、新闻网页

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻网页</title>
</head>
<body><h1>如何提高自我管理能力</h1><h3>摘要:本文介绍了一些提高自我管理能力的方法和技巧,包括制定目标、时间管理、<br>建立习惯等方面的建议。通过有效的自我管理,我们可以提高工作效率,更好地实<br>现个人和职业目标。</h3><p>我是内容一</p>……<br>……<br>……<br>……<br>……<br>……<br>……<br>……<br>……<br>……<hr><h1>我是第二个话题</h1><h3>我是第二个话题摘要</h3><p>我是内容二</p>……<br>……<br>……<br>……<br>……<br>……<br>……<br>……<br>……<br>……<hr><h1>我是第三个话题</h1><h3>我是第三个话题摘要</h3><p>我是内容三</p>……<br>……<br>……<br>……<br>……<br>……<br>……<br>……<br>……<br>……
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/312312.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【信息安全原理】——期末复习(冲刺篇)

&#x1f4d6; 前言&#xff1a;快考试了&#xff0c;做篇期末总结&#xff0c;都是重点与必考点。 题型&#xff1a;简答题&#xff08;45分&#xff09;、协议分析题&#xff08;210分&#xff09;&#xff08;给一个报文或工作流程&#xff0c;分析存在的问题&#xff09;、…

基于Java+SpringBoot+vue实现图书借阅管理系统

基于JavaSpringBootvue实现图书借阅和销售商城一体化系统 &#x1f345; 作者主页 程序设计 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 文章目录 基于JavaSpringBootvue实现图书借阅和销售商城一体化…

2024 Win 安装Oracle12C

文章目录 一、下载1.1 官方下载1.2 官方Archive下载1.3 博主提供 二、安装2.1 解压2.2 安装 三、连接3.1 SQL Plus3.2 切换到容器数据库orclpdb3.3 查询SID 四、查看数据4.1 SQL Develop 连接4.2 创建新用户4.3 develop 直接创建新用户4.3.2 SQL 错误: ORA-65096: 公用用户名或…

c# listbox 添加图标和文字

给listbox 添加 DrawItem 事件 private void listBox1_DrawItem(object sender, DrawItemEventArgs e){int index e.Index;//获取当前要进行绘制的行的序号&#xff0c;从0开始。Graphics g e.Graphics;//获取Graphics对象。Rectangle bound e.Bounds;//获取当前要绘制的行的…

go 源码解读 sync.RWMutex

sync.RWMutex 简介源码结构RLockRUnlockUnlockgo 运行时方法 简介 简述sync包中读写锁的源码。 &#xff08;go -version 1.21&#xff09; 读写锁&#xff08;RWMutex&#xff09;是一种并发控制机制&#xff0c;用于在多个 goroutine 之间对共享资源进行读写操作。它提供了…

idea构建maven项目报错的解决

使用idea创建了一个新的spring项目&#xff0c;maven配置完毕后&#xff0c;报错&#xff0c;引用的依赖不存在。 控制台报错信息如下&#xff1a; 通过查询资料&#xff0c;发现是阿里云的maven仓库中没有这个版本的jar包&#xff0c;导入无法引用到对应的依赖。 解决方法就是…

MFC消息机制详细剖析

易语言程序的破解99%的时候都需要用到FF55FC5F5E这个特征码 新建一个MFC应用程序&#xff1a; 去编辑MFC的.rc资源文件来DIY窗体 静态编译的&#xff0c;把很多静态库的代码都添加进去了 &#xff0c;所以速度很慢 消息机制针对的是GUI程序&#xff08;比如窗口程序&#xf…

【Java】JUC并发编程(重量锁、轻量锁、偏向锁)

JUC并发编程 预备&#xff1a; 创建一个maven工程&#xff0c;导入lombok和logback的依赖。 1、基础概念 1、进程与线程 **进程&#xff1a;**程序由指令和数据组成&#xff0c;但这些指令要运行&#xff0c;数据要读写&#xff0c;就必须将指令加载至 CPU &#xff0c;数…

在macOS中搭建.NET MAUI开发环境

文章目录 准备安装扩展安装 .NET安装工作负载安装 Xcode 命令行工具调试安卓应用安装 JDK安装 Android SDK 安装 Android 模拟器安装模拟器安装镜像创建虚拟机 同意许可条款创建 MAUI 项目调试 MAUI 应用切换调试目标 参考资料 准备 一台 macOS Monterey 以上的电脑安装 XCode…

论文解读:Coordinate Attention for Efficient Mobile Network Design(CVPR2021)

论文前言 原理其实很简单&#xff0c;但是论文作者说得很抽象&#xff0c;时间紧的建议直接看3.1中原理简述CBMA、原理简述CBMA以及3.2中原理简述coordinate attention block即可。 Abstract 最近关于mobile network设计的研究已经证明了通道注意(例如&#xff0c;the Squee…

Android 接入第三方数数科技平台

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、数数科技平台是什么&#xff1f;二、使用步骤1.集成SDK2. 初始化3. 发送事件和设置账号id4. 验证发送事件是否成功 小结 前言 一个成熟的App必然不可缺少对…

huggingface的tokenizer解读

文章目录 前言一、huggingface的tokenizer含义1、含义2、整体概括 二、加载lmsys/vicuna-7b-v1.5模型的tokenizer三、调用tokernizer方法四、字符串的tokens应用1、tokenizer应用2、tokenizer进行token分词(tokenizer.tokenize)3、tokens转模型识别ids(tokenizer.convert_token…