HTML基础教程2——排版标签

简介: 标题是通过<h1> ~ <h6>标签定义的,标题等级从<h1> ~ <h6>从大到小,标题等级越大对应的字体越大,标题默认为粗体,标题属于块元素,自动换行。

HTML基础教程2——排版标签


HTML基础教程2——排版标签


标题


标题是通过<h1> ~ <h6>标签定义的,标题等级从<h1> ~ <h6>从大到小,标题等级越大对应的字体越大,标题默认为粗体,标题属于块元素,自动换行。

1.png


段落


段落通过<p>标签定义,段落同样属于块元素,会自动换行,换行的距离相当于两个<br>标签的距离。

1.png

HTML中<pre>标签比较特殊可以将文本以代码中的格式显示在页面中,包括换行等

1.png


换行符


换行符通过<br>标签实现,也可以使用<br/>表示

1.png

为什么要使用换行符? 因为HTML中不会接收enter所以换行需要使用标签让电脑明白你的需求。 无论是否使用换行符,在文本长度达到盒子长度(默认为浏览器宽度)都会自动换行 如果我们不想文本到达一定长度就换行可以用<nobr>标签强制文本不换行。

1.png


分割线


分割线通过<hr>标签实现。

1.png

<hr>标签默认属性size(分割线的粗度)为1,width(分割线的宽度)为浏览器宽度,color(分割线颜色)为黑色,这些属性可以根据需求修改。


综合练习


制作一个如下图所示的页面,

1.png

首先进行分析古诗的题目应该用标题标签因此我们选择<h1>标签,诗题下分割线用<hr>标签,作者以及朝代我们可以选择<h3>标签,最后诗的主体用<p>标签,除此之外诗主体每一句都独处一行说明每一句的后面都需要用上一个<br>标签。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>排版标签练习</title>
  </head>
  <body>
    <h1>陋室铭</h1>
    <hr>
    <h3>刘禹锡(唐代)</h3>
    <p>山不在高,有仙则名。
    <br>
    水不在深,有龙则灵。
    <br>
    斯是陋室,惟吾德馨。
    <br>
    苔痕上阶绿,草色入帘青。
    <br>
    谈笑有鸿儒,往来无白丁。
    <br>
    可以调素琴,阅金经。
    <br>
    无丝竹之乱耳,无案牍之劳形。
    <br>
    南阳诸葛庐,西蜀子云亭。
    <br>
    孔子云:何陋之有。
    </p>
  </body>
</html>


相关文章
|
15天前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
22 1
|
1月前
HTML文档基础标签(2)
HTML文档基础标签(2)
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
15天前
|
移动开发 搜索推荐 开发者
HTML5中的语义化标签有哪些?
【4月更文挑战第1天】HTML5中的语义化标签有哪些?
9 0
HTML5中的语义化标签有哪些?
|
17天前
|
存储 移动开发 前端开发
html的常用标签
【4月更文挑战第1天】html的常用标签
19 4
|
1月前
如何在HTML中添加标签
如何在HTML中添加标签【2月更文挑战第26天】
33 5
|
1月前
|
移动开发 前端开发 JavaScript
15.HTML5视频播放器制作教程
15.HTML5视频播放器制作教程
25 0
|
1月前
HTML标签
【2月更文挑战第16天】HTML标签。
21 3
|
1月前
|
移动开发 搜索推荐 HTML5
HTML语义化标签
HTML语义化标签