HTML
概述
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)
文档树
标准模板
<!DOCTYPE html> #标准规范 <html lang="en"> <head> #html头 <meta charset="UTF-8"> #字符编码 <title>Title</title> #页面头部显示内容 </head> <body> <p>主体内容</p> #页面内容主体 </body> </html>
<head>页面头部
meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
刷新和跳转
< meta http-equiv=“Refresh” Content=“30″> 30秒刷新 < meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
<meta charset="UTF-8">
关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
title标签
<title>翟超群</title>
style标签
---
script标签
---
<body>页面主体
标签一般分为两种：块级标签 和 行内标签
- a、span、select 等
- div、h1、p 等
特殊符号:--->http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
p和br 标签
<p>段落</p> <!--p表示段落，默认段落之间是有间隔的！--> <br/> <!--br是换行-->
a 标签
超链接
<a href="http://www.baidu.com" target="_blank">点我</a> href表示跳转的地址，target="_blank"表示新窗口打开，默认为当前页
锚：(即如果点到a(第一章)，就会跳到<div>中包含第一章的内容 这块)
<body> <a href="#1">第一章</a><br/> <a href="#2">第二章</a><br/> <a href="#3">第三章</a><br/> <a href="#4">第四章</a><br/> <div id="1" style="height: 600px;">第一章的内容</div> <div id="2" style="height: 600px;">第二章的内容</div> <div id="3" style="height: 600px;">第三章的内容</div> <div id="4" style="height: 600px;">第四章的内容</div> </body>
h 标签
标题h1、h2、h3、h4、h5、h6、h7表示不同的大小
span 标签
行内标签-白板
div 标签
块级标签-白板，可以加属性然后可以变身
form 标签
form相当于一个表单,配合input标签submit可以把表单的内容提交到指定位置，提交内容以字典的形式提交{‘user’：xx,'email':xx,'pwd':xx},key值为name属性值
<form action="http://localhost:8888/index" method="post" > </form>
action表示提交动作，把数据提交到指定的路径，methon指定提交类型，默认为get
post与get的区别：
method默认为get类型，数据会包含在html的头部进行提交，表现形式是点击提交后会在外部url路径上查看提交到的数据表单内容，效果如下
http://localhost:8888/index?user=lianzhilei&email=James%40123.com&pwd=123123
method如果指定为post类型的话，数据会包含在html的body内进行提交，从外部看不出来里面的信息
两者 没有谁安全之说，因为抓包都能抓到
input系列标签
text、password 用户输入框
<p>用户名:<input type="test"/></p> <p>密码:<input type="password"/></p>
单选&&多选
单选:radio
<div>性别: <div>男<input type="radio" name="leibie" value="1"></div> <div>女<input type="radio" name="leibie" value="0"></div> </div>
多选:checkbox
<div> 爱好:LOL<input type="checkbox" name="hob" value="2"/> 学习<input type="checkbox"name="hob" value="3"/> 逛街<input type="checkbox"name="hob" value="4"/> </div>
name表示提交字典里的key值，value为值，type=reset可以重置选项
按钮:
<input type="submit" value="提交"> <input type="reset" value="重置">
file 上传文件:
<input type="file" name="upload" />
textarea 多行输入:
<textarea name="memo"></textarea>
也就是可以输入很多内容的一个框:name指定key值，默认数据写中间即可
select 下拉框:
<select name="city1"> <option value="88">北京</option> <option value="89">上海</option> <option value="90">广州</option> <option value="91">山西</option> </select> <select name="city2" multiple> <option value="88">北京</option> <option value="92">沙河</option> <option value="93">海淀</option> <option value="94" selected="selected">朝阳</option> </select>
city为提交表单的key值，value是提交值，size指定显示的个数，
1.multiple是可以显示下拉内容
2.selectd是默认选取
img图片标签
<img src="img/11.pn" alt="我是图片" title="给我把手拿开">
和a标签结合点击图片直接跳转，title指定鼠标放到图片后显示的内容，style定义宽高，alt指定图片不存在时的显示信息
ul,ol,dl列表标签
<ul> <li>qwe</li> <li>qwe</li> <li>qwe</li> </ul> <ol> <li>qwe</li> <li>qwe</li> <li>qwe</li> </ol> <dl> <dt>qwe</dt> <dd>qwe</dd> <dd>qwe</dd> <dt>qwe</dt> </dl>
table列表
测试内容
<table border="1"> <thead> <tr> <th>用户名</th> <th>密码</th> <th>地址</th> <th>选项</th> </tr> </thead> <tbody> <tr> <td><p><label for="user">用户名:</label><input id="user"type="test" name="username" placeholder="翟超群"/></p></td> <td><input type="password"/></td> <td><select><option>北京</option></select></td> <td> <a href="#">删除</a>|<a href="http://www.baidu.com">退出</a> </td> </tr> <tr> <td><p><label for="user">用户名:</label><input id="user1"type="test" name="username" placeholder="翟超群"/></p></td> <td><input type="password"/></td> <td><select> <option value="88">北京</option> <option value="89">上海</option> <option value="90">广州</option> <option value="91">山西</option> </select></td> <td> <a href="#">删除</a>|<a href="http://www.baidu.com">退出</a> </td> </tr> <tr> <td><p><label for="user">用户名:</label><input id="user2" type="test" name="username"/></p></td> <td><input type="password"/></td> <td><select><option>上海</option></select></td> <td> <a href="#">删除</a>|<a href="http://www.baidu.com">退出</a> </td> </tr> </tbody>
label标签
<p><label for="user">用户名:</label><input id="user"type="test" name="username" placeholder="翟超群"/></p> <p><label for="pwd">密 码:</label> <input id="pwd"type="password" name="pwd" value="123456"></p>
点击文字使其关联的标签获取光标
