![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：你提到了无障碍辅助特征, 不错
Collection
Collection
一、描述HTML与HTTP是什么,他们之间有什么联系?
HTML是一种超文本标记语言，（全称是Hypertext Markup Language）它包括一系列标签．通过这些标签可以将网络上的文档格式统一，HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
HTTP是一种超文本传输协议，（全称是Hypertext Transfer Protocol）它通常运行在能够联网的设备上，它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。 他们之间有什么联系?HTML做成的客户端需要HTTP的传输协议，没HTTP协议，数据不能传输，HTML也没有什么用了。
二、制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 二、制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素--> <title>导航</title> </head> <body> <h2>导航制作</h2> <nav> <tr> <th><a href="https://baidu.com" target="html">新闻</a></th> <th><a href="https://www.qq.com/?fromdefault" target="_blank">电影</a></th> <th><a href="http://baidu.cn" target="html">音乐</a></th> <th><a href="https://sina.com.cn" target="html">论坛</a></th> <th><a href="http://php.cn" target="_blank">邮箱</a></th> <th> <a href="https://www.php.cn/course/379.html"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt="PHP视频教程"> </a> </th> </nav> <iframe frameborder="1" name="html" width="830" height="750"></iframe> </html> </body> </html>
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 三、制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并-->
<!--border:设置表格的边框。 cellpadding:设置表格单元边界与单元内容之间的间距。 cellspacing:设置表格单元格间距-->
<title>商品</title>
<style >
table{
text-align: center;
}
</style>
</head>
<body>
<table border="1" width="500" cellspacing="0" cellpadding="5">
<caption>
<h1>商品列表</h1>
</caption>
<thead>
<tr bgcolor="lightblue">
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
<th>领取签名</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>墨水</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td rowspan="2">机器猫</td>
<!-- rowspan 合并列-->
</tr>
<tr>
<td>2</td>
<td>钢笔</td>
<td>5</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<td>3</td>
<td>铅笔</td>
<td>1</td>
<td>5</td>
<td>5</td>
<td>米老鼠</td>
</tr>
<tr>
<!-- colspan 合并行 -->
<td colspan="3">合计：</td>
<td>10</td>
<td>21</td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 四、制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件--> <title>用户注册</title> </head> <body> <h2>用户注册</h2> <p> <label for="username">账号：</label> <input type="text" id='username' name="username1" placeholder="hyx000"> </p> <p> <label for="names">姓名：</label> <input type="text" id="names" name="username2" placeholder="张XX"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="8位、要求字母大小写特殊符号组成"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="hyx000@qq.com"> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="16" max="70" > </p> <p> <label>爱好：</label> <input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" id="movies" value="movies"><label for="movies">看电影</label> <input type="checkbox" name="hobby[]" id="music" value="music"><label for="music">听音乐</label> <input type="checkbox" name="hobby[]" id="swim" value="swim"><label for="swim">游泳</label> </p> <p> <label for="male">性别：</label> <input type="radio" name="gender" id="male"> <label for="male">男生</label> <input type="radio" name="gender" id="female"> <label for="female">女生</label> </p> <p> <label >范围</label> <select> <option>请选择</option> <optgroup label="河南"> <option>郑州</option> <option >焦作</option> <option>新乡</option> </optgroup> <optgroup label="河北"> <option>石家庄</option> <option>保定</option> <option>承德</option> </optgroup> </select> </p> <p> <label for="file">文件上传</label> <input type="file" name="file" id="file"> </p> <p> <button type="button">注册</button> </p> </body> </html>
点击 "运行实例" 按钮查看在线实例
五、制作一个网站后面, 要求使用`<iframe>`内联框架实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 五、制作一个网站后面, 要求使用`<iframe>`内联框架实现--> <title>网站后台</title> </head> <body> <h2>网站后台</h2> <u1 style="float: left;margin-right: 20px;"> <li><a href="2.html" target="content">用户列表</a></li> <li><a href="3.html" target="content">文章列表</a></li> <li><a href="4.html" target="content">栏目列表</a></li> <li><a href="5.html" target="content">权限列表</a></li> </u1> </body> <!--srcdoc代替src, 可以在属性值中直接写html代码, 实现后台首页的功能--> <!--name属性非常重要, 它是链接到该框架页面的入口--> <iframe frameborder="1" name="content" width="530" height="450"></iframe> </html>
点击 "运行实例" 按钮查看在线实例
六、总结: 为什么推荐使用语义化的标签?
1、即使没有css的情况下，页面也能呈现出良好的结构。
2、title alt的可以用于解释图片或名词，方便理解
3、便于浏览器seo，这个语义是给搜索引擎的爬虫看的，方便爬虫确定信息的权重
4、方便特殊群体阅读信息，比如屏幕阅读器/盲人阅读器对<strong></strong>会有一个加重的读音