威尼斯888_www.wns888.com_威尼斯wns888官网
做最好的网站
威尼斯888 > 计算机网络 / Web前端 > Html中的所有标题标签

原标题:Html中的所有标题标签

浏览次数:140 时间:2020-05-07

转眼间要过年了,可惜今年由于某些原因不能回家,情绪有些低落,很想家,想念年迈的爸爸妈妈,希望他们身体健康,同时也祝福大家新年快乐吧。这里也不多啰嗦了,今天还是继续Bootstrap教程系列。

回顾上一节“栅格系统”,这一节主要介绍bootstrap框架排版,主要是从7个方面:标题、页面主体、强调、缩略语、地址、引用、列表。详细如下:

标题

Html中的所有标题标签,从

均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。

标题

h1.Bootstrapheading

h2.Bootstrapheading

h3.Bootstrapheading

h4.Bootstrapheading

h5.Bootstrapheading
h6.Bootstrapheading

在标题内还可以包含`标签或.small`元素,可以用来标记副标题。

标题h1.BootstrapheadingSecondarytexth2.BootstrapheadingSecondarytexth3.BootstrapheadingSecondarytexth4.BootstrapheadingSecondarytexth5.BootstrapheadingSecondarytexth6.BootstrapheadingSecondarytext

页面主体

Bootstrap将全局font-size设置为14px,line-height为1.428 。这些属性直接赋给和所有段落元素。另外,还被设置了等于1/2行高的底部外边距。

页面主体Nullamquisrisusegeturnamollisornareveleuleo.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Nullamiddoloridnibhultriciesvehicula.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Donecullamcorpernullanonmetusauctorfringilla.Duismollis,estnoncommodoluctus,nisieratporttitorligula,egetlaciniaodiosemnecelit.Donecullamcorpernullanonmetusauctorfringilla.Maecenasseddiamegetrisusvariusblanditsitametnonmagna.Donecidelitnonmiportagravidaategetmetus.Duismollis,estnoncommodoluctus,nisieratporttitorligula,egetlaciniaodiosemnecelit.

通过添加.lead可以让段落突出显示。

LeadBodyCopyNullamquisrisusegeturnamollisornareveleuleo.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Nullamiddoloridnibhultriciesvehicula.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Donecullamcorpernullanonmetusauctorfringilla.Duismollis,estnoncommodoluctus,nisieratporttitorligula,egetlaciniaodiosemnecelit.Donecullamcorpernullanonmetusauctorfringilla.Maecenasseddiamegetrisusvariusblanditsitametnonmagna.Donecidelitnonmiportagravidaategetmetus.Duismollis,estnoncommodoluctus,nisieratporttitorligula,egetlaciniaodiosemnecelit.

通过和上面页面主体的对比就可以看到明显的效果了。如下图:

强调

直接使用HTML中用于标注强调的标签,并给他们赋予少许的样式。

1、小号文本

对于不需要强调的inline或block类型的文本,使用标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的元素被设置不同的font-size

你还可以为行内元素赋予.small以代替任何``标签。

Thislineoftextismeanttobetreatedasfineprint.

2、突出

通过增加font-weight强调一段文本。

renderedasboldtext

3、斜体

renderedasitalicizedtext 

4、对齐

通过文本对齐class,可以简单方便的将文字重新对齐。

Leftalignedtext.//左对齐Centeralignedtext.//居中对齐Rightalignedtext. //右对齐

5、强调CLASS

这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。

强调ClassMaecenasseddiamegetrisusvariusblanditsitametnonmagna.Maecenasseddiamegetrisusvariusblanditsitametnonmagna..Maecenasseddiamegetrisusvariusblanditsitametnonmagna.Maecenasseddiamegetrisusvariusblanditsitametnonmagna..Maecenasseddiamegetrisusvariusblanditsitametnonmagna...Maecenasseddiamegetrisusvariusblanditsitametnonmagna.

如果我们想强调代码片段中的内容,可以这样来弄,如下:

在正文中通过``标签包裹内联样式的代码片段。

Forexample,<section>shouldbewrappedasinline.

基本代码快:多行代码可以使用``

标签。为了正确的展示代码,注意将尖括号做转义处理。

<p>Sampletexthere...</p>

还可以使用.pre-scrollableclass,其作用是设置max-height为350px,并在垂直方向展示滚动条。

这些强调代码比较简单,很简单,基本看一遍就会用了。

缩略图

当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的`元素的增强样式。缩略语元素带有title`属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性,这个比较简单就不具体介绍了。

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加``可以保留需要的样式。

Twitter,Inc.
795FolsomAve,Suite600
SanFrancisco,CA94107
P:456-789FullName
first.last@example.com

引用

在你的文档中引用其他来源的内容。

将任何HTML裹在``

之中即可表现为引用。对于直接引用,我们建议用``

Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.

对于标准样式的``

,可以通过几个简单的变体就能改变风格和内容。

命名来源:添加标签来注明引用来源。来源名称可以放在标签里面。

Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.SomeonefamousinSourceTitle

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。比如:

Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.SomeonefamousinSourceTitle

列表无序列表

顺序无关紧要的一列元素。

  • Loremipsumdolorsitamet
  • Loremipsumdolorsitamet
  • Loremipsumdolorsitamet
  • Loremipsumdolorsitamet
  • Loremipsumdolorsitamet

有序列表

顺序至关重要的一组元素。

LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet

无样式列表

移除了默认的list-style样式和左侧外边距的一组元素。这这是针对直接子元素,也就是说,你需要对所有嵌套的列表都添加此class才能具有同样的样式。

LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet

内联列表

通过设置display: inline-block;并添加少量的内补,将所有元素放置于同一行。

LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet

描述

.Loremipsumdolorsitamet
Loremipsumdolorsitamet.Loremipsumdolorsitamet

.dl-horizontal可以让``

内短语及其描述排在一行。开始是像``

默认样式堆叠在一起,随着导航条逐渐展开而排列在一样。如下代码:

.LoremipsumdolorsitametLoremipsumdolorsitamet.Loremipsumdolorsitamet

总结

看完上面的内容是不是很简单呢,其实大多数是我们在平时常用的,这里只是重新温故下了。

本文由威尼斯888发布于计算机网络 / Web前端,转载请注明出处:Html中的所有标题标签

关键词:

上一篇:如果不能专注地做好用户体验设计

下一篇:智图平台还会为用户转换一份webp格式的图片