整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html开发笔记08- 字体样式与颜色(标签的属性)

、标签的分类:双标签和单标签

双标签:就是成对出现的,类似于这种 <html> </html>

单标签:就是可以单个使用的,类似于 <br> 换行标签 或 <hr>水平线标签。

二、标签属性的作用:

标签的属性是用来定义文字或字符的 颜色、宽高、粗细、大小、等,这个是标签属性的作用。


三、标签属性的特性:

1、每一个标签都有自己的属性,单标签和双标签都有。

2、一个标签可以有多个属性。

3、每个属性都有对应的值,值要用单或双引号引起来。

4、多个属性之间使用空格隔开。

5、属性没有顺序之分。

6、字体属性值,必须是系统可以识别的字体,一般为系统自带字体。

7、HTML5 中 font 属性已经弃用。

源代码:↓

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!--网页抬头-->

<title>中央气象局</title>

</head>

<body>

<!--水平线的宽度是500像素,这个width就是标签属性-->

<hr width="500">

<!--下面这个是多个标签属性,多个属性之间用空格隔开-->

<font color="red" face="黑体" size="7">标签属性</font>

</body>

</html>

馨提示:细读本文需要2分钟,速读仅需1分钟。

作者|李娜

*本文为「Java联盟」原创内容,转载无需授权,请保留署名来源。

前言

上一节我们讲到HTML是什么,一个网页的基本架构是怎么样子。但是往往一个网页有很多标签,分别代表不同的含义,当然如果你不懂的话何谈编辑呢?所以这一节,开始讲到HTML中的那些常见标签。

第二节 HTML 中的常见标签

首先我们先来了解一下 HTML 标签的类型:

HTML 标记标签通常被称为 HTML 标签(HTML TAG)。

1

单标签与双标签

单标签:单个标签标记名称

无属性值: 如: br / (表示换行)

有属性值: 如: hr width=80% / (表示水平线的宽占参照物的百分之八十)

双标签:两个标签,成对出现。

无属性值: 标记名称.../标记名称

如: title.../title

有属性值: 标记名称 属性=属性值.../标记名称

如:fontsize7.../font

注意:

标签的属性与属性之间以空格分隔,属性不区分先后顺序,且属性不是必需要写的。

然后我们来了解下标题标签。

2

标题标签

标题标签:hx/hx

其中“x”是1~6的数字代表字体的大小

如下就是标题标签

h1我是标题1/h1

h2我是标题2/h2

h3我是标题3/h3

h4我是标题4/h4

h5我是标题5/h5

h6我是标题6/h6

执行实际效果图如下:

一般一篇文章只会使用一个 h1 标签。

3

font标签

接下来是 font 标签,比如说font size='5' color='#ff33cc'

这是一个 font 标签/font

其中的 “ size “ 是字体的大小属性这里把大小设置为 “ 5 ” ,“ color ” 是 font的颜色属性,可以在 editplus 中选择。

font size='5' color='#ff33cc'

效果展示:

4

段落,格式标签

p标签是一个定义段落标签

pp 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。/p

功能 标记
加粗 b文本/b
倾斜 i文本/i
加强语气(加粗)strong文本/strong
加强语气(倾斜)em文本/em
下划线u文本/u
删除线 del文本/del
上标 sup文本/sup
下标 sub文本/sub

换行br/

执行效果图如下:

5

超链接标签

这一节的最后介绍一下超链接标签

a标签:我们有时候跳转页面就是a标签实现的

ahref=http://www.baidu.com百度/a

这样的话我们就可以跳转到百度页面了。

最后给大家看看本节所有的源代码以及执行效果图

源代码

执行效果图

好的这里给大家分享了常见的一些标签想要学习到更多的标签知识的小伙伴要记得关注我们的公众号 我们会持续更新有关于HTML的文章的。

有疑问?有想法?请留言!

微信搜索关注 :java联盟

么现在咱们

就进入JavaE部分了~

HTML、CSS和JS又被称为“前端三剑客”~虽然Java主要是做后台服务端开发的,但是毕竟是要和前端合作,的多少要了解一下~~总之技多不压身~多学一点东西总归是好的~嗯~咱们开始今天的内容吧~

HTML

什么是HTML?

HTML 全称是 Hyper Text Markup Language:超文本标记语言。超文本意味着功能比普通文本更加强大。标记语言则是:使用一组标签对内容进行描述的一门语言(注意:它不是编程语言)

HTML的语法和规范

1)HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。

2)HTML文件分为头部分(<head></head>)和体部分(<body></body>)

3)HTML标签一般是由开始标签和结束标签组成。

(大部分是成对存在的,有个别标签是单着的~)

4)HTML标签不区分大小写,建议使用小写。

HTML相关标签学习

接下来就是重头戏了,来一起看看HTML标签都有什么~

标题标签<hn > </hn>

n的取值从1到6逐渐变小,独占一行加粗加黑显示,与其他行有一定的行间距

水平线标签 <hr />

里面有一些属性象颜色(color)、大小(size)等等就不详细介绍了,伙伴们自己去摸索一下哈~

段落标签<p></p>

字体标签<font></font>

换行标签<br/>

其中有些属性:

size:指定内容的大小

color:指定内容的颜色

face:指定内容的字体

加粗:<b></b>

斜体:<i></i>

下划线:<u></u>

图片标签

<img />

src:指的是图片显示的路径(位置)

width:指定图片的宽度,取值可以是像素值,也可以是百分比

height:指定图片的高度,取值可以是像素值,也可以是百分比

alt:当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)

路径分为两种:

绝对路径:

从盘符开始的到图片位置的完整描述:

类似~C:\Program Files\Img.jpg

相对路径:

①同一级:直接写文件名称或者./文件名称

②上一级:../文件名称

③下一级:写上目录名称/文件名称

列表标签

有序列表:

type:可以选择数字、字母及阿拉伯数字作为前面的序号,

start: 从哪里开始计数

reversed: 表示颠倒顺序

无序列表:

type:可以选择前面的样式实心圆、空心圆和方块

超链接标签

<a href="" target=""></a>

href:指定跳转的位置

target:指定跳转页面显示的位置(取值:_self 、_blank)

表格标签

border:边框的宽度

width:表格的宽

height:表格的高

align:元素的位置 居中、上、下、左、右

bgcolor:背景色

cellpadding:边框与边框间的距离

cellspacing:表格内容到边框的距离

跨行跨列操作

跨行:rowspan

跨列:colspan

今天先说这么多了

剩下的小伙伴们自己摸索吧~

拜拜~

我是萌新娜娜

立志做一个不翻车的老司机

学习Java的路上请多多指教

大家如果想要更深入了解java相关知识,私信我回复:【Java】 即可知道你们想要知道的java相关问题