我的位置:首页 > 前端>4.content:内容

4.content:内容

时间:2020-05-30 20:32:00 来源:互联网 作者: 神秘的大神 字体:

# 4.content:内容

- 1. 重置
    (1) 更新部分浏览器的预设值,在可能变动的文字间距上使用rem代替em
    (2) 避免使用margin-top。垂直边缘可能发生重叠,产生无法预料的错误。
    (3) 为了设备之间轻松缩放,block元素应该在margin上采用rem
    (4) 尽可能使用继承将字体相关属性的声明保持在最低限度
- 2. 排版
- 3. 代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <!--标题:.h1-h6 -->
    <p class="h1">hello</p>

    <!-- 超大标题:.display-1 -->
    <div class="display-1">hello</div>

    <!-- 引言:.lead -->
    <p class="lead">hello</p>

    <!-- 内联文本:.lead -->
    <p>可以使用mark标签来标记<mark>重点</mark>词汇</p>
    <p><del>这是一段被删除的文本</del>,<ins>这是一段新插入的文本</ins></p>
    <p><small>这段文本字体会小一些</small></p>
    <p><strong>这是加粗的文本</strong></p>
    <p><em>这是倾斜的文本</em></p>
    <p><span class="mark">用.mark代替mark标签</span>,<span class="small">用.small代替small标签</span></p>

    <!--缩写-->
    <p><abbr title="attrbitue" class="initialism">attr</abbr></p><!--.initialism可以让字体变得小一点-->

    <!--引用 与 署名-->
    <blockquote class="blockquote">
        <p>时间就像海绵里的水,只要愿挤,总是还有的</p>
        <footer class="blockquote-footer">来自<cite>鲁迅</cite></footer>
    </blockquote>

    <!--对齐-->
    <p class="text-left">这是一段话,一段不知道说什么的话</p>
    <p class="text-center">这是一段话,一段不知道说什么的话</p>
    <p class="text-right">这是一段话,一段不知道说什么的话</p>

    <!--
        列表相关
    -->
    <!--无特效列表-->
    <ul class="listunstyled">
        <li>red</li>
        <li>
            <ul class="listunstyled">
                <li>blue</li>
            </ul>
        </li>
    </ul>

    <!--li并列一行-->
    <ul class="list-inline">
        <li class="list-inline-item">red</li><!--3.x版本是不需要在li上添加class的-->
        <li class="list-inline-item">blue</li>
        <li class="list-inline-item">green</li>
    </ul>

    <!--text-truncate可以让超出的内容省略,3.x版本里使用的是text-overflow-->
    <div class="container-fluid">
        <dl class="row">
            <dt class="col-sm-3 text-truncate">高,高实在是高,高,高实在是高,高,高实在是高,高,高实在是高</dt>
            <dd class="col-sm-9">是汉语通用规范一级字。此字始见于商代甲骨文。此字本义为上下距离大,引申指上下的距离,又引申指山陵、高处,由此义又可指在一般标准或平均程度之上的。</dd>
            <dt class="col-sm-3">富</dt>
            <dd class="col-sm-9">汉语常用字,读作fù,最早见于金文,其本义是完备,即《说文解字》所谓的“备也”。后引申为财产多、使富裕等含义。</dd>
            <dt class="col-sm-3">帅</dt>
            <dd class="col-sm-9">现代如果用于形容人,则指男性相貌俊朗 ,如:这人长得真帅;军中之主曰帅。帅(shuài)从垖从巾(1)(形声)率</dd>
        </dl>
    </div>

    <!--
        代码
    -->
    <p>要在这个段落里写上<code>&lt;html&gt;</code>的html标签</p>
    <pre class="pre-scrollable">
        <code>
            &lt;h1&gt;这是一个标题&lt;h1&gt;
            &lt;p&gt;这是一段文字&lt;p&gt;
            &lt;p&gt;这些代码放在code里,再放到pre标签里,给pre标签来上一个pre-scrollable的class,就会显示成一个340px高的框,超过后就会出现滚动条&lt;p&gt;
        </code>
    </pre>

    <!--变量-->
    <var>y</var> = <var>m</var><var>x</var> + <var>b</var>

    <!--按钮-->
    <p>想保存,请按<kbd>ctrl</kbd>+<kbd>s</kbd></p>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
```

- 4. 图片

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <img src="./7.jpg" alt="" class="img-fluid">
        </div>

        <div class="row">
            <!-- 缩略图:img-thumbnail -->
            <div class="col-md-4">
                <img src="./7.jpg" alt="" class="img-thumbnail">
            </div>

            <!-- 圆角图片:rounded -->
            <div class="col-md-4">
                <img src="./7.jpg" alt="" class="rounded img-fluid">
            </div>
        </div>
        <!-- 图片对齐方式:自己对齐的话通过浮动 -->
        <div class="row">
            <div class="col">
                <img src="./7.jpg" style="height:200px;" class="float-left" alt="">
                <img src="./7.jpg" style="height:200px;" class="float-right" alt="">
            </div>
        </div>
        <!-- 图片对齐方式:通过父级调整对齐,使用文本的对齐方式 -->
        <div class="row">
            <div class="col text-right">
                <img src="./7.jpg" style="height:200px;" alt="">
                <img src="./7.jpg" style="height:200px;" alt="">
            </div>
        </div>
        <!-- 图片对齐方式:自己居中,先要变成block,然后在使用margin:0 auto; -->
        <div class="row">
            <div class="col">
                <img src="./7.jpg" style="height:200px;" class="d-block mx-auto" alt="">
            </div>
        </div>

        <!-- 
            picture标签中可以放置很多图片,可以配合媒体查询,在不同的尺寸下加载不同尺寸的图片 
            picture标签支持情况:>= ios9.3 || android4.4
        -->
        <div class="row">
            <picture>
                <source media="(min-width:1200px)" srcset="./1140.jpg">
                <source media="(min-width:992px)" srcset="./960.jpg">
                <source media="(min-width:768px)" srcset="./720.jpg">
                <source media="(min-width:576px)" srcset="./540.jpg">
                <img src="./7.jpg" alt="">
            </picture>
        </div>
        <!-- .webp:图片的格式。图片大小很小且是高清图片 -->
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
```

- 5. 表格

中文网址链接表格部分:http://bs4.vx.link/index.html?tmpui_page=/pages/content

- 6. 图文区
图片下面跟了一行标题
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <figure class="figure">
                <img src="./7.jpg" alt="" class="img-fluid rounded figure-img">
                <figcaption class="figure-caption text-center">星汉灿烂</figcaption>
            </figure>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
```
 
以上是markdown格式的笔记