HTML5常用的文本标签和CSS的文本属性

HTML5常用的文本标签

标签 描述
标题标签 HTML中一共有六级标题,标题按字号大小从大到小为H1、H2、H3、H4、H5、H6

用于定义HTML中的段落


标签用于插入一个简单换行符,用来输入空行。
标签规定文本在什么时候适合添加换行符,作用是建议浏览器可以在标记处断行,但只是建议不一定是必定换行,还有根据整行文字的长度来定
用于描述文档和文档某个部分的细节,可以与标签用于定义这个描述文档的标题
标签用于设置一段文本,使其脱离其父标签的文本方向设置,在发布用户评论或其他您无法完全控制的内容时很有用
还有 标签用于定义ruby注释(中文注音或字符),与标签一同使用
标签用于定义字符(中文注音或字符)的解释或发音。
标签在ruby注释中使用,以定义不支持标签的浏览器所显示的内容
标签主要用来在视觉上向用户呈现那些需要突显或高亮显示的文字
标签用于定义度量衡
标签用于定义任何类型任务的运行进度



标题标签

   

~

用处是为了命名标题,

定义最大的标题。

用来定义最小的标题;标题标签主要目的不是为了设置字体大小,主要作用是对浏览器索引进行优化。
例子:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题


P标签

  段落标签可以只在块(block)内指定段落,也可以把段落和其他段落、列表、表单和预定义格式的文本一起使用。总的来讲,这意味着段落可以在任何有合适的文本流的地方出现,例如文档的主体中、列表的元素里,等等
例子:

这是一个段落


br和wbr标签

  
标签的目的是输入空行,不是为了换行;
标签,软换行符;全称是 Word Break Opportunity(单词换行时机),IE并不支持wbr;在浏览网页中,如果文本太长,浏览器会自动对文本换行,如果担心浏览器会在不恰当的位置换行,那么就可以用标签来添加换行时机
例子:

单词可以在这些地方换行

标签

  details用来对显示在页面的内容做进一解释里面;接着是标题

,这里面的内容一般简短,具有总结性,会展示在页面;细节一开始是隐藏的,当点击时便会展现。可以为details标签设置open属性,即打开网页时会默认展开。
例子:

details和summary标签

details

细节
用于显示页面的内容的解释

标签

  全称是Bi-directional Isolatio(双向隔离);
标签主要是让文字的方向发生变化,从左向右或者从右向左。它有一个属性dir,用来定义文本的方向,属性值为ltr,文本从左向右正常方向,属性值为rtl,文本从右向左;默认属性值为auto。例子:

This is an bdi.

还有

   标签定义 ruby 注释(中文注音或字符)。

以及 标签一同使用:

ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。例如:

(wang)

  标签定义带有记号的文本,在需要突出显示文本时使用;例如:

这段文字的 会突出显示.

  该元素能够以机器可读的方式对日期和时间进行编码;还有两个属性
datetime 规定日期 / 时间。否则,由元素的内容给定日期 / 时间。
pubdate 指示

元素)的发布日期。例子:

我们每天早上 上课

我在 待在家里

  标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。例如磁盘用量、查询结果的相关性即可使用
常用属性是:

属性 描述
max 规定范围的最大值。
min 规定范围的最小值
value 必需值规定度量的当前值

代码例如:

1 out of 10
50%

标签

用来表示现在的进度 ;常用属性有

属性 描述
max 规定任务一共需要多少工作。
value 规定已经完成多少任务。

例如:

 


css字体样式属性

  • color

    定义元素内文字颜色。

    语法:color:颜色名|十六进制|RGB

  • font-size

    定义元素内文字大小。

    语法:font-size:绝对单位(px)|相对单位(em)。

  • font-family
    定义元素内的字体。
    语法:font-family:字体,字体集

  • font-weight 字体粗细 定义字体的粗细,
    属性值为:normal(默认值,等于400)、bold、bolder、lighter、100~900(100的整数倍)。

  • font-style 定义元素的字体风格,如设置斜体、倾斜或正常字体
    常用属性为normal(默认值),italic(斜体),oblique(倾斜)

  • word-wrap 允许长单词或 URL 地址换行到下一行。
    常用属性:
      normal 只在允许的断字点换行(浏览器保持默认处理)。
      break-word 在长单词或 URL 地址内部进行换行

@font-face

   允许你输入自己的字体出现在网站上,即使在特定的字体在访问者的计算机上没有安装。
语法规则:@font-face {
font-family: ;
src: [][, []]*;
[font-weight: ];
[font-style: