标题、段落、换行
<head>
<meta charset="utf-8" />
<title>标题</title>
</head>
<body>
显示的内容
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落标签段落标签段落标签段落标签段落<br />
标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
<p>段落标签</p>
<p>
窗前明月光<br />
疑是地上霜<br />
举头望明月<br />
低头思故乡<br />
</p>
</body>
下面为运行截图:
加粗、斜体、分割线、空格
<head>
<meta charset="UTF-8">
<title>demo1</title>
</head>
<body>
<h3>静夜思</h3>
<hr />
<p>
窗前明月光<br />
疑是地上霜<br />
举头望明月<br />
低头思故乡<br />
</p>
<strong>李白</strong>
<p><em>2020年,我们度过了难忘的一年!</em></p>
<p>ceshi sdagg</p>
</body>
下面为运行结果:
小练习1:
<head>
<meta charset="UTF-8">
<title>腾讯云简介</title>
</head>
<body>
<h1>
<strong>腾讯云</strong>
</h1>
<p><strong>腾讯云</strong>有着深厚的基础架构,并且有着多年对海量互联网服务的经验,
不管是社交、游戏还是其他领域,都有多年的成熟产品来提供产品服务。
腾讯在云端完成重要部署,为开发者及企业提供云服务、云数据、
云运营等整体一站式服务方案.<br />
具体包括云服务器、云储存、云数据库和弹性web引擎等
</p>
<hr />
® 腾讯云版权所有
</body>
下面为运行截图:
图片演示
<head>
<meta charset="UTF-8">
<title>图片演示</title>
</head>
<body>
<img src="img/ckkrbEFaamVKRWlmSHl2NEJwTlJUR1Yyc0docmM5MlpCQmtlMEpRUWwrelp6K3Jsd1RUK0RBPT0.jpg" title="这是书房"/>
</body>
下面为运行结果:
超链接、回到顶部
<head>
<meta charset="UTF-8">
<title>超链接测试</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br />
<a href="a2.html" target="_blank">a2</a>
aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
<a href="#">回到顶部</a>
</body>
a2:
<head>
<meta charset="UTF-8">
<title>a2</title>
</head>
<body>
阿
</body>
下面为运行结果:
定位跳转
<body>
<p>
<a href="#1">竞赛</a>
<a href="#2">人工智能</a>
</p>
<p>
相关著作
</p>
<p>
aaaa<br />aaaaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
<a name="1"/>
dhgsh1<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
<a name="2"/>
sdhh2<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
aaaaa<br />aaaaa<br />aaaaa<br />
</body>
列表项
<head>
<meta charset="UTF-8">
<title>列表与描述</title>
</head>
<body>
<dl>
<dt>列表项1</dt>
<dd>描述1</dd>
<dt>列表项2</dt>
<dd>描述2</dd>
<dt>列表项3</dt>
<dd>描述3</dd>
<ul>
<dd>描述1</dd>
<dd>描述2</dd>
<dd>描述3</dd>
</ul>
</dl>
</body>
下面为运行结果:
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol type="circle">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ol>
</body>
下面为运行结果:
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul>
<ul type="circle">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
</body>
下面为运行结果:
小练习2:
<head>
<meta charset="UTF-8">
<title>图书列表</title>
</head>
<body>
<ol type="1">
<li><img src="../img/111.jpg" width="120" height="120" /><br /> 111</li>
<li><img src="../img/111.jpg" width="120" height="120" /><br /> 222</li>
<li><img src="../img/111.jpg" width="120" height="120" /><br /> 333</li>
</ol>
</body>
下面是运行结果:
表单
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="提交地址">
文本框:<input type="text" placeholder="请输入用户名"/>
<br />
密码框:<input type="password" placeholder="请输入密码"/>
<br />
单选框/选择框(可双选):
<input type="radio" /> 男
<input type="radio" /> 女
<br />
单选框/选择框(不可复选):
<input type="radio" name="gender" /> 男
<input type="radio" name="gender" /> 女
<br />
单选框/选择框(不可复选,男默认被选中):
<input type="radio" name="gr" checked="checked"/> 男
<input type="radio" name="gr"/> 女
<br />
复选框:
<input type="checkbox" name="ckb"/> 1
<input type="checkbox" name="ckb"/> 2
<input type="checkbox" name="ckb"/> 3
<br />
下拉框(默认值为上海):
<select>
<option>黑龙江</option>
<option>北京</option>
<option selected="selected">上海</option>
<option>广州</option>
</select>
<br />
文本域(5行20列):
<textarea cols="20" rows="5"></textarea>
<br />
上传(不是真上传,只能看本地的文件,想上传需要本地服务器):
<input type="file"/>
普通按钮:
<input type="button" value="普通按钮"/>
<br />
提交按钮(提交至服务器):
<input type="submit" value="提交按钮"/>
<br />
重置按钮:
<input type="reset" value="重置"/>
</form>
</body>
下面是运行结果:
表格
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1px" width="300px">
<tr>
<th>姓名</th><th>性别</th><th>年龄</th>
</tr>
<tr>
<th>张三</th><th>男</th><th>21</th>
</tr>
<tr>
<th>李四</th><th>男</th><th>22</th>
</tr>
<tr>
<th>王五</th><th>女</th><th>23</th>
</tr>
<tr>
<th>周六</th><th>女</th><th>24</th>
</tr>
</table>
</body>
下面为运行结果:
合并表格
<head>
<meta charset="UTF-8">
<title>学生名单分组表</title>
</head>
<body>
<table border="1px" width="400px">
<tr>
<th rowspan="2">组名</th>
<th rowspan="2">学号</th>
<th rowspan="2">姓名</th>
<th rowspan="2">年龄</th>
<th colspan="2">联系方式</th>
</tr>
<tr>
<th>QQ号</td><th>手机号</th>
</tr>
<tr>
<td rowspan="2">第一组</td>
<td>10001</td><td>麻冥旭</td><td>16</td>
<td>234345345</td><td>1386666666</td>
</tr>
<tr>
<td>10002</td><td>赵月</td><td>16</td>
<td>234345345</td><td>1386666666</td>
</tr>
<tr>
<td>第二组</td><td>10003</td><td>练衡</td>
<td>16</td><td colspan="2">234345345</td>
</tr>
</table>
</body>
下面是运行结果:
作业1:
<head>
<meta charset="UTF-8">
<title>经典语录</title>
</head>
<body>
<h2><strong>励志语录</strong></h2>
<hr />
<p>不管在什么时候,都绝不允许随便舍弃性命,</p>
<p>无论是在小动物还是人的全球里,适者生存是很当然的事,</p>
<p>为了更好地生存,最强者务必要觅食弱小,弱小则务必要避开最强者,</p>
<p>生存是一种本能反应。</p>
<p>不管在任何时刻,都决不会应当舍弃生命,它是对生命的重视。</p>
<hr />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdpic.tiankong.com%2F16%2F18%2FQJ8724199534.jpg&refer=http%3A%2F%2Fdpic.tiankong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613895289&t=d77ca10650a37d41166dce12fcab59f3" width="500" height="300"/>
</body>
下面为运行结果:
作业2:
<head>
<meta charset="UTF-8">
<title>商品列表</title>
</head>
<body>
<h2><strong>商品列表</strong></h2>
<ul type="disc">
<li>女装/内衣/家居</li>
<li>女鞋/男鞋/箱包</li>
<li>母婴/童装/玩具</li>
<li>男装/运动户外</li>
<li>美妆/彩妆/个护</li>
<li>手机/数码/企业</li>
<li>大家电/生活电器</li>
<li>零食/生鲜/茶酒</li>
<li>厨具/收纳/清洁</li>
<li>家纺/家饰/鲜花</li>
<li>图书音像/文具</li>
<li>医药保健/进口</li>
<li>汽车/二手车/用品</li>
<li>房产/装修家具/建材</li>
<li>手表/眼镜/珠宝首饰</li>
</ul>
</body>
下面为运行结果:
——The End