HTML
<!DOCTYPE html> <html> <head> <!--自闭合标签--> <!--页面编码设置--> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <!--每5秒刷新页面--> <meta http-equiv="Refresh" content="5"> <!--5秒后跳转到百度页--> <meta http-equiv="Refresh" content="5; url=http://www.baidu.com"> <!--关键字--> <meta name="keywords" content="HTML,ASP,PHP,SQL"> <!--描述--> <meta name="description" content="描述信息"> <!--ie兼容设置--> <meta http-equiv="x-ua-compatible" content="ID=edge"> <!--标签内可以添加属性 name="title" 一般title不加属性--> <!--标题--> <title name="title">Title</title> <!--引入外部css文件--> <link rel="stylesheet" type="text/css" href="css/common.css"> <!--标题栏图标--> <link rel="shortcut icon" href="image/favicon.ico"> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <!--div是块级标签，不管内容有大，标签占据页面的整行--> <div style="background-color: red">123</div> <!--span是内联标签，内容多大，整个标签就多大--> <span style="background-color: green">456</span> <!--标题：h1-h6--> <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6> <!--p标签，表示段落（段落之间有间距） br表示换行--> <p>hello world! <br />my name is maco</p> <!--a标签,表示超链接；a标签特有属性是href，表示要跳转的链接；a默认在当前页面跳转，加上target="_blank"表示在新页面打开链接--> <a href="http://www.baidu.com">百度</a> <a href="http://www.baidu.com" target="_blank">百度2</a> <!--页内跳转：锚--> <!--href="#i1"：跳转到id为i1的标签（每个标签的id值可以不写，写了就必须唯一）--> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <div id="i1" style="height: 500px">第一章内容</div> <div id="i2" style="height: 500px">第二章内容</div> <div id="i3" style="height: 500px">第三章内容</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <div style="border: 1px solid red"> <!--input标签：输入--> <!--type="text"：输入内容为普通文本。要在文本框中添加默认值，就使用value属性--> <p> 用户名：<input type="text" value="123"/> </p> <!--type="password"：输入内容是密码形式（密文）--> <p> 密 码：<input type="password"/> </p> <!--type="email"：判断输入是否是邮件格式--> <p> 邮 件：<input type="email"/> </p> <!--type="radio"：单选框，要保证两个选项互斥，需要将两个input标签设置同一个name属性--> <!--单选框设置默认选中一个选项，使用属性：checked="checked"--> <p> 性 别：（单选框） 男:<input type="radio" name="gender" checked="checked"/> 女:<input type="radio" name="gender"/> </p> <!--type="checkbox"：复选框--> <!--复选框设置默认选中若干个选项，使用属性：checked="checked"--> <p> 爱 好：（复选框） 爱好1<input type="checkbox" checked="checked"/> 爱好2<input type="checkbox" checked="checked"/> 爱好3<input type="checkbox"/> 爱好4<input type="checkbox"/> 爱好5<input type="checkbox"/> </p> <p> 城市：（下拉菜单） <!--select标签：下拉框。要更改下拉框默认选中项，使用属性：selected="selected"--> <select> <option>北京</option> <option selected="selected">上海</option> <option>广州</option> <option>深圳</option> </select> <!--默认选择、展示一个，加上multiple后就可以选择、展示多个,展示时可以用size设置默认展示个数，超过后用滚动条显示--> <select multiple size="5"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> <!--optgroup：分组展示--> <select> <optgroup label="AAA"> <option>a1</option> <option>a2</option> <option>a3</option> </optgroup> <optgroup label="BBB"> <option>b1</option> <option>b2</option> <option>b3</option> </optgroup> </select> </p> <!--type="file"：选择文件--> <p> 文件：<input type="file"/> </p> <!--多行文本，还可以添加默认值（标签之间）--> <p> <textarea>123</textarea> </p> <!--form标签：要提交的数据就要放在form标签中--> <form> name:<input type="text"/> <!--submit：提交表单 button：普通按钮 reset：重置当前表单--> <input type="submit" value="提交"/> <input type="button" value="按钮"/> <input type="reset" value="重置"/> </form> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <!--form表单：action:数据要提交的url method：提交数据使用的方法（默认get） enctype="multipart/form-data"：上传文件--> <form action="https://www.sogou.com/web" method="get" enctype="multipart/form-data"> <!--要为文本框定义一个name属性，因为在提交数据时是key:value形式--> <input type="text" name="query"/> <!--单选框提交数据时，由于没有值提供，需要自定义一个value值，当提交时提交的就是选定的标签的value值--> 男：<input type="radio" name="gender" value="男"/> 女：<input type="radio" name="gender" value="女"/> <!--复选框和单选框类似，只是提交的值是多个。例：favor:[1,2]--> 篮球：<input type="checkbox" name="favor" value="1"/> 足球：<input type="checkbox" name="favor" value="2"/> 排球：<input type="checkbox" name="favor" value="3"/> <!--要上传文件，必须在form中加上enctype="multipart/form-data"，这样才能上传文件，不然提交过去的就只是文件名--> <input type="file"/> <!--下拉菜单name在select标签中定义，选中哪个option，就提交哪个option对应的value。例：city:[1,]--> <select name="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> <!--提交多行文本内容--> <textarea name="tt"></textarea> <input type="submit" value="提交"/> </form> <!--hr标签：生成横线--> <hr /> <form> <input type="text"/> <input type="submit" value="提交"/> </form> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <p> name:<input type="text"/> sex:<input type="checkbox"/> </p> <!--默认情况下input标签和说明文本是没有关联的，要想关联，就要使用label标签(通过for属性关联)--> <label for="name"> name:<input id="name" type="text"/> </label> <label for="sex"> sex:<input id="sex" type="checkbox"/> </label> <!--无序列表--> <ul> <li>aaaaaaa</li> <li>bbbbbbb</li> <li>ccccccc</li> </ul> <!--有序列表--> <ol> <li>ddddddd</li> <li>eeeeeee</li> <li>fffffff</li> </ol> <!--自定义列表 dt:自定义列表项（相当于标题） dd:自定义列表项的描述（相当于标题下的内容）--> <dl> <dt>DT1</dt> <dd>dd</dd> <dd>dd</dd> <dt>DT2</dt> <dd>dd</dd> <dd>dd</dd> </dl> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <!--表格:table标签 tr:表示一行 td:一列--> <table border="1"> <!--thead表示表格的标题 th：标题列，用于和普通的表格内容（tr）区分--> <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> <th>第四列</th> </tr> </thead> <!--tbody表示表格的内容--> <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> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <!--合并单元格--> <table border="1"> <tr> <!--左右单元格合并：colspan="2"--> <th colspan="2">标题一</th> <th>标题二</th> <th>标题三</th> <!--<th>标题三</th>--> </tr> <tr> <td>内容一</td> <td>内容二</td> <td>内容三</td> <td>内容三</td> </tr> <tr> <!--合并上下单元格：rowspan="2"--> <td>内容一</td> <td rowspan="2">内容二</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> </table> <hr /> <table border="1"> <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> <th>第四列</th> </tr> </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> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head> <body> <!--fieldset：将表单内的相关元素分组--> <fieldset> <legend>登录</legend> <p>用户：</p> <p>密码：</p> </fieldset> <!--iframe：创建包含另外一个文档的内联框架--> <iframe style="width: 100%;height: 1000px" src="http://www.baidu.com"></iframe> <!--图片显示,图片显示不出来时，就显示alt中定义的文本信息--> <img src="input标签.png" alt="图片"> </body> </html>
