# 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><html></code>的html标签</p>
<pre class="pre-scrollable">
<code>
<h1>这是一个标题<h1>
<p>这是一段文字<p>
<p>这些代码放在code里，再放到pre标签里，给pre标签来上一个pre-scrollable的class，就会显示成一个340px高的框，超过后就会出现滚动条<p>
</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" class="img-fluid">
</div>
<div class="row">
<!-- 缩略图：img-thumbnail -->
<div class="col-md-4">
<img src="./7.jpg" class="img-thumbnail">
</div>
<!-- 圆角图片：rounded -->
<div class="col-md-4">
<img src="./7.jpg" class="rounded img-fluid">
</div>
</div>
<!-- 图片对齐方式：自己对齐的话通过浮动 -->
<div class="row">
<div class="col">
<img src="./7.jpg" style="height:200px;" class="float-left" >
<img src="./7.jpg" style="height:200px;" class="float-right" >
</div>
</div>
<!-- 图片对齐方式：通过父级调整对齐，使用文本的对齐方式 -->
<div class="row">
<div class="col text-right">
<img src="./7.jpg" style="height:200px;" >
<img src="./7.jpg" style="height:200px;" >
</div>
</div>
<!-- 图片对齐方式：自己居中，先要变成block，然后在使用margin:0 auto; -->
<div class="row">
<div class="col">
<img src="./7.jpg" style="height:200px;" class="d-block mx-auto" >
</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" >
</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" 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>
```
