HTML学习2---body常用属性以及文本修饰标记

简介: 上节 ,我们了解了网站制作相关的基础知识,也了解了制作网站需要用到的语言,以及一些简单的HTML的基础知识学习笔记:博文链接如下:http://blog.csdn.net/morixinguan/article/details/76457441这节,来写一下body常用属性以及文本修饰标记的常用属性(1)bgColor : 网页的背景色。

上节 ,我们了解了网站制作相关的基础知识,也了解了制作网站需要用到的语言,以及一些简单的HTML的基础知识学习笔记:

博文链接如下:http://blog.csdn.net/morixinguan/article/details/76457441

这节,来写一下body常用属性以及文本修饰标记

<body>的常用属性
(1)bgColor : 网页的背景色。 如: <body bgColor="red">
(2)Background : 网页背景图片地址 。 如: <body  background="images/bg.png">  
网页背景图片最好跟网页放在一起,最好不要用中文来命名,背景是平铺效果。
例如:<body bgcolor = "#99cc33" background="images\20170331151615532.png">


HTML文本修饰标记:
(3)<b></b>: 加粗 bold(跟文本相关)     如: <b>文字</b>  ,这个标记没有属性
(4)<i></i>: 加斜体 italic(跟文本相关) 如:<i>文字</i>
(5)<u></u>: 下划线 underline。    如: <u>文字</u>
(6)<s></s>: 删除线 strike。           如: <s>文字</s>
(7)<sup></sup>: 上标。
(8)<sub></sub>: 下标。
例如:<font size="7">a<sup>2</sup> + b<sub>2</sub> = 24 </font>
(9)<font></font>: 字体标记
    size : 文本大小,取值1-7,1小,7大。
    Color: 颜色值。
    Face :字体。楷体、黑体、宋体。。。。

接下来看一个实例,更好了说明如何使用这些标记:

<html> 
	<head>
		<title>这是一首诗构成的网页</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
	</head>
	<!--设置body的背景颜色为绿色 -->
	<body bgcolor="green">
		<!--标题1 -->
		<h1>
			<font size="6" color="red" face="楷体">
			关雎
			</font>
		</h1>
		<!-- 标题2-->
		<h2>
			<font size="5" color="red" face="楷体">
			先秦:佚名
		</h2>
		<!--段落-->
		<p>
		<font size="4" color="red" face="楷体">
		<b><i>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</i></b><br>
		<b><u>参差荇菜,左右流之。窈窕淑女,寤寐求之。</u></b><br>
		<b><s>求之不得,寤寐思服。悠哉悠哉,辗转反侧。</s></b><br>
		<b>参差荇菜,左右采之。窈窕淑女,琴瑟友之。</b><br>
		<b>参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</b><br>
		</font>
		</p>
	</body>
	
</html>
运行结果:


那如果背景颜色换成图片该怎么做呢?先在HTML文件的当前路径下创建一个images文件夹,注意,最好还是让存放图片的文件夹和HTML在同一路径下,这样便于管理。


往这个文件夹放入一张图片格式,gif,png,jpg等等都可以。。。我下面的这张是png图片。。。


然后,修改HTML代码如下:

<html> 
	<head>
		<title>这是一首诗构成的网页</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
	</head>
	<!--设置body的背景图片为20170331151615532.png -->
	<body background="images/20170331151615532.png">
		<!--标题1 -->
		<h1>
			<font size="6" color="red" face="楷体">
			关雎
			</font>
		</h1>
		<!-- 标题2-->
		<h2>
			<font size="5" color="red" face="楷体">
			先秦:佚名
		</h2>
		<!--段落-->
		<p>
		<font size="4" color="red" face="楷体">
		<b><i>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</i></b><br>
		<b><u>参差荇菜,左右流之。窈窕淑女,寤寐求之。</u></b><br>
		<b><s>求之不得,寤寐思服。悠哉悠哉,辗转反侧。</s></b><br>
		<b>参差荇菜,左右采之。窈窕淑女,琴瑟友之。</b><br>
		<b>参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</b><br>
		</font>
		</p>
	</body>
	
</html>
显示结果:






目录
相关文章
WK
|
1月前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
51 1
|
14天前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
14天前
|
前端开发 搜索推荐 算法
|
14天前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
14天前
|
存储 移动开发 前端开发
HTML全局属性
【10月更文挑战第27天】
|
18天前
|
XML JavaScript 前端开发
如何解析一个 HTML 文本
【10月更文挑战第23天】在实际应用中,根据具体的需求和场景,我们可以灵活选择解析方法,并结合其他相关技术来实现高效、准确的 HTML 解析。随着网页技术的不断发展,解析 HTML 文本的方法也在不断更新和完善,
|
22天前
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
|
23天前
HTML 属性
HTML属性为元素提供额外信息,格式为name=&quot;value&quot;,置于开始标签内。如&lt;a href=&quot;http://www.runoob.com&quot;&gt;,其中href为属性名,URL为值。属性值应加引号,推荐使用小写。
|
28天前
|
人工智能
|
1月前
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
407 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具

热门文章

最新文章