HTML语法基础
html是hypertext markup language的缩写，即超文本标记语言。html是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。可以说明文字、 图形、动画、声音、表格、链接等。 html网页结构包括头部 (head)、主体 (body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。
简单的标签
1.HTML标准代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
文章主体内容
</body>
</html>其中<!DOCTYPE html>是文档头声明，是HTML5新属性，以前是很长的<html>是存放页面所有内容<head>是头标签，存放一些页面和页面相关<meta>是制定页面编码<title>浏览器标题栏内容
这代码看起来很简单，放在初学者心态上看起来有点难。孙老师说过，代码不要去硬背单词，多练习就会写出了代码，习惯就好。
2.增加图片 img标签
<img src="您的图片路径" title="" alt="">其中title属性是鼠标触碰图片显示内容，alt属性是百度抓取SEO用。
3.超链接 a标签
<a href="您的链接路径" target="_blank">文字</a>链接用a标签，target 属性在新窗口中打开方式，值如下：
| 值 | 描述 |
|---|---|
| _blank | 在新窗口/选项卡中打开 |
| _self | 在同一框架中打开（默认） |
| _parent | 在父框架中打开 |
| _top | 在整个窗口中打开 |
| framename | 在指定的框架中打开 |
4.注释 标签
<!--这是一段注释。注释不会在浏览器中显示。-->制作网站开发，要养成良好习惯，码过多过乱情况下，很容易找不到哪个是头和尾。
5.<h1> 到 <h6> 标签
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6><h1> 定义最大的标题，<h6> 定义最小的标题。
6.strong\em\span\u 标签
<strong>我真的在纽约？</strong>
<em>那是不可能！</em>
<span>原来是个玩笑！</span>
<u>重点是他在哪里？</u><strong>是用来加速文字<em>文字斜体<span>无意义的文字标签，一般做CSS来控制它<html>下划线
简单的关键词描述和锚
1.网站标题
<title>你好上海</title>在其它页面可以这样设置
<title>上海故事-美丽的徐家汇</title>2.关键词 'meta name="keywords"'标签
<meta name="keywords" content="上海,徐家汇,田子坊,地铁旁边,艺术家">具体数量多少没有定义，我认为不应该是量多，而是要最准确。
3.描述 'meta name="description"'标签
<meta name="description" content="上海徐家汇一个地方，有个美丽的田子坊，当然了交通很方便，注意哦，只有艺术家才会欣赏这里神奇的世界！">描述限制数字80-200左右，当然了要注意里面词和关键词要精准相关，其中上海，和keywords标签里也有上海，这大大提高了搜索效率。
4.描述 'meta '标签其它属性
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
跳转属性
<meta http-equiv="Refresh" content="1; url=http://www.kyotos.top"/>4.锚 属性
<ul>
<li><a href="#miao">去找喵星人</a></li>
<li><a href="#wang">去找汪星人</a></li>
<li><a href="#meng">其他萌物</a></li>
</ul>
<a name="miao"></a>
<h3 id="miao">喵星人基地</h3>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<a name="wang"></a>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<a name="meng"></a>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p><a href="#miao">去找喵星人</a>href属性的属性值最前面要加#<a name="miao"></a>页面中需要的位置设置锚点
4.1 锚 属性 更高级写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Top</title>
<style type="text/css">
.side_btn {
width: 40px;
position: fixed;
overflow: hidden;
bottom: -90px;
right: 20px;
cursor: pointer;
z-index: 20;
transition: all ease .3s;
-webkit-transition: all ease .3s;
-ms-transition: all ease .3s;
-moz-transition: all ease .3s;
}
.side_btn .contect_btn {
width: 40px;
height: 40px;
float: left;
display: none;
margin-bottom: 10px;
background: url(footer_up.png) no-repeat 0 -40px
}
.side_btn .to_up {
width: 40px;
height: 40px;
float: left;
background: url(footer_up.png) no-repeat
}
@media only screen and (max-width:775px) {
.side_btn {
display: none
}
}
</style>
</head>
<body>
<div style="height: 2000px;background: #ccc;">
<div class="side_btn" >
<span class="contect_btn"></span>
<span class="to_up"></span>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
$(window).scroll(function(){
$(document).scrollTop()>$(window).height()/4?$(".side_btn").css("bottom","40px"): $(".side_btn").css("bottom","-90px");
})
$('.side_btn').click(function(){
$("body,html").animate({scrollTop: 0},300);
});
</script>
</body>
</html>
缓缓向上移动，然后TOP消失。向下移动显示TOP，参考ZEALER网站。
5.课外知识 link属性
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- iOS 图标 end -->
<!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 横屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>6.课外知识 meta标签 robots(机器人向导)属性
<meta name="robots"content="none" > 具体参数如下：
| 值 | 描述 |
|---|---|
| all | 文件将被检索，且页面上的链接可以被查询 |
| none | 文件将不被检索，且页面上的链接不可以被查询 |
| index | 文件将被检索 |
| follow | 页面上的链接可以被查询 |
| noindex | 文件将不被检索，但页面上的链接可以被查询 |
| nofollow | 文件将被检索，但页面上的链接不可以被查询 |
7.pre属性
<pre>
同学：
恭喜你毕业了！
学校2018.4.1
</pre>保留了预格式化文本、空行换行等属性。
简单的表格
1.网页编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />如果涉及到乱码问题，推荐使用emeditor软件来转换。
一般我做项目一直是UTF8的，大多数编辑软件都可以转换。
2.图像热点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="dog.jpg" usemap="#Map">
<map name="Map">
<area shape="circle" coords="183,198,28" href="#" target="_blank">
</map>
</body>
</html>热点距离位置很难找，用Dreamweaver软件来绘热点位置。
3.网页图片
| 格式 | 透明度 | 动画 | 特点 | 通用场景 |
|---|---|---|---|---|
| JPG/JPEG | × | × | 色彩丰富，压缩比高，画质损失，体积小 | 色彩丰富、要求体积小 |
| PNG | √ | × | 色彩丰富，压缩比高，设置任意透明度，体积较小，但比jpg体积大一些 | 对色彩有特殊要求、需求透明效果 |
| GIF | √ | √ | 仅支持256种颜色，体积小，只有透明和不透明效果 | 图片颜色少、需要透明效果 |
| BMP | × | × | 色彩丰富，画质清晰，但体积偏大 | 不推荐在网页中使用 |
个人认为现在PNG有压缩工具，达到JPG体积一样效果，很厉害。
4.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- tr声明表格的一行 -->
<table border="1">
<tr>
<!-- td*6 -->
<td></td>
<td>周一</td>
<td>周二</td>
<td>周三</td>
<td>周四</td>
<td>周五</td>
</tr>
<!-- tr*4>td*6 -->
<!-- 2行 -->
<tr>
<td>第一节课</td>
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>物理</td>
<td>英语</td>
</tr>
<!-- 3行 -->
<tr>
<td>第二节课</td>
<td>化学</td>
<td>体育</td>
<td>体育</td>
<td>英语</td>
<td>英语</td>
</tr>
<!-- 4行 -->
<tr>
<td>第三节课</td>
<td>英语</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
</tr>
<!-- 5行 -->
<tr>
<td>第四节课</td>
<td>数学</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
</table>
</body>
</html>5.表格属性
<tr width="800" height="500">
tr中的width属性是宽度，height属性是高度<tr align="center">
tr中的align属性是设置行内的文字内容水平位置(居中、居左、居右)<tr valign="top">
tr中的valign属性是设置行内的文字内容上下位置(靠上、靠下)<td colspan="2">数学体育</td>
td中的vcolspan属性是横跨的列数(合并列)<td rowspan="2">英语数学</td>
td中的rowspan属性是横跨的行数(合并行)
6.课外学习 路径
** 绝对路径：就是直接从磁盘符开始的完整路径
- C:\Users\asus\Desktop\0413\day01\code\a.jpg
- http://www.baidu.com/b.jpg
** 相对路径：
- 一个文件相对于另外一个文件的位置
- 三种：
** html文件和图片在一个路径下，可以直接写文件名称
- <img src="b1.jpg" alt="这是一个美女"/>
** 图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg
-- C:\Users\asus\Desktop\0413\day01\code\4.html
-- C:\Users\asus\Desktop\0413\day01\code\img\a.jpg
*** 在html中使用图片 4.html和img在一个路径下
img\a.jpg
** 图片在html文件的上层目录
--- C:\Users\asus\Desktop\0413\day01\code\4.html
--- C:\Users\asus\Desktop\0413\day01\c.png
*** html文件所在的目录和图片是一个目录
** 图片和html文件是什么关系？
- 图片在html的所在目录的上层目录day01
** 怎么表示上层路径 ../
../ 表示了day01
../c.png 表示day01下面的c.png
** 想要表示上层的上层 ../../ 7.作业 用表格写简历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>远程15班-20180422表格简历作业</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content">
<table>
<tr height="80px">
<td><img src="img/logo.png" width="103" height="49" alt=""/></td>
</tr>
<tr>
<td><img src="img/title.png" width="150" height="22" alt=""/></td>
</tr>
</table>
<table class="about">
<tr class="tdh">
<td width="20"><b>姓名</b> / 小野直树</td>
<td width="20"><b>年龄</b> / 34</td>
<td width="20"><b>专业</b> / 数字艺术设计</td>
<td width="22%" rowspan="4" align="center" valign="top" class="noborder imgcontent"><img src="img/me.png" width="169" height="206" ></td>
</tr>
<tr class="tdh">
<td width="20"><b>学历</b> / 本科</td>
<td width="20"><b>民族</b> / 汉族</td>
<td width="20"><b>院校</b> / 东京艺术大学 （Tokyo University of the Arts)</td>
</tr>
<tr class="tdh">
<td width="20"><b>国籍</b> / 中国</td>
<td width="20"><b>所在地</b> / 上海</td>
<td width="20"><b>后盾人班级</b> / 15班 前端全栈课程</td>
</tr>
<tr class="tdh2">
<td ><b>教育经历</b> / </td>
<td colspan="3"><p>2007 上海市の高等学校卒業</p>
<p>2010 上海外語外貿大学公開学院日本語学部本科卒業</p>
<p> 2014 日本东京艺术大学卒業</p>
</td>
</tr>
<tr>
<td height="97"><b>再受教育</b> / </td>
<td colspan="3"><p>2018 北京后盾人培训机构 前端远程班<br>
</p></td>
</tr>
<tr>
<td height="169"><b>求职意向 </b>/ </td>
<td colspan="3"><p>PS切图 - 从PSD上切出页面需要的图片将小图标合成spirts优化</p>
<p> 网页制作 - 响应式页面,简单不冗余代码。css3流畅动画效果，兼容不同浏览器</p>
<p> 前端功能 - 用JS完成常见的前端功能特效用AJAX读取后台数据</p>
<p> H5页面 - 移动端页面的书写兼容平板、安卓、IOS不同终端</p></td>
</tr>
<tr class="tdh2">
<td ><b>联系方式</b>/ </td>
<td colspan="3"><p> E-mail tokyo@shanghai.com</p></td>
</tr>
<table>
<tr >
<td><p class="footer">© hi :)</p></td>
</tr>
</table>
</table>
</div>
</body>
</html>
HTML基础04 From和input属性
1.Form 表单
POST隐式传输、可以传递的数量大get显式传输、数据传递过程会体现在地址栏中、可以传递的数据量偏小
<form method="post" action="">
<input type="text" /> <!--单行文本-->
<input type="password" /> <!--密码-->
<input type="radio" /> <!--单选框-->
<input type="checkbox" /> <!--复选框-->
<input type="hidden" /> <!--隐藏域-->
<input type="submit" /> <!--提交按钮-->
<input type="file" /> <!--文件域-->
<input type="reset" /> <!--重置按钮-->
<input type="button" /> <!--按钮-->
<textarea></textarea> <!--文本区域-->
<select>
<option> </option> <!--下拉框-->
</select>
</form>2.列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--无序列表-->
<ul>
<li>女儿被逼分手地铁站跳楼 父亲下跪哀求救回一命</li>
<li>上海鼓励发展餐饮新业态 “共享餐厅”有望下月开张</li>
<li>武汉女司机吃三盆油焖小龙虾 被检出酒驾扣光分</li>
<li>女子被压车底 外卖员柔声安慰呼喊同事抬车救人</li>
<li>陪娃写作业气出动脉痉挛！家长感叹“算了还是命重要”</li>
</ul>
<!--有序列表-->
<ol>
<li>女儿被逼分手地铁站跳楼 父亲下跪哀求救回一命</li>
<li>上海鼓励发展餐饮新业态 “共享餐厅”有望下月开张</li>
<li>武汉女司机吃三盆油焖小龙虾 被检出酒驾扣光分</li>
<li>女子被压车底 外卖员柔声安慰呼喊同事抬车救人</li>
<li>陪娃写作业气出动脉痉挛！家长感叹“算了还是命重要”</li>
</ol>
<!--自定义列表-->
<dl>
<dt>小野</dt>
<dd>摄影</dd>
<dd>PS4游戏</dd>
<dd>绘画</dd>
</dl>
<dl>
<dt>小张</dt>
<dd>篮球</dd>
<dd>台球</dd>
<dd>电影</dd>
</dl>
<dl>
<dt>小汪</dt>
<dd>打篮球</dd>
<dd>打游戏</dd>
<dd>旅游</dd>
</dl>
</body>
</html>3.表单发送演示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h2>注意！！！！！如果要测试表单发送，一定要把页面放到php环境目录下，用域名形式去访问！！！！不能直接双击打开页面，然后去提交数据！！！！</h2>
<h1>后盾人相亲大会报名表</h1>
<form action="hd.php" method="post">
<!--disabled="disabled"表示禁用表单-->
用户组： <input type="text" value="VIP会员" disabled="disabled" />
<br /><br />
<!--value可以给单行文本设置默认值-->
姓名：<input type="text" name="username" value="张三三" />
<br /><br />
密码：<input type="password" name="pwd" value="123" />
<br /><br />
<!--同一组单选按钮的name属性值要保持一致-->
<!--通过checked='checked'属性，可以设置单选或复选框的默认选中效果-->
性别：男 <input type="radio" name="sex" value="1" />
女 <input type="radio" name="sex" value="0" checked="checked" />
<br /><br />
<!--默认选中下拉列表要用selected='selected'属性-->
学历：
<select name="edu" size="5">
<option value="xiaoxue">小学 </option>
<option>初中</option>
<option>高中</option>
<option>大专</option>
<option selected="selected">本科</option>
<option>硕士</option>
<option>博士</option>
<option>院士</option>
<option>圣斗士</option>
<option>烈士</option>
</select>
<br /><br />
照片：<input type="file" />
<br /><br />
<!--同一组多选框的name属性值要一样
多选框的name属性值后面要加上中括号-->
家庭条件：
存款百万 <input type="checkbox" name="family[]" value="cunkuan" checked="checked" />
良田百亩 <input type="checkbox" name="family[]" value="liangtian" />
老爹当官 <input type="checkbox" name="family[]" value="dieguan" />
负债累累 <input type="checkbox" name="family[]" value="fuzhai" />
<br /><br />
自我介绍： <textarea name="desc">这家伙很懒，啥也没写！</textarea>
<br /><br />
<input type="submit" value="填好了，我要抓紧找对象！" />
<input type="reset" value="写错啦！重写！" />
</form>
</body>
</html>PHP接收：
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
4.模仿世纪佳缘网站练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿世纪佳缘注册页面</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<!--页面主体开始-->
<div class="reg_content float_relative">
<!--布局左侧开始-->
<div class="reg_c_l float_absolute">
<a href="http://www.houdunren.com"><img src="./img/logo.jpeg"></a>
<div class="reg_c1"></div>
<div class="reg_c2"></div>
</div>
<!--布局左侧结束-->
<!--布局右侧开始-->
<div class="reg_c_r float_relative">
<h1 class="reg_c_l_h1">青春不常在，抓紧谈恋爱</h1>
<div class="reg_c_l_tite"> 花点时间填写真实信息，我们会让结果更合您的心意。</div>
<span class="float_absolute top_l"></span>
<span class="float_absolute top_r"></span>
<form action="post.php" method="post">
<div class="form">
<dl class="dlcss">
<dt>我是</dt>
<dd>
<input id="nan" class="ir" value="1" name="sex" type="radio">
<label class="sex nan" for="nan">男</label>
<input id="nv" class="ir" value="0" name="sex" type="radio">
<label class="sex nv" for="nv">女</label>
</dd>
<dd class="er">
<p class="def">* 注册后修改需联系后盾人客服</p>
</dd>
</dl>
<dl class="dlcss">
<dt>生日</dt>
<dd>
<div class="i-w wd">
<input id="year" name="year" class="te" value="1983年" readonly="readonly" type="text">
<span class="re right sh w_icon"> </span>
</div>
<div class="i-w wd">
<input id="month" name="month" class="te" value="12月" readonly="readonly" type="text">
<span class="re right sh w_icon"> </span>
</div>
<div class="i-w wd">
<input id="day" name="day" class="te" value="12日" readonly="readonly" type="text">
<span class="re right sh w_icon"> </span>
</div>
</dd>
<dd class="er">
<p id="cant_ch_age" class="def">* 注册后修改需联系后盾人客服</p>
</dd>
</dl>
<dl class="dlcss">
<dt>常住地</dt>
<dd>
<div class="i-w">
<input id="address" class="te w_input" value="中国上海市浦东新区" readonly="readonly" type="text">
<span class="re right sh w_icon"> </span>
</div>
</dd>
</dl>
<dl class="dlcss">
<dt>婚姻状况</dt>
<dd>
<input checked="checked" value="1" id="m-wh" class="ir" name="marriage" type="radio">
<label class="marr" for="m-wh">未婚</label>
<input value="2" id="m-ly" class="ir" name="marriage" type="radio">
<label class="marr" for="m-ly">离异</label>
<input value="3" id="m-so" class="ir" name="marriage" type="radio">
<label class="marr" for="m-so">丧偶</label>
</dd>
<dd class="er">
<p class="def">* 注册后修改需联系后盾人客服</p>
</dd>
</dl>
<dl class="dlcss">
<dt>身高</dt>
<dd>
<div class="i-w">
<input id="height" name="height" class="te w_input" value="170厘米" readonly="readonly" type="text">
<span class="re right sh w_icon"> </span>
</div>
</dd>
</dl>
<dl class="dlcss">
<dt>学历</dt>
<dd>
<div class="i-w">
<input id="edu" class="te w_input" value="本科" will="30" readonly="readonly" type="text">
<span class="re right sh w_icon"> </span>
</div>
</dd>
</dl>
<dl class="dlcss">
<dt>月薪</dt>
<dd >
<div class="i-w">
<input id="salary" class="te w_input" value="5000-10000元" will="30" readonly="readonly" type="text">
<span class="re right sh w_icon"> </span>
</div>
</dd>
</dl>
<div style="padding-top:10px;padding-left:100px;">
<a href="http://www.jiayuan.com/register/user_read.html" target="_blank" style="color:#939393;text-decoration:underline;font-size: 12px;">全国人大常委会关于加强网络信息保护的决定</a>
</div>
<dl class="dlcss phone-dl">
<dt>手机号</dt>
<dd class="no-pass fn-clear">
<div class="i-w">
<input id="phoneNumber" class="te" maxlength="11" type="text">
<span class="re right"> </span>
</div>
</dd>
</dl>
<!--/注册页修改-->
<dl class="dlcss phone-dl">
<dt>验证码</dt>
<dd class="no-pass" style="z-index: 0;">
<div class="i-w i-w1">
<input id="mobile_vali" name="mobile_vali" class="te" maxlength="" type="text">
<span class="re right"> </span>
</div>
</dd>
</dl>
<dl class="dlcss">
<dt>创建密码</dt>
<dd style="z-index: 0;">
<div class="i-w">
<input id="password" name="password" class="te" maxlength="" type="password">
<span class="re right"> </span>
</div>
</dd>
</dl>
<dl class="dlcss">
<dt>昵称</dt>
<dd style="z-index: 0;">
<div class="i-w">
<input id="nickname" name="nickname" class="te" maxlength="" type="text">
<span class="re right"> </span>
</div>
</dd>
</dl>
<dl class="dlcss">
<dt>自我介绍</dt>
<dd class="ot">
<textarea id="nickname" name="nickname" class="intro-c" type="text" style="width: 400px;height: 200px;">我没啥优点，爱好摄影，听说孙老师也喜欢，只有P档来拍照。
</textarea>
</dd>
</dl>
<div class="form-btn">
<button type="submit"></button>
</div>
<div class="form-pw" style="padding-left: 98px;">
<p class="dlcss">
<input checked="" class="i" id="policy" name="policy" type="checkbox">
<label for="policy">我同意<a target="_blank" href="#">注册条款</a>和<a target="_blank" href="#">会员加入标准</a></label>
</p>
<p class="d">我承诺年满18岁、单身、抱着积极的态度，真诚交友</p>
</div>
</div>
</form>
</div>
<!--布局右侧结束-->
</div>
<!--页面主体结束-->
<div class="footer">
<p>仿世纪佳缘网站练习</p>
</div>
</body>
</html>© 2020 www.f-learn.cn All Rights Reserved