一、HTML5中常用的文本标签
1、标题标签
(1)定义及用法:
HTML中,定义了6级标题,分别为h1. h2、h3、h4、 h5. h6,每级标题的字体大小依次递减,1级标题字号最大,6级标题字号最小。
(2)语法格式:
1号标题
2号标题
3号标题
4号标题
5号标题
6号标题
h系列标签中的内容显示为粗体,而且字的大小从大到小;h系列标签一般只用来定义标题,不建议随便使用。
(3)例子
html中h1~h6标题标签的详细介绍
1号标题
2号标题
3号标题
4号标题
5号标题
6号标题
2、段落标签
(1)定义及用法:
标签用于定义段落。
【注】 在HTML5中,段落标签既可以成对使用,也可以单独使用,为规范代码,建议成对使用
标签。
(2)语法格式:
段落文字
(3)例子
段落标签
这是段落。
这是段落。
这是段落。
段落元素由 p 标签定义。
3、标签与标签
(1)定义及用法:
标签可插入一个简单的换行符,用来输入空行,而不是分割段落。
标签是一个空标签,意味着它没有结束标签。
规定在文本中的何处适合添加换行符。作用是建议浏览器在这个标记处可以断行,只是建议而不是必定会在此处断行还要根据整行文字长度而定。除了Internet Explorer,其他所有浏览器都支持标签。
(2)语法格式:
文本
文本
文本文本文本
(3)例子
Document
hehhhhhhh hhhhhhh hhhhhh hhhhh tqwetuqwty
qwyie
gafjksgjsDJGDGASGHGG hfskfjdkafasd
4、标签
(1)定义及用法:
标签用于设置一段文本, 使其脱离其父标签的文本方向设置。在发布用户评论或其他您无法完全控制的内容时,该标签很有用。标签主要是让文字的方向发生变化,从左向右或者从右向左。它有一个属性dir,用来定义文本的方向,属性值为ltr,文本从左向右正常方向,属性值为rtl,文本从右向左;默认属性值为auto。
(2)语法格式:
内容
(3)例子
This is an bdi.
This is an bdi.
This isan bdi.
5、标签、 标签与标签
(1)定义及用法:
标签用于定义ruby往释(中文注音或字符)。与标签- 同使用。
标签用于定义字符(中文注音或字符)的解释或发音。
标签在ruby注释中使用,以定义不支持标签的浏览器所显示的内容。
(2)语法格式:
内容(内容)内容(内容)
(3)例子
Document
吉林大学
(
きつ りん だい がく
)
吉林大学
(
ji lin da xue
)
6、标签
(1)定义及用法:
标签主要用来在规觉上向用户呈现那些需要突出显示或高亮显示的文字,典型应用是搜索结果中高亮显示捏素关键字。
(2)语法格式:
内容
(3)例子
Do not forget to buy milk today.
注意:虽然元素在使用效果上与或元素有相似之处,但三者的出发点是不一样的。元素是作者对文档中某段文字的重要性进行的强调;元素是作者为了突出文章的重点而进行的设置。
7、标签
(1)定义及用法:
标签用于定义日期或时间,也可以两者同时。该元素可以代表24小时中的某一时刻,在表示时刻时,允许有时间差。在设置时间或日期时,只需将该元素的属性“datetime”设为相应的时间或日期即可。
(2)语法格式:
日期
(3)例子
Time 元素
2017/3/6
8、标签
(1)定义及用法:
标签用于定义任何类型任务的运行进度,可以使用标签显示JavaScript中时间函数的进程。属性max:规定需要完成的值;属性value:规定进程的当前值。
(2)语法格式:
(3)例子
html5中progress标签(进度条)的详细介绍
progress标签演示
以上就是HTML5中常用的文本标签,在实际运用中课灵活使用。
二、CSS的字体样式属性
CSS的字体样式属性用于定义文本的字体系列、大小、风格等, CSS
常用的字体样式属性如下表所示。
属性
允许取值
描述
font-size:字号大小
1em、5em等或者5px
em表示相对于当前对象内文本的字体尺寸。px表示像素,最常用,推荐使用。
font -family:字体
“微软雅黑”
网页中常用的字体有宋体、微软雅黑、黑体等。
font-weight:字体粗细
normal 、bold、bolder、lighter
默认为 normal,lighter 为细体,normal 为正常粗细,bold 为粗体,bolder 为特粗体。
font -style字体风格
normal、italic 、oblique 、inherit
默认为 normal,浏览器显示一个标准的字体样式。italic 浏览器会显示一个斜体的字体样式。oblique 浏览器会显示一个倾斜的字体样式。inherit 规定应该从父元素继承字体样式。
word-wrap: 长单词或URL自动换行
normal、break-word
normal属性值时浏览器默认处理,只在半角空格或者连字符的地方进行换行。使用break-word时浏览器可在长单词或URL地址内部进行换行。
font属性用于对字体样式进行综合设置,字体合写,语法如下所示:
选择器{ font:font-style font-weight font-size line-height font-family; }
三、CSS文本外观属性
CSS的文本外观属性用于设置颜色、字间距、字母间距、水平对齐、文本装饰、阴影等。
1、color:文本颜色
值
描述
color_name
规定颜色值为颜色名称的颜色(比如 red、green、blue)
hex_number
规定颜色值为十六进制值的颜色(比如 #ff0000)
rgb_number
规定颜色值为 rgb 代码的颜色(比如红色: rgb(255,0,0)或rgb(100%,0%,0%),如果使用百分比取色,值为0时也不能省略 %)
inherit
规定应该从父元素继承颜色
例子
body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}
2、letter-spacing:字间距
值
描述
normal
默认,规定字符间没有额外的空间
length
定义字符间的固定空间(允许使用负值,一般用px作单位)
inherit
规定应该从父元素继承 letter-spacing 属性的值
例子
设置 h1 和 h2 元素的字母间距:
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
3、word -spacing:单词间距
值
描述
normal
默认,规定字符间没有额外的空间
length
定义字符间的固定空间(允许使用负值,一般用px作单位)
inherit
规定应该从父元素继承 word -spacing 属性的值
例子
规定段落中的字间距是 25 像素:
p
{
word-spacing:25px;
}
4、line-height:行间距
值
说明
normal
默认,设置合理的行间距
number
设置数字,此数字会与当前的字体尺寸相乘来设置行间距,相当于倍数
length
设置固定的行间距(不允许使用复制,一般用px作单位)
%
基于当前字体尺寸的百分比行间距。
inherit
规定应该从父元素继承 line-height 属性的值
例子
Test
中文English
English中文
5、text- transform:英文文本转换
值
描述
none
默认,定义带有小写字母和大写字母的标准的文本
capitalize
文本中的每个单词以大写字母开头
uppercase
定义仅有大写字母
lowercase
定义无大写字母,仅有小写字母
inherit
规定应该从父元素继承 text-transform 属性的值
例子
text-transform属性
大写:Rome was't built in a day.
小写:Rome was't built in a day.
仅首字母大写: Rome was't built in a day.
6、text-align:水平对齐方式
值
描述
left
把文本排列到左边。默认值,由浏览器决定
right
把文本排列到右边
center
把文本排列到中间
justify
实现两端对齐文本效果
inherit
规定应该从父元素继承 text-align 属性的值
例子
text-align属性
左对齐:好好学习,天天向上。
居中对齐:好好学习,天天向上。
右对齐:好好学习,天天向上。
7、text-decoration:文本装饰
值
描述
none
默认,定义标准的文本
underline
定义文本下的一条线
overline
定义文本上的一条线
line-through
定义穿过文本下的一条线
blink
定义闪烁的文本
inherit
规定应该从父元素继承 text-decoration 属性的值
例子
设置h1,h2,h3和h4元素文本装饰:
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
8、text-indent:首行缩进
值
描述
length
定义固定的缩进,默认值:0。
%
定义基于父元素宽度的百分比的缩进
inherit
规定应该从父元素继承 text-indent 属性的值
例子
text-indent属性
中国
中国加油
武汉加油
9、white-space:空白符处理
值
描述
normal
默认,空白会被浏览器忽略
pre
空白会被浏览器保留,其行为方式类似 HTML 中的 标签
nowrap
文本不会换行,文本会在在同一行上继续,直到遇到 标签为止
pre-wrap
保留空白符序列,但是正常地进行换行
pre-line
合并空白符序列,但是保留换行符
inherit
规定应该从父元素继承 white-space 属性的值
例子
Document
It is when my love is bewildering the soul !
10、text- overflow:标示对象内溢出文本
值
描述
clip
修剪文本
ellipsis
显示省略符号来代表被修剪的文本
string
使用给定的字符串来代表被修剪的文本
例子
使用text-overflow属性:
div.test
{
text-overflow:ellipsis;
}
到底啦!