Copyright Notice
- The original author of this article: Brother Gu’s younger brother
- Author blog address: http://blog.csdn.net/lfdfhl
This section of the tutorial mainly talks about the global css related to typography
markup text
<mark/>Tags are used to mark up text.
delete text
<del/>Tags are used to delete text.
useless text
<s/>Tags are used to represent useless text.
insert text
<ins/>Labels are used to represent inserted text.
underlined text
<u/>Tags are used to represent underlined text.
small text
<small/>Labels are used to represent small text.
emphasis on text
<strong/>Tags are used to indicate emphasis on text.
italic text
<em/>Tags are used to denote italic emphasized text.
its way
Common alignment methods include: left alignment, right alignment, center alignment, automatic line wrapping beyond the container, no line wrapping beyond the container, etc.
case conversion
Common case conversions include: uppercase to lowercase, lowercase to uppercase, initial capitalization, etc.
Acronym
<abbr/>Labels are used to denote abbreviations.
address
<address/>Labels are used to represent addresses.
quote
<blockquote/>Labels are used to denote references.
unordered list
<ul/>Labels are used to represent unordered lists.
ordered list
<ol/>Labels are used to represent ordered lists.
Comprehensive case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap入门程序</title>
<!--移动设备优先，即获得更好的响应式支持-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入Bootstrap的css文件-->
<link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
</head>
<body>
<!--标记文本-->
<p>单例模式的<mark>核心</mark>在于通过该类只能创建一个对象</p>
<!--删除文本-->
<p>公司规定不允许上班时候<del>打游戏</del>，请切记</p>
<!--无用文本-->
<p>请注意这是一个<s>无用文本</s>，望悉知</p>
<!--插入文本-->
<p>十载寒冰，难凉热血；
<ins>多年过去，历经变迁，物是人非。</ins>
然而，对于技术的探索和追求从未停歇
</p>
<!--下划线文本-->
<p>十载寒冰，难凉热血；
<u>多年过去，历经变迁，物是人非。</u>
然而，对于技术的探索和追求从未停歇
</p>
<!--小号文本-->
<p>这里是版权声明<small>违者必究</small></p>
<!--着重文本-->
<p>曾于2016年、2020年两度荣获<strong>CSDN年度十大博客之星</strong>谢谢</p>
<!--斜体文本-->
<p>曾于2016年、2020年两度荣获<em>CSDN年度十大博客之星</em>谢谢</p>
<!--左对齐-->
<p class="text-left">大家好，我是谷哥的小弟</p>
<!--右对齐-->
<p class="text-right">大家好，我是谷哥的小弟</p>
<!--居中对齐-->
<p class="text-center">大家好，我是谷哥的小弟</p>
<!--超出容器自动换行-->
<p class="text-justify">大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。</p>
<!--超出容器不换行-->
<p class="text-nowrap">大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。</p>
<!--小写转大写-->
<p class="text-uppercase">hello Bootstrap</p>
<!--大写转小写-->
<p class="text-lowercase">HELLO BYE</p>
<!--首字母大写-->
<p class="text-capitalize">hello Bootstrap</p>
<!--缩略语-->
<p>
<abbr title="今年8岁">我</abbr>是一个好孩子
</p>
<!--地址样式-->
<address>
<strong>房东的猫</strong>
<p>上海市浦东区清风街9527好</p>
<a href="http://www.baidu.com">[email protected]</a>
</address>
<!--引用-->
<blockquote>
<p>public static synchronized SingletonInstance getInstance(){}</p>
</blockquote>
<blockquote style="border-left: 4px solid #ef0809; background: #f2eeec;">
<p>public static synchronized SingletonInstance getInstance(){}</p>
</blockquote>
<!--有序列表-->
<ul>
<li>小米</li>
<li>华为</li>
<li>三星</li>
<li>苹果</li>
</ul>
<!--无序列表-->
<ol>
<li>小米</li>
<li>华为</li>
<li>三星</li>
<li>苹果</li>
</ol>
<!--无样式列表-->
<ol class="list-unstyled">
<li>小米</li>
<li>华为</li>
<li>三星</li>
<li>苹果</li>
</ol>
<!--行内列表-->
<ol class="list-inline">
<li>小米</li>
<li>华为</li>
<li>三星</li>
<li>苹果</li>
</ol>
</body>
</html>
