一、思维导图
带你们了解一下这一章会给你们带来什么？你们会学什么？简不简单学？
二、排版（代码里面有注解）
页面主体：Bootstrap将全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。我们可以通过在页面按F12查看body的样式
段落突出：通过.lead类可以让段落突出显示，
标题：
1. h1- h6
2.<h1><small>副标题</small></h1>
3.class=”h1”...class=”h6”
内联文本元素:
标记：class=”mark”
线条:1、删除：<del>I like </del> 或者<s>I like</s>
2、下划线：<ins>I like </ins> 或者<u>I like</u>
强调文本: 1、小字体<small>：标准字号的85%
2、文本加粗：<strong>
3、文本倾斜：<em>
对齐:
1、居左：class=”text-left”
2、居中：class=”text-center”
3、居右：class=”text-right”
改变大小写:
1、大写：class=”text-uppercase”
2、小写：class=”text-lowercase”
3、首字母大写：class=”text-capitalize”
缩略词
1.当鼠标悬停在缩写和缩写词上就会显示完整内容
2.基本缩略语：<abbr title=”完整内容”>
3.首字母缩略语：<abbr title=”完整内容” class=”initialism”>
地址:
让联系信息以最近日常使用格式呈现
<address></address>
引用:
1、默认样式的引用：<blockquote> <footer>
2、右对齐样式引用：<blockquote class=”blockquote-reverse”>
列表:
1、有序列表：<ol><li> 同HTML
2、无序列表：<ul><li> 同HTML
3、无样式列表：<ul class=”list-unstyled”>,去掉li前面的点
4、内联列表：<ul class=”list-inline”>，li显示在一行
5、描述列表：<dl class=”dl-horizontal”>。 horizontal:水平
里面的jquery文件可以去网上下载，先给你们看效果图，后放代码
<!-- 引用文件 --> <!-- 先引用jq库 --> <script type="text/javascript" src="js/jquery-3.3.1.js"> </script> <script type="text/javascript" src="js/bootstrap.js"> </script> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <!-- 全局CSS样式 --> <h2>一、排版</h2> <h3 class="mark">1.1 段落突出</h3> <p>Bootstarp:排版、代码、表格</p> <p class="lead">Bootstarp:排版、代码、表格</p> <h3 class="mark">1.2 标题</h3> <h1>卓越人生，<small>从现在开始</small></h1> <p class="h1">卓越人生，从现在开始</p> <p class="h2">卓越人生，从现在开始</p> <p class="h3">卓越人生，从现在开始</p> <p class="h4">卓越人生，从现在开始</p> <p class="h5">卓越人生，从现在开始</p> <p class="h6">卓越人生，从现在开始</p> <h3 class="mark">1.3 内联文本元素</h3> <!-- 标记： --> I <span class="mark"> like </span> you 很久了 <!-- 删除： --> <del>I like </del> 或者<s>I like</s> <!-- 下划线： --> <ins>I like </ins> 或者<u>I like</u> <p><small>you like</small></p> <strong><p>you like</strong></p> <h1><p><em>you like</em></p></h1> <h3 class="mark">1.4 对齐</h3> <!-- 居左： --> <p class="text-left">卓越人生，从现在开始</p> <!-- 居中： --> <p class="text-center">卓越人生，从现在开始</p> <!-- 居右 -->： <p class="text-right">卓越人生，从现在开始</p> <h3 class="mark">1.5 改变大小写</h3> <!-- 1、大写：class=”text-uppercase” --> <span class="text-uppercase">i like you</span><hr /> <!-- 2、小写：class=”text-lowercase” --> <span class="text-lowercase">I like you</span><hr /> <!-- 3、首字母大写：class=”text-capitalize” --> <span class="text-capitalize">i like you</span><hr /> <h3 class="mark">1.6 略缩语</h3> <!-- 1、基本缩略语：<abbr title=”完整内容”> --> <abbr title="超文本标记语言">HTML</abbr>是一门超简单的网页语言<br> <!-- 2、首字母缩略语：<abbr title=”完整内容” class=”initialism”> --> <abbr title="超文本标记语言" class="initialism">HTML</abbr>是一门超简单的网页语 <h3 class="mark">1.7 地址</h3> <address>家庭地址：浪琴湾</address> <address>公司地址：梅溪湖></address> <h3 class="mark">1.8 引用</h3> <!-- 1、默认样式的引用：<blockquote> <footer> --> <blockquote>阳光总在风雨后<footer>丹</footer></blockquote> <!-- 2、右对齐样式引用：<blockquote class=”blockquote-reverse”> --> <blockquote class="blockquote-reverse">阳光总在风雨后<footer><cite>丹</cite></footer></blockquote> <h3 class="mark">1.9 列表</h3> <!-- 1、有序列表：<ol><li> 同HTML 2、无序列表：<ul><li> 同HTML 3、无样式列表：<ul class=”list-unstyled”>,去掉li前面的点 --> <ul class="list-unstyled"> <li>花间一壶酒</li> <li>独酌无相亲</li> <li>举杯邀明月</li> <li>对影成三人</li></ul>
三、代码（代码里面有注解）
内联代码：通过<code>标签包裹内联样式的代码片段
用户输入：通过<kbd>标签标记用户通过键盘输入的内容
基本代码块：多行代码可以使用<pre>标签，设置pre区域显示垂直滚动条：<pre class=”pre-scrollable”>
<h2>二、代码</h2> <h3 class="mark">2.1 内联代码</h3> <!-- 4、内联列表：<ul class=”list-inline”>，li显示在一行 --> <ul class="list-inline"> <li>月既不解饮</li> <li>影徒随我身</li> <li>暂伴月将影</li> <li>行乐须及春</li</ul> <!-- 5、<dl class=”dl-horizontal”>。 horizontal:水平 --> <dl class="dl-horizontal"> <dt>首页</dt> <dd>这是首页的信息</dd> <dt>卓京品牌</dt> <dd>卓越人生，从现在开始</dd> </dl> <!-- 2.1.通过<code>标签包裹内联样式的代码片段 --> <code>举杯邀明月，</code>对影成三人。 <h3 class="mark">2.2 用户输入</h3> <!-- 2.2.通过<kbd>标签标记用户通过键盘输入的内容 --> <kbd>Ctrl+C</kbd> <h3 class="mark">2.3 基本代码块</h3> <!-- 2.3.多行代码可以使用<pre>标签 --> <pre> 花间一壶酒，独酌无相亲 举杯邀明月， 对影成三人 </pre> <h3 class="mark">2.4 程序输出</h3> <!-- <pre class=”pre-scrollable”> --> <pre class="pre-scrollable"> 花间一壶酒，独酌无相亲 举杯邀明月， 对影成三人 </pre>
四、表格（代码里面有注解）
基本表格：<table class=”table”>
条纹状表格：<table class=”table table-striped”>
带边框表格：<table class=”table table-bordered”>
鼠标悬停：<table class=”table table-hover”>
紧缩表格：<table class=”table-condensed”>
状态类：
class=”active”:鼠标悬停在行或者单元格上时设置的颜色
.class=”success”:表示成功或积极的动作
Class=”info”:表示普通的提示信息或动作
Class=”warning”:表示警告或需要用户注意
Class=”danger”:表示危险或潜在的带来负面影响的动作
响应式表格：<table class=”table”>,给包括<table>的元素添加class=”table-responsive”
<h2>三、表格</h2> <h3 class="mark">3.1 基本表格</h3> <!-- 3.1.<table class=”table”> --> <table> <thead> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> </tbody> </table> <table class=”table”> <thead> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> </tbody> </table> <h3 class="mark">3.2 条纹表格</h3> <!-- 3.2.<table class=”table table-striped”> --> <table class=”table table-striped”> <thead> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> </tbody> </table> <h3 class="mark">3.3 边框表格</h3> <!-- 3.3.<table class=”table table-bordered”> --> <table class=”table table-bordered”> <thead> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> </tbody> </table> <h3 class="mark">3.4 鼠标悬停表格</h3> <!-- 3.4.<table class=”table table-hover”> --> <table class=”table table-hover”> <thead> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> </tbody> </table> <h3 class="mark">3.5 紧缩表格</h3> <!-- 3.5.<table class=”table-condensed”> --> <table class=”table table-condensed”> <thead> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> </tbody> </table> <h3 class="mark">3.6 状态表格</h3> <tr class="active"> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr class="success"> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr class="info"> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr class="warning"> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr class="danger"> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <h3 class="mark">3.7 响应式表格</h3> <tr class="table table-responsive"> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <br />
