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

news2025/1/22 14:58:19

一、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.coloradmin.cn/o/1347560.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

redis—List列表

目录 前言 1.常见命令 2.使用场景 前言 列表类型是用来存储多个有序的字符串&#xff0c;如图2-19所示&#xff0c;a、b、C、d、e五个元素从左到右组成 了一个有序的列表&#xff0c;列表中的每个字符串称为元素(element) &#xff0c;一个列表最多可以存储2^32 - 1 个元素…

MySQL Too many connections报错

MySQL 时不时出现Too many connections报错&#xff0c;重启MySQL就好了 但是过段时间又出现 一、解决方案&#xff1a; 1.修改mysql最大连接数 set global max_connections500; 以上是修改立即生效的&#xff0c;重启MySQL就会还原回去 在MySQL配置文件修改 max_connection…

GAMES101:作业4记录

文章目录 总览算法编写代码&#xff1a;recursive_bezier()的实现Bezier()函数的实现提高部分&#xff1a;反走样 总览 Bzier 曲线是一种用于计算机图形学的参数曲线。在本次作业中,你需要实现 de Casteljau 算法来绘制由 4 个控制点表示的 Bzier 曲线 (当你正确实现该算法时,…

拒绝采样(算法)总结

先说说什么是拒绝采样算法&#xff1a;就类似于数学上的求阴影面积的方法&#xff0c;直接求求不出来&#xff0c;就用大面积 - 小面积 阴影面积的办法。 所谓拒绝 和 采样 &#xff1a;就像是撒豆子计个数&#xff0c;计算概率问题一样&#xff0c;大桶里面套小桶&#xff0c…

从0到1入门C++编程——01 C++基础知识

文章目录 一、工具安装二、新建项目三、设置字体、注释、行号四、C基础知识1.数据类型2.输入输出3.运算符4.选择、循环结构5.跳转语句6.数组7.函数8.指针9.结构体 一、工具安装 学习C使用到的工具是Visual Studio&#xff0c;Visual Studio 2010旗舰版下载链接&#xff1a;点此…

uni-app模版(扩展插件)

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…

2023年终总结|回顾学习Tensorflow、Keras的历程

2023年4月&#xff0c;初探TensorFlow2.0&#xff0c;对比了1.0版本的差异。接着&#xff0c;学习了TensorFlow2.0的常量矩阵、四则运算以及常用函数。学习了数据切割、张量梯度计算、遍历元素、类别索引转换等技巧&#xff0c;并掌握了CNN输出特征图形状的计算方法。 在数据处…

【回溯】图的m着色问题Python实现

文章目录 [toc]问题描述图的 m m m可着色判定问题图的 m m m可着色优化问题四色猜想 回溯法时间复杂性Python实现 个人主页&#xff1a;丷从心 系列专栏&#xff1a;回溯法 问题描述 图的 m m m可着色判定问题 给定无向连通图 G G G和 m m m种不同的颜色&#xff0c;用这些颜…

SpringBoot实用篇

SpringBoot实用篇 1、热部署 什么是热部署&#xff1f; 所谓热部署&#xff0c;就是在应用正在运行的时候升级软件&#xff0c;却不需要重新启动应用。对于Java应用程序来说&#xff0c;热部署就是在运行时更新Java类文件。 热部署有什么用&#xff1f; 节约时间&#xff0c;热…

【python高级用法】迭代器、生成器、装饰器、闭包

迭代器 可迭代对象&#xff1a;可以使用for循环来遍历的&#xff0c;可以使用isinstance()来测试。 迭代器&#xff1a;同时实现了__iter__()方法和__next__()方法&#xff0c;可以使用isinstance()方法来测试是否是迭代器对象 from collections.abc import Iterable, Iterat…

Select缺点及代码示例

一、Select缺点 二、服务器端 #include <stdio.h> #include <arpa/inet.h> #include <unistd.h> #include <stdlib.h> #include <string.h> #include <sys/select.h>int main() {// 创建socketint lfd socket(PF_INET, SOCK_STREAM, 0)…

java进阶(三)

IO与网络编程 3 输入输出流IO3.1 基础定义3.2 IO框架3.3 读取字节输入流-InputStream3.3.1 InputStream.read3.3.2 FileInputStream类说明 3.4读取字符输入流Reader3.4.1 Reader.read3.4.2 FileReader类说明 3.5 字节输出流OutputStream3.5.1 OutputStream.write3.5.2 FileOutp…

Docker容器基础知识点总结

一 、Docker架构 dockers加速镜像&#xff1a; sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": ["https://z90yxq2m.mirror.aliyuncs.com"] } EOF sudo systemctl daemon-reload sudo systemctl restar…

thinkphp6.0升级到8.0

目录 一&#xff1a;升级过程 二&#xff1a;报错处理 最近写的项目需要使用thinkphp8.0&#xff0c;之前的老项目需要从php6.0升级到8.0&#xff0c;特此记录下升级过程。 一&#xff1a;升级过程 查看版本&#xff1a; php think version,我目前的版本是6.1.4 生成thin…

Rust学习笔记001:HELLOW WORLD + Cargo

Rust介绍 Rust&#xff08;中文称为“锈”&#xff09;是一种由Mozilla开发的系统编程语言&#xff0c;它着力于提供安全性、并发性和实用性。Rust的设计目标是消除程序出现的内存安全性问题&#xff0c;如空指针引用、数据竞争等。它通过在编译时进行严格的所有权和借用检查来…

Java实现树结构(为前端实现级联菜单或者是下拉菜单接口)

Java实现树结构&#xff08;为前端实现级联菜单或者是下拉菜单接口&#xff09; 我们常常会遇到这样一个问题&#xff0c;就是前端要实现的样式是一个级联菜单或者是下拉树&#xff0c;如图 这样的数据接口是怎么实现的呢&#xff0c;是什么样子的呢&#xff1f; 我们可以看看 …

【jdk与tomcat配置文件夹共享防火墙设置(入站出站规则)】

目录 一、jdk与tomcat配置 1.1 jdk配置 1.2 tomcat配置 二、文件夹共享 2.1 为什么需要配置文件夹共享功能 2.2 操作步骤 2.2.1 高级共享 2.2.2 普通共享 2.3 区别 三、防火墙设置&#xff08;入站规则&出站规则&#xff09; 3.1 入站规则跟出站规则 3.2 案例…

【低代码平台】10个开源免费Airtable 的替代方案

Airtable是一个易于使用的简单低代码平台&#xff0c;有助于团队协作管理复杂的数据表&#xff0c;并创建定制的工作流程。把它想象成一个类固醇上的云电子表格。 Airtable还简化了数据输入过程&#xff0c;连接和集成第三方服务和应用程序&#xff0c;并提供了许多数据导入/导…

第二部分 离散型随机变量

目录 求分布律里的未知数 例1 例2 根据X的分布律写Y的分布律 例3 根据(X,Y)的分布律写Z的分布律 例4 根据(X,Y)的分布律写边缘分布律 例5 X与Y相互独立时的联合分布律 例6 根据分布律求期望、方差 例7 求分布律里的未知数 例1 已知X的分布律为 X-202P0.40.3k ,试求k 解 0.40…

普中STM32-PZ6806L 使用FlyMcu串口烧录程序

简介 我的串口下载电路坏掉了, 所以研究了下如何通过USB转TTL进行程序的下载, 为后续Bootloader部分做准备;连接 我的板几乎是十年前买的&#xff0c; 所以电路与现有网上的资料有些差异, 所以仅供参考 USB 转 TTL线 与开发板 连接&#xff0c; 如图图中 ①, 需要去掉第一个…