Web基础
Posted hello4world
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web基础相关的知识，希望对你有一定的参考价值。
1.web前端（学习如何开发页面）
html 负责搭建页面结构和内容
CSS 负责美化页面
javascript 负责给页面添加动态效果和动态内容
jQuery 是js的框架，用于简化原生js代码
BootStrap 页面框架对html,css,jQuery进行封装，从而提高开发效率
2.数据库（学习如何对数据进行增删改查）
3.Servlet（学习如何接收请求和如何响应请求）
HTML
Hyper Text Markup Language超文本标记语言
html页面结构介绍
<!DOCTYPE html>//文档声明：用于告诉浏览器使用html哪个版本的标准解析页面，此写法是用html5的标准解析页面
<html>//根标签，除了文档声明都写在根标签里面
<head>//头标签，给浏览器看的内容写在头标签里面
<meta charset="UTF-8">//告诉浏览器页面字符集
<title>Insert title here</title>//告诉浏览器页面标题是什么
</head>
<body>//体标签，给用户看的内容写在体标签里面
</body>
</html>
html中常见标签
1.文本相关标签
1.1)内容标题：独占一行，自带上下间距，字体加粗
<h1>~<h6>
1.2)段落标签：独占一行，自带上下间距
<p>
1.3)加粗和斜体：没有独占一行
<b>bac</b> <i>abc</i>
1.4)换行
<br>
2.列表标签
2.1)无序列表unordered list
ul:type li//list item列表
2.2)有序列表
ol:type序号类型 start起始值 reversed降序 li
2.3)定义列表
dl定义列表 dt定义术语 dd定义描述
2.4)列表嵌套
有序和无序可以任意无限嵌套
3.图片标签
支持的图片格式：jpg/jpeg png(支持透明色) gif动图
3.1)src属性：图片路径
相对路径：访问站内资源一般使用相对路径
页面和图片在同一目录：直接写图片名
图片在页面的上级目录：../图片名
图片在页面的下级目录：文件夹名/图片名
绝对路径：访问站外资源一般使用绝对路径，也称为图片盗链，图片盗链好处：可以节省本站资源。坏处：可能找不到图片
alt：当图片不能正常显示时显示的文本
title：标题，鼠标在图片上悬停时显示的文本
width/height：两种赋值方式：1.像素 2.上级元素的百分比 body范围距离浏览器窗口边8个像素
如果只设置宽度则高度会等比例缩放
超链接 a标签
如果不加href属性就是纯文本
href：资源路径
页面资源：可以访问站内资源，也可以访问站外资源
文件资源：如果浏览器支持浏览则直接浏览，如果不支持浏览某文件则会触发下载
文本超链接和图片超链接：a标签包裹文本则是文本超链接，包裹图片就是图片超链接
表格table
tr： table row 行
td：table data表格数据（列）
border：边框粗细
th：table head表头
caption：表格标题
colspan="2"：跨2列
rowspan=2：跨2行
cellspacing：单元格间距
表单form
作用：用于获取用户输入的相关信息，将信息提交到服务器
控件：文本框 密码框 提交按钮 单选 多选 下拉选
action：提交地址
input：控件
type：类型
name：表单中的任何控件必须有name属性，服务端识别
<input type="submit" value="注册">//按钮
placeholder：占位文本（输入框中灰色的提示文本）
<input type="radio" checked="checked" value="male" name="gender">男 //radio单选 checked默认选中 value提交的内容
id="auto" type="checkbox"//多选
<label for="auto">自动登录</label> //label用于扩充点击范围
type="date"//日期选择器
type="file"//文件选择器
<select name="city">//下拉选
<option value="xxt" selected="selected">西乡塘</option>//选项，selected默认选中
实体引用（特殊字符）
空格：空格折叠现象，多个空格只能识别一个
大于号/小于号：< >
分区标签
作用：将多个相关标签添加到一个分区标签中，便于统一管理，可以理解成一个容器
div：独占一行
span：共占一行
一般页面至少分为三大区：<div>头</div> <div>正文内容</div> <div>脚</div>
html5中新增分区标签：（提高代码可读性）
1. header 头
2. article 文章
3. section 块、区域
4. footer 脚
5. nav 导航
h5页面区域
<header>头</header>
<article>文章正文</article> 或 <section></section>
<footer>脚</footer>
CSS
Casecading层叠Style样式Sheet表
作用：用于美化页面
CSS的引入样式：
内联样式：在标签中的Style属性里面添加代码样式，弊端：不能复用
内部样式：在head标签中添加Style标签，在标签体内写代码，好处：可以在当前页面复用，弊端：只能在当前页面复用，不能在多个页面复用
<style type="text/css">
h3{/*标签名选择器：选择页面中所有同名的标签*/
background-color: yellow;
}
</style>
外部样式：在单独的css文件中写样式代码，通过link标签引入到html页面中，好处：可以多页面复用，并且可以将html代码和css代码分离
<link rel="stylesheet" href="first.css">// 引入外部css文件
选择器
1.标签名选择器
格式： 标签名{样式代码}
2. id选择器
页面中任何标签都可以添加一个id属性，页面中的标签尽量不要重复
格式 #id{ 样式代码 }
3. 类选择器
格式： .class{样式代码}
场景： 当需要给页面中几个不相关的标签
4. 分组选择器
将多个选择器合并成一个选择器
.c1,#myh4,h5{ /* 分组选择器，将现有的多个选择器通过逗号合并成一个选择器 */
border:1px solid red;/* 一个像素的实线边框 */
}
5. 子孙后代选择器
通过元素之间的关系选择元素
div div span{ /* 子孙后代选择器，div里面的div里面的所有span */
color: red;
}
div span{ //span的父元素只要是div都会被选中
color: red;
}
6. 子元素选择器
通过元素之间的关系选择元素
格式：div>div>span{ 样式代码 }
7. 属性选择器
通过元素的属性选择
格式： 标签名[属性名=‘值‘]{ 样式代码}
8. 伪类选择器
选择的是元素的状态：未访问状态 访问过状态 悬停状态 点击状态
a:link a:visited a:hover a:active
9. 任意元素选择器
选择页面中所有的标签
格式： *{ 格式 }
各种常见样式
颜色赋值
三原色：红绿蓝 red green blue rgb 每种颜色取值范围0~255
1.颜色单词赋值 red/green
2.6位16进制赋值 #ff0000 红色
3.3位16进制赋值 #f00
4.3位10进制赋值 rgb(0~255,0~255,0~255) rgb(255,0,0)
5.4位10进制赋值 rgba(0~255,0~255,0~255,0~1) a=alpha透明度
背景图片
div{
width:200px;
height:200px;
background-color: rgb(255,0,0);
background-image: url("../imgs/a.jpg");
/* 修改背景图片尺寸 */
background-size: 100px 100px;
/* 禁止重复 */
background-repeat: no-repeat;
/* 控制位置 横向百分比 和 纵向百分比 */
background-position: 0% 100%;
}
显示方式：display
1.block：块级元素默认值，独占一行，可以修改宽高
2.inline：行内元素默认值，共占一行，不能修改宽高
3.inline-block：行内块，能修改宽高也能共占一行
盒子模型
宽高+外边框+边框+内边框=盒子模型
盒子模型之宽高
width,height：赋值方式有两种：1.像素 2.上级元素百分比
行内元素不能修改宽高，宽高由内容决定
盒子模型之外边距
元素距上级元素或相邻兄弟元素的距离称为外边距
/* 某个方向添加外边框 */
margin-left: 50px;
margin-bottom: 30px;
/* 上下20px 左右40px */
/* margin: 20px 40px; */
/* 居中 */
/* margin: 0 auto; */
/* 上右下左顺时针 */
margin: 10px 20px 30px 40px;
行内元素上下外边距无效
粘连问题：当元素的上边缘和上级元素的上边缘重叠时，给元素添加外边距，会出现粘连问题，给上级元素添加overflow:hidden解决
赋值方式：
margin-left/right/top/bottom:10px;
margin:20px; 四个方向全部20个元素
margin:20px 40px; 上下20px 左右40px
margin:0 auto;居中
margin：10px 20px 30px 40px; 上右下左
盒子模型之边框
赋值方式：border：边框粗细 样式 颜色；
border-left/right/top/bottom:边框粗细 样式 颜色;
圆角设置： border-radius: 20px; 值越大越圆
盒子模型之内边距
元素边框距内容的距离
赋值方式：和外边距类似
padding-left: 50px; /* 添加内边距宽度会受影响 */
margin-left: 50px; /* 添加外边距宽度不受影响 */
padding-left/right/top/bottom:20px;
padding:10px;四个方向10
pandding:10px 20px 30px 30px;上右下左
行内元素影响元素所占宽度不影响高度
文本相关样式
文本修饰：text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰;
水平对齐方式：text-align: left/center/right
文本颜色：color:blue;
行高：line-height: 50px;（改成和div高度一致，就可以看到高度居中效果）可以实现文本上下居中
font-size: 20px;/* 字体大小 */
font-weight: bold;/* 字体加粗 */
font-weight: normal;/* 去掉加粗 */
font-style: italic;/* 斜体 */
字体设置：font-family:xxx,xxx,xxx; font:字体大小 xxx,xxx,xxx;
CSS的三大特性
继承性
标签可以继承上级标签的文本和字体相关的样式，部分标签自带效果不受继承影响，比如超链接a标签 自带的字体颜色不受影响，h1-h6自带
的字体大小不受继承影响
层叠性
不同的选择器有可能选择到同一个标签，如果作用的样式不同则样式层叠到一起全部生效，如果作用到样式相同则由优先级决定哪个生效
优先级
作用范围越小优先级越高，id选择器>class选择器>标签名选择器>继承(属于间接选中)
body{
/* 设置全局样式 body里面所有标签都会继承 */
font:12px :"simhei", Arial, Helvetica, sans-serif;
font-weight: lighter;
}
定位方式：4+1种定位方式
position定位 4种
1.文档流定位(静态定位)，默认的定位方式
格式：position：static
特点：行内元素从左向右排列，块级元素从上到下排列
如何控制元素的位置：通过外边距margin控制
2.相对定位
格式：position：relative；
特点：元素不脱离文档流，通过left/right/top/bottom让元素从前位置做位置偏移
div:hover{
position: relative;/* 相对位置 */
/* 从元素初始位置做偏移 */
top: 20px;
left: 20px;
}
3.绝对定位
格式：position:absolute;
特点：元素脱离文档流(不占原来的位置)，通过left/right/top/bottom让元素相对于窗口或
某一个上级元素(在上级元素中添加相对定位)做位置偏移
position: relative;/* 做位置参考，必须是上级 */
/* 绝对定位 */
position: absolute;
left: 200px;
top: 70px;
4.固定定位
格式：position: fixed;
特点：元素脱离文档流，通过left/right/top/bottom让元素相对于窗口做位置偏移
/* 固定定位 */
position: fixed;
right: 50px;
bottom: 100px;
浮动定位 1种
float: left/right
特点：脱离文档流，从当前所在行向左或向右浮动，当撞到上级元素边框或其他浮动元素时停止
应用场景：当需要把纵向排列改成横向排列时使用浮动定位
如果一行装不下会自动换行，换行时有可能被卡住
clear: both;/* 禁止元素左右两侧出现浮动元素(不顶上去) */
元素浮动后，由于元素脱离文档流，后面的元素会顶上来，如果不希望后面元素顶上来，则给后面元素添加clear:both;
当元素的所有子元素全部浮动的时候自动识别的高度为0，通过给元素添加overflow: hidden;/* 解决自动识别高度为0的问题 */
溢出设置overflow
visible(默认值) 超出的部分显示
hidden 超出的部分隐藏
scroll 超出的部分滚动显示
如果需要对某个元素做位置的微调则使用position: relative;
list-style-type: none//去掉ul图标
JavaScript
作用：用于给网页添加动态效果和动态内容
语言特点：
1.js属于脚本语言，不需要编译，由浏览器解析执行
2.属于弱类型语言
3.基于面向对象
4.安全性高：js语言只能访问浏览器内部的数据，不能访问浏览器以外(磁盘中的各种数据)的数据
5.交互性高，由于js语言可以直接嵌入到html页面中，可以和用户直接进行交互
三种引入方式
内联：在标签的事件属性中添加js代码，当事件触发时js代码执行
<input type="submit" value="你瞅啥？" onclick="alert(‘瞅你咋滴！‘)" >
内部：在html页面中任意位置添加script标签，在标签体内写js代码，当页面加载时执行js代码
<script type="text/javascript">
alert("你再瞅试试")
</script>
外部：在单独的js文件中写js代码，通过script标签的src属性引入到html页面中
按代码顺序先后执行
JS语法
变量的声明和赋值 数据类型 语句 运算符 方法声明 面向对象
JS中只有对象类型
常见的对象类型
1.数值：number
2.字符串：string js中的字符串，可以用单引号或双引号修饰
3.布尔值：boolean true/false
4.未定义：undefined 当变量只声明不赋值时此变量的类型为未定义类型
5.自定义对象类型：object
变量声明和赋值
var x=10; //声明一个全局变量，页面中任意位置可以访问
let x=10; //声明一个局部变量，只能在作用域范围内访问
举例：
var x=10;
var s="abc";
var b=true;
var u; //类型为未定义
var p=new Person();
运算符 + - * / > < >= <= = == !=
==和===，==先统一类型再比较值，===先比较类型再比较值
除法运算，会自动转换整数和小数
typeof 获取变量的类型
typeof 66+6 "number6"
语句 if else while for do while switch case
和java大体相同
if和while括号里面的内容如果不是布尔值会自动转换成布尔值
转换规则：
数值： 0转false 其它true
字符串：""转false 其它true
未定义转false
null转false
for循环中的 int i 改成 var i 或 let i
方法声明
function 方法名(参数列表){方法体}
声明四种常见的方法
1.无参无返回值
2.无参有返回值
3.有参无返回值
4.有参有返回值
声明方法的三种方法：
1.function 方法名(参数列表){方法体}
2.var 方法名=function(参数列表){方法体}
3.var 方法名=new function("参数1","参数2","方法体");
页面相关的方法和属性
1.通过id获取页面中的元素对象
var d=document.getElementById("id");
d.innerText="呵呵";//修改div内容
alert(d.innerText);
2.通过标签名获取页面中的元素对象们
var arr=document.getElementsByTagName("img");
var arr=document.getElementsByClassName("c1");
3.获取和修改标签的文本内容
d.innerText="abc"; 修改
alert(d.innerText); 获取
4.获取和修改文本框的值
i.value; 获取
i.value="abc"; 修改
5.获取和修改标签的html内容
d.innerHTML="<h1>xx</h1>"; 修改
d.innerHTML 获取
NaN：Not a number
isNaN(x)：判断x是否是数 是NaN返回true 不是NaN返回false
开启定时器
var timer=setInterval(方法,时间间隔);
停止定时器
clearInterval(timer);
只执行一次的定时器
setTimeout(方法,时间间隔);
JavaScript对象分类
1.内置对象 包括：number String boolean .......
2.浏览器相关对象BOM (Brower浏览器Object对象Model模型)
3.页面相关对象DOM (Document文档Object对象Model模型)
BOM
window对象：
在window对象中的方法和属性称为全局方法和全局属性，调用时可以省略掉
window.
alert() parseInt() isNaN()
window中常见的方法：
alert()提示框 confirm()确认框，返回true/false prompt()弹出文本框，返回输入字符 parseInt()/parseFloat() isNaN()
window中常见的属性：
1.location位置
location.href 获取或修改浏览器的URL地址
2.history历史
history.length 历史页面的数量
history.back() 后退，返回上一个页面
history.forward() 前进，到后一个页面
history.go(n) n正值代表前进 负值代表后退 0代表刷新 值的大小代表前进或后退的次数
3.screen屏幕
screen.width/height;
screen.availWidth/availHeight;
4.navigator 导航/帮助
navigator.userAgen;获取浏览器的版本信息
通过css控制元素的显示和隐藏
隐藏：display:none
DOM相关
Document文档Object对象Model模型，页面相关的内容
学习dom主要学习的就是如何对页面的标签进行增删改查操作
查询标签
1.通过id查询标签
var d=document.getElementById("id");
2.通过标签名查询标签
var arr=document.getElementsByTagName("标签名");
var arr=document.getElementsByClassName("class");
3.获取body
document.body
创建标签对象
var h=document.createElement("h3");
h.innerText="创建的标签";
添加标签
父标签.appendChild(h);
删除标签
父标签.removeChild(被删除的标签对象);
修改文本内容
标签.innerText="xxxx";
修改html内容
标签.innerHTML="<xx></xx>";
修改css样式
标签.style.样式名="值";
h.style.width="300px"; h.style.backgroudColor="red";
样式名中的"-"去掉，并且变成驼峰命名法
<select onchange="myfn()" id="s1">//当下拉选值改变的时候触发onchange事件
事件相关：
什么是事件：事件就是系统提供的一些特定的时间点,事件包括：鼠标事件 键盘事件 状态改变事件
鼠标事件：onmouseover="overfn()" 移入 onmouseout="outfn()" 移出 onmousedown="downfn()" 按下
onmouseup="upfn()" 抬起 onmousemove="movefn()"> 移动
键盘事件：
onkeydown="keydown()"按下 onkeyup="keyup()" 抬起
event.keyCode 获取按键编码 String.fromCharCode(65)把按键编码转成字符
状态改变事件
1.onchange 值改变事件
2.onload 页面加载完成事件
3.onresize 窗口尺寸改变事件
//获取窗口的宽和高
var w=document.body.parentElement.clientWidth;
var h=document.body.parentElement.clientHeight;
事件的绑定
1.标签中添加事件属性
2.动态绑定，通过js代码绑定事件
事件传递(事件冒泡)：如果某一个范围需要响应多个事件，事件的响应顺序是从最底层标签往上层传递(类似于气泡从下往上 所以事件传递又称为事件冒泡)
JQuery
什么是JQuery：是一个通过js语言所写的js框架，实现了对原始js代码的封装，可以让程序员写的更少但实现的更多
JQuery优势：
1.简化JS代码
2.可以像css一样获取标签
js获取div：var arr=document.getElementsByTagName("div");
jq获取div：$("div");
3.可以像css一样批量修改样式
css修改div的字体颜色：
div{
color:red;
}
js 修改div的字体颜色
var arr=document.getElementsByTagName("div");
for(var i=0;i<arr.length;i++){
arr[i].style.color="red";
}
jq修改div的字体颜色
$("div").css("color","red");
4.可以解决部分兼容性问题
引入jq
由于jq就是通过js语言所写的js文件，引入方式和普通的js一样，通过script标签的src属性引入到页面中
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>//引入JQuery，里面不能再写js代码
$(function() { 代码 }) //jq中的页面加载完成事件
动态绑定事件
格式： $("#b2").click(function(){ });
获取文本框的值
js: i1.value
jq: $("#i1").val();
js对象和jq对象的互相转换
$("#b1").click(function(){//给按钮1添加事件
var js=document.getElementById("i1");//得到js对象
var jq=$(js);//把js对象转成jq
alert(jq.val());
});
$("#b2").click(function(){
var jq=$("#i1");//得到jq对象
var js=jq[0];//把jq转成js对象 jq对象本质就是一个数组
alert(js.value);
});
jq的选择器
基础选择器 写法和css一样
1.标签名选择器 $("div")
2.id选择器 $("#id")
3. 类选择器 $(".class")
4. 分组选择器 $("div,#id,.class")
5. 任意元素选择器 $("*")
层级选择器
1.$("div span") 匹配div里面所有的span
2.$("div>span") 匹配div里面所有的span子元素
3.$("div+span") 匹配div的弟弟元素span
4.$("div~span") 匹配div的弟弟们元素span
层级相关方法 ("div")括号里可添加参数
1.$("#abc").siblings() 获取id为abc元素的所有兄弟
2.$("#abc").prev() 获取id为abc元素的哥哥元素
3.$("#abc").prevAll() 获取id为abc元素的哥哥们元素
4.$("#abc").next() 获取id为abc元素的弟弟元素
5.$("#abc").nextAll() 获取id为abc元素的弟弟们元素
6.$("#abc").parent() 获取id为abc元素的父元素
6.$("#abc").children() 获取id为abc元素的子元素们
过滤选择器
1.$("div:first") 匹配所有div中的第一个
2.$("div:last") 匹配所有div中的最后一个
3.$("div:even") 匹配所有div中下标为偶数的元素
4.$("div:odd") 匹配所有div中下标为奇数的元素
5.$("div:lt(n)") 匹配所有div中下标小于n的元素
6.$("div:gt(n)") 匹配所有div中下标大于n的元素
7.$("div:eq(n)") 匹配所有div中下标等于n的元素
8.$("div:not(.abc)") 匹配所有div中下标class值不等于abc的元素
内容选择器
1.$("div:has(p)") 匹配包含p子元素的div
2.$("div:empty") 匹配包含空的div
3.$("div:parent") 匹配非空的div
4.$("div:contains(‘xx‘)") 匹配包含xx文本的div
可见选择器
1.$("div:hidden") 匹配所有隐藏的div
2.$("div:visible") 匹配所有可见的div
隐藏显示相关的方法
1.$("$abc").show() 让元素显示
1.$("$abc").hide() 让元素隐藏
1.$("$abc").toggle() 让元素在隐藏和显示之间切换
属性选择器
1.$("div[id]") 匹配包含id属性的div
2.$("div[id=‘xxx‘]") 匹配包含id属性值为xxx的div
2.$("div[id!=‘xxx‘]") 匹配包含id属性值不为xxx的div
子元素选择器
1.$("div:first-child") 匹配是div并且是子元素并且是第一个
2.$("div:last-child") 匹配是div并且是子元素并且是最后一个
3.$("div:nth-child(n)") 匹配是div并且是子元素并且是第n个 n从1开始
表单选择器
1.$(":input") 匹配表单中所有的控件
2.$(":password") 匹配表单中所有的密码框
3.$(":radio") 匹配表单中所有的单选
4.$(":checkbox") 匹配表单中所有的多选
5.$(":checked") 匹配表单中所有选中的单选、多选和下拉选
6.$("input:checked") 匹配表单中所有选中的单选和多选
7.$(":selected") 匹配表单中所有选中的下拉选
//jq提供了遍历jq内所有元素的方式：each 切记遍历的是js对象
$(":checked").each(function(){ //each方法用来遍历选中的对象
alert(this.value);//this代表遍历的数组中的js对象
});
增加元素对象
创建元素对象
js: var d=document.createElement("div");
jq: var d=$("<div id=‘xxx‘>abc</dib>");
添加到某个元素中
$("body").append(d); //添加到最后面
$("body").prepend(d); //添加到最前面
插入
$("#abc").before(d);//插入到id为abc元素的前面
$("#abc").after(d);//插入到id为abc元素的后面
删除标签
js: document.body.removeChild(d);
jq: $("#abc").remove(); //删除id为abc的元素
修改标签
修改标签的text 等效innerText
标签对象.text(); //获取
标签对象.text("xxxx"); //修改
修改标签的html 等效innerHTML
标签对象.html(); //获取
标签对象.html("<h1>xxx</h1>"); //修改
修改标签的css样式
标签对象.css("color"); //获取
标签对象.css("color","red"); //修改
标签对象.css({"width":"100px","height":"100px"}); //批量赋值
修改标签的属性
标签对象.attr("class"); //获取class的值
标签对象.attr("class","c1"); //修改标签class的值为c1
$("body>ul>li").click(function(){
$(this).children().toggle();//this代表触发事件的元素 是js对象 通过点击的li获取里面的ul，让其显示隐藏切换
});
code.jquery.com
border: 1px solid black;
border-collapse: collapse;/* 将两条线合并成一条线 */
var name=$(this).parent().siblings().eq(0).text();//eq(n)方法可以直接选择jq对象数组里的第n个，n从0开始
//事件源：触发事件的标签 只有动态绑定的事件方法中this代表的才是事件源
var obj=event.target || event.srcElement; // 获取事件源的另外一种方式：
获取事件源
事件源:触发事件的标签
在动态绑定的事件方法中，this就是事件源
获取事件源的方式：
var obj=event.target || event.srcElement;
事件模拟
格式：元素对象.trigger("事件名称");
hover方法
将鼠标移入移出合并到一个方法中
$("div").hover(function(){//当鼠标移入执行
$(this).css("color","red");
},function(){//当鼠标移出执行
$(this).css("color","green");
});
动画相关
<hr> //水平分割线
$("img").hide(3000,function(){ //隐藏动画，第一个参数时间间隔，第二个参数动画完成时执行的方法
$("img").show(2000);
});
//获取窗口的宽高
var w=document.body.parentElement.clientWidth;
var h=document.body.parentElement.clientHeight;
Bootstrap
是一个当前比较流行的前端框架，基于html/css/js/jquery实现 由Twitter公司开发
内部工作原理：只需要给标签添加class属性，Bootstrap会自动匹配到该标签添加各种样式
创建第一个Boots trap页面
官网下载地址： www.bootcss.com
<!-- 以下标签都可以作为按钮使用 -->
<input type="button" value="按钮a">
<a href="">按钮b</a>
<button>按钮c</button>
<input type="submit" value="按钮d">
class="well"
按钮
三种标签都可以作为按钮使用
input type="button/submin"
button
a
有不同的样式 参考文档
有不同尺寸 参考文档
字体图标
1.bootstrap自带图标 glyphicon glyphicon-asterisk
2.三方图标 fa fa-address-book
导航
标签式和胶囊式 参考文档
可展开的标签 参考文档
small字体标签
class="text-left/center/right"
响应式布局
根据不同的设备响应不同的样式
媒体查询：是Bootstrp中实现响应式布局的实现方式
/* 手机设备 */
@media (max-width: 768px) {
}
/* pad设备 */
@media (min-width: 768px) and (max-width: 992px) {
}
/* 普通电脑设备 */
@media (min-width: 992px) and (max-width: 1200px) {
}
/* 高分辨率设备 */
@media (min-width: 1200px) {
}
栅格系统 参考文档
一行有12列 可以任意组合
栅格嵌套 每嵌套一次 都会有新的12列划分
pull-right等效float:rigth
text-rigth是让文本在标签内部靠右对齐，pull-right是让标签在父标签中靠右对齐
设置内容多的时候的省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;/* 设置显示的行数 */
overflow: hidden;/* 设置超出范围不显示 */
以上是关于Web基础的主要内容，如果未能解决你的问题，请参考以下文章