<!DOCTYPE html>
<!-- !DOCTYPE html 文档类型声明标签，告诉浏览器这个页面采取html5版显示页面。 -->
<html lang="en">
<!-- html lang="en" 告诉浏览器或搜索引擎这是一个英文网站，本页面采取英文来显示。 -->
<head>
<!-- head 头部 -->
<meta charset="UTF-8">
<!-- meta charset="UTF-8" 采取utf-8来保存文字，如果不写有可能出现乱码。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 显示窗口 宽度 是 客户端的 屏幕 宽度，显示的文字和图形的初始比例 是 1.0 -->
<title>表格练习</title>
<!-- title 标题 -->
</head>
<body>
<!-- body 主体-->
<a href="#a">跳转</a>
<img src="jd.jpg" alt="吉多.范罗苏姆" width="200" height="200">
<!-- img 添加图片标签 src 图片位置 alt 触摸图片提示文本 width 图片宽度 height 图片高度 -->
<h4>添加视频练习</h4>
<video src="sp.mp4" width="200" controls title="这是个视频"></video>
<!-- video 添加视频 src 视频位置 controls 视频控制条 title 触摸视频提示文本 -->
<audio src="许嵩 - 想象之中.mp3" controls title="想象之中"></audio>
<!-- audio 添加音乐 -->
<h1>吉多·范罗苏姆</h1>
<!-- h1 文本标题 -->
<!-- p 文本段落 -->
<strong>加粗</strong>
<b>加粗</b>
<em>斜体</em>
<i>斜体</i>
<del>删除线</del>
<u>下划线</u>
<p>吉多·范罗苏姆（Guido van Rossum） ，是一名荷兰计算机程序员，
他作为 Python 程序设计语言的作者而为人们熟知。在 Python 社区，
吉多·范罗苏姆被人们认为是“仁慈的独裁者（BDFL）”，
意思是他仍然关注 Python 的开发进程，并在必要的时刻做出决定。
他在 Google 工作，在那里他把一半的时间用来维护 Python 的开发。</P>
<p>2020年11月12日， 64岁的Python之父Guido van Rossum在自己的官方宣布：
由于退休生活太无聊，自己决定加入Microsoft 的 DevDiv Team。</p>
<a href="https://baijiahao.baidu.com/s?id=1677318145544255613&wfr=spider&for=pc&searchword=%E5%90%89%E5%A4%9A%C2%B7%E8%8C%83%E7%BD%97%E8%8B%8F%E5%A7%86%E4%BA%BA%E7%89%A9%E7%BB%8F%E5%8E%86&ivk_sa=1024320u">
Python之父吉多·范罗苏姆，三十余载的Python之路，结果如何？</a>
<!-- a 添加超链接 target="_blank"在新页面打开 download 下载属性-->
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!-- ul 无序列表 -->
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!-- ol 有序列表 -->
<dl>
<dt>列表1</dt>
<dd>列表2</dd>
<dd>列表3</dd>
</dl>
<!-- dl 自定义列表 dt 定义项目 dd 描述每一个项目 -->
<table>
<!-- table 列表 -->
<tr> <th>姓名</th><th>性别</th><th>年龄</th></tr>
<!-- th 列表头部字体加粗 -->
<tr> <td>小明</td> <td>男</td> <td>12</td></tr>
<tr> <td>小红</td> <td>女</td> <td>11</td></tr>
<tr> <td>小刚</td> <td>男</td> <td>20</td></tr>
<tr> <td>小黑</td> <td>男</td> <td>45</td></tr>
<tr> <td>小白</td> <td>女</td> <td>58</td></tr>
</table>
<div id="a">我是跳转定位属性</div>
<table align="center" width="500" height="250" border="1" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>西游记</td>
<td><img src="xs.jpg" width="10" >
</td> <td>12138</td>
<td>7657465</td>
<td> <a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723?fr=aladdin" target="_blank">简介 </a></td>
</tr>
<tr>
<td>2</td>
<td>水浒传</td>
<td><img src="xx.jpg" width="30" >
</td> <td>854</td>
<td>767862</td>
<td><a href="https://baike.baidu.com/item/%E6%B0%B4%E6%B5%92%E4%BC%A0/53966463?fr=aladdin&fromtitle=%E5%9B%9B%E5%A4%A7%E5%90%8D%E8%91%97%EF%BC%9A%E6%B0%B4%E6%B5%92%E4%BC%A0&fromid=16237238" target="_blank" > 简介</a></td>
</tr>
<tr>
<td>3</td>
<td>三国演义</td>
<td><img src="xs.jpg" width="10" >
</td> <td>9589</td>
<td>86845</td>
<td><a href="https://baike.baidu.com/item/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89/5782?fr=aladdin" target="_blank" > 简介</a></td>
</tr>
<tr>
<td>4</td>
<td>红楼梦</td>
<td><img src="xx.jpg" width="30"></td>
<td>8684</td> <td>85676</td>
<td><a href="https://baike.baidu.com/item/%E7%BA%A2%E6%A5%BC%E6%A2%A6/15311?fr=aladdin" target="_blank"> 简介</a></td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<table align="center" width="500" height="250" border="1" cellspacing="0">
<tr>
<th rowspan="2"></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- colspan 跨列 rowspan 跨行 -->
<!-- 先确定是跨行还是跨列
找到目标格，写上合并方式=合并的单元格数量
删除多余的单元格 -->
</table>
<form>
<label for="text"> 用户名：</label><input type="text" name="username" value="请输入用户名" maxlength="4" id="txet"><br>
<!-- label 标签用于绑定一个表单元素，当点击label 标签内的文本时，浏览器就会自动将光标转到相应的表单元素上，用来增加用户体验。 -->
<!-- label 标签的for属性应当与相关元素的id属性相同。 -->
<!-- maxlength 规定输入字段中的最大长度 -->
<!-- text 文本框可以输入任何文字 -->
<label for="pwd"> 密码:</label> <input type="password" name="pwd" id="pwd" ><br>
<!-- password 密码框 用户看不见密码 -->
<label for="sex"> 性别:男</label><input type="radio" name="sex" checked id="sex"> <label for="nv"> 女</label><input type="radio" name="sex" id="nv"><br>
<!-- radio 单选按钮 -->
爱好:吃饭<input type="checkbox" > 睡觉<input type="checkbox" > 打豆豆<input type="checkbox" >
<!-- checkbox 复选框 可以实现多选 -->
<!-- 单选按钮和复选框可以设置checked属性，当页面打开发的时候会默认选中这个按钮 -->
<br>
<input type="reset" value="重新填写">
<input type="submit" value="免费注册">
<!-- 重置按钮可以换元宝表单元素初始的默认状态 -->
<!-- 点击了提交按钮，可以把 表单域 form 里面的表单元素里的值提交给后台服务器。 -->
<br>
<input type="button" value="获取短信验证码">
<!-- 普通按钮 button 后期结合js搭配使用 -->
上传头像: <input type="file" >
<!-- 文件域 使用场景 上传文件使用 -->
<br>
籍贯:
<select name="text" id="">
<option >河南</option>
<option >山东</option>
<option selected="selected">湖北</option>
</select><br>
<!-- select 至少包含一对option -->
<!-- 在 select 中定义 selected="selected" ，当前即为默认选中项 -->
今日反馈:
<textarea cols="50" rows="5"></textarea>
<!-- cols 每行显示多少字 rows 显示多少行 -->
</form>
</body>
</html>