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>
显示结果:






目录
相关文章
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
10月前
|
移动开发 前端开发 JavaScript
HTML(HyperText Markup Language,超文本标记语言)
HTML(HyperText Markup Language,超文本标记语言)
254 11
|
11月前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
10月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
10月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
11月前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
10月前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
11月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性2
`novalidate` 是 HTML `&lt;form&gt;` 元素的布尔属性,用于禁用浏览器的默认表单验证功能。当此属性存在时,浏览器不会检查表单字段是否符合预设的验证规则,允许开发者通过 JavaScript 等手段自定义验证逻辑。
|
10月前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `&lt;input&gt;` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;`可使输入值以3为单位递增或递减。

热门文章

最新文章