![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：<td width="80px">种类</td>
<td width="80px">名称</td>
<td width="80px">数量</td>
<td width="80px">价格</td>
你确定这样能有用吗?width不需要单位的
Collection
Collection
一、基本的html结构
<!--<!DOCTYPE> 是HTML5声明，<!DOCTYPE> 必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE>是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。--> <!DOCTYPE html> <html> <!-- head标签是所有头部元素的容器。head标签内的元素可包含脚本、样式表和提供页面的元信息等等。以下标签都可以添加到 head 部分：title、base、link、meta、script 以及style。头部的内容不会显示在浏览器的。 --> <head> <!-- 设置字符集，如果字符集不对，可能导致乱码。一般建议utf-8国际编码 --> <meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" /> <!-- SEO相关标签，title定义文档的标题,百度建议一般不要超过32位,meta定义页面关键词和页面的描述--> <title>网页标题</title> <meta name="keywords" content="html基本结构" /> <meta name="description" content="html基本结构" /> <link rel="stylesheet" type="text/css" href="main.css" /> <script type="text/javascript" src="main.js"></script> </head> <!-- 正文部分，所有在浏览器上可见的内容必须写在body标签内部 --> <body> </body> </html>
二、什么是html标签，元素和属性
1：html标签简单的理解网页标签即是网页浏览器识别符，常见的有
<html> </html>这是一对超文本开始与结束标签 <head></head>是一对头部声明标签，如标题标签、JS链接、CSS链接都是放入此对标签内 <title></title>是标题标签，此标签内内容是在浏览器最左上角标题显示，在内容不会显示，同时一个网页里具有唯一性（使用一次并且放入head标签内） <body></body>是一定内容标签，即要显示内容都放入此标签内。 <div> </div> div标签也是div css所说的div标签。 <p></p> 是一对段落标签 <a></a> 跳转链接标签 <br />换行标签- p与br区别 <font>字体声明标签，可在此标签内设置文字的CSS样式 <span>此标签与div标签相似 <b></b>和<strong></strong>都是加粗标签代表css样式中font-weight相当于css文字加粗 例：<b>我是div+css</b>,这样“我是css div”被加粗显示。 Table、tr、td 对一组表格标签
2：元素就是开始标签与结束标签之间的内容，就是被标签包裹的区域：
<html> <body> <p>This is my first paragraph.</p> </body> </html>
3：html属性就是用来表示该标签的性质和特性，通常都是以“属性名=”值””的形式来表示。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> </head> <body bgcolor="yellow"> <h2>请看: 改变了颜色的背景。</h2> </body> </html>
三、列表的种类
1，无序列表（编程实现）
<html> <body> <h4>工作计划：</h4> <ul> <li>1，学习</li> <li>2，学习</li> <li>3，学习</li> </ul> </body> </html>
2，有序列表（编程实现）
<!DOCTYPE html> <html> <body> <h4>工作计划：</h4> <ol> <li>1，学习</li> <li>2，学习</li> <li>3，学习</li> </ol> <ol start="50"> <li>1，学习</li> <li>2，学习</li> <li>3，学习/li> </ol> </body> </html>
3，自定义列表（编程实现）
<html> <body> <h4>工作计划：</h4> <dl> <dt>1，学习</dt> <dd>好好学习</dd> <dt>2，学习</dt> <dd>天天向上</dd> <dt>3，学习</dt> <dd>学以致用</dd> </dl> </body> </html>
四，列表与表格的区别与联系
1，列表是：ul，il，dl 标签
2，表格是：table，th，td标签，拥有表格特殊属性colspan, rowspan
3，区别，表格标签已经定义好样式和属性，如果要通过列表实现表格，需为列表重新定义css样式
4，使用表格的场景：需要展示数据信息的时候
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1"> <thead> <tr> <td width="80px">种类</td> <td width="80px">名称</td> <td width="80px">数量</td> <td width="80px">价格</td> </tr> </thead> <tbody> <tr> <td rowspan="2">水果</td> <td>香蕉</td> <td>1</td> <td>15</td> </tr> <tr> <td>苹果</td> <td>2</td> <td>20</td> </tr> <tr> <td>蔬菜</td> <td>番茄</td> <td>3</td> <td>30</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"> 总价： </td> <td> 65 </td> </tr> </tfoot> </table> </body> </html>
五，html表单控件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>好好学习天天向上</title> </head> <body> 用户名：<input type="text" value ="用户名"/><!--这是一个文本框--><br/> 密码：<input type="password" maxlength="6"/> <!-- 这是一个密码框 ctrl+/ maxlength密码的最大长度 --><br /> 性别： <input type="radio" name ="sex" id="sex1"/> <label for="sex1"> 女 </label> <input type="radio" name ="sex" id="sex2"/> <label for="sex2"> 男 </label> <input type="radio" name ="sex" id="sex3" checkd ="checked" /> <label for="sex3">人妖 </label> <input type="radio" name ="sex1" id="sex4" /> <label for="sex4"> 未知 </label> <!-- 单选框 如果是一组通过相同的name值来实现 sex与sex1名不一样，所以能选两个--><br /> 爱好： <input type ="checkbox" name="hobby" checkd ="checked" id="zq" /><label for="zq">足球 </label> <input type ="checkbox" name="hobby" id="lq" /><label for="lq">篮球 </label> <input type ="checkbox" name="hobby" id="pq" /><label for="pq">排球 </label> <!-- 复选框 可以同时选多个 checkd ="checked"为默认--><br /> 搜索：<input type="button" value="搜索啥"> <!-- 普通按钮 --><br /> <input type="submit" value="提交表单"/> <!-- 提交按钮 --> <input type="reset" value="重置表单"/> <!-- 重置按钮 --><br /> 上传头像：<input type="file" /> <!-- 文件按钮 --> </body>
