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="image\main-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>