HTML,CSS,JS的介绍
主要总结了前端的一些必备的技术使用方法，加上一些个人的案例来结合，bootstrap框架的使用也是较为重要的，主要多结合案例进行实战操作上手更快。
1.HTML
HTML：是一种超文本标记语言，主要理解并大致会使用部分，如表单，表格，超链接等，简单的案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游html</title>
</head>
<body>
<!--
4行10列
第一行 10列合并
第二行 3列合并 5列合并 2列合并
第三行 10列
第四行 10列合并
-->
<table width="100%" cellspacing="0">
<tr>
<td colspan="10"><img src="../image/top_banner.jpg" width="100%"></td>
</tr>
<tr align="center">
<td colspan="3"><img src="../image/logo.jpg" alt=""></td>
<td colspan="5"><img src="../image/search.png" alt=""></td>
<td colspan="2 "><img src="../image/hotel_tel.png" alt=""></td>
</tr>
<tr align="center" bgcolor="orange" height="48">
<td><a href="#"><font face="宋体">首页</font></a></td>
<td><font face="宋体">门票</font></td>
<td><font face="宋体">酒店</font></td>
<td><font face="宋体">香港车票</font></td>
<td><font face="宋体">出境游</font></td>
<td><font face="宋体">国内游</font></td>
<td><font face="宋体">港澳游</font></td>
<td><font face="宋体">抱团定制</font></td>
<td><font face="宋体">全球自由行</font></td>
<td><font face="宋体">收藏排行榜</font></td>
</tr>
<tr>
<td colspan="10"><img src="../image/banner_3.jpg" width="100%"></td>
</tr>
</table>
<!--
2行4列
第一行 4列合并 下划线
第二行 图片 换行 添加文字 换行 价格
-->
<table cellspacing="2" cellpadding="2" width="100%" >
<tr>
<td colspan="4"><img src="../image/icon_5.jpg">黑马精选<hr color="orange" width="100%"/></td>
</tr>
<tr>
<td><img src="../image/jiangxuan_1.jpg" width="100%"><br/>
<font size="2" face="宋体">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)<br/>
<font color="red" size="3"><b>￥899</b></font></font></td>
<td><img src="../image/jiangxuan_1.jpg" width="100%"><br/>
<font size="2" face="宋体">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)<br/>
<font color="red" size="3"><b>￥899</b></font></font></td>
<td><img src="../image/jiangxuan_1.jpg" width="100%"><br/>
<font size="2" face="宋体">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)<br/>
<font color="red" size="3"><b>￥899</b></font></font></td>
<td><img src="../image/jiangxuan_1.jpg" width="100%"><br/>
<font size="2" face="宋体">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)<br/>
<font color="red" size="3"><b>￥899</b></font></font></td>
</tr>
</table>
<!--
3行4列
第一行 4列合并 下划线
第一列的2，3行合并
剩下的进行分开
-->
<table cellspacing="2" cellpadding="2" width="100%" >
<tr>
<td colspan="4"><img src="../image/icon_6.jpg">国内游<hr color="orange" width="100%"/></td>
</tr>
<tr>
<td rowspan="2"><img src="../image/guonei_1.jpg" ></td>
<td><img src="../image/jiangxuan_2.jpg" width="100%" ><br/>
<font size="2" face="宋体">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)<br/>
<font color="red" size="3"><b>￥899</b></font></font></td>
<td><img src="../image/jiangxuan_2.jpg" width="100%"><br/>
<font size="2" face="宋体">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)<br/>
<font color="red" size="3"><b>￥899</b></font></font></td>
<td><img src="../image/jiangxuan_2.jpg" width="100%"><br/>
<font size="2" face="宋体">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)<br/>
<font color="red" size="3"><b>￥899</b></font></font></td>
</tr>
<tr>
<td><img src="../image/jiangxuan_2.jpg" width="100%"><br/>
<font size="2" face="宋体">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)<br/>
<font color="red" size="3"><b>￥899</b></font></font></td>
<td><img src="../image/jiangxuan_2.jpg" width="100%"><br/>
<font size="2" face="宋体">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)<br/>
<font color="red" size="3"><b>￥899</b></font></font></td>
<td><img src="../image/jiangxuan_2.jpg" width="100%"><br/>
<font size="2" face="宋体">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)<br/>
<font color="red" size="3"><b>￥899</b></font></font></td>
</tr>
</table>
<!--
2行1列
-->
<table>
<tr>
<td><img src="../image/footer_service.png"></td>
</tr>
<tr>
<td bgcolor="orange" height="50" align="center"><font size="1" color="gray">江苏传智播客教育科技股份有限公司
版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882</font></td>
</tr>
</table>
</body>
</html>
2.CSS
CSS：它是一种层叠样式表，简单来说，css用来修饰的，增加样式，使效果更加美观。使用方法和案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#aa{
color:lightblue;
}
.bb{
color: gray;
}
</style>
</head>
<!--
1. 标签选择器，控制到所有同名的标签
2. 类选择器，控制多个标签属性 .类名{}
3. id选择器，通过属性id选择元素， #id{}
-->
<body>
<p id="aa">要落脚</p>
<p class="bb">你说你想要逃</p>
<p class="bb">偏偏注定</p>
<p>情灭了</p>
<p>爱熄了</p>
</body>
</html>
效果图：
使用选择器来不同程度的控制效果样式
案例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
box-sizing: border-box;
}
.box{
margin: 30px auto;
padding: 15px;
border: 8px solid #cccccc;
height: 600px;
width: 1000px;
}
.one{
float: left;
height: 100%;
width: 25%;
}
.two{
float: left;
height: 100%;
width: 50%;
}
.three{
float: left;
height: 100%;
width: 25%;
}
.text1{
color: #ffa500;
font-size: 18px;
}
.text2{
color: #999999;
font-size: 18px;
}
.table{
height: 100%;
width: 100%;
}
.put{
text-align: right;
}
.in{
height: 28px;
width: 220px;
border: 1px solid #cccccc;
border-radius: 5px;
}
.check{
height: 28px;
width: 120px;
border: 1px solid #cccccc;
border-radius: 5px;
}
.three span{
font-family: "宋体";
font-size: 18px;
}
.three a{
text-decoration: none;
font-size: 18px;
color: deeppink;
}
.button{
height: 35px;
width: 90px;
background-color: lightgrey;
border: 1px solid black;
border-radius: 3px;
}
.button:active{
background-color: deepskyblue;
}
</style>
</head>
<body>
<!--盒子部分-->
<div class="box">
<!--第一部分-->
<div class="one">
<p class="text1">用户注册</p>
<p class="text2">USER REGISTER</p>
</div>
<!--第二注册-->
<div class="two">
<table class="table">
<tr>
<td class="put">用户名</td>
<td colspan="2" ><input type="user" class="in"></td>
</tr>
<tr>
<td class="put"> 密码</td>
<td colspan="2" > <input type="password" class="in"> </td>
</tr>
<tr>
<td class="put">Email</td>
<td colspan="2"><input type="email" class="in"></td>
</tr>
<tr>
<td class="put">姓名</td>
<td colspan="2"><input type="name" class="in"></td>
</tr>
<tr>
<td class="put">手机号</td>
<td colspan="2"><input type="phone" class="in"></td>
</tr>
<tr>
<td class="put">性别</td>
<td colspan="2">
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
</td>
</tr>
<tr>
<td class="put">生日</td>
<td colspan="2"><input type="text" class="in"></td>
</tr>
<tr>
<td class="put">验证码</td>
<td><input type="text" class="check"></td>
<td><img src="../img/checkMa.png" title="点击刷新验证码"></td>
</tr>
<tr>
<td></td>
<td><button class="button">注册</button></td>
<td></td>
</tr>
</table>
</div>
<!--第三部分-->
<div class="three">
<span>已有账号?</span>
<a href="#">立即登录</a>
</div>
</div>
</body>
</html>
效果图：
3.JS(JavaScript)
JS：是一种运行在浏览器端的脚本语言
主要包含三个部分：核心部分，dom，bom
- 核心部分
主要介绍它的基本语法，函数，事件，数组，date等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--方法1：内嵌式-->
<script>
alert("欢迎访问")
/*
console.log();
console.warn();
console.error();
*/
</script>
</head>
<body>
<!--方法2：外联式-->
<script src="jsFile.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jsFile.js"></script>
</head>
<body>
<script>
for(var i=1;i<=9;i++){
var a = "<tr>";
for(var j=1;j<=i;j++){
document.write(j+"*"+i+"="+i*j);
document.write(" ")
}
document.write("<br/>");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="fighting" onclick="sayHello()" >
<script>
function sayHello() {
alert("you are a bad man");
}
</script>
</body>
</html>
- bom
主要分为五个部分
windows
navigate
screen
history
location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
alert(message):警告信息的提示
confirm(message)：带有确认选择框的信息
setInterval("函数",time)：按照指定的时间执行函数表达式
setTimeout(time)：指定毫秒后执行函数，只执行一次
clearInterval()：清除循环函数的执行
-->
<input type="button" value="start" onclick="_start()">
<input type="button" value="end" onclick="_end()">
</body>
<script>
// alert("sbsb");
// var flag = confirm("are you sure?");
// console.log(flag);
// setTimeout("_hello()",4000);
var intervalState;
function _start() {
intervalState = setInterval("_hello()",2000);
}
function _end() {
clearInterval(intervalState);
}
function _hello() {
console.log("aaa");
}
</script>
</html>
- dom
主要需要掌握节点的创建，删除，获得，移除和设置属性等，还是靠代码来掌握。
二级联动的案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
籍贯：
<select id="provinceId" onchange="_refresh(this)">
<option value="-1">-请选择-</option>
<option value="0">广东</option>
<option value="1">湖北</option>
<option value="2">山东</option>
</select>
<select id="cityId">
<option >-请选择-</option>
</select>
</body>
<script>
var citys = [["深圳","广州","惠州"],["黄冈","武汉","黄石","荆州"],["济宁","嘉祥","青岛"]];
var selEle = document.getElementById("cityId");
function _refresh(obj) {
//刷新数据
selEle.innerHTML= "<option>-请选择-</option>>";
// 1.获取省份的值
var proValue = obj.value;
console.log(proValue);
// 2.根据省份的值来获取城市
if(proValue>=0){
var city = citys[proValue];
// 3.遍历城市
for(var i = 0;i<city.length;i++){
var cityName = city[i];
console.log(city[i]);
// 4.把每个城市的值包装成<option>城市名</option>
//a.创建option标签
var opEle = document.createElement("option");
//b.创建文本标签
var textEle = document.createTextNode(cityName);
//c.文本添加到option中
opEle.appendChild(textEle);
// 5.把包装好的加入到select中去
selEle.appendChild(opEle);
}
}
}
</script>
</html>
效果：
4.bootstrap
bootstrap:是基于HTML，css，js的前端框架，是一种提高开发效率的工具（个人理解）
其中的栅格系统，全局css，组件，插件等都是使用起来非常方便的。
- 环境的搭建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../css/bootstrap.css">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<!-- 先引入jquery.js文件,才能引入bootstrap文件 -->
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
-
栅格系统
理解bootstrap框架的原理机制和使用方法：bootstrap会自动分为最多为12列的布局
col-xx-n:
xx–lg 大屏幕
xx–md 一般电脑端
xx–sm ipad
ss–xs 手机端
n: 表示占几列
如果元素在各种响应式情况下都是占一列，则直接写 class:row, 不必 class:col-md-12,col-sm-12,col-xs-12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../css/bootstrap.css">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<!-- 先引入jquery.js文件,才能引入bootstrap文件 -->
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--
bootstrap会自动分为最多为12列的布局
col-xx-n:
xx--lg 大屏幕
xx--md 一般电脑端
xx--sm ipad
ss--xs 手机端
n: 表示占几列
如果元素在各种响应式情况下都是占一列，则直接写 class:row, 不必 class:col-md-12,col-sm-12,col-xs-12
-->
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
<div class="col-md-4 col-sm-6 col-xs-12">栅格系统</div>
</body>
</html>
案例展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../css/bootstrap.css">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<!-- 先引入jquery.js文件,才能引入bootstrap文件 -->
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container" align="center">
<h2>显示所有联系人</h2>
<table class="table table-bordered table-condensed">
<tr class="success">
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<tr>
<td>1001</td>
<td>liu</td>
<td>male</td>
<td>21</td>
<td>安徽</td>
<td>10793017546</td>
<td>aaa@qq.com</td>
<td><button type="button" class="btn btn-default btn-sm">修改</button>
<button type="button" class="btn btn-default btn-sm">删除</button>
</td>
</tr>
<tr>
<td>1001</td>
<td>liu</td>
<td>male</td>
<td>21</td>
<td>安徽</td>
<td>10793017546</td>
<td>aaa@qq.com</td>
<td><button type="button" class="btn btn-default btn-sm">修改</button>
<button type="button" class="btn btn-default btn-sm">删除</button>
</td>
</tr>
<tr>
<td>1001</td>
<td>liu</td>
<td>male</td>
<td>21</td>
<td>安徽</td>
<td>10793017546</td>
<td>aaa@qq.com</td>
<td><button type="button" class="btn btn-default btn-sm">修改</button>
<button type="button" class="btn btn-default btn-sm">删除</button>
</td>
</tr>
<tr>
<td>1001</td>
<td>liu</td>
<td>male</td>
<td>21</td>
<td>安徽</td>
<td>10793017546</td>
<td>aaa@qq.com</td>
<td><button type="button" class="btn btn-default btn-sm">修改</button>
<button type="button" class="btn btn-default btn-sm">删除</button>
</td>
</tr>
<tr>
<td>1001</td>
<td>liu</td>
<td>male</td>
<td>21</td>
<td>安徽</td>
<td>10793017546</td>
<td>aaa@qq.com</td>
<td><button type="button" class="btn btn-default btn-sm">修改</button>
<button type="button" class="btn btn-default btn-sm">删除</button>
</td>
</tr>
<tr><td colspan="8" align="center"><button type="button" class="btn btn-primary btn-sm">添加联系人</button></td>
</tr>
</table>
</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
