html
html标签
- <meta -> 编码，跳转，刷新，关键词，描述，ie兼容- - <title> 标签 - <link rel=""> ##图标 - <style> - <script>
<!--
标签分类：
自闭合标签 如（meta,link），
主动闭合标签 如（title，head 。。。。）
-->
<!-- 注释用 "<!-- -->" -->
head标签
<!DOCTYPE html> <html lang="en"> <!-- lang为html标签内部属性,html标签只能有 一个 --> <head> <meta charset="UTF-8"> <!-- 指定编码 --> <meta http-equiv="Refresh" Content="3"; Url="http://www.baidu.com"> <!-- 3秒自动刷新 http-equiv head标签属性之一--> <meta http-equiv="Refresh" Content="3; Url=http://www.baidu.com"> <!-- 3秒自动刷新，并且跳转到百度 --> <meta name="keywords" content="testtesttetsteare"> <!-- 网站关键词 --> <meta name="description" content="testtesttetsteare"> <!-- 网站描述 keywords head标签属性二 --> <meta http-equiv="X-UA-COMPATIBLE" content="IE=IE9;IE=IE8;"> <!-- 设置兼容模式，例如兼容ie7 --> <title> first test</title> <!-- 指定主题 -->
<link> #引入css
<script></script> #引入js
</head> </html>
body内的基本标签
所有标签分为：块级标签： H系列(加大加粗) p便签（段落与段落之间有间距） 自己独占一行
行内标签（内联标签）：span(<span></span>) 相邻之间无换行
标签之间可以嵌套，标签存在的意义：定位操作，css操作，js操作
- 图标：   空格 > > < < 网页特殊符号代码大全：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html - p标签 <p></p> br标签 换行 <br>
- b标签 #加粗字体 <b></b>
- em 变斜体
<em></em>
- <h> 标签 h1 h2 h3 h4 h5 h6 标签。加大加粗字体（h1到h6 字体依次减小） <h1>.,,</h1> - div 标签（块级标签，白板）， - form 标签。。。表单提交 - input 系列 <form action="" method="get/post"> <!-- get 提交会拼url参数在浏览器显示 post不会,action 表示提交到url--> <input type="text" name="user"> <!-- 普通文本输入框，type和name为属性--> <input type="text" name="email"> <!-- name 是必须的 --> <input type="password" name="pwd"> <input type="password" value="12123"> <!-- value为这个属性的默认值--> <input type="button" value="登陆"> <!-- 按钮 --> <input type="submit" value="denglu"> <!-- submit 会提交 表单--> </form>
- img 标签 <!-- 图片标签-->
<a href="http://www.baidu.com" target='_blank'> <!-- 点击图片时跳转的页面,_target表示在新标签中打开-->
<img src="aa.jpg" title="图片标题" style="height: 200px;width: 200;" alt="ll"> <!-- src为图片路径，style为图片大小，alt为图片找不到时显示的内容-->
</a>
- 列表 标签
ul（对应li） ol（对应li） dl（对应dd，dt）
<ul>
<li>ewr</li> <!-- 前面为 .-->
<li>eqr</li>
<li>ewr</li>
<li>eer</li>
</ul>
<ol>
<li>a</li> <!--前面为数字 -->
<li>e</li>
<li>d</li>
<li>c</li>
</ol>
- 表格标签，table
常规写法
<table border="1">
<tr>
<td>主机名</td>
<td>端口</td>
<td>操作</td>
</tr>
<tr>
<td> nima</td>
<td>80</td>
<td><a href="http://www.baidu.com">te</a></td>
</tr>
<tr>
<td>et</td>
<td>80</td>
<td>caozuo</td>
</tr>
<tr>
<td>查看</td>
<td>8080</td>
<td>test</td>
</tr>
</table>
正规写法，tr 代表一行
<table border="1">
<thead> <!--指定表头，第一行-->
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody> <!--指定内容-->
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
- fieldset && legend 标签
<fieldset>
<legend>
登陆
</legend>
<label for="username">用户名：</label>
<input id="username" type="text" name="user">
<br/>
<label for="pwd">密码：</label>
<input id="pwd" type="text" name="pwd">
</fieldset>
示例
##input 示例 input type='radio' <!-- 单选框 --> input type='checkbox' <!-- 复选框 --> input type="reset" name="重置" <!-- 重置标签 -->
input type="file" <!-- 上传文件 --> 依赖于form表单的enctype="multipart/form-data" 属性
a 标签 <!-- 超链接 --> <a href="http://www.baidu.com" target="_blank">百度</a> <!-- target=blank 意思为在新标签中打开--> <a href="#1">第一章</a> <!-- href的内容为下面div的id内容加个#（固定用法），id不能重复，--> <a href="#2">第二章</a> <a href="#3">第三章</a> <a href="#4">第四章</a> <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> #table标签 <tbody> <tr> <td>1</td> <td>1</td> <td colspan="2">1</td> <!--横向合并单元格--> </tr> <tr> <td rowspan="2">1</td> <!--纵向合并单元格--> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody>
div标签
<a href="#div1">一</a> #通过#div1跳转到一的内容
<div id="div1">一的内容<div>
form表单
单选框 <form action="https://www.sogou.com/web" method="get"> <!-- get 提交会拼url参数在浏览器显示 post不会,action 表示提交到url--> <div> <p> 请选择性别</p> 男：<input type="radio" name="gender" value="1" /> <!-- name 相同时，互斥，单选框那里才不会重复，value是值，为了方便后端获取--> 女：<input type="radio" name="gender" value="2" chencked="checked" /> ##checked 为默认被选上 </div> <input type="submit" value="提交" /> </form>
文件上传 <form enctype="multipart/form-data"> <input type="file" name="filename"> </form>
<form enctype="multipart/form-data"> <!-- get 提交会拼url参数在浏览器显示 post不会,action 表示提交到url--> <div> <p> sadf</p> 男：<input type="radio" name="gender" value="1"/> <!-- submit 会提交 --> 女：<input type="radio" name="gender" value="2"/> <p>爱好</p> baskerball <input type="checkbox" name="favor" value="1"> #复选框 soccer <input type="checkbox" name="favor" value="2"> football <input type="checkbox" name="favor" value="3"> bike <input type="checkbox" name="favor" value="4"> ball <input type="checkbox" name="favor" value="5"> <p>上传文件</p> <input type="file" name="fname"> </div> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form> <textarea name="meno">评论</textarea> <!-- 多行文本标签,评论处为默认值，name为获取值的属性标签 ，url提交时，参数为meno=评论 --> <select name="city" multiple="multiple" size="10"> <!--下拉菜单选择标签，提交时参数为 city=value的值 multiple 为多选，需要按住ctrl键--> <option value="1">北京</option> <option value="2" selected="selected">南京</option> <!-- selected 为默认值--> <option value="3">天津</option> </select>
