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>


相关文章
|
17天前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
26 0
|
2天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
24 13
|
1天前
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
2天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
15天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
29 4
HTML中font标签用法
这篇文章详细介绍了HTML中`<font>`标签的用法,包括如何分别设置字体风格(`font-style`)、字体粗细(`font-weight`)、字体大小(`font-size`)和字体类型(`font-family`),并通过实例代码演示了如何综合使用这些属性来定义文本的字体样式。
HTML中font标签用法
|
18天前
|
移动开发 前端开发 开发者
从 HTML4 到 HTML5 的迁移标签
【8月更文挑战第24天】
27 0
分享31个非常有用的 HTML5 教程
HTML5教程相关文章   15个非常有用的 HTML5 开发教程和速查手册 12个优秀的 HTML5 网站设计案例欣赏 分享25个优秀的 HTML5 开发教程 12款精美的免费 HTML 网站模板下载 主流浏览器 CSS3 和 HTML5 兼容性大比拼     几年前,HTML5 前景还很模糊,只有少数的互联网极客才会关心。
1065 0
|
11天前
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
8 1
|
15天前
|
移动开发 前端开发 JavaScript
HTML与CSS二三事
HTML与CSS二三事