关于前端知识的小总结

程序员文章站 2022-03-13 22:43:14

...

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("&nbsp;")
        }
        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>

主要分为五个部分
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.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.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.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.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.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>

关于前端知识的小总结

上一篇： poj2210 - Metric Time

下一篇： poj1007 - DNA Sorting

关于前端知识的小总结

HTML,CSS,JS的介绍

1.HTML

2.CSS

3.JS(JavaScript)

4.bootstrap

关于文本框的一些限制控制总结~~

Java中的时间日期API知识点总结

你该知道的Gradle配置知识总结

跟老齐学Python之关于循环的小伎俩

关于委托的一些知识

Android小知识之OkHttp的2种请求方式详解

Android小知识之图片的3种压缩方式小结

Kotlin开发的一些实用小技巧总结

Oracle 数组的学习小知识也要积累，养成好的学习态度

Nginx设置为Node.js的前端服务器方法总结

关于前端知识的小总结

HTML,CSS,JS的介绍

1.HTML

2.CSS

3.JS(JavaScript)

4.bootstrap

关于文本框的一些限制控制总结~~

Java中的时间日期API知识点总结

你该知道的Gradle配置知识总结

跟老齐学Python之关于循环的小伎俩

关于委托的一些知识

Android小知识之OkHttp的2种请求方式详解

Android小知识之图片的3种压缩方式小结

Kotlin开发的一些实用小技巧总结

Oracle 数组的学习 小知识也要积累，养成好的学习态度

Nginx设置为Node.js的前端服务器方法总结

Oracle 数组的学习小知识也要积累，养成好的学习态度