从零开始学HTML：段落、换行、水平线与文本标签

z_2023090255

已于 2024-09-11 21:19:42 修改

阅读量224

点赞数 3

文章标签： html5

于 2024-09-07 15:19:58 首次发布

本文链接：https://blog.csdn.net/m0_67612758/article/details/141962286

版权

HTML5的基本结构

<!DOCTYPE html>  

<html>

        <head></head>

        <body></body>

</html>

基本骨架标签

编辑网页元素

段落标签<p></p>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
    <p>我是段落标签1</p>
    <p>我是段落标签2</p>
</body>
</html>

运行代码后显示的效果如下：

换行标签<br/>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>换行标签</title>
</head>
<body>
    <p>我是段<br/>落标签1</p>
    
    <p>我是段落标签2</p>
</body>
</html>

运行代码后显示的效果如下：

水平线标签<hr/>

<!DOCTYPE html>
<html>
<head>
     <title>水平线标签</title>
     <meta charset="UTF-8">
</head>
<body>
    <p>红色水平线标签</p> 
    <hr align="left" size="11" width="400"  color="red"><br>
    <p>绿色水平线标签</p>
    <hr color="green">
    <p>水平线标签<hr></p>
     
</body>
</html>

运行代码后显示的效果如下：

文本标签

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>学习HTML5的文档结构</title>
 </head>
 <body>
    <h1>我是一级标题</h1>
    <p>我是段落标签</p>
 </body>
</html>

运行代码后显示的效果如下：

标题文字标签

列出HTML中的各级标题。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题示例</title>
</head>
<body>
    
    <h1 align="left">我是一级标题</h1>
    <h2>我是二级标题</h2>
    <p>二级标题的段落标签</p>

    <h3>我是三级标题</h3><hr>
    <b>我是加粗文本</b>
    <p>我是常规文本</p><hr>

    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>

    
</body>
</html>

运行代码后显示的效果如下：

文本格式化标签

使用文本格式化标签设置文字样式。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用文本格式化标签设置文字样式</title>
</head>
<body align="center">
    <br/><br/><br/><br/>
    <h1 align="center">HTML中编排文本的常用标签</h1>
    <p>我是默认文本</p><br/><br/>
    <p><b>我是加粗文本</b></p>
    <p><i>我是斜体文本</i></p>
    <p><s>我是删除线文本</s></p>
    <p><u>我是下划线文本</u></p>

</body>
</html>

运行代码后显示的效果如下：