1.HTML
1.1 页面自动刷新和跳转
<head>
<!--meta charset="UTF-8"/-->
<!-- 每两秒刷新一次页面-->
<!--meta http-equiv="Refresh" Content="2"/-->
<!-- 五秒之后页面跳转到baidu.com-->
<meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com"/>
<title name="ssss">ooo</title>
</head>
1.2 设置网站关键字和简单描述（方便爬虫）
<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区"> <meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
1.3 给网站加题目和图片
<head>
# 显示小图标 ；挑浏览器，用chrome和火狐能显示，用百度浏览器没显示
<link rel="shortcut icon" href="123.ico">
# 显示标题
<title name="ssss">ooo</title>
</head>
1.4 块级标签和行内标签
div、hl、p是块级标签，这种标签无论内容多少，都是占一整行；
a、span、select是行内标签，内容多少就占多少位置。
<body>
# 一整行都是红色的
<div style="background-color:red;">first</div>
# 只有second的背景是绿色的
<span style="background-color:green;">second</span>
</body>
1.5 打印出<a>
<body>
# 这样会在页面显示“<”
<
</body>
<body>
# 这样会在页面上什么也不显示，因为浏览器把“<a”当成一个整体了，但是不完整，所以浏览器不报错也不显示
<a
</body>
#那么问题来了，既然“<”和“a”不能连在一块，那怎么在浏览器显示“<a>”呢？
#答案是：
<body>
# 这样会在页面显示“<a b>”
<a b>
</body>
1.6 标签
1.6.1 p，段落；br，换行
<body>
<a b>
<p>fdsafds<br />fsdfadsfasdf</p>
<p>fdsafd<br />sfsdfadsfasdf</p><p>fdsafdsfsd<br />fadsfasdf</p>
</body>
#结果：
<a b>
fdsafds
fsdfadsfasdf
fdsafd
sfsdfadsfasdf
fdsafdsfsd
fadsfasdf
1.6.2 a，设置链接
# 在当前页面跳转 <a href="http://www.baidu.com">百度</a> # 新打开一个页面跳转 <a href="http://www.baidu.com" target="_blank">百度</a> #href和target都是a标签所特有的。
1.6.3 a标签的锚作用
#寻找页面中id为i1的标签，将其标签显示到浏览器页面顶部 <a href="#i1">第一章</a><br /> <a href="#i2">第二章</a><br /> <a href="#i3">第三章</a><br /> #id属性可以不写，但要写就必须唯一！ <div id="i1" style="height:500px">第一章内容</div> <div id="i2" style="height:500px">第二章内容</div> <div id="i3" style="height:500px">第三章内容</div>
1.6.4 h,标题标签
<h1>a</h1> <h2>a</h2> <h3>a</h3> <h4>a</h5> <h5>a</h5> <h6>a</h6> #h1最大，h6最小；这里说的只是默认样式，完全可以再自定义，比如<h6 style="font:65px";>a</h6>，那这个a就变得很大了。
1.6.5 标签可以嵌套
<div style="color:green";> dfa <div style="color:red";> yellow <a href="https://www.baidu.com" target="_blank">baidu_red</a> </div> sdfsd </div>
1.6.6 input、select、textarea、form
<form>
<div style="border: 1px solid red";>
# 单行文本框
<p>用户名：<input type="text"></p>
# 密码框，输入的内容变*
<p>密码：<input type="password"></p>
# 邮箱
<p>邮箱：<input type="email"></p>
# 单选项，两个radio的“name”值必须一样才能保证只能选择一个
<p>性别：
<br/>男<input type="radio" name="gender">
<br/>女<input type="radio" name="gender">
</p>
# 复选框，可以选择多个
<p>兴趣：
<br/>多选1<input type="checkbox" name="gender">
<br/>多选2<input type="checkbox" name="gender">
<br/>多选3<input type="checkbox" name="gender">
<br/>多选4<input type="checkbox" name="gender">
</p>
#下拉选择
<p>
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
#默认显示三个，改成10就显示10个，超过10个的就出现滚动条；mutiple支持多选，按住ctrl
<select multiple size="10">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
<option>深圳</option>
</select>
# 将下拉选择分组
<select>
<optgroup label="河北">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</optgroup>
<optgroup label="河南">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</optgroup>
</select>
</p>
# 上传文件
<p>
文件：<input type="file">
</p>
# 多行文本框
<p>
备注：<textarea></textarea>
</p>
# 被<form></form>包围的代码叫一个表单
# 将当前表单里的数据提交；高版本的浏览器（IE9以上），
# 如果有email文本框，点了submit按钮后，浏览器，注意是浏览器而不是自己添加的js，
# 会自动检测用户输入的邮箱是否合法，但一般我们自己定义js来检测邮箱合法性。
<input type="submit" name="提交"/>
# 按钮没有什么作用，需要添加js
<input type="button" name="按钮"/>
# 将当前表单里的数据清空
<input type="reset" name="重置"/>
</div>
</form>
1.7 向后端发送数据
<!DOCTYPE html> <html lang="en"> <head> <title>test2</title> </head> <body> # 将表单的数据提交给www.sogou.com/web；method可以写post或get，几乎没区别，不影响。 # enctype的作用是：如果没有这个参数，上传文件只是把名字传到后台了，文件传不过去，另上传文件需要后台有接收文件的代码。 <form action="https://www.sogou.com/web" method="post" enctype="multipart/form-data"> <p><input type="text" name="user" /></p> <!--radio里必须定义了value值，不然传到后台后不知道到底选的男还是女--> <p>性别： 男<input type="radio" name="gender" value="1"/> 女<input type="radio" name="gender" value="2"/> </p> # chackbox的name也必须相同 <p>兴趣： 篮球<input type="checkbox" name="favor" value="1"> 足球<input type="checkbox" name="favor" value="2"> 乒乓球<input type="checkbox" name="favor" value="3"> </p> <p> # 把select标签提交到后台；选择了哪个城市，就把对应的value提交到后台，所以也必须写上name。 <select name="city"> <option value="1">上海</option> <option value="2">北京</option> <option value="3">广州</option> </select> </p> <p> 备注：<textarea name="extra"></textarea> </p> <p>文件： <input type="file" name="tijiao wenjian"> </p> <input type="submit" value="tijiao" /> </form> </body>
1.8 ul、ol、dl
<!DOCTYPE html> <html lang="en"> <head> <title>test2</title> </head> <body> # 前面是小黑点的列表形式 <ul> <li>ffff</li> <li>ffff</li> <li>ffff</li> </ul> # 前面是数字序号的列表形式 <ol> <li>ffff</li> <li>ffff</li> <li>ffff</li> </ol> # dt是标题，dd是内容 <dl> <dt>biaoti</dt> <dd>neirong</dd> <dd>neirong</dd> <dd>neirong</dd> <dt>biaoti</dt> <dd>neirong</dd> <dd>neirong</dd> <dd>neirong</dd> </dl> </body>
1.9 table，表格
<!DOCTYPE html> <html lang="en"> <head> <title>test2</title> </head> <body> <table border="1"> # 表格标题 <thead> <th>第一列</th> <th>第二列</th> <th>第三列</th> <th>第四列</th> </thead> # 表格内容 <tbody> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> <td>第四列</td> </tr> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> <td>第四列</td> </tr> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> <td>第四列</td> </tr> </tbody> </table> </body>
1.10 合并表格
<body>
<table border="1">
<thead>
# 将第一列第二列合并；本来是第一、二、三、四，共4列，现在第一列占了两列的位置，所以就必须删除一列。
<th colspan="2">第一列</th>
<th>第三列</th>
<th>第四列</th>
</thead>
<tbody>
<tr>
<td>第一列</td>
# 合并第二行第三行；跟列合并一样，既然第二行的宽度变成了两个行的宽度，所以就必须删除一个原有的行，不删也行，就凸出来一行。
<td rowspan="2">第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<td>第一列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
</tbody>
</table>
</body>
1.11 fieldset
<div>
<fieldset>
<legend>登录</legend>
<p>用户名：<input type="text" /></p>
<p>密码：<input type="password" /></p>
</fieldset>
</div>
1.12 iframe
<iframe style="100%;height:200px;" src="http://autohome.com.cn";></iframe>
1.13 总结
HTML 头部：编码，title，style，link 身体： 内联标签；无法改变样式 块级标签 inline-block，将内联标签变为特殊的块级标签，使内联标签可以改变样式 a标签： href(url 或者 #i1)，target img标签： src，alt（alt="图片"，如果图片链接不存在，则显示图片两个字而不是显示小红叉） iframe: src，伪Ajax，上传文件 form标签： action提交url；method，post或get；enctrype....，上传文件要加这个参数 #如果把input系列标签放到form标签里，一点提交、重置什么的都会提交到后端。 input系列： text password email radio： name值必须一样，实现互斥，value值要设置不同的。 checkbox: name值必须一样，需要设置不同的value值，不然数据传到后端分不清用户选择的是什么。 button： 按钮，一般是触发js submit： 提交当前form表单 reset： 重置当前form表单 file <select> <option></option> </select> textarea: 多行文本 设置默认值： <input value="这是默认值"/> <textarea>这是默认值</textarea> <select> <option>北京</option> <option selected="selected">上海</option> <option>广州</option> <option>深圳</option> </select> 男：<input type="radio" name="g1" value="1" checked="checked"/> 女：<input type="radio" name="g1" value="2" /> 篮球：<input type="checkbox" name="attr" value="1" /> 足球：<input type="checkbox" name="attr" value="2" checked="checked" /> 网球：<input type="checkbox" name="attr" value="3" />