测开学习篇-html
1.标题 关键词 描述
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 网页头部 -->
<meta charset="UTF-8">
<meta name="Keywords" content="网页关键字，搜索引擎搜索关键字后找到这个网页">
<meta name="Description" content="网页描述信息">
<title>标题 关键词 描述</title>
</head>
<body>
<!-- 网页内容 -->
顶顶顶
</body>
</html>
2.有序列表和无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表和无序列表</title>
</head>
<body>
有序列表
<ol>
<!-- 不选择type类型默认使用1.2.3.排序 -->
<li>11</li>
<li>22</li>
<li>32</li>
</ol>
<ol type="A">
<!-- A.B.C.排序 -->
<li>11</li>
<li>22</li>
<li>32</li>
</ol>
<hr>
无序列表
<ul>
<!-- 不选择type类型默认使用实心小圆点.，还可以指定类型type空心小圆点等 -->
<li>11</li>
<li>22</li>
<li>32</li>
</ul>
</body>
</html>
3.div分区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div分区</title>
</head>
<body>
<div class="header">
<div class="logo">logo图片</div>
<nav>导航栏标签</nav>
</div>
<div class="banner">轮播图广告</div>
<div class="content">
<div class="aside">左侧导航栏</div>
<div class="main">主要内容区域</div>
</div>
<footer>底部标签</footer>
</body>
</html>
4.语义标签
div和span
对于div和span这两个元素，不少新手也不知道它们之间有什么区别，使用起来也很随便。因此，这里有必要简单介绍一下。
div和span没有任何语义,正是因为没有语义，这两个标签一般都是配合CSS来定义元素 样式的。
div和span区别如下：
(1 ) div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。
(2 ) div常用于页面中较大块的结构划分，然后配合CSS来操作；span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS 操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义标签</title>
</head>
<body>
<div>
<!-- span标签本身没什么作用，但是可以通过css来控制span的样式 -->
<span>姓名：</span><span>李牧</span>
</div>
</body>
</html>
5.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!-- 表格基本结构 -->
<table>
<tr>
<td>第一行第一格</td>
<td>第一行第二格</td>
<td>第一行第三格</td>
</tr>
<tr>
<td>第二行第一格</td>
<td>第二行第二格</td>
<td>第二行第三格</td>
</tr>
</table>
<!-- 表格完整结构 边框border="1"-->
<table border="1">
<caption>表格标题</caption>
<!-- 表头 -->
<thead>
<tr>
<th>用例标题</th>
<th>预取结果</th>
<th>测试结果</th>
</tr>
</thead>
<!-- 表身 -->
<tbody>
<tr>
<td>正确账号密码登录</td>
<td>登录成功</td>
<td>测试成功</td>
</tr>
<tr>
<td>错误账号密码登录</td>
<td>登录失败</td>
<td>测试成功</td>
</tr>
<!-- 表脚 -->
<tfoot>
<tr>
<td>表脚1</td>
<td>表脚2</td>
<td>表脚3</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>
6.表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="http://127.0.0.1/login" method="post">
<p>
姓名 <input type="text">
</p>
<p>
年龄 <input type="text">
</p>
<p>
<!-- 单选框radio，选男的话给后端的参数就是 sex：1 -->
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
</p>
<p>
<!-- 复选框checkbox， checked默认选择-->
<input type="checkbox" name="game" checked>lol
<input type="checkbox" name="game" checked>部落冲突
<input type="checkbox" name="game">原神
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
