html基础学习第三节:格式定义以及颜色定义

字体格式的定义

大家都知道粗体斜体等字体样式吧?这一小节就来学习下这方面的定义,只要简单的字母就可以定义字体的样式!下面来看看代码演示

<b>加粗</b>

<i>倾斜</i>----倾斜的标签的字被和谐了,只好不显示效果

<u>下划线</u>

<s>下划删除线</s>

<big>大字体</big>----同上面倾斜标签理由

<small>小字体</small>

<em>强调的形式</em>

<strong>加强强调</strong>

好了,看了上面的应该明白了如何运用了吧?就是用这些简单的代码来定义字体形式的!大家可以试试!自己写各种定义的字体!

字体颜色定义

大家知道了如何定义字体的大小和粗斜之后肯定想知道如何定义字体颜色吧?好,接下来说说字体颜色的定义

<font color="blue">蓝色字体</font>

大家来看看上面这个代码,这个代码有两个组合,color是属性定义。<font color="#">#在这里代表颜色单词,可以是单词,也可以是颜色的十六进制!关于颜色的单词有black-黑色,red-红色,gray-深灰色,silver-浅灰色-green-绿色,purple-紫色,yellow-换,white-白...还有一些没列举出来,自己百度颜色单词就知道了!

这里举例一个十六进制颜色代码

<font color="#0000FF">蓝色</font>

关于颜色的十六进制,这里我不多说,大家可以百度一下颜色十六进制的信息!

背景颜色定义

上面说了字体颜色的定义,我们来说说背景颜色的定义吧!背景的定义,是直接在<body>属性标签定义的!下面来看一个完整的html代码

<html>
<head>标题定义在这里</head>
<body bgcolor="black">黑色背景</body>
</html>

大家看到了吧!bgcolor="颜色"这个加在body这里就可以定义背景颜色了,在这里你也可以定义字体颜色,也就是这里定义好字体颜色和背景,如下代码

<html>
<head>标题定义在这里</head>
<body text="blue" bgcolor="black">
黑色背景,蓝色字体
</body>
</html>

大家看到上面两组代码的差别没有,没错<body text="字体颜色" bgcolor="背景颜色">这里大家明白了吧?不明白的自己测试或者跟帖!

一些排版定义

好了,字体的定义和颜色定义说好,接下来说说排版方面的,这里先简单介绍居中,靠左靠右的定义,下一节在继续讲排版定义,排版的定义基础的比较简单,这里这是让大家熟悉,真正排版,还是用CSS,先了解再说吧!看代码

<p align="center">居中</p>

<p align="left">靠左</p>

<p align="reght">靠右</p>

这里说明一下,上面的P靠右用hx来代替,比如:

<h3 align="center">三级标题居中</h3>

上面这个就是举一反三,我的教程讲究简易而且实际,大家以后要像上面一样,了解同级标签的互换!好了,为了大家靠右消化,暂时说到这里,排版还有很多没讲,下节课继续!

小结

这一节课的单词相对多一点,也是因为颜色单词比较多,如果大家觉得单词难记住,多练习几次就可以了,这里的教程一样是简单!不是我会写教程,而是html真的很简单!所以,只要多练习,一星期基础掌握html不是问题,如果你多练习的话,不像我那么懒...

课后练习

这一次有要求了,大家课后在桌面新建文本文档,然后打开,在里面练习代码,写好后保存,并且改后缀为htm或者html然后就可以打开看到效果了!或者使用编辑器,我将会抽时间把编辑器普通使用方法写出来,虽然我也不算很会用编辑器,不过普通的利用就够你学习一段时间了!

重要单词

这一节课,我们单词比较多,分别如下总结:

  • <b>定义加粗
  • <i>定义倾斜
  • <u>下划线
  • <s>删除线形式下划线
  • <big>大字体
  • <small>小字体
  • <em>强调
  • <strong>加强强调
  • <font color="">定义字体颜色
  • 颜色单词上面有提及这里不说了
  • <body text="" bgcolor="">定义字体颜色和背景颜色
  • <align="">字体格式定义
  • center-居中,right-靠右,left-靠左

------------------------

教程到此结束

html基础学习第三节:格式定义以及颜色定义

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:2   其中:访客  0   博主  0   引用   2

评论加载中...

来自外部的引用: 2

  • SDT技术网文章索引-一月份 | yumanutong blog
  • 导读-HTML基础学习教程整合 | yumanutong blog

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情