转载自：https://blog.csdn.net/beichen0518/article/details/79699631
-查找错误，开发者工具，找到Console 控制台可以看到报错只有js报错可以看到报错
<!--所有的代码都写在html标签下 它是最顶级标签--> <!--标签基本上都有开始标签和结束标签，标签还可以有属性--> <!--1.标签（tag/element- 承载内容--> <!--2.层叠样式表（CSS） - 显示/渲染页面--> <!--3.JavaScript - 交互式行为 --> <!doctype html> <!--文档类型声明，说明页面使用的HTML5的规范--> <html> <!--标签，用<>，这是一个开始标签--> <head> <!--放一些和网页相关的元数据信息，但不会显示在浏览器的主窗口中--> <meta charset="utf-8"> <!--源数据标签，标签的属性，如果一个标签中间没有内容，就不需要结束标签--> <title>某某的个人空间</title> <!--网页的标题--> <!--样式表--> <style type="text/css"> h1 { color: red; font-size:3cm; } </style> <!--red 和 #ff0000效果是一样的，这是16进制的数等于255,0,0--> </head> <body> <!--body标签内的内容就是要显示在浏览器窗口中的信息--> <h1 title="这是一个提示信息">hello, world</h1> <!--一级标题, 一共有六级标题，title 属性效果是，鼠标放在标题文字上时，浮出信息--> <h2>你好，世界</h2> <!--二级标题--> <button onclick="foo()">OK</button> <!--按钮标签--> <script> function foo() { window.alert('大家好'); } </script> <!--js需要在这里写--> </body> </html> <!--代码都写在标签了里面，而浏览器就是这个语言的执行环境 它执行HTML书写的代码将结果渲染到浏览器窗口中-->HTML标签参考手册
wwwWorld Wide Web - 万维网规范标准W3C -学习HTML5去runoob，或W3school列表小技巧 在sublime中，装了emmet插件的情况下输ul>li*5 再按Tab键会自动生成5个列表
<!DOCTYPE html> <!-- html/head/body 文本 - h1-h6/p/br/hr/sub/sup/strong/em/del/ins/q 列表 - ul/ol(li)/dl(dt/dd) 图像 - img/figure/figcaption 链接 - a(页面链接/锚链接/功能链接) 表格 - table/tr/td/th/thread/tbody/tfoot 表单 - form / input / select / textarea 音视频 - audio / video(source) --> <html lang="en"> <head> <a id="top"></a> <!--设置锚点--> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--音频--> <audio controls autoplay loop> <!--controls 播放控件， autoplay 自动播放 ，loop循环播放--> <source src="./resources/bgmusic.mp3" type="audio/mp3" > </audio> <!--视频--> <video controls> <source src="./resources/movie.mp4" type="video/mp4"> </video> <h1>Hello, world!</h1> <hr> <!--水平标尺，一个水平的分割线--> <ins>床前</ins>明月光<sup>1</sup><br> 疑是地上霜<sub>2</sub><br> <p>举头望明月<del>明月</del></p> <p>低头思故乡<strong></strong><em>故乡</em></strong></p> <q>其实地上本没有路，走的人多了也便成了路</q> <h3>某某的个人爱好</h3> <ul> <li>吃</li> <li>喝</li> <li>嫖</li> <li>赌</li> <li>抽</li> </ul><!--无序列表--> <ol> <li>a1</li> <li>a2</li> <li>a3</li> <li>a4</li> <li>a5</li> </ol><!--有序列表--> <dl> <dt>阅读</dt> <dd>每天晚上阅读</dd> <dd>阅读科幻小说</dd> <dt> <figure> <img src="./images/卡卡西.ico" alt="卡卡西" width="30"> <!--在这种情况下最好选用相对路径，有图片显示图片，没图片显示替换文字, 可以指定宽高，但一般不建议用这种方法，让美工切好图片，不然浪费流量--> <figcaption>这是一个什么图</figcaption> </figure> </dt><!--放图片--> <dd>每天晚上阅读</dd> <dd>阅读科幻小说</dd> </dl><!-- 定义列表--> <!--列表--> <table> <!--列表行--> <tr> <!--列表列--> <td> </td> </tr> </table> <table border="1"> <caption>学生成绩表</caption><!--标题，自动居中--> <thead> <tr> <th>姓名</th> <th>Python</th><!--th表示表头里的列--> </tr> </thead> <tbody> <tr> <td rowspan="3"></td> <!--跨行,合并单元格--> <td>王大锤</td> <td>90</td> </tr> <tr> <td>小明</td> <td>60</td> </tr> <tr> <td colspan="2">无</td> <!--跨列--> </tr> <tr> <td></td> <td>小强</td> <td>75</td> </tr> </tbody> <tfoot> <tr> <td colspan="2" align="right">平均分</td> <!--虽然可以直接用属性来对齐，但都应该由样式表来做--> <td></td> </tr> </tfoot> </table> <!--表单--> <form action="" method="post" enctype="multipart/form-data"> <!--action 给url,对应某个服务器的某个功能 method="post" 如果要上传文件必须写post ,enctype="multipart/form-data"这个表示编程语言，上传文件时也需要写--> <fieldset> <legend>必填信息</legend> <p><input type="text" name="username" placeholder="请输入用户名" required></p> <!--可输入的文本框， value表示默认值，placeholder表示占位信息, required表示必填--> <p><input type="password" name="password" placeholder="请设置密码"></p> <!--密码框--> <!--单选框--> <p> <input type="radio" name="gender" checked>男 <input type="radio" name="gender" >女 </p> <!--单选按钮 ，如果name相同，只能选择一个，如果name不同就都可以选,checked表默认选中--> <!--复选框--> <p> <input type="checkbox" name="fav">阅读 <input type="checkbox" name="fav">健身 <input type="checkbox" name="fav">游戏 <input type="checkbox" name="fav">球 <!--可同时勾选多项--> </p> <!--日历框--> <p> <input type="date" name="birthday">生日 </p> <!--输邮箱的框--> <p> <input type="email" name="email" placeholder="请输入您的邮箱"> </p> </fieldset> <!--下拉列表--> <fieldset> <legend>可选信息</legend> <p> <select name="prov"> <option value="北京">北京</option> <option value="tj">天津</option> <!--value中的值是传给服务器的，可以不和后面的值一样--> <option value="成都" selected>成都</option> </select> </p> <!--文本区--> <p> <textarea rows="5" cols="30" name="intro"></textarea> </p> <!--文件选择器--> <p> <input type="file" name="file"> </p> </fieldset> <p> <input type="submit" value="立即注册"> <!--提交--> <input type="reset" value="重新填写"> <!--重置--> </p> </form> <!--前三个是页面链接--> <a href="http://www.baidu.com">百度一下</a><!--超链接标签，在当前窗口打开--> <a href="http://www.baidu.com" target="_blank">百度两下</a><!--在新窗口打开--> <a href="index.html">我的首页</a><!--打开自己网站--> <a href="#top">回顶部</a> <!--回到锚点位置, 锚链接--> <!--功能链接，链接到qq，或发邮件--> <a href="mailto:qustwxz@163.com">联系站长</a><!--不好用是因为没有邮件客户端--> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin= {{544619417}}&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:3153717369:52 " alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </body> </html> <!--<br>折行标签， <p>内容</p>段落标签，<ins>加下滑线<sup>上标<sub>下标<del>删除线<strong>加粗<em>斜体 <q>引用-->table技巧 table>tr*5>td*2>{项目$}可生成5行2列的表格
