【自学前端】html第二弹

最新推荐文章于 2024-09-30 15:42:36 发布

智能打工人

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量273

点赞数

分类专栏：前端三件套（偏应用）html 文章标签：前端 html

本文链接：https://blog.csdn.net/m0_64016875/article/details/123171562

版权

前端三件套（偏应用）html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

终于考完期末考试了，浅学一下。

1.对齐方式（左右居中）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试</title>
</head>
<body>
<h1 align="center" style="background-color: cornsilk">《李白经典诗句》</h1>
<p style="background-color: azure">五字版</p><!--默认左对齐-->
<p align="right" style="column-gap: 3ch">花间一壶酒，独酌无相亲。</p>
<p style="background-color: azure">七字版</p><!--默认左对齐-->
<p align="right" style="column-gap: 3ch">飞流直下三千尺</p>
<a href="https://blog.csdn.net/m0_64016875?spm=1000.2115.3001.5343">我的博客（点击即可打开）</a>
<!--这是个注释-->
<p2 style="color: cornflowerblue">如何写注释(用英文输入法）：<！--啦啦啦--></p2>
</body>
</html>

2.换行

段落与段落之间会默认有一个空行，如果不想要该空行，可以用<br/> 标签
<p align="right" style="column-gap: 3ch">花间一壶酒，独酌无相亲。<br/>
  举杯邀明月，对影成三人。</p>

3. 水平线标签

size高度 width宽度（默认是像素，也可以是百分比单位的） align对齐方式

<hr .......... />这是个单标记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试</title>
</head>
<body>
<h1 align="center" >《李白经典诗句》</h1>
<hr color="black" size="1" width="80%" align="center"/>
<p style="background-color: azure">五字版</p><!--默认左对齐-->
<p align="right" style="column-gap: 3ch">花间一壶酒，独酌无相亲。<br/>
  举杯邀明月，对影成三人。</p>
<p style="background-color: azure">七字版</p><!--默认左对齐-->
<p align="right" style="column-gap: 3ch">飞流直下三千尺</p>
<a href="https://blog.csdn.net/m0_64016875?spm=1000.2115.3001.5343">我的博客（点击即可打开）</a>
<!--这是个注释-->
</body>
</html>

4.保留原始的排版格式——预格式标签

<pre>

</pre>

<a href="https://blog.csdn.net/m0_64016875?spm=1000.2115.3001.5343">我的博客（点击即可打开）</a>
<pre>
  欢迎来我的博客逛逛！
  祝大家心情愉悦！
</pre>

智能打工人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录