HTML学习3---排版标记

简介: 上节,我们学习了boda常用的属性以及HTML的一些标记,但是图显示的效果却不是那么的好看。原因就是没有排版好,我们这次使用居中来使这个页面更好看一点,顺便多加入几个别的标记。 HTML排版标记(1) : 表示一个段落。

上节,我们学习了boda常用的属性以及HTML的一些标记,但是图显示的效果却不是那么的好看。

原因就是没有排版好,我们这次使用居中来使这个页面更好看一点,顺便多加入几个别的标记。

HTML排版标记

(1)<p></p> : 表示一个段落。一段文字放在p标记里就可以了。

         常用属性:align  水平对齐方式,取值:left(左对齐)、center(居中对齐)、right(右对齐),一个段落默认就是左对齐。

(2)换行标记<br>

(3)水平线标记(单边标记):<hr>

         size:水平线的粗细,单位一般为px

         color:颜色

         width:水平线的宽度

         noshade:去掉水平线的阴影。(在HTML中,noshade是没有值的属性)如: <hrnoshade>

如: <hr size="1" color="blue" width="50%"  noshade>

(4)<pre>预排版标记

         功能:将保留所有的空白字符(空格、换行符),换句话说就是原封不动的输出。

         语法:<pre></pre>:双边标记

(5)<h1>...<h6>

一级标题到六级标题

标题标记:<h1></h1> ... <h6></h6>

功能:定义各种标题

属性:

align 水平对齐,取值:left(左对齐)、center(居中对齐)、right(右对齐),一个段落默认就是左对齐。

写个例子看看效果是怎么样的:

<html> 
	<head>
		<title>这是一首诗构成的网页</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
	</head>
	<body bgColor="white">
		<!--标题1 并设置标题1居中-->
		<h1 align="center">
			<font size="6" color="red" face="楷体">
			关雎
			</font>
		</h1>
		<!-- 设置水平线的粗细,颜色,宽度和去阴影-->
		<hr size="5" color="green" width="1600" noshade>
		<!-- 标题2 并设置标题2居中-->
		<h2 align="center">
			<font size="5" color="red" face="楷体">
			先秦:佚名
		</h2>
		<!-- 设置水平线的粗细,颜色,宽度和去阴影-->
		<hr size="10" color="red" width="1600" noshade>
		<!--段落-->
		<p align="center">
			<font size="4" color="black" face="楷体">
			<b><i>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</i></b>
			<br>
			<b><u>参差荇菜,左右流之。窈窕淑女,寤寐求之。</u></b>
			<br>
			<b><s>求之不得,寤寐思服。悠哉悠哉,辗转反侧。</s></b>
			<br>
			<b>参差荇菜,左右采之。窈窕淑女,琴瑟友之。</b>
			<br>
			<b>参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</b>
			<br>
		</p>
	</body>
</html>

运行效果:

顺便推荐一个朋友的微信公众号,写的是关于android系统相关的知识,干货多多!

微信公众号:tmac_lover

 




目录
相关文章
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
用html+javascript打造公文一键排版系统1:设计界面
用html+javascript打造公文一键排版系统1:设计界面
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
220 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
132 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
110 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
154 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
131 2
Twaver-HTML5基础学习(38)劈分面板SplitPane

热门文章

最新文章