开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> HTML+ CSS+JavaScript实战 ----仿慕课网【简单易上手】 -> 正文阅读

[JavaScript知识库]HTML+ CSS+JavaScript实战 ----仿慕课网【简单易上手】

Java学习打卡：第89天

javaWeb

Java养成计划（打卡第85天)

Web 项目 HTML+CSS + JavaScript+JQuery【JQuery很少，只有动画用到】

Web项目[仿慕课网项目]

这里为了熟悉前面的所学是指HTML和CSS加上JavaScript的部分内容。
需要源码请留言~~~~

界面展示

这里的界面效果如下

在这里插入图片描述

这里的界面是模仿的慕课网，中间的图片有滚动效果，可以自动切换图片；中间界面的目录中，鼠标放上去可以显示子目录。

界面布局

这里也没有引入Vue；也没有采用良好的布局；整个布局就4个盒子；最上方的div就是头部div；包括上方的衔接，logo，搜索框，还有登录和注册

最主要的是内容div，就是轮播图的整个部分，还包括旁边的目录

下方的是衔接图片div；包括web前端，PHP，java等几种语言的衔接

最下方的就是底部footer的div；包括微信公众号，微博等图标还有下方的衔接还有审核图样

<div id="header">
    
<div id="content" class="main postion-re">
    
<div id="pathBanner" class="path-banner">
    
<div id="footer">

这就是页面的几个主要的部分；剩下的就是完善每个部分

HTML代码部分展示

<!--头部的内容 -->
		<div id="header">
			<!-- 头部左侧的内容 导航栏-->
			<div class="header-left fl">
				<ul>
					<li>
						<a href = ""><img width="126px" height="72px" src="img/Cfeng官网(已去底).png" /></a>  <!-- 左侧的logo-->
					</li>
					<li class="margin-160"><a href="">项目</a></li>
					<li><a href="">路线</a></li>
					<li><a href="">猿问</a></li>
					<li><a href="">手记</a></li>
				</ul>
			</div>
			<!--网页头部右侧的内容 -->
			<div class="header-right fr">
				<!-- 输入框-->
				<div class="search-bar margin-r60 fl postion-re">
					<div id="searchOption">
						<a class="serrch-prompt postion-ab" href="">前端小白</a>
						<a class="serrch-prompt postion-ab left-70" href="">Java入门</a>
					</div>
					<input type="text" id="searchInput" />
					<a href=""><img width="18px" height="17.6px" class="serrch-prompt postion-ab top-30 right-0" src="img/SearchInput(已去底).jpg"/></a>
				</div>
				<ul class="login-register fl">
					<li><a href="">登录</a></li>
					<li><a href="">注册</a></li>
				</ul>
			</div>
		</div>

CSS代码部分展示

@charset "utf-8";
body,ul,li,img,div,a{
	margin: 0;
	padding: 0;
	font-family: "microsoft yahei","宋体",arial;
}

a{
	text-decoration: none;
}

ul{
	list-style: none;
}

html,body{
	position: relative;
	height: 100%;
	min-height: 850px;
}

img{
	vertical-align: middle;
	border: 0;
}

input,button,a{
	border: 0;
	outline: 0;
}

body{
	background-color: #fdfdfd;
}

.fl{
	float: left;
}

.fr{
	float: right;
}

.postion-re{
	position: relative;
}

.postion-ab{
	position: absolute;
}

.text-c{
	text-align: center;
}

.left-10{
	left: 10px;
}

.left-50{
	left: 50px;
}

.left-70{
	left: 70px;
}

.right-0{
	right: 0;
}

.top-30{
	top: 30px;
}

.margin-160{
	margin-left: 60px;
}

.margin-r60{
	margin-right: 60px;
}

/* 页面第一张背景图片*/
#first-bk{
	z-index: -1;
	width: 100%;
	height: 100%;
	background-image: url(img/Rrirst.jpg);
	background-size: 100%;
}
/* 页面顶部内容*/
#header{
	height: 80px;
	line-height: 80px;
}

#header a {
	color: #07111b;
}

#header a:hover{
	color: #FF0000;
}

/*页面导航部分*/
.header-left li{
	float: left;
}

.header-left a{
	padding: 0 20px;
	font-size: 16px;
}

