Collection
Collection
一、html文档结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html文档的基本结构</title> </head> <body> </body> </html>
点击 "运行实例" 按钮查看在线实例
解析：
第一行是标识这是一个html类型的文件
<meta charset="UTF-8">，定义网页编码格式为 utf-8
head标签，一般里面装有网页标题，一些文档头设置等，给浏览器看的
title标签描述了文档的标题
body标签是文档的主体，也是用户看到的内容
二、无序列表的基本使用
<ul> <li><a href="">首页</a></li> <li><a href="">公司新闻</a></li> <li><a href="">公司产品</a></li> <li><a href="">关于我们</a></li> <li><a href="">联系我们</a></li> </ul>
点击 "运行实例" 按钮查看在线实例
注意：
1.ul是无序列表、ol是有序列表、<dl><dt></dt><dd></dd></dl>是定义列表
2.无序列表一般用于导航，定义列表一般用于页脚
三、表格用法
<table border="1px" cellpadding="5" cellspacing="0" width="500" align="left"> <!--表格标题--> <caption>购物车</caption> <!--表头,thead只能有一个--> <thead> <tr> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <!--表格主体，tbody，可以有多个--> <tbody> <tr> <td width="50">1</td> <td width="200">有备无患的奔驰专用机油</td> <td width="70">800</td> <td width="50">1</td> <td width="80">800</td> <!--单元格相加为450,为什么表格宽度要设置为500, 因为还有cellpadding=5,共50px--> <!--细学的同学可能发现了, 表格线不算宽度吗?当然算,所以表格在总宽度不变的情况下,内部会有轻微缩放--> </tr> <tr align="center"> <td>2</td> <td>能看清鞋子的京东摄像头</td> <td>150</td> <td>2</td> <td rowspan="2">300</td> </tr> <tr> <td>3</td> <td>带暖手宝功能的笔记本电脑</td> <td>4500</td> <td>2</td> <!--<td>9000</td>--> </tr> </tbody> <!--表格底部，tfoot也只允许有一个，一般是一些总计什么的--> <tfoot> <tr> <!--列合并用colspan,行合并用rowspan--> <td colspan="3">总计</td> <!--<td></td>--> <!--<td></td>--> <td>5</td> <td>10100</td> </tr> </tfoot> </table>
点击 "运行实例" 按钮查看在线实例
表格中主要记table，tr，td标签及他们的一些属性，如设置边框border，居中align="center"，合并列colspan，合并行rowspan等等
四、表单以及常用控件元素的使用
表单用form标签，form标签里面又包含一个个控件标签
文本框
<form action="" method="get" name="register"> <p> <label for="username">账号:</label> <!--autofocus表示自动获焦--> <input type="text" id="username" name="username" placeholder="不能超过8个字符" autofocus> </p> </form>
点击 "运行实例" 按钮查看在线实例
密码
<form action="" method="get" name="register"> <label for="password">密码:</label> <input type="password" id="password" name="password" > </form>
点击 "运行实例" 按钮查看在线实例
密码和普通文本框的区别是type=password，效果是填写的字符用*或其他代替，界面看不到填写了什么
邮箱
<form action="" method="get" name="register"> <label for="email">邮箱</label> <!--required表示必填--> <input type="email" id="email" name="email" placeholder="example@email.com" required> </form>
点击 "运行实例" 按钮查看在线实例
数字
<form action="" method="get" name="register"> <label for="age">年龄</label> <!--number类型可以设置min和max限定取值范围--> <input type="number" id="age" name="age" min="5" max="90"> </form>
点击 "运行实例" 按钮查看在线实例
日期
<form action="" method="get" name="register"> <label for="birthday">生日</label> <!--日期控件会因浏览器不同，显示效果不一样--> <input type="date" id="birthday" name="birthday"> </form>
点击 "运行实例" 按钮查看在线实例
拉下列表
<form action="" method="get" name="register"> <!--下拉列表--> <!-- select: 下拉列表,也叫下拉框,与前面表单控件不一样,它的值都是预置的,不需要用户输出,是枚举类型--> <!-- 与其它input元素不同, 它的name和value属性分别在二个标签中: name在select中, value在option中--> <label for="course">课程</label> <!--size设置界面显示几个下拉选项--> <select name="course" id="course" size="1"> <!--optgroup是分组--> <!--<optgroup label="前端:">--> <option value="0">请选择</option> <option value="1">HTML5</option> <option value="2">CSS3</option> <!--SELECTED是默认选项--> <option value="3" SELECTED>JAVASCRIPT</option> <!--</optgroup>--> <!--<optgroup label="后端:">--> <option value="4">PHP</option> <option value="5">MYSQL</option> <option value="6">THINKPHP</option> <!--</optgroup>--> </select> </p> </form>
点击 "运行实例" 按钮查看在线实例
复选框
<form action="" method="get" name="register"> <p> <!--复选框 checked默认选中--> <label for="programme">爱好:</label> <input type="checkbox" id="game" name="hobby[]" value="game"><label for="game">打游戏</label> <input type="checkbox" id="programme" name="hobby[]" value="programme"><label for="programme">撸代码</label> <input type="checkbox" id="movie" name="hobby[]" value="movie" checked><label for="movie">看电影</label> </p> </form>
点击 "运行实例" 按钮查看在线实例
单选框
<form action="" method="get" name="register"> <p> <!--单选框--> <!--name一样表示同一组 checked默认选中--> <label for="secrecy">性别:</label> <input type="radio" name="gender" id="man" checked><label for="man">男</label> <input type="radio" name="gender" id="woman"><label for="woman">女</label> <input type="radio" name="gender" id="secrecy"><label for="secrecy">保密</label> </p> </form>
点击 "运行实例" 按钮查看在线实例
文本域
<form action="" method="get" name="register"> <p> <!--文本域,text的plus版--> <label for="comment">简介:</label> <!-- 不要设置value属性, 返回的文本在value属性中--> <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不能超过30个字符"></textarea> </p> </form>
点击 "运行实例" 按钮查看在线实例
按钮
<form action="" method="get" name="register"> <p> <!--按钮--> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <!--button默认的type是submit，是提交按钮--> <button>提交2</button> <button type="button">ajax</button> </p> </form>
点击 "运行实例" 按钮查看在线实例
总结
html常用元素，这是基础中的基础，一定要记住，多写多练，以后学到后面，用起来就会得心用手。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
