index.html
<h1 style='background-color:red'>time</h1><!--设置背景颜色-->
<a href="http://www.qq.com">走啊</a>
<table border='1'>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
S1.html
<!DOCTYPE html><!--通用版式-->
<html lang="en"><!--lang="en"内部属性-->
<head>
<meta charset="UTF-8"> <!--#自闭和标签--><!--设置编码格式为utf-8-->
<meta http-equiv="Refresh" CONTENT="10"> <!--自动10秒刷新-->
<meta http-equiv="Refresh" CONTENT="5;Url=http://www.baidu.com"> <!--5秒后自动跳转到www.baidu.com-->
<meta name="keywords" content="风云再起"><!--关键词 用于搜索网站关键词-->
<meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。" /> <!--网站描述-->
<meta http-equiv="x-ua-compatible" CONTENT="IE=12;IE=11;IE=10"/><!--兼容IE12,IE11,IE10-->
<title>在哪里</title> <!--html浏览器标头-->
<link rel="shortcut icon" href="image/q.jpg"><!--网站浏览器小图标-->
</head>
<body>
<a href="http://www.taobao.com">淘宝</a> <!--跳转 点击淘宝就跳转www.taobao.com-->
</body><!-- 主动闭合标签-->
</html>
S2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/> <!--自闭合标签页也要用/以示结尾-->
<title>Title</title>
</head>
<body>
<p>只要你认识了 HTML 标记，你便会<br/>知道特殊字符的用处</p> <!--br标签是换行标签-->
<p>123</p> <!--p标签是段落标签 -->
<p>123</p> <!--属于块级标签-->
<p>123</p> <!--段落与段落之间有间距-->
<h1>A</h1> <!--h1标签:加大加粗-->
<h2>A</h2> <!--属于块级标签-->
<h3>A</h3> <!--h系列特性:加粗-->
<h4>A</h4> <!--总共就6-->
<h5>A</h5>
<h6>A</h6> <!--h6标签 字体最小-->
<span>hello world!</span> <!--属于内敛标签 行内标签-->
<span>hello world!</span> <!--span特性:白板-->
<span>hello world!</span>
<span></span>
<span>hello world!</span>
<div>1</div><!--div白板 块级标签-->
<div>2</div>
<div>3</div>
<br/>
<a href="http://www.autohome.com">汽车 ><a>之家</a> <!--点击跳转--><!-- 为空格 大于小于--><!--特殊符号http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html-->
</body>
</html>
S3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>
<div id="i1" style="position: fixed;bottom: 0;right: 0;">asdfcc</div>
<div></div>
<span></span>
<p>
<div>
</div>
</p>
</div>
</div>
</body>
</html>
S4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input标签</title>
</head>
<body>
<form action="http://localhost:8888/index" method="post"> <!--action:表单提交到哪--><!--get方式是直接拼到url发到后台--><!--post方式是放到body里发到后台-->
<input type="text" name="user"/> <!--name属性-->
<input type="text" name="email">
<input type="password" name="password"/>
<!--{user:'用户输入的用户名',email:'',password:''}-->
<input type="button" value="登录1"/><!--按钮-->
<input type="submit" value="登录2"/><!--提交表单-->
</form>
<br>
<form>
<input type="text"/>
<input type="password"/>
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
</form>
</body>
</html>
S5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.sogou.com/web"> <!--form表单标签-->
<input type="text" name="query" value="nihao"> <!--value：空格里的默认值-->
<input type="submit" value="搜索">
</form>
</body>
</html>
S6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data"><!--enctype="multipart/form-data"该属性用于文件上传-->
<div>
<select name="city" size="6" multiple="multiple"><!--通过name value取数据提交到后台 size设置选项显示多少行 multiple设置为多选-->
<option value="1">北京</option>
<option value="2">上海</option><!--option定义value和选项-->
<option value="3">广州</option>
<option value="4" selected="selected">深圳</option> <!--selected设置为默认选项-->
</select>
<select>
<optgroup label="江西"> <!--optgroup label：提示标签 非选项-->
<option>南昌</option>
<option selected="selected">赣州</option>
</optgroup>
</select>
<input type="text" name="user">
<p>请选择性别:</p>
男:<input type="radio" name="gender" value="1"/> <!--input type='radio' 单选框 name value 属性 (name相同互斥)-->
女:<input type="radio" name="gender" value="2" checked="checked"/> <!--加了 checked="checked"默认被选中-->
<p>爱好</p>
篮球:<input type="checkbox" name="favor" value="1"/> <!--input type='checkboe 复选框 value.name属性(批量获取数据)'-->
足球:<input type="checkbox" name="favor" value="2" checked="checked"/><!--加了checked='checked' 默认被选中-->
羽毛球:<input type="checkbox" name="favor" value="3"/>
台球:<input type="checkbox" name="favor" value="4"/>
网球:<input type="checkbox" name="favor" value="5"/>
乒乓球:<input type="checkbox" name="favor" value="6" checked="checked"/>
<p>技能</p>
聊天:<input type="checkbox" name="skill" value="1" checked="checked"/>
写代码:<input type="checkbox" name="skill" value="2"/>
<p>上传文件</p>
<input type="file" name="fname"><!--input type='file'上传文件--><!--依赖form表单的一个属性 enctype="multipart/form-data"-->
</div>
<textarea name="meno" >asdsadad</textarea> <!--<textarea>默认值<textarea> name属性-->
<input type="submit" value="提交">
<input type="reset" value="重置"> <!--input type='reset' 重置-->
</form>
</body>
</html>
S7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a><!--a href：标签用于超链接 target="_blank"设置超链接在新页面打开-->
<br/>
<br/>
<a href="#i1">第一章</a><!--href="#某个标签的id" 标签的id不能重复-->
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id="i1" style="height: 1100px">第一章的内容</div><!--id用于做锚点-->
<div id="i2" style="height: 1100px">第二章的内容</div>
<div id="i3" style="height: 1100px">第三章的内容</div>
<div id="i4" style="height: 1100px">第四章的内容</div>
</body>
</html>
S8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="imagemain-hero-mobile.jpg" title="tesla" style=" height:500px ;width: 200px;" alt="美女"> <!--style：css样式 title:鼠标放上去显示的字 alt：当图片无法显示时就显示这个参数值-->
</a>
<ul> <!--列表: 点开头-->
<li>asdfrg</li>
<li>asdfff</li>
<li>asdddd</li>
</ul>
<ol><!--列表:数字开头-->
<li>asdfrg</li>
<li>asdfff</li>
<li>asdddd</li>
</ol>
<dl>
<dt>ttt</dt> <!--dt:标题-->
<dd>ddd</dd><!--dd:内容-->
<dd>ddd</dd>
<dd>ddd</dd>
</dl>
</body>
</html>
S9.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1"><!--border:加上边框 1为边框粗细-->
<tr><!--tr：表示行-->
<td>主机名</td> <!--td:表示列-->
<td>端口</td>
<td>操作</td>
</tr>
<tr><!--tr：表示行-->
<td>192.168.0.6</td>
<td>80</td>
<td><!--对这一列加入一个超链接a href-->
<a href="s2.html" target="_blank">查看详细</a>
<a href="#">修改</a> <!--加#哪都不跳转-->
</td>
</tr>
<tr><!--tr：表示行-->
<td>192.168.0.6</td>
<td>22</td>
<td>第二行，第3列</td>
</tr>
<tr><!--tr：表示行-->
<td>192.168.0.6</td>
<td>3306</td>
<td>第二行，第3列</td>
</tr>
</table>
<table border="1"><!--tr行 td列-->
<thead>
<tr><!--表头那一行-->
<th>表头1</th><!--表头的每一列要用th 代替td-->
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead><!--thead:表头-->
<tbody>
<tr><!--内容那一行-->
<td>1</td><!--内容的每一列用td-->
<td colspan="2">2</td> <!--属性colspan=2表示这个td会横跨2列数据-->
<!--<td>3</td>--> <!--横跨2格数据要去掉一个td数据才能整齐对的上表格-->
<td>4</td>
</tr>
<tr><!--内容那一行-->
<td rowspan="2">1</td><!--内容的每一列用td--><!--rowspan=2表示这个td要占2行-->
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr><!--内容那一行-->
<!--<td>1</td><!–内容的每一列用td–>--><!--上面的已经占了这个,就要去掉-->
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr><!--内容那一行-->
<td>1</td><!--内容的每一列用td-->
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr><!--内容那一行-->
<td>1</td><!--内容的每一列用td-->
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody><!--tbody:内容-->
</table>
</body>
</html>
S10.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form><!--form表单-->
<fieldset><!--框-->
<legend>登陆</legend><!--框的缺口的显示字-->
<label for="Username">用户名:</label> <!--通过for与input关联 点击label也能输入 获取光标-->
<input id="Username" type="text" name="User"/>
<br/>
<label for="password">密码:</label> <!--通过for与input关联 点击label也能输入 获取光标-->
<input id="password" type="text" name="password"/>
<br>
<input type="reset" value="重置">
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>