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>


相关文章
|
1月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
95 49
|
25天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
37 5
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1月前
|
存储 移动开发 前端开发
|
2月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
52 2
|
2月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
43 1
|
2月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
129 0
分享31个非常有用的 HTML5 教程
HTML5教程相关文章   15个非常有用的 HTML5 开发教程和速查手册 12个优秀的 HTML5 网站设计案例欣赏 分享25个优秀的 HTML5 开发教程 12款精美的免费 HTML 网站模板下载 主流浏览器 CSS3 和 HTML5 兼容性大比拼     几年前,HTML5 前景还很模糊,只有少数的互联网极客才会关心。
1076 0
|
25天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
51 7