HTML基础学习(1)——HTML基本标签

这篇博客介绍了HTML的基础标签,包括<head>定义文档头部,<title>设置页面标题,<meta>用于提供元信息,如关键字和说明。还讲解了HTML注释、标题标签<h1>~<h6>、段落<p>、换行<br>、水平线<hr>以及文本格式化和特殊符号的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

完整的HTML文档包含3个部分:

  1. 定义的文档版本信息;
  2. 标签定义的各项声明的文档头部;
  3. 标签定义的文档主体部分。

1. <head>标签

<head>标签用于定义文档的头部,可以在这里引用脚本、指示样式表、提供元信息等。

2. <title>标签

用于显示文档的名字,出现在浏览器窗口的标题或状态栏中。必须包含该标签。

3. <meta>元信息

一般用来定义网页信息的说明、关键字、刷新频率等。一个HTML网页中可以有多个标签

3.1 设置网页关键字

设置网页关键字可以方便搜索引擎发现。

//语法
<meta name="keywords" content="具体关键字">

//具体示例,关键字为“诗词”
<meta name="keyword" content="诗词">

3.2 设置网页说明

网页说明是为了方便搜索引擎查找,用来详细说明网页的内容。

//语法
<meta name="description" content="写入你的网页说明">

//具体示例
<meta name="description" content="一个内容为诗词的网页">

3.3 作者信息

添加网页制作者的姓名。

//语法
<meta name="author" content="作者的姓名">

//具体示例
<meta name="author" content="王维">

3.4 规定字符编码

//语法
<meta charset="HTML文档">

//具体示例
<meta charset="UTF-8">

charset为HTML5中新增属性,来替换:

<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>

3.5 设置网页的定时跳转

使得网页在一定时候后自动刷新。

//语法
<meta http-equiv="refresh" content="跳转的时间;url=跳转到的地址">

//具体示例
<meta http-equiv="refresh" content="5;url=target/about.html">

4. HTML注释

<!-- 注释内容 -->

5. 标题<h1>~<h6>

h1标题重要性最高,h6最低

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

6. 段落<p>

<p>段落标签可以把文字有条理显示出来,在浏览器中,会在元素p前后创建一些空白。

7. 换行<br>

标签<br> 的作用是在不另起一段的情况下将当前文本强制换行

8. 水平线<hr>

<hr> 标签可以在 HTML 页面中创建一条水平线,在视觉上将文档分隔成各个部分。

9. 文本格式化

标签描述备注
<b>定义粗体文本
<big>定义大号字
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标
<sup>定义上标
<ins>定义插入字
<del>定义删除字

10. 特殊符号

显示效果描述实体名称备注
空格&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
“”引号&quot;
‘’单引号&apos;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页关键字 -->
    <meta name="keyword" content="诗词">
    <!-- 设置网页说明 -->
    <meta name="description" content="一个内容为诗词的网页">
    <!-- 添加作者信息 -->
    <meta name="author" content="作者的姓名">
    <!-- 规定字符编码 -->
    <meta charset="UTF-8">
    <!-- 设置网页的定时跳转 -->
    <meta http-equiv="refresh" content="5;url=target/about.html">
    <!-- 网页标题 -->
    <title>诗词网站</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

    <hr>
    <b>This text is bold</b>
    <br>
    <strong>this Text is strong</strong>
    <br>
    <big>this text is big</big>
    <br>
    <em>this text is emphasized</em>
    <br>
    <i>this text is italic</i>
    <br>
    <small>this text is small</small>
    <br>
    文本
    <sub>下标</sub>
    文本
    <sup>上标</sup>


    <p>
        举头望明月,&nbsp;&nbsp;低头思故乡。
    </p>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值