HTML
组成格式
<html>
<head>
这里是文档的头部 ... ... ...
</head>
<body>
这里是文档的主体 ... ...
...
</body>
</html>
代码讲解：
- 称为根标签，所有的网页标签都在中。
- 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有
、
示例：
<html>
<head>
<meta charset="UTF-8">
<title>测试文件</title>
</head>
<body>
<h1>定义标题：标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p> 定义段落1 </p>
<p> 定义段落2 </p>
</body>
</html>
其他常见标签的使用方法
<html>
<head>
<meta charset="UTF-8">
<title>测试文件</title>
</head>
<body>
<!--注释不会在浏览器中显示。-->
<h1>定义标题：标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p> 定义段落1 </p>
<p> 定义段落2 </p>
<!--标签定义超链接，用于页面跳转 href指定跳转的目标位置-->
<a href="http://www.bitedu.vip/">比特社区</a>
<!--换行-->
<br />
<!--在from标签范围内的内容会被提交，通过submit-->
<form action="login" method="post">
用户名：<input type="text" name="username" placeholder="请输入用户名">
密码：<input type="password" name="password" placeholder="请输入密码">
<input type="submit">
</form>
<!--div代表一个块-->
<div style="color:green">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
<p>有序列表：</p>
<ol>
<li>打开手机</li>
<li>扫码支付</li>
<li>支付完成</li>
</ol>
<p>无序列表：</p>
<ul>
<li>打开手机</li>
<li>扫码支付</li>
<li>支付完成</li>
</ul>
<!--tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。 border="1"--规定表格边框的宽度-->
<table border="1">
<tr>
<th>学习课程</th>
<th>上课老师</th>
</tr>
<tr>
<td>Java</td>
<td>高博</td>
</tr>
</table>
</body>
</html>
CSS
CSS：CSS 指层叠样式表 (Cascading Style Sheets)
学习链接：https://www.w3school.com.cn/example/csse_examples.asp
第一个CSS程序：
<html>
<head>
<style type="text/css">
body {color:red}
h1 {color:#00ff00}
p.ex {color:rgb(0,0,255)}
</style>
</head>
<body>
<h1>第一个CSS程序</h1>
<p>hello my first css code</p>
<p class="ex">该标签class字段为ex，显示为蓝色</p>
</body>
</html>
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
示例-登录界面加入CSS样式
未加入CSS之前：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>收银台登录</title>
</head>
<body>
<div>
<h1>用户登录</h1>
<form action="login" method="post">
<input type="text" name="u" placeholder="用户名" required="required" />
<input type="password" name="p" placeholder="密码" required="required" />
<button type="submit" >登录</button>
</form>
<a href="register.html">注册账号</a>
</div>
</body>
</html>
加入CSS之后
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>收银台登录</title>
<!--链接外部的css样式，该样式是已经被别人写好打包的，这个样式的作用是：对整体的样式如文本输入框，button等整体排版-->
<link rel="stylesheet" href="css/normalize.css">
<!--接下来是对具体的按钮输入框进行更细节的调整-->
<style type="text/css">
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image:-moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff,#e6e6e6); background-image: -webkit gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));background-image: -webkit-linear-gradient(top,#ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6);background-repeat: repeat-x; filter:
progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6,GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0,0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6;
}
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius:5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de,#4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de,#4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x;
filter:progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4,GradientType=0); border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow:hidden; }
body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
background: #092756;
background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4)10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25)0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%);
background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4)10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4)100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%);
background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4)10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4)100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%);
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4)10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25)0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D',endColorstr='#092756',GradientType=1 );
}
.logindemo {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width:300px;
height:300px;
}
.logindemo h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input {
width: 100%;
margin-bottom: 10px;
background: rgba(0,0,0,0.3);
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
-webkit-transition: box-shadow .5s ease;
-moz-transition: box-shadow .5s ease;
-o-transition: box-shadow .5s ease;
-ms-transition: box-shadow .5s ease;
transition: box-shadow .5s ease;
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px
rgba(255,255,255,0.2); }
</style>
</head>
<body>
<div class="logindemo">
<h1>用户登录</h1>
<form action="login" method="post">
<input type="text" name="u" placeholder="用户名" required="required" />
<input type="password" name="p" placeholder="密码" required="required" />
<button type="submit" class="btn btn-primary btn-block btn-large">登录</button>
</form>
<br />
<a href="register.html" class="btn btn-primary btn-block btn-large">注册账号</a>
</div>
</body>
</html>
JavaScript
- HTML 定义网页的内容
- CSS规定网页的布局
- JavaScript对网页行为进行编程
在HTML中，JavaScript 代码必须位于 标签之间。
示例1：
<!DOCTYPE html>
<html>
<head>
<script>
//js代码
function myFunction() {
document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</head>
<body>
<h2>Head 中的 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
示例2用外部脚本：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>外部 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p>（myFunction 存储在名为 "myScript.js" 的外部文件中。）</p>
<script src="js/myScript.js"></script>
</body>
</html>
AJAX 简介
AJAX 是开发者的梦想，因为您能够：
- 不刷新页面更新网页
- 在页面加载后从服务器请求数据
- 在页面加载后从服务器接收数据
- 在后台向服务器发送数据
ajax的使用方式，但是在日常项目开发过程当中 会使用jQuery 库来进行：
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">修改内容</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "/example/js/ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
这张 HTML 页面包含一个
和一个 。
用于显示来自服务器的信息。 调用函数（当它被点击）。 该函数从 web 服务器请求数据并显示它 # jQuery **jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。** 代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"> </script>
<!--注释
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
-->
<!--或者-->
<script>
$(function() {
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>
jQuery和JavaScript的区别：
https://www.cnblogs.com/ytsbk/p/9033837.html
如何查找好的模板
源码之家：https://www.mycodes.net/
模板之家：http://www.cssmoban.com/cssthemes/
485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
