初识HTML
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初识HTML</title> </head> <body> <h1>你好，我是SEO第一帅！</h1> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
H标签
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题与段落</title> </head> <body> <p>Demo说明： 本demo主要演示H标签的加粗效果与不同H标签的字体大小，以及P标签的段落及默认换行效果</p> <h1>我是H1标题</h1> <p>这是一段描述，主要看不同的H标签的文字大小</p> <h2>我是H2标题</h2> <p>这是一段描述，主要看不同的H标签的文字大小</p> <h3>我是H3标题</h3> <p>这是一段描述，主要看不同的H标签的文字大小</p> <h4>我是H4标题</h4> <p>这是一段描述，主要看不同的H标签的文字大小</p> <h5>我是H5标题</h5> <p>这是一段描述，主要看不同的H标签的文字大小</p> <h6>我是H6标题</h6> <p>这是一段描述，主要看不同的H标签的文字大小</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
A标签链接运用及target属性
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>a标签链接不同窗口打开形式</title> </head> <body> <h1>a标签链接中target不同属性在不同窗口打开的形式demo</h1> 默认当前页面打开：<a href="https://www.baidu.com/">百度一下</a><br> 默认值_self：<a href="https://www.baidu.com/" target="_self">百度一下</a><br> 新窗口打开_blank：<a href="https://www.baidu.com/" target="_blank">百度一下</a><br> 父窗口打开_parent：<a href="https://www.baidu.com/" target="_parent">百度一下</a><br> 顶层窗口打开_top：<a href="https://www.baidu.com/" target="_top">百度一下</a><br> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
图像Img标签运用
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像img标签</title>
</head>
<body>
<p align="center">你好，我是吴尊，我是***第一帅。下面是我的帅照，图片来源于网络</p>
<h3 align="center">鼠标移动到图片上有说明！</h3>
<!--给H3标签添加字体颜色样式-->
<style>
h3{color: red;}
</style>
<div align="center">
<img src="http://s8.sinaimg.cn/mw690/001P8cdLzy754xyDCmz57&690" alt="第一帅吴尊帅照" title="这是我坐在船上的帅照">
<hr>
<img src="http://pic.eastlady.cn/uploads/tp/201709/9999/ef765b6d9a.jpeg" alt="第一帅吴尊帅照" title="这是我在健身的帅照">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
无序列表、有序列表、定义列表
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <h3>购物车（无序列表演示）</h3> <ul> <li>1.苹果手机，一台，8000元</li> <li>2.MAC笔记本，一台，28000元</li> <li>3.外星人台式机，一台，39800元</li> </ul> <h3>购物车（有序列表演示）</h3> <ol> <li>1.苹果手机，一台，8000元</li> <li>2.MAC笔记本，一台，28000元</li> <li>3.外星人台式机，一台，39800元</li> </ol> <h3>无序列表导航演示</h3> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li> </ul> <h3>定义列表演示</h3> <dl> <dt>简要标题1</dt> <dd>这是说明性文字，我就懒得去打字了。定义列表,类似于名词解释, 通常用来制作页脚的导航</dd> <dt>简要标题2</dt> <dd>这是说明性文字，我就懒得去打字了。定义列表,类似于名词解释, 通常用来制作页脚的导航</dd> <dt>简要标题3</dt> <dd>这是说明性文字，我就懒得去打字了。定义列表,类似于名词解释, 通常用来制作页脚的导航</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Table 表格运用
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的常用demo</title>
</head>
<body>
<h3>购物车（无序列表演示）</h3>
<ul>
<li>1.苹果手机，一台，8000元</li>
<li>2.MAC笔记本，一台，28000元</li>
<li>3.外星人台式机，2台，80000元</li>
</ul>
<!--这里是分界线，下面是表格-->
<hr>
<!--设置表格内所有内容居中显示-->
<style>
table{text-align: center;}
</style>
<table border="1" cellspacing="0" cellpadding="5" width="600" align="center" bgcolor="aqua">
<!--表格标题-->
<caption><h3>购物车</h3></caption>
<!--表格表头thead部分-->
<thead>
<tr bgcolor="fuchsia;">
<td>编号</td>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>金额</td>
</tr>
</thead>
<!--表哥主体tbody部分-->
<tbody>
<tr>
<td>1</td>
<td>苹果手机</td>
<td>8000元</td>
<td>1</td>
<!--<td>8000元</td>-->
<td rowspan="2">36000元</td>
</tr>
<tr>
<td>2</td>
<td>Mac笔记本</td>
<td>28000元</td>
<td>1</td>
<!--<td>28000元</td>-->
</tr>
<tr>
<td>3</td>
<td>外星人台式机</td>
<td>80000元</td>
<td>2</td>
<td>80000元</td>
</tr>
</tbody>
<!--表格底部-->
<tfoot>
<tr bgcolor="#ffd700;">
<td colspan="3">合计</td>
<!--<td>外星人台式机</td>-->
<!--<td>80000元</td>-->
<td>4</td>
<td>11600元</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
Form表单及表单控件运用
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单与表单中的控件元素demo</title> </head> <body> <h1>用户注册</h1> <p>请按提示输入以下信息并提交注册</p> <form action="" method="get" name="regsister"> <!--账号--> <p> <label for="username">用户名：</label> <input type="text" id="username" placeholder="6-10个字符" autofocus required> </p> <!--密码--> <p> <label for="password">密码：</label> <input type="password" id="password" placeholder="9-15个字符" required> </p> <!--邮箱--> <p> <label for="email" id="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="请正确输入邮箱" required> </p> <!--年龄--> <p> <label for="age" id="age">年龄：</label> <input type="number" id="age" name="age" min="18" max="120" required> </p> <!--生日--> <p> <label for="birthday" id="birthday">生日：</label> <input type="date" id="birthday" name="birthday" required> </p> <!--下拉框demo--> <label for="xiala" id="xiala">下拉：</label> <select id="xiala" name="xiala" size="1"> <!--设置selected默认选中项--> <option value="0" selected>请选择</option> <option value="1">HTML</option> <option value="2">PHP</option> <option value="3">PYTHON</option> </select> <!--复选框--> <p> <label for="hobby" id="hobby">爱好：</label> <input type="checkbox" value="hobby" name="hobby" id="geme"> <label for="geme">打游戏</label> <input type="checkbox" value="hobby" name="hobby" id="movie"> <label for="movie">看电影</label> <input type="checkbox" value="hobby" name="hobby" id="daima"> <label for="daima">写代码</label> </p> <!--单选按钮--> <p> <label for="sex">性别：</label> <input type="radio" name="sex" value="men" id="men"> <label for="men" name="men">男</label> <input type="radio" name="sex" value="women" id="women"> <label for="women" name="women">女</label> <input type="radio" name="sex" value="baomi" id="baomi"> <label for="women" name="baomi">保密</label> </p> <!--文本域--> <p> <label for="jianjie">个人简介：</label><br> <textarea name="jianjie" id="jianjie" cols="30" rows="10" maxlength="120" placeholder="最多不超过120个字符"></textarea> </p> <!--提交按钮--> <input type="submit" name="submit" value="提交"> <!--重置按钮--> <input type="reset" name="reset" value="重置"> <!--普通按钮--> <input type="button" name="botton" value="input type=button普通按钮"> <!--button按钮--> <button>普通按钮button</button>== <button type="submit">推荐button type="submit"</button>== <button type="button">botton type="button"</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例