目录
属性:每个标签有诸多属性，可以直接写在标签内部,用于指定内容样式/功能
基础概念
标签:使用标签指定功能，标签下面可以有子标签
标签实际上就是一个矩形
标题:<h1> -<h6>
段落:<p>
引入资源:<link>
常用于引入字体等资源，包含多个属性
href="url" :引入资源的url
rel="xxx":rel表示relation关系，指引用元素与当前页面之间的关系，常见为stylesheet样式表
type="":引用资源类型
如<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
引入图片:<img>
用于引入图片，需在属性内指定资源
src="url/uri":图片来源，可以为url，也可以为本地文件地址
width/heigh="xxxpx"指定大小
alt=“xxx”:图片无法正常显示时的替代文本
如：<img src="https://www.your-image-source.com/your-image.jpg">
外部链接:<a>
a即anchor（锚点），通过设置属性href指定跳转链接，同时外部写文本显示
可以使用 href="#"进行固定连接，仍跳转到本页
如果想设置跳转文字为图片，内部嵌套<img>即可
如:<a href="http://freecatphotoapp.com">cat photos</a>
无序列表:<ul>
ul即unordered list无序列表
ul用于声明无序列表，每一个表项用<li>声明
如：
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
有序列表:<ol>
ol即ordered list无序列表
ol用于声明有序列表，每一个表项用<li>声
如：
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
表单form:<form>
form用于指定web信息与服务器的交互，内部嵌入输入框，如<input>等进行显示,form主要用于表单数据的提交说明
action="url" ：将表单数据提交到指定url
name="xxx":为该表单项设置名字，后台读取表单参数时根据名字来读，不设置name则读不出来
如:
<form action="/submit-cat-photo">
<input name="xxx" type="text" placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>
表单输入框:<input>
<input>表输入，是自关闭的，会出现一个输入框，表单包含多种属性
type="xxx":指定输入类型，如text表文本,radio表单选按钮
placeholder="xxx:占位符，即在输入之前，输入框内显示的灰色的提示信息
required:通常写在最后，表示该输入框必须被填写
name="xxx":为该表单项设置名字，后台读取表单参数时根据名字来读，不设置name则读不出来
button显示一个按钮，内部有type属性表示该按钮的含义
type="xxx":表示按钮含义，如submit表示提交表单数据
单选按钮:<label><input type="radio" name="xxx" >xxx</label>
通常放置于表单form内,将input放置于label内，每一个label都成为一个单选框
checked:通常放最后，默认选中
复选框:<label><input type="checkbox" name="xxx"> xxx</label>
通常放置于表单form内,将input放置于label内，每一个label都成为一个复选框，即可以选择多个
checked:通常放最后，默认选中
分层:<div>
最外级:<body>
<body>是最外级的标签，任何显示标签都在<body>体内，因此body中的style声明的任何属性都会应用在该页面的所有标签上
行内元素修改:<span>
<span>内部可以使用class属性，对于文本来说，使用<span>声明的文本可以应用于特定class进行"渲染"
例:<p>Top 3 things cats <span class = "text-danger">hate:</span></p>
其中hate将变为红色
属性:每个标签有诸多属性，可以直接写在标签内部,用于指定内容样式/功能
如果属性写在标签内部则使用style="XXX"这样的写法，标签内部属性常用于引用其他资源，如class="xxx",id="xxx"
样式:指定标签内容的外貌
样式即属性或标签style
属性的style称为内联样式，如<p style="color:red">xxx</p>
标签style下就可以设置多个选择器，进行统一化处理
选择器:选择器将进行通用的属性设置
选择器放于<style></style>内部，形如
选择器名{
属性设置
}
选择器名可以是通用的标签名，也可以使自定义的内部属性
元素选择器:
选择器名是通用的标签名时就成为元素选择器，如
<style>
h2 {
color: blue;
}
</style><h2>LSL</h2>
类选择器:
在<style>下自定义的属性块，下边的元素通过class="xxx"进行引用的称为类选择器，类选择器名前要加上.进行标识,如
<style>
.red-text {
color: red;
}
</style><h2 class="red-text">LSL</h2>
可以使用多个class,用空格隔离即可
id选择器
任何一个标签都可以有id属性，代表该标签的唯一标识
使用#xx{}方式对id进行style控制
如:
<style>
#red-text {
color: red;
}
</style><h2 id="red-text">LSL</h2>
优先级:
属性后加关键字!important表示优先级最高,例：
.pink-text {
color: pink !important;
}
每个属性后写!important>内联样式>id选择器>类选择器
样式属性
样式属性形如color:red,内联样式中用逗号隔离，选择器中用;隔离
color:xxx 指定颜色
font-xx:字体
指定字体的样式
font-size:xxpx 指定字体大小
font-family:xx 指定字体样式
可以指定多个字体，当上一级字体不可用时自动使用下一个字体
border-xx:边框
指定边框的样式
border-color:xx 指定边框颜色
border-width: xx 指定边框宽度
border-style: xx 指定边框风格 border-radius:xxpx; 指定边框四个边角的(半径)弧度
padding:xxpx 内边距
文字内容与边框(border)之间的距离
padding-top: xxpx; 文字内容与边框顶部之间的距离，下同理
padding-right: xxpx;
padding-bottom: xxpx;
padding-left: xxpx;
也可以简写，padding: xxpx xxpx xxpx xxpx; 按顺时针旋转，即上右下左
margin:xxpx 外边距
内部元素边框与外部元素边框之间的距离
margin-top: xxpx; 内部元素边框与外部元素边框顶部之间的距离，下同理
margin-right: xxpx;
margin-bottom: xxpx;
margin-left: xxpx;
也可以简写，padding: xxpx xxpx xxpx xxpx; 按顺时针旋转，即上右下左
响应式设计Bootstrap
Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。
通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。
仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
首先，需要把所有的HTML内容放在class为container-fluid的div下
然后就可以使用Bootstrap中的class进行自动响应
文本<h><p>等:class="text-center" 使文本居中
图片<img>: class="img-responsive" 图片自动适应大小
按钮<button>:class="btn" 改变按钮样式
按钮<button>:class="btn-block" 改变按钮样式,使其长与整个块元素相等
按钮<button>:class="btn-primary" 改变按钮样式,使其为深蓝色，更加好看
按钮<button>:class="btn-info" 改变按钮样式,使其为浅蓝色，更加好看
按钮<button>:class="btn-danger" 改变按钮样式,使其为红色，更加好看
同理，对于其他元素，如text,也可以使用-primary/info/danger显示不同颜色,如text-primary即为深蓝色
Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。
<div class="row">:将所有元素放于div该div下，排列成一行，其中，所有元素都需要被一个<div class="col-xs-*">包含，其中xs并不固定，代表大小，如md 表示 medium (中等的)，xs 是 extra small 的缩写，*代表任意数字，代表列宽
例:
<div class="row">
<div class="col-xs-8"><h2 >Cat</h2></div>
<div class="col-xs-4"><a href="#"><img class="img-responsive " src="/images/relaxing-cat.jpg"></a></div>
</div>
将文本与图片放在了同一行
图标库Font Awesome
通过引用添加库:
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
引用之后即可使用font awesome的自定义标签和class,矢量图标可以任意嵌套
<i class="fa fa-info-circle"></i>：名为i的图标
<i class="fa fa-thumbs-up"></i>:大拇指图标
<i class="fa fa-trash"></i>:删除(垃圾桶)图标
<i class="fa fa-paper-plane"></i>:纸飞机图标