初识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>
点击 "运行实例" 按钮查看在线实例
Correction status：qualified
Teacher's comments：完成的不错。
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
