1、HTML是一种网页设计语言，由HTML语言写出的静态网页文件的扩展名有HTM、HTML、SHTML、DHTML等多种。
2、HTTP是一种超文本传输协议，是一套计算机通过网络进行通信的规则，为html服务的
列表导航
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>列表导航</title>
</head>
<style type="text/css">
ul li:nth-child(1){padding-right: 100px;}
li{float: left;list-style: none;padding-left: 5px;padding-right: 10px;}
li a{text-decoration: none;}
</style>
<body>
<header>
<nav>
<ul>
<li><a href="/" target="_blank"><img src="/" alt="logo"></a></li>
<li><a href="#" target="_self">首页</a></li>
<li><a href="#" target="_self">关于</a></li>
<li><a href="#" target="_self">资讯</a></li>
<li><a href="#" target="_self">产品</a></li>
<li><a href="#" target="_self">***</a></li>
<li><a href="#" target="_self">联系</a></li>
</ul>
</nav>
</header>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
表格
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表格demo</title>
</head>
<style type="text/css">
th,td,tr{width:100px;text-align: center;}
</style>
<body>
<table border="1" cellpadding="1" cellspacing="0" >
<thead>
<tr><th colspan="6" bgcolor="#99900">商品明细表</th></tr>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>商品型号</th>
<th>商品单价</th>
<th>商品库存</th>
<th>备注</th>
</tr>
</thead>
<tbody >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td rowspan="3"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">1</td>
<td colspan="2">2</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
注册表单
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>用户注册demo</title> </head> <style type="text/css"> </style> <body> <h3>注册</h3> <form action="login.php" method="post"> <p> <label for="username">账户名：</label> <input type="text" name="username" id="username" placeholder="请输入账户名"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="不少于六位数"> </p> <p> <label for="email">邮箱：</label> <input type="email" name="email" id="email" placeholder="XXXXXX@qq.com" required> </p> <p> <label for="secrect">性别</label> <input type="radio" name="gender" id="male"> <label for="male">男</label> <input type="radio" name="gender" id="female"> <label for="female">女</label> <input type="radio" name="gender" id="secrect"> <label for="secrecy">保密</label> </p> <p> <label for="number">年龄：</label> <input type="number" name="number" id="number" min="15" max="45"> </p> <p> <label for="basketball">爱好：(多选）</label> <input type="checkbox" name="hobby" value="basketball" id="basketball" checked="checked"> <label for="basketball">篮球</label> <input type="checkbox" name="hobby" value="football" id="football"> <label for="football">足球</label> <input type="checkbox" name="hobby" value="pingpang" id="pingpang"> <label for="pingpang">乒乓球</label> </p> <p> <label for="html">课程：(下拉选择)</label> <select name="out"> <option>请选择</option> <optgroup label="html"> <option>css</option> <option>js</option> <option>web</option> <option>java</option> </optgroup> <optgroup label="phyton"> <option>sublime</option> <option>phpstorm</option> <option>notepad++</option> <option>其他</option> </optgroup> </select> </p> <p> <label for="file">文件上传</label> <input type="file" name="file" id="file"> </p> <p> <input type="radio" name="xieyi" id="xieyi"> <label for="xieyi"><a href="/" target="_blank">免责协议</a></label> </p> <input type="submit"> <button>注册</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
后台登陆
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>后台</title> </head> <body> <h3>欢迎来访管理者后台</h3> <ul style="float: left;padding: 0 50px"> <li><a href="demo.html" target="content">导航</a></li> <li><a href="demo1.html" target="content">表格</a></li> <li><a href="demo3.html" target="content">表单</a></li> <li><a href="demo4.html" target="_self">首页</a></li> </ul> </body> <iframe srcdoc="<a href='###'>欢迎来访管理者后台</a>" frameborder="1" name="content" width="80%" height="600"></iframe> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
为什么用语义化标签？
语义化标签容易被搜索引擎识别，有利于SEO。语义化标签便于开发与维护。