/* 顶部输入框的样式*/
.search-bar{
	width: 240px;
	height: 60px;
}
/* 输入框*/
.search-bar input{
	width: 240px;
	height: 40px;
	border: 0px;
	border-bottom: 1px solid #ccc;
	line-height: 40px;
	font-size: 14px;
	padding-left: 10px;
	background: transparent;
}

.serrch-prompt{
	font-size: 14px;
	z-index:3;
}

/* 注册 登录样式*/
.login-register li{
	float: left;
}

.login-register a{
	padding-left: 30px;
}

JS代码部分展示

/**
 * 输入框点击效果
 * 输入框得到焦点，输入框的上方文字消失
 * 输入框失去焦点，判断输入内容是否为空，为空时上方文字显示 
 */
function searchBar() {
    var searchInput = document.getElementById('searchInput'),
        searchOption = document.getElementById('searchOption');
    searchInput.onfocus = function() {
        searchOption.style.display = 'none';
    }
    searchInput.onblur = function() {
        if (searchInput.value == '') {
            searchOption.style.display = 'block';
        }
    } 
}

/**
 * 轮播图实现方法
 * prev,next为左右切换按钮
 * list存放所有的图片
 */
function carousel() {
    var prev = document.getElementById('prev'),
        next = document.getElementById('next'),
        list = document.getElementById('list'),
        content = document.getElementById('content'),
        animited = false,
        time = 300,
        interval = 50,
        newleft = 1,
        speed = 1,
        timers;

    /**
     *执行动画的函数animite
     * offset为轮播图切换的距离
     * offset == 1200表示向左切换
     * offset == -1200表示向右切换
     */

    function animite(offset) {
        /**
         *newLeft为新的左边距,当前左边距+offset(要切换的距离)
         *speed为切换时的速度,是图片匀速切换,speed越大图片切换越快
         * animited表示一次只可以切换一张图片,如果当前图片没切换完,点击切换按钮无用
         * 防止用户一直点击左右切换按钮，图片一直切换
         */
        newleft = parseInt(list.style.left) + offset;
        speed = offset / (time / interval);
        animited = true;

        function go() {
            var num = parseInt(list.style.left);
            /**
             * 条件意思为(speed < 0)表示向右切换,(speed > 0)向左
             * (num > newleft)/(num < newleft)判断是否到达目标位置
             * setTimeout只执行一次,没有到达目标位置时继续使用定时器setTimeout(go, interval)
             * 
             * 图片到达位置之后，还会再执行一次else里面的内容
             * animited = false,点击按钮允许切换
             * 如果发现图片切换到(newleft > -1200) 等于newleft = 0存放的是最后一张图片,把它换到真正的位置上
             * 如果发现图片切换到(newleft < -3600 ) 等于newleft = -4800存放的是第一张图片,把它换到真正的位置上
             */
            if ((speed < 0 && num > newleft) || (speed > 0 && num < newleft)) {
                list.style.left = num + speed + 'px';
                setTimeout(go, interval);
            } else {
                animited = false;
                list.style.left = newleft + 'px';
                if (newleft > -1200) {
                    list.style.left = -3600 + 'px';
                }
                if (newleft < -3600) {
                    list.style.left = -1200 + 'px';
                }
            }
        }

        go();
    }
    /**js定时器，每隔七秒切换图片，
     *自动切换按钮
     */

    function play() {
        timers = setInterval(function() {
            prev.onclick();
        }, 7000);
    }

    /**
     * 鼠标移至清除定时器
     */
    function stop() {
        clearInterval(timers);
    }

    /**
     * 左右切换按钮
     */
    next.onclick = function() {
        if (!animited)
            animite(1200);
    }
    prev.onclick = function() {
        if (!animited)
            animite(-1200);
    }

整个项目看着代码挺多，但是构思特别简单，如果感兴趣可以写一写~🌳

接下来再分享一些书本上的遗漏的知识

虽然现在前端最火的还是react和Vue，Jquery有点淘汰了，但是存在即合理，可以看看其合理之处，毕竟曾经Jquery很流行

HTML补充

之前已经介绍了HTML中的很多常见的标签和重要的表单，接下来将补充一点HTML的遗漏之处

URL,HTTP,HTML介绍

这几个概念已经介绍过很多次，但是因为还是挺重要的，这里再解释一下

URL uniform resource locator 统一资源定位符，是互联网标准资源（文件）的地址。URL包括此恶意、服务器地址（IP）、路径和文件名。比如JDBC中的连接对象中的URL

jdbc:mysql://localhost:3306/basename?serverTimezone =GMT%2B8

这里的?serverTimezone=2B8是时区

HTTP hyperText transfer protocol 超文本传输协议是互联网上应用最广泛的一种网络协议。可以使用HTTP在浏览器于服务器之间传输图像和其他类型的文件默认使用80端口。当用户在地址栏输入网址后，浏览器于服务器建立TCP连接，发送HTTP请求，服务器解释后返回一个响应消息。常见的状态代码由200 OK 404 NOT FOUND 403 Forbidden
HTML hyperText markup language 超文本标记语言。浏览器依次显示识别出的标记内容，不能识别的标记不做处理，跳过继续解释执行

特殊的注释【条件注释】

因为IE浏览器的特殊性，除了可以使用普通的注释; 可以使用条件注释；条件注释中的代码只有IE浏览器会执行，其他的浏览器当作普通的注释忽略

<!-- 我是注释，所有浏览器通用-->

<!--[if IE]>
正常的html代码       --------只有IE浏览器会解释执行
<![end if]-->

HTML头部元素

之前的HTML设计中，并没有明确头部的元素。head元素是所有头部元素的容器，里面可包含脚本，指示样式表。提供元信息。head中常用的标签是title link meta script style

title 可以设置网页浏览器工具栏中的标题，提供页面添加到收藏夹时的标题
meta 提供关于HTML文档的元数据；元数据不会显示在页面上，meta可用于规定页面的描述、关键词和文档的作者，最后的修改事件和其他的元数据。

<head>
    <meta 可选属性名="……" content="……"/>
</head>

content是meta标签的必选属性，作用是描述页面的内容，HTML5的设置编码的格式为

<meta charset="utf-8"/>

这里只是说明浏览器解释文档的编码方式，但是不可能改变本身的编码方式

可用http-equiv属性搭配content用来网页的自动刷新，在js也有自动执行的周期函数setInterval 和返回值给clearInterval

<meta http-equiv="Refresh" content="5"/>  <!--网页每隔5秒刷新-->

可用name属性和content组合来指定页面的作者、关键字和描述等信息

将那么设置为Keywords，就可以设置页面的关键字；name设置为Decription，就可以是网页的描述

<meta name="Keywords" content="教育，java学习"/>
<meta name="Description" content="Cfeng.com是以java学习为主，拥有完整的java学习路线，同时包含各种CS专业知识，为IT深入学习助力"/>

这里再看一下京东页面的制作

<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">

CSS和HTML属性的区别

HTML标签的属性和CSS的属性是完全不同的，不同HTML标签具有不同的属性，属性设置使用=；CSS用于设置独立样式，与HTML标签无关，CSS属性设置使用: CSS是专门用来修饰网页的。所以大部分时候修饰使用的是CSS，少部分直接使用属性

div嵌套展示

现在电商项目最主要的部分就是商品的展示框，这里就书写一个商品的展示框

一个商品应该放在一个大的div中，这个div包含4个div，最上面是图片div，下面是价格显示div，再下面是评价div；最下面是文字简介div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品展示</title>
	</head>
	<body>
		<div style="border: 1px solid aliceblue;width: 232px;height: 300px;"> <!-- 最外层的div-->
			<div style="text-align: center;">
				<a title="Cfeng.com,为你的IT学习助力" href="DOMstudy.html" target="_blank"> <!--title设置悬停的时候的显示内容-->
					<img width="165" height="165" src="img/Cfeng%20logo.PNG" />
				</a>
			</div>
			<div style="font-size: 16px;color: red;text-align: center;">
				<span style="color: black;"><b>￥</b></span>12980.00    <!--span用于定义不同的颜色-->
			</div>
			<div style="font-size: 14px;text-align: center;line-height: 28px;color:dimgray">
				已有<a style="color: #FF0000;" href="JavaScriptstudy.html" target="_blank">50+</a>人评价
			</div>
			<div style="font-size: 12px;color: dimgrey;">
				Cfeng.com,为你的IT学习助力,让你的学习不再困难
			</div>
		</div>
	</body>
</html>

就是最外层一个大的div，里面四个小的div

商品展示

￥12980.00

已有 50+人评价

Cfeng.com,为你的IT学习助力,让你的学习不再困难

块语句不能嵌套再行内元素中

< ol>标签的type

之前的列表分享的时候，分享了无序列表ul的type；但是没有介绍ol的type，ol的type有4类

1 默认数字1，2，3……
A 大写英文字母 A,B,C,D,……
a 小写英文字母 a，b………
I 大写罗马字母 I II III ……
i 小写罗马字母 i，ii，iii……

通过CSS设置列表符号制作导航栏

在实际操作中，不赞成使用标签的type属性，建议使用CSS的list-style-type属性

因为CSS是专门的样式表设计，所以样式设计主要依靠CSS

这里演示设置一个简单的垂直导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直导航栏</title>
	</head>
	<body>
		<div>
			<ul style="width: 150px;height: 100px;background-color: lavender;list-style-type: none;">
				<li style="height: 30px;line-height: 30px;">
					<a href="DOMstudy.html" target="_blank" style="font-size: 14px;color: aqua;">家用电器</a>
				</li>
				<li style="height: 30px;line-height: 30px;">
					<a href="JSON.html" target="_blank" style="font-size: 14px;color: aqua;">手机</a>
					<span style="font-size: 12px;">/</span>
					<a href="JavaScriptstudy.html" target="_blank" style="font-size: 14px;color: aqua;">数码</a>
				</li>
				<li style="height: 30px;line-height: 30px;">
					<a href="study.html"target="_blank"style="font-size: 14px;color: aqua;">电脑办公</a>
				</li>
			</ul>
		</div>
	</body>
</html>

垂直导航栏

这里的导航栏给整个列表设置了高度的样式，并且设置了背景色；每一个项设置了高度间距；这里对/设置了span行内标签来设置字体大小

使用div和span布局表单

之前的表单都是使用的table来进行的布局，但是使用table不是很灵活，有很大的局限性；所以还是使用div和span来进行美化.

可以简单规划一下，首先整个表单放置在div中，每一行设计两个span；前面的span为100px，右对齐；后面为一个span，宽度为200px，放置表单元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div表单</title>
		<meta name="keywords" content="账号注册" />
		<meta name="description" content="注册" />
		<style type="text/css">
			.main{
				width: 500px;
			}
			.tip{
				display: inline-block; //行内块元素  这样width属性才有效
				width: 100px;
				height: 30px;
				text-align:right;
			}
			.content{
				display: inline-block;
				width: 200px;
				height: 30px;
				line-height: 30px;
				text-align: left;
			}
			.subm{
				display: inline-block;
				text-align: center;
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div id="haomaTitle" class="haomaTitle">
			<form action="JSON.html" method="get">
				<div class="main">
					<span class="tip">用户名:</span><span class="content"><input type="text" name="uname"/></span><br>
					<span class="tip">密码:</span><span class="content"><input type="password" name="pwd"/></span><br>
					<span class="tip">确认密码:</span><span class="content"><input type="password"/></span><br>
					<span class="tip">性别:</span>
					<span class="content">
						<input name="sex" type="radio" value="man" />男
						<input name="sex" type="radio" value="woman"/>女
					</span><br>
					<span class="tip">出生年月</span>
					<span class="content">
						<select name="year">
							<option value="2017">2017</option>
							<option value="2018">2018</option>
							<option value="2019">2019</option>
							<option value="2020">2020</option>
						</select>
						<select name="month">
							<option value="12">12</option>
							<option value="11">11</option>
							<option value="10">10</option>
						</select>
					</span><br>
					<span class="subm"><input type="submit" value="立即注册"/></span>
				</div>
			</form>
		</div>
	</body>
</html>

需要注意span不会自动换行，需要手动换行;这里整个表单放在最大的div中

HTML5

之前的分享中只有图片或者普通的文件的操作，HTML5是支持音频或者视频的。

audio音频

在audio标签中嵌入source标签，属性src放文件的地址，type为audio/ogg或者mpeg

video视频

也是在vedio标签中嵌入source标签，就可以放入网页了

新的按钮input

date 日期选择器中选择一个日期
datetime-local 选择一个日期UTC
email 输入邮箱地址
month 选择一个月份
range 包含在一定范围的数值有max和min 显示为滑动条
url 包含url地址的输入域，提交表单时，会进行自动验证

<audio controls>
			<source src="" type="audio/mp3"/>
		</audio>
		<video width="320" height="240" controls>
			<source src="img/shangchuanship.mp4" type="video/video/mp4"></source>
		</video>