文本标签和样式

文本标签

  1. < em>和< strong>都表示一个强调的
    ~em标签用于表示一段内容中的着重点(语气上的)。strong标签用于表示一个内容的重要性。

这两个标签可以单独使用,也可以一起使用。通常em显示为斜体,而strong显示为粗体。

  1. < i>和< b>
    ~ i标签会使文字变成斜体。 b标签会使文字变成粗体。

这两个标签和em和strong类似,但是这两个标签没有语义。
• 所以根据html5标准,当我们只想设置文本特殊显示,而不需要强调内容时就可以使
用i和b标签。

  1. < small>
    ~浏览器在显示small标签时会显示一个比父元素小的字号

small标签表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。

  1. < cite>
    ~ 使用cite标签可以指明对某内容的引用或参考。例如,戏剧、文章或图书的标题,歌
    曲、电影、照片或雕塑的名称等。

网页上所有加书名号的都可以使用cite

  1. < blockquote>和< q>
    ~ blockquote和q表示标记引用的文本。 blockquote用于长引用,q用于短引用。

在两个标签中还可以使用cite属性来表示引用的地址,q标签中的内容浏览器会自动加引号

  1. < sup>和< sub>
    ~ sup和sub用于定义上标和下标。

上标主要用于表示类似于103中的3。 下标则用于表示类似余H2O中的2。

  1. < ins>和< del>
    ~ins表示插入的内容,显示时通常会加上下划线。 del表示删除的内容,显示时通常会加上删除线

  2. < code>和< pre>
    ~如果你的内容包含代码示例或文件名,就可以使用code元素。

pre元素表示的是预格式化文本,可以使用pre包住code来表示一段代码。

  1. 有序列表
    ~ 使用ol和li来创建一个有序列表。块元素
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>

10.无序列表
~使用ul和li来创建一个无序列表。块元素

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
  1. 定义列表
    ~使用dl、dd、dt来创建一个定义列表。
<dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
<dt>定义项2</dt>
<dd>定义描述2</dd>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>

12.< pre> 和< code> 语义化标签 可以显示原内容

我们一般结合使用来表示一段代码

文本格式化

  1. 单位

~px
– 如果我们将一个图片放大的话,我们会发现一个图片
是有一个一个的小色块构成的,这一个小色块就是一
个像素,也就是1px,对于不同的显示器来说一个像素
的大小是不同的。

~百分比
– 也可以使用一个百分数来表示一个大小,百分比是相
对于父元素来说的,如果父元素使用的大小是16px,
则100%就是16px,200%就是32px。

~ em
– em和百分比类似,也是相对于父元素说的,1em就相
当于100%,2em相当于200%,1.5em相当于150%。

  1. 十六进制颜色

用的最多的颜色是十六进制符号。一个颜色值,比如:#6600FF实际上包含了三组十六进制的数字。

  1. RGB值
    ~ 也可以使用计算机中常用的RGB值来表示颜色。可以使用0 ~ 255的数值,也可以使用0%~100%的百分比数。

RGB(100%,0%,0%)
RGB(0,255,0)
第一个数表示红色的浓度,第二个数表示绿色浓度,第三个数表示蓝色的浓度

  1. RGBA
    ~ RGBA表示一个颜色和RGB类似,只不过比RGB多了一个A(alpha)来表示透明度.

RGBA(255,100,5,0.5)
透明度需要一个0-1的值。0表示完全透明,1表示完全不透明。

  1. 字体
 • font-size用来指定文字的大小。
 • 通过font-family可以指定标签中文字使用的字体  比如: `p{font-family:Arial}`
 • 通过font-family可以同时指定多个字体。
 • 通过font-family可以同时指定多个字体。
 • font-style用来指定文本的斜体。
 • font-weight用来指定文本的粗体
 • font-variant属性可以将字母类型设置为小型大写。
 • font可以一次性同时设置多个字体的样式。—— `font:加粗 斜体 小型大写 大小/行高 字体`
 • line-height用于设置行高,行高越大则行间距越大。—— 行间距 = line-heig
 • text-indent用来设置首行缩进
 
发布了135 篇原创文章 · 获赞 12 · 访问量 5457

猜你喜欢

转载自blog.csdn.net/weixin_45736498/article/details/104709834