基本骨架标签，段落、换行、水平标签，文本标签（HTML）

2401_82512346

于 2024-09-09 23:46:00 发布

阅读量677

点赞数 7

文章标签： html 前端 java

本文链接：https://blog.csdn.net/2401_82512346/article/details/142067708

版权

一、基本骨架标签

HTML文件最基本的四个标签，组成了网页的基本骨架。基本骨架标签有：

<html>标签

作用：定义HTML文件的根元素，是网页中最大的标签，表示整个的HTML文档，所有的标签要书写在标签内部。

<head>标签

作用：用于存放 <title> <meta> <base> <style> <script> <link>。内部用于对网页的设置，除了内部的文字，其他标签都不显示在浏览器上。

Tips：在<head>标签中必须要设置的标签是title。

<title>标签

作用1：让页面拥有一个属于自己的标题。如果不写title不写网页标题，会自动以编写代码的文件名作为网页标题，这是不合理的，所以title一般都要书写。

作用2：title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。

作用3：内部的内容会显示在搜索结果的标题部分。

作用4：作为浏览器收藏夹默认的网页标题。

Tips：建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字。

<body>标签

定义网页的主体部分，用于存放所有的HTML显示内容的标签，<p> <h1> <a> <div> 等

body内部的元素内容会显示在浏览器的窗口中。

四者关系如图所示：

<html>作为祖先级，内部嵌套了<head>和<body>，而<head>又嵌套了<title>

二、段落、换行、水平标签

段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

示例代码

<p>这是第一个段落</p>
<p>这是第二个段落</p>

为文本分段可以使用段落标签<p> </p>包裹需要放在一段的文字

运行结果

这是第一个段落

这是第二个段落

示例代码

<!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>
    <p>这是第一个段落</p>当前段落内容
    第二行内容
    <p>这是第二个段落</p>当前段落内容
    第二行内容
</body>
</html>

运行结果

这是第一个段落

当前段落内容第二行内容

这是第二个段落

当前段落内容第二行内容

换行标签

在HTML中，常见用<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>
    这是第一句话，接下来需要换行<br/>已经换行
</body>
</html>

运行结果

这是第一句话，接下来需要换行

已经换行

水平标签

在HTML中，使用<hr>标签可以在网页上实现水平分割线的效果

示例代码

<!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>
    <hr>
    这是分割线下方的测试文本
</body>
</html>

运行结果

三、文本标签

网页制作过程中，需要通过文本和段落的排版制作出网页。以下是一些常用的文本与段落排版所使用的标签

h标签

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>h标签</title>
</head>

<body>
    <h1>第一个标题</h1>
    <h2>第二个标题</h2>
    <h3>第三个标题</h3>
    <h4>第四个标题</h4>
    <h5>第五个标题</h5>
    <h6>第六个标题</h6>
</body>

</html>

运行结果

文本格式化标签

加粗: <strong> 标签和 <b> 标签（strong定义强调文本，b定义文本粗体）

倾斜: <em> 标签和 <i> 标签（em定义强调文本，i定义斜体字）

删除线: <del> 标签和 <s> 标签（HTML5不赞成使用s）

下划线: <ins> 标签和 <u> 标签（HTML5不赞成使用u）

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>h标签</title>
</head>

<body>
    <h1 align="center">现实中编排文本的常用标签</h1><br>
    <p align="center">我是默认文本</p><br>
    <p align="center"><b>我是加粗文本</b></p><br>
    <p align="center"><i>我是倾斜文本</i></p><br>
    <p align="center"><s>我是删除线文本</s></p><br>
    <p align="center"><ins>我是下划线文本</ins></p><br>
</body>

</html>

运行结果