上节，我们学习了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

HTML学习3---排版标记的更多相关文章

  1. Java学习-033-JavaWeb_002 -- 网页标记语言JSP基础知识

    JSP 是 Sun 公司提倡的一门网页技术标准.在 HTML 文件中,加入 Java 代码就构成了 JSP 网页,当 Web 服务器访问 JSP 请求的时候,首先执行其中的 Java 程序源码,然后以 ...

  2. HTML 排版标记

    <p></p> : 表示一个段落 常用属性 : align : 水平对齐方式  取值 :left  center right 和Word文档一样 : 段落有空行  <br ...

  3. 学习使用Markdown标记语言

    学习如何使用Markdown进行文本编辑 使用教程   大家若是经常逛Github,就知道其中有一个文件叫做README.MD.我一开始也不知道这个.MD是什么意思,后来我自己写了一次,就知道了这一种 ...

  4. Stanford Parser学习入门(3)-标记

    以下是Stanford parser中的标记中文释义供参考. probabilistic context-free grammar(PCFG)     ROOT:要处理文本的语句 IP:简单从句 NP ...

  5. Bootstrap学习笔记(排版)

    bootstrap简介: ☑  简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ☑  基于html5.css3的bootstrap,具有大量的诱人特性:友好 ...

  6. bootstrap基础学习【排版】（一）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. effective-java学习笔记---使用标记接口定义类型40

    标记接口(marker interface),不包含方法声明,只是指定(或“标记”)一个类实现了具有某些属性的接口. 例如,考虑 Serializable 接口.通过实现这个接口,一个类表明它的实例可 ...

  8. 前端学习（十二）：CSS排版

    进击のpython ***** 前端学习--CSS排版 本节主要介绍网页排版中主要格式化元素属性 帮助开发者把css技术与网页排版紧密联系到一起,来更好的实现网页设计效果 字体属性 字体 在日常工作中 ...

  9. 极简MarkDown排版介绍（How to）

    如何切换编辑器 切换博客园编辑器为MarkDown:MarkDown Editor 选择一个在线编辑和预览站点:StackEdit 如何排版章节 MarkDown: 大标题 ========== 小标 ...

随机推荐

  1. [css]网站骨架布局作业

    实现效果图: 代码实现 第一次写的时候不知道如何下手, 后来摸清规律了,由大到小. 由全局到局部 第一次还遇到区块命名问题, 和哪个该怎么划分问题 第一次还遇到由于划分不规整,所以有些代码没达到预期的 ...

  2. sdut 迷之容器（线段树+离散化）

    #include <iostream> #include <algorithm> #include <string.h> #include <stdio.h& ...

  3. PAT 1082 Read Number in Chinese[难]

    1082 Read Number in Chinese (25 分) Given an integer with no more than 9 digits, you are supposed to ...

  4. cocos代码研究（24）Widget子类PageView学习笔记

    理论基础 PageView类又称Layout的管理器,可以让用户在多个Layout之间左右或者上下切换显示,继承自 Layout . 代码实践 static PageView * create ()创 ...

  5. 常用php操作redis命令整理（三）LIST类型

    LIST 头元素和尾元素:头元素指的是列表左端/前端第一个元素,尾元素指的是列表右端/后端第一个元素.举个例子,列表list包含三个元素:x, y, z,其中x是头元素,而z则是尾元素.空列表:指不包 ...

  6. bzoj1999 / P1099 树网的核

    P1099 树网的核 (bzoj数据加强) 前置知识:树的直径 (并不想贴我的智障写法虽然快1倍但内存占用极大甚至在bzoj上MLE) 正常写法之一:用常规方法找到树的直径,在直径上用尺取法找一遍,再 ...

  7. linux及安全《Linux内核设计与实现》第一章——20135227黄晓妍

    <linux内核设计与实现>第一章 第一章Linux内核简介: 1.3操作系统和内核简介 操作系统:系统包含了操作系统和所有运行在它之上的应用程序.操作系统是指整个在系统中负责完成最基本功 ...

  8. appium装上开始干嘛

    先写appium的启动参数啊 比如调试序列号,设备的系统版本. 什么系统. app的包名,这些代码百度上都有的,针对修改下就行.

  9. BZOJ 2594 【WC2006】 水管局长数据加强版

    题目链接:水管局长数据加强版 好久没写博客了…… 上次考试的时候写了一发LCT,但是写挂了……突然意识到我已经很久没有写过LCT了,于是今天找了道题来练练手. 首先,LCT这里不讲.这道题要求支持动态 ...

  10. codeforces 356 div2 C.Bear and Prime 100 数学

    C. Bear and Prime 100 time limit per test 1 second memory limit per test 256 megabytes input standar ...