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>


相关文章
|
2月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
100 49
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
66 5
|
2月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2月前
|
存储 移动开发 前端开发
|
3月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
64 2
|
3月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
51 1
|
3月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
177 0
|
2天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
52 33

热门文章

最新文章