HTML快速入门
HTML是超文本标记语言，是由很多预定义的标签组成的，每一种标签有其特殊的含义，这些标签能被浏览器识别并且渲染出不同的显示效果。HTML文档也俗称网页，是网站的重要组成部分。
- HTML文档结构
<html lang="en">
<head>
<meta charset="utf-8">
<title>入门案例</title>
<style>
/*样式控制*/
</style>
</head>
<body>
<h1 align="center">这是我的第一个HTML入门案例</h1>
</body>
</html>
HTML基本语法
注释
<!-- 解释说明的文字，快捷键：ctrl+shift+/ -->
标签规范
- 标签分类
- 开始结束标签：<h1></h1>
- 自闭合标签： <br/>
- 标签嵌套
- 正确的嵌套：<h1><u>文本</u></h1>
- 错误的嵌套：<h1><u>文本</h1></u>
- 块级元素和行内元素
- 块级元素：在页面中以块形式展现，自己独占一行，后面的内容自动换行。
如：<p> <hr> <div>
- 行内元素：在页面中以行形式展现，不会换行。
如：<b> <i> <u> <span>
- div和span
div和span没有特殊的语义，是一个通用的容器标签。一般用来对其他标签进行分组、布局、设置样式等操作。
<div>: 是一个通用的内容容器(块级元素)，可以用来嵌套其他标签。
<span>: 是一个通用的行内容器(行内元素)，可以用来嵌套其他标签。
属性规范
属性用来给标签添加一些额外的信息，如给标签设置颜色，宽高等。
- 属性格式
<标签名 属性名="属性值"> 标签体 </标签名>
- 常见的属性
class: 定义元素的类名，用来对元素进行分类
id: 定义元素的唯一标识(强烈建议不要重复)
name: 定义给元素取得名称，用于表单提交
value: 定义元素内显示的值，用于表单提交
- 特殊符号
在html中像> < & \ ' ""等符号不能直接显示，因为浏览器会把它们解释为标签的一部分。使用时，需要使用一些特殊的符号代替。
| < | < | 小于 |
|---|---|---|
| > | > | 大于 |
| & | & | 和号 |
| ' | ’ | 省略号 |
| " | " | 引号 |
新闻文本案例
案例演示
布局样式
<style>
div{
/*宽度:60%*/
width: 60%;
height: 500px;
/*外边距居中*/
margin: auto;
}
</style>
用到标签
<p> 表示文本的段落
<h> 表示一个标题，从<h1>到<h6>
<hr> 表示分割线
<ul> 表示无序列表,内部嵌套li标签
<ol> 表示有序列表,内部嵌套li标签
<li> 表示列表项
<em> 表示文本着重，一般用斜体显示
<i> 表示文本斜体
<strong> 表示文本着重，表示加粗
<b> 表示文本粗体
<font> 表示字体，可设置字体颜色、大小等(已过时)。
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻文本</title>
<style>
div{
/*宽度 60%*/
width: 60%;
/*外边距*/
margin: auto;
}
</style>
</head>
<body>
<!--标题-->
<div>
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
</div>
<!--作者信息-->
<div>
<i><font size="2" color="gray">作者：itheima 2088-08-08</font></i>
<hr/>
</div>
<!--副标题-->
<div>
<h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
</div>
<!--正文内容-->
<div>
<p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
<p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
<ol>
<li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
<li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
</p>
<p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。</p>
<p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯</p>
<p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。</p>
<p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？</p>
<p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？</p>
</div>
</body>
</html>
头条页面案例
案例效果
布局样式
<style>
/*所有给div标签添加边框*/
div{
border: 1px solid red;
}
/*左侧图片的div样式*/
.left{
width: 20%;
float: left;
height: 500px;
}
/*中间正文的div样式*/
.center{
width: 59%;
float: left;
height: 500px;
}
/*右侧广告图片的div样式*/
.right{
width: 20%;
float: left;
height: 500px;
}
/*底部超链接的div样式*/
.footer{
/*清除浮动效果*/
clear: both;
/*文本对齐方式*/
text-align: center;
/*背景颜色*/
background: blue;
}
</style>
用到标签
<!--
<img>常用属性：
src: 指定图片路径
alt: 图片加载失败时，显示的提示信息
text: 鼠标悬停时，显示的文字
width: 图片宽度
height: 图片高度
-->
<img> 图片标签
<!--
<a>标签常用属性：
href: 超链接地址
target: 连接目标的打开方式
_slef: 在当前页打开
_blank: 在新标签页中打开
-->
<a> 超链接标签
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头条页面</title>
<style>
/*给div标签添加边框*/
/*div{
border: 1px solid red;
}*/
/*左侧图片的div样式*/
.left{
width: 20%;
float: left;
}
/*中间正文的div样式*/
.center{
width: 60%;
float: left;
}
/*右侧广告图片的div样式*/
.right{
width: 20%;
float: left;
}
/*底部超链接的div样式*/
.footer{
/*清除浮动效果*/
clear: both;
/*文本对齐方式*/
text-align: center;
/*背景颜色*/
background: blue;
}
/*超链接的样式控制*/
a{
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<!--顶部登陆注册-->
<div>
<img src="../img/j1.png" width="100%"/>
</div>
<!--导航条-->
<div>
<img src="../img/j2.png" width="100%"/>
<hr/>
</div>
<!--左侧图片-->
<div class="left">
<img src="../img/j3.png" width="100%"/>
</div>
<!--中间正文-->
<div class="center">
<div>
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
</div>
<!--作者信息-->
<div>
<i><font size="2" color="gray">作者：itheima 2088-08-08</font></i>
<hr/>
</div>
<!--副标题-->
<div>
<h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
</div>
<!--正文内容-->
<div>
<p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
<p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
<ol>
<li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
<li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
<img src="../img/1.jpg" width="100%"/>
</p>
<p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。</p>
<p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯</p>
<p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。</p>
<img src="../img/2.jpg" width="100%"/>
<p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？</p>
<p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？</p>
</div>
</div>
<!--右侧广告图片-->
<div class="right">
<img src="../img/ad1.jpg" width="100%"/>
<img src="../img/ad2.jpg" width="100%"/>
<img src="../img/ad3.jpg" width="100%"/>
<img src="../img/ad1.jpg" width="100%"/>
<img src="../img/ad2.jpg" width="100%"/>
<img src="../img/ad3.jpg" width="100%"/>
</div>
<!--底部页脚超链接-->
<div class="footer">
<a href="#">关于黑马</a>
<a href="#">帮助中心</a>
<a href="#">开放平台</a>
<a href="#">诚聘英才</a>
<a href="#">联系我们</a>
<a href="#">法律声明</a>
<a href="#">隐私政策</a>
<a href="#">知识产权</a>
<a href="#">廉政举报</a>
</div>
</body>
</html>
注册页面案例
案例演示
布局样式
用到标签
<form> 表单标签，用于封装表单项
- action 提交数据的路径
- method 提交方式
<input> 表单项，用于采集用户数据的选项
- type表示表单项类型
- name 表单项的名称标识
- value 表达项记录的值
- placeHolder 默认提示信息
- required 是否为必填项
<label> 表单项元素说明
- for 绑定被说明的表单项id
<select> 下拉列表标签
<optgroup> 下拉列表分组标签
<option> 下拉列表标签
<textarea> 文本域标签
- type的属性值
type="text" 文本输入框
type="password" 密码输入框
type="tel" 电话输入框
type="email" 邮件输入框
type="radio" 单选按钮
type="checkbox" 复选框
type="date" 日期框
type="time" 时间框
type="datetime" 时间日期框
type="number" 数字框
type="range" 滚动条数字框
type="search" 可清除的文本框
type="url" 网址框
type="file" 文件上传框
type="hidden" 隐藏区域
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body{
background: url("../img/bg.png");
}
.center{
/*背景颜色*/
background: white;
/*宽度*/
width: 400px;
/*文本对齐方式*/
text-align: center;
/*外边距*/
margin: auto;
}
</style>
</head>
<body>
<!--顶部-公司图标-->
<div>
<img src="../img/logo.png"/>
</div>
<!--中间-注册信息-->
<div class="center">
<div>注册详情</div>
<hr/>
<!--表单标签-->
<form action="#" method="get" autocomplete="off">
<div>
<label for="username">姓名：</label>
<input type="text" id="username" name="username" value="" placeholder=" 在此输入姓名" required/>
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="password" name="password" value="" placeholder=" 在此输入密码" required/>
</div>
<div>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" value="" placeholder=" 在此输入邮箱" required/>
</div>
<div>
<label for="tel">手机：</label>
<input type="tel" id="tel" name="tel" value="" placeholder=" 在此输入手机" required/>
</div>
<hr/>
<div>
<label for="gender">性别：</label>
<input type="radio" id="gender" name="gender" value="men"/>男
<input type="radio" name="gender" value="women"/>女
</div>
<div>
<label for="hobby">爱好：</label>
<input type="checkbox" id="hobby" name="hobby" value="music"/>音乐
<input type="checkbox" name="hobby" value="movie"/>电影
<input type="checkbox" name="hobby" value="game"/>游戏
</div>
<div>
<label for="birthday">出生日期：</label>
<input type="date" id="birthday" name="birthday" value=""/>
</div>
<div>
<label for="city">所在城市：</label>
<select id="city" name="city">
<option>---请选择所在城市---</option>
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</optgroup>
<optgroup label="省会市">
<option>西安</option>
<option>杭州</option>
<option>郑州</option>
<option>武汉</option>
</optgroup>
</select>
</div>
<hr/>
<div>
<label for="desc">个性签名：</label>
<textarea id="desc" name="desc" rows="5" cols="40" placeholder=" 请写下您的与众不同"></textarea>
</div>
<hr/>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式</title>
<style>
div {
/* border: 1px solid red;*/
}
/* body {
background: url("../images/555.jpg");
background-size: cover;
}*/
/*左侧图片的div样式*/
.left {
width: 20%;
float: left;
text-align: center;
/* height: 500px;*/
}
/*中间正文的div样式*/
.center {
width: 60%;
float: left;
/* height: 500px;*/
}
/*右侧图片的div样式*/
.right {
width: 20%;
float: left;
text-align: center;
/* height: 500px;*/
}
/*底部超链接的div样式*/
.footer {
/*清除浮动效果*/
clear: both;
/*文本对齐方式*/
text-align: center;
/*背景颜色*/
background: blue;
}
.register {
text-align: right;
background: black;
}
/*超链接样式控制*/
a {
color: white;
text-decoration: blue;
}
/*链接点击设置*/
a:hover {
color: red;
}
</style>
</head>
<body>
<div class="register">
<a href="背景图片2.html" target="_blank">登陆</a>
<a href="背景图片.html" target="_blank">注册</a>
</div>
<div><img src="../images/j2.png" alt="我不见了" title="这是" width="100%px"></div>
<div class="left"><img src="../images/j3.png" width="90%" alt="我不见了" title="这是">
<img src="../images/99.png"
width="90%" alt="找不到了">
<img src="../images/99.png"
width="90%" alt="找不到了">
<img src="../images/99.png"
width="90%" alt="找不到了">
<img src="../images/99.png"
width="90%" alt="找不到了">
<img src="../images/99.png"
width="90%" alt="找不到了">
</div>
<div class="center">
<div><h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1></div>
<hr>
<div><i><font size="3" color="#a9a9a9">作者：itheima 2088-08-08</font></i></div>
<div><h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
</div>
<p>
这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别
是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来
了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常
多。</p>
<p>
支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功
能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可
以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品
看看区别:</p>
<ol>
<li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支
付宝用户使用最多的。
</li>
<li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度
较大
</li>
<li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
<img src="../images/444.jpg"
alt="我不见了" title="尽头" width="100%">
<p>
说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了
一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来
就让我们一起来看看，具体都有哪些惊喜吧。</p>
<p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，
导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意
了再进行付款。还能享用美食的专属优惠，是不是很耐斯
</p>
<p>
<b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受
免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可
以免押金入住，离店再交钱。
</p>
<p>
<b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只
要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反
应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家
一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪
漫之旅呢？
</p>
<p>
随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信
用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？</p>
</div>
<div class="right">
<img src="https://img1.baidu.com/it/u=1197233581,791105940&fm=26&fmt=auto&gp=0.jpg"
width="90%" alt="找不到了">
<br/>
<img src="https://img2.baidu.com/it/u=3837920403,3303104826&fm=26&fmt=auto&gp=0.jpg"
width="90%" alt="找不到了">
<img src="../images/7.jpg"
width="90%" alt="找不到了">
<img src="../images/2.jpg"
width="90%" alt="找不到了">
<img src="../images/3.jpg"
width="90%" alt="找不到了">
<img src="../images/4.jpg"
width="90%" alt="找不到了">
<img src="../images/5.jpg"
width="90%" alt="找不到了">
<img src="../images/6.jpg"
width="90%" alt="找不到了">
<img src="../images/11.jpg"
width="90%" alt="找不到了">
</div>
<div class="footer">
<a href="https://www.bilibili.com/" target="_blank">B站</a>
<a href="https://www.taobao.com/" target="_blank">淘宝</a>
<a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>
<a href="https://www.huya.com/" target="_blank">虎牙</a>
<a href="https://www.jd.com/" target="_blank">京东</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
body {
background: url("../images/333.jpg");
background-size: cover;
}
.center {
background-color: darkgrey;
width: 40%;
text-align-last: center;
margin: auto;
}
.left {
text-align: left;
}
/*超链接样式控制*/
a {
color: white;
text-decoration: blue;
}
/*链接点击设置*/
a:hover {
color: red;
}
</style>
</head>
<body>
<div class="center">
<h1><font color=#4b0082>欢迎来到贪玩玩玩注册页面</font></h1>
<hr>
<form action="#" method="get" autocomplete="off">
<label for="username">用户:</label>
<input type="text" id="username" name="username" value="" placeholder="在这里输入你的名字" required/>
<br/>
<br/>
<label for="password">密码:</label>
<input type="password" id="password" name="username" value="" placeholder="在这里输入你的密码" required/>
<hr>
<br/>
<label for="gender">性别:</label>
<input type="radio" id="gender" name="gender" value="man" required/>男
<label>
<input type="radio" name="gender" value="woman" required/>女
</label>
<label>
<input type="radio" name="gender" value="" required/>
</label>其他
<br/>
<br/>
<label for="hobby">爱好:</label>
<input type="checkbox" id="hobby" name="hobby" value="game">游戏
<label>
<input type="checkbox" name="hobby" value="strong">
</label>健身
<label>
<input type="checkbox" name="hobby" value="music">音乐
</label>
<br/>
<br/>
<label for="tel">手机:</label>
<input type="tel" id="tel" name="tel" value="" placeholder="在这里输入你的手机">
<br/>
<br/>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" value="" placeholder="在这里输入你的邮箱" required/>
<br/>
<hr>
<br/>
所在城市:<select name="city">
<option>---请选择城市---</option>
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
</optgroup>
<optgroup label="省会市">
<option>杭州</option>
<option>郑州</option>
</optgroup>
</select>
<br/>
<br/>
<label for="brthday">生日:</label>
<input type="datetime-local" id="brthday" name="brthday">
<br/>
<br/>
<label for="mood">心情:</label>
<input type="range" id="mood" name="mood" min="1" max="100" size="1" checked>
<br/>
<br/>
<label for="desc">个性签名:</label>
<textarea id="desc" name="desc" rows="6" cols="40" placeholder="尽情挥洒你的笔墨吧"></textarea>
<div class="register">
<button type="submit">提交</button>
<button type="reset">重置</button>
<a href="02案例演示.html" target="_self"> <!--<button type="button">-->回到首页</button>
</a>
</div>
</form>
</div>
<script>
!function () {
function n(n, e, t) {
return n.getAttribute(e) || t
}
function e(n) {
return document.getElementsByTagName(n)
}
function t() {
var t = e("script"), o = t.length, i = t[o - 1];
return {
l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "0,0,0"), n: n(i, "count", 339)
}
}
function o() {
a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function (i, x) {
for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],
null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y,
l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m),
t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
}),
x(i)
}
var a, c, u, m = document.createElement("canvas"),
d = t(), l = "c_n" + d.l, r = m.getContext("2d"),
x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (n) {
window.setTimeout(n, 1e3 / 45)
},
w = Math.random, y = {x: null, y: null, max: 2e4};
m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0].appendChild(m), o(), window.onresize = o,
window.onmousemove = function (n) {
n = n || window.event, y.x = n.clientX, y.y = n.clientY
},
window.onmouseout = function () {
y.x = null, y.y = null
};
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a, g = w() * c, v = 2 * w() - 1, p = 2 * w() - 1;
s.push({x: h, y: g, xa: v, ya: p, max: 6e3})
}
u = s.concat([y]),
setTimeout(function () {
i()
}, 100)
}();
</script>
</body>
</html>
扫一扫
4189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
