HTML—文本标签及样式

一，文本标签

(1)和,,,标签

• 通常em显示为斜体，而strong显示为粗体
• ,这两个标签和em和strong类似，但是这两 个标签没有语义。
• small标签表示细则一类的旁注，通常包括 免责声明、注意事项、法律限制、版权信 息等。
• 使用cite标签可以指明对某内容的引用或参 考。例如，戏剧、文章或图书的标题，歌 曲、电影、照片或雕塑的名称等。
• blockquote和q表示标记引用的文本。
• blockquote用于长引用，q用于短引用。

标签

image.png

标签

image.png

• 标签和标签换可以一起使用哦

image.png

标签

image.png

标签

image.png

标签

image.png

（2），sup和sub标签

• sup和sub用于定义上标和下标。

image.png

（3），和标签

• ins表示插入的内容，显示时通常会加上下 划线。
• del表示删除的内容，显示时通常会加上删 除线。

image.png

image.png

（4），和

 标签

• 如果你的内容包含代码示例或文件名，就 可以使用code元素。
• pre元素表示的是预格式化文本，可以使用
• pre包住code来表示一段代码。

image.png

（5）， 有序列表和无序列表

• 使用ol和li来创建一个有序列表。
• 使用ul和li来创建一个无序列表。
• 使用dl、dd、dt来创建一个定义列表。

image.png

image.png

image.png

二，文本样式

(1)，单位

• px
  如果我们将一个图片放大的话，我们会发现一个图片 是有一个一个的小色块构成的，这一个小色块就是一 个像素，也就是1px，对于不同的显示器来说一个像素 的大小是不同的。
• 百分比
  也可以使用一个百分数来表示一个大小，百分比是相 对于父元素来说的，如果父元素使用的大小是16px， 则100%就是16px，200%就是32px。
• em
  em和百分比类似，也是相对于font-size说的，1em就相 当于100%，2em相当于200%，1.5em相当于150%

image.png

(2)颜色单位

• 在CSS中可以直接使用颜色的关键字来代表 一种颜色

image.png

(3)字体单位

• font-size用来指定文字的大小。
• 通过font-family可以指定标签中文字使用 的字体
• font-style用来指定文本的斜体。
• font-weight用来指定文本的粗体
• font-variant属性可以将字母类型设置为小 型大写。在该样式中，字母看* * 起来像是稍 微缩小了尺寸的大写字母。
• text-transform样式用于将元素中的字母全都变成大写。
• text-align用于设置文本的对齐方式

font可以一次性同时设置多个字体的样式。

语法 ：– font:加粗 斜体 小型大写 大小/行高 字体

image.png

image.png

三，盒子

一个盒子我们会分成几个部分：

• 内容区(content)
• 内边距(padding)
• 边框(border)
• 外边距(margin)
• 通过width和height两个属性可以设置内容区的大 小。

image.png

运行结果如下：

image.png