工具选择，虽然同事的测开教程用的工具是Hbuilder，但是网上看到的目前比较受欢迎的是vscode
参考菜鸟html5教程：https://www.runoob.com/html/html-tutorial.html
一、安装vscode
下载地址：https://code.visualstudio.com/download
安装过程：https://www.cnblogs.com/csji/p/13558221.html
家里安装的vscode，公司安装的Hbuilder，感觉都可以
二、常用标签
<!DOCTYPE html> <html> <!-- 页面的头部信息 --> <head> <meta charset="utf-8"> <title>我的第一个html页面</title> </head> <!-- 页面的主体内容 --> <body> <!-- 标题标签h1到h6 --> <h3>标题标签</h3> <!-- 段落标签p --> <p>这是一个段落</p> <!-- 分割线hr --> <hr /> <p>2020年10月7日至10月26日期间，刘某某来到重庆市北碚区某菜市场，多次盗走被害人翁某某在此经营的摊位上的蔬菜。 <!-- 换行 --> <br> 2020年10月7日至10月26日期间，刘某某来到重庆市北碚区某菜市场，多次盗走被害人翁某某在此经营的摊位上的蔬菜。 </p> <!-- 块标签 --> <div style=" 200px;height: 200px;background: cadetblue;">div001</div> <div style=" 200px;height: 200px;background-color: azure;">div002</div> <!-- span行内块，不会自动换行 --> <h3>一二<span style="background-color: blue;">三四</span>五</h3> <span>span002</span> <span>span003</span> <a href="https://www.baidu.com">百度</a> <br> <a href="https://www.baidu.com"> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="加载失败时的名字" width="100" height="100"> </a> <!-- 无序列表 --> <ul> <li>1</li> <li>2</li> </ul> <!-- 有序列表 --> <ol> <li>1</li> <li>2</li> </ol> <!-- 表格 tr 表格行 th 表头列 td 内容列--> <table border="0" cellspacing="" cellpadding=""> <tr> <th>name</th> <th>python</th> <th>java</th> </tr> <tr> <td>小明</td> <td>精通</td> <td>熟悉</td> </tr> <tr> <td>小丽</td> <td>精通</td> <td>精通</td> </tr> </table> <!-- iframe元素会包含另一个文档的内联框架 --> <iframe src="https://www.baidu.com" width="500" height="600"></iframe> <iframe src="https://www.taobao.com" width="500" height="600"></iframe> <!-- audio 音频 video 视频--> <audio controls="controls"></audio> <video width="800" height="240" controls="controls"></video> </body> </html>
三、表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html表单</title> </head> <body> <!-- 表单form action 表单提交地址 method 表单提交的方法--> <!-- input type: text-明文 password-密码 submit-提交按钮 radio-单选 checkbox-复选 file-文件 name：指定该数据传递的参数名，每一组radio和checkbox的name需要一样--> <form action="" method="get"> <!-- lable 点击会触发被绑定的控件 for 填入被绑定控件的id--> <label for="lable">账号：</label> <input type="text" name="u" id="lable" value="" /> <br> 密码： <input type="password" name="p" id="" value="" /> <br> 记住密码：<input type="radio" name="status" id="" value="1" /> <br> 性别：男<input type="radio" name="sex" id="" value="nan" /> 性别：女<input type="radio" name="sex" id="" value="nv" /> <br> 技能： python<input type="checkbox" name="skill" id="" value="python" /> java<input type="checkbox" name="skill" id="" value="java" /> <br> <br> 上传头像<input type="file" name="pic" id="" value="" /> <br> <br> <!-- 用于点击事件 --> <!-- <input type="button" name="" id="" value="按钮" /> --> <!-- <br> --> <!-- 重置表单 --> <input type="reset" name="" id="" value="重置" /> <br> <!-- 隐藏表单域，不会在页面上显示，但会放到表单中传递给后端 --> <input type="hidden" name="token" id="" value="123456" /> <br> 个人介绍 <!-- 文字段落输入框 --> <textarea rows="2" cols="100" name="info"></textarea> <br> <!-- 下拉框选择，级联选择需要js --> <select name="city"> <option value="sh">上海</option> <option value="bj">北京</option> <option value="sz">深圳</option> <option value="gz">广州</option> </select> <br> <!-- 以图片作为按钮 --> <!-- <input type="image" name="" id="" value="" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/> --> <input type="submit" name="" id="" value="提交" /> <br> </form> </body> </html>