前端（一） HTML
服务端返回对字符串，浏览器进行解释，显示成易读的页面
HTML:在服务器端就是一个文件，文件内部用一堆标签包装起来
html只做静态的功能，Js可实现页面动态效果
一、简介
1 <!DOCTYPE html> <!-- Doctype 解释html文档的规范，如果不加Doctype，不同的浏览器就会按照自己的方式来渲染页面， 2 在不同的浏览器显示不同的样式 --> 3 <html lang="en"> <!-- 标签de属性 --> 4 <head> <!-- 相当于人的大脑，用户是看不到的。 --> 5 <meta charset="UTF-8"> 6 <title>宋晓楠</title> 7 </head> 8 <body> <!-- 相当于人的身体，用户是可见的 --> 9 </body> 10 </html>
Head中常用的标签:
1、title:页面标题
2、meta：页面元信息：页面编码、刷新和跳转、页面搜索关键字、页面描述
页面编码：<mete http-equiv="charset=utf-8“ />
刷新和跳转：<meta http-equiv="Refresh" Content="30"/> 30秒页面自动刷新一次
<meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn"/> 3秒后页面跳转到http://www.autohome.com.cn
关键字: <meta name="keywords" content="song,宋，哈哈"/>
描述：<meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>
body内的标签:
标签分类：块级标签、行内标签/内联标签
块级标签占整行（例：div标签）；行内标签，字符多大就占用多大字符（例：a标签）
特殊标签的显示：<>：用<；和>；代替
多个空格： 用 ；代替
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
二、常用标签
1、段落标签 <p></p>
2、标题标签 <h></h> h1最大 h6最小
3、a标签，是行内标签，可以添加很多属性
①页面跳转
点击后，在当前页面跳转：<a href="http://www.sina.com.cn/">新浪</a>
点击后，新打开一个页面跳转：<a href="http://www.sina.com.cn/" target=''_blank"></a>
②锚点
1 <a href="#01">第一章</a> 2 <a href="#02">第二章</a> 3 <a href="#03">第三章</a> 4 <div id="01" style="background-color: black;height: 900px"</div> 5 <div id="02" style="background-color: gold;height: 900px">sjfjfierjfiejrifjieredpwedwpkpsjfjfierjfiejrifjieredpwedwpkp</div> 6 <div id="03" style="background-color: aqua;height: 900px"</div>
4、图片标签<img></img>
1 <img src="img/297838.jpg" alt="风景图" title="谢谢你选中我"> 2 <!-- img图片标签 alt：当图片不能显示时，的提示文案 title：当鼠标在图片上是的提示说明-->
5、项目符号标签 ol（序号） ul（远点） dl（分组）
1 <ul> 2 <li>宋晓楠</li> 3 <li>宋小英</li> 4 </ul> 5 <ol> 6 <li>hah</li> 7 <li>drgtgrtgr</li> 8 </ol> 9 <dl> 10 <dt>测试部门：</dt> 11 <dd>宋晓楠</dd> 12 <dd>陈海涓</dd> 13 <dt>开发部门：</dt> 14 <dd>杨林杰</dd> 15 </dl>
6、表格标签
1 <table border="1"> <!--border=1表示给表格加边框--> 2 <tr> <!--tr 表示行 td表示列 th表示表头 为了区分表头和下面真是数据的字体，一般表头用th--> 3 <td>序号</td> 4 <th>用户名</th> 5 <th>密码</th> 6 <th>操作</th> 7 </tr> 8 <tr> 9 <td>1</td> 10 <td colspan="2" rowspan="2">songxiaonan</td> <!-- colspan="2" 占两列 相当于横向合并单元格 11 rowspan="2" 占两行 相当于纵向合并单元格--> 12 <td>123456</td> 13 <td><a href="https://www.baidu.com/">删除</a>|<a href="#">编辑</a></td> <!-- #跳转表示当前页 --> 14 </tr> 15 <tr> 16 <td>1</td> 17 <td>123456</td> 18 <td><a href="https://www.baidu.com/">删除</a>|<a href="#">编辑</a></td> <!-- #跳转表示当前页 --> 19 </tr> 20 </table>
三、input系列
文本输入框:<input type='text'>
<div><label for="user">用户名：</label><input id="user" type="text"/></div>
<label for="user"> 作用：点击用户名，光标就可选中后面的文本输入框，不用必须点击
密码输入框：<input type='password'>
单选按钮：<input type='radio'>
1 <div>男<input type="radio" name="00"/></div> 2 <div>女<input type="radio" name="00"/></div> 3 4 #两个单选按钮的name值要相同，这样才能实现真正意义上的单选
多选按钮：<input type='checkbox'>
上传文件按钮：<input type='file'>
可变大小文本输入框：<input type=textarea'>
下拉列表：<select>
<optgroup lable='中国'>
<option>北京</option>
<option>上海</option>
</optgroup>
</select>
按钮：<input type='button'>
提交按钮：<input type='submit'>
重置按钮：<input type=reset'>
四、提交
1、<form>包含的是提交的数据的模块<form>
需要对form添加一些属性，比如：
action：将数据提交到的地址
method：请求方法啊类型 post/get
enctype：有上传文件时，必须要该属性，表示将文件按块来上传
2、对于文本输入框的提交
1 <p><label for="01">用户名</label><input id="01" type="text" name="user"></p> <!--提交数据，必须有哦name属性，否则服务器接收到的数据为空--> 2 <p><label for="02">密码</label><input id="02" type="password" name="password"></p>
3、对于单选按钮的提交
1 <!--因为单选按钮不像文本框会有数据，那么就需要自己手动写一个value提交给服务器--> 2 <div><br>性别： 3 <div>男<input type="radio" name="性别" value="nan"/></div> 4 <div>女<input type="radio" name="性别" value="nv"/></div> 5 </div>
4、多选按钮的提交
1 <!-- 对于多选按钮的提交 --> 2 <!--提交多选的数据后，服务器的key值就是一个列表,通过浏览器监听到的数据就是： 3 user:456666666666666666 4 password:67777777777777777 5 性别:nv 6 爱好:pashan 7 爱好:kanshu 8 --> 9 <div><br>爱好： 10 <div>爬山<input type="checkbox" name="爱好" value="pashan"/></div> 11 <div>看书<input type="checkbox" name="爱好" value="kanshu"/></div> 12 <div>唱歌<input type="checkbox" name="爱好" value="changge"/></div> 13 </div>
5、上传文件的提交
1 <!-- 注意提交上传的文件，必须要form标签中加入 enctype="multipart/form-data"--> 2 <div><br>上传头像：<input type="file" name="上传的文件"></div>
6、下拉列表的提交
1 <!-- 2 城市:sahnghai 3 --> 4 <div><br>城市： 5 <select name="城市" > 6 <optgroup label="中国" > 7 <option value="beijing">北京</option> 8 <option value="sahnghai">上海</option> 9 <option value="nanjing">南京</option> 10 </optgroup> 11 </select> 12 </div>
7、可变输入框的提交
1 <div><br>简介：</div> 2 <textarea name="简介"></textarea>
<!--注意：无论是get或者post方法都是不安全的 get方法发送请求的时候回将数据直接显示在浏览器的url地址后面
post方法虽然不会讲请求的数据直接显示在在浏览器的url地址后面，
但是通过浏览器监听，依然可以在headers中抓到-->
<!-- 设置文本输入框的默认值 两种方法：
1、加 value
2、加placeholder--
注意：placeholder的默认值不能提交到后台
-->
<!-- 单选按钮和复选框加默认值 方法：
1、加 checked="checked"
-->
<!-- 下拉列表加默认值 方法：
1、<textarea name="简介">默认文案</textarea>
2、<textarea name="简介" placeholder=‘默认文案’></textarea>
-->
