前端基础知识学习笔记

1、<blockquote>标签

定义块引用,<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

可选属性cite,cite属性规定引用的来源。

2、<hr>标签

<hr> 标签在 HTML 页面中创建一条水平线。

3、target属性

target 属性规定在何处打开页面上的所有链接。

属性值为_blank时,在新窗口中打开被链接文档。

属性值为_self时,默认。在相同的框架中打开被链接文档。

属性值为_parent时,在父框架集中打开被链接文档。

属性值为_top时,在整个窗口中打开被链接文档。

属性值为framename 时,在指定的框架中打开被链接文档。

4、translate属性

<p translate = "no">请勿翻译本段。</p>

yes表示翻译

5、Bootstrap超大屏幕(Jumbotron)

Bootstrap支持的特性,该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下:

      创建一个带有 class .jumbotron. 的容器 <div>。

      除了更大的 <h1>,字体粗细 font-weight 被减为 200。

例如:

<div class="container">
<div class="jumbotron">
<h1>欢迎登陆页面!</h1>
<p>这是一个超大屏幕(Jumbotron)的实例。</p>

</div>

如果jumbotron放在container样式内,则显示圆角;如果不放在里边,则不会显示圆角。

6、Bootstrap缩略图

大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下:

     在图像周围添加带有 class .thumbnail 的 <a> 标签。

     这会添加四个像素的内边距(padding)和一个灰色的边框。

     当鼠标悬停在图像上时,会动画显示出图像的轮廓。

    例如:<div class="row">

            <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> </a> </div>

            </div>

如果想添加自定义的内容,可以在上面的基本缩略图上添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:

       把带有 class .thumbnail 的 <a> 标签改为 <div>。

       在该 <div> 内,可以添加任何想要添加的东西。由于这是一个 <div>,我们可以使用默认的基于 span 的命名规则来调整大小。

       如果想要给多个图像进行分组,请把它们放置在一个无序列表中,且每个列表项向左浮动。

   例如:<div class="row">

          <div class="col-sm-6 col-md-3">

          <div class="thumbnail"> <img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图">

          <div class="caption">

          <h3>缩略图标签</h3>

          <p>一些示例文本。一些示例文本。</p>

          </div>

          </div>

          </div>

          </div>

Just do it!
原文地址:https://www.cnblogs.com/betterself/p/6760721.html