HTML（骨架），CSS（外观），JS（交互）、
示例代码： #第一个html的代码 <html> <head> <title>第一个页面</title> </head> <body> 键盘敲烂，工资过万 </body> </html>
【Visual Studio Code】https://code.visualstudio.com/ 感觉是一个兼容性非常高的工具，而且还有一个商店可以下载扩展插件。（设置成中文只需要在商店打language选简体中文即可）
示例代码： #在vscode上面尝试的第一个代码 <!DOCTYPE html> <html lang="zh-CN"> <!--可以换成en（美国），其他各种语言，可以用来翻译之类的--> <head> <meta charset="UTF-8"><!--这里十分重要，不写清楚的话移植到其他地方会变成乱码--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天才</title> </head> <body> 写代码是一件非常快乐的事 </body> </html>课堂案例—体育新闻
示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>体育新闻</title> </head> <body> <h1>盘点林丹生涯:20个世界冠军在手 无愧羽坛第一人</h1> <h4>回首林丹的职业生涯</h4> <p>2017年澳网费德勒夺冠，拿到生涯第18个大满贯冠军，林丹发微博庆 祝：“祝贺费18希望自己20加油”。天助自助者，2018年汤杯决战中国 赢下日本，林丹也拿到了生涯第20个世界冠军，当仁不让成为世界羽坛 第一人。</p> <p>20个世界冠军中包括两枚奥运金牌、五次世锦赛加冕、六次举起汤杯 、五次斩获苏杯以及拥有两个世界杯冠军，当这些荣誉亮出来，一言以 蔽之，林丹值得世人顶礼膜拜。首先，自羽球于1992年成为奥运正式比 赛项目，到目前为止，有且只有一人两次夺冠，这个人就是林丹，纵然 一代天王陶菲克也只能仰视林丹。</p> <h4>俱往矣，林丹不是战无不胜</h4> <p>曾被陶菲克制约，在汤杯和里约奥运输 给过李宗伟，但谁也无法否认，有一种神叫做丹神，当他的战绩晒出来 ，有一点可以盖棺定论，无敌多寂寞，林丹确实做到了。</p> <p>作者：章某<br/>2020-07-04</p> </body> </html>效果截图如下：
结果截图如下：
效果截图如下：
示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图像标签和路径</title> </head> <body> <h4>图像标签的使用：</h4> <img src="文件名"/> <h4>alt 替换文本 图像显示不出来的时候用的文字替换：</h4> <img src="文件名" alt="替换文本"/> <h4>title 提示文本 鼠标放到图像上提示的文字：</h4> <img src="文件名" alt="替换文本" title="提示文本"/> <h4>border 给图像设定边框：</h4> <img src="文件名" alt="替换文本" title="提示文本" border="15"/> <!--width和heiht略--> </body> </html>
路径：
示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>超链接标签</title> </head> <body> <h4 id="top">外部链接：</h4> <a href="http://www.qq.com" target="_blank">腾讯</a> <!--target 打开窗口的方式 默认值是 _self 当前窗口打开页面 _blank在新窗口打开--> <h4>内部链接：</h4> <a href="本地.html" target="_blank">内部链接：</a> <h4>空连接：#</h4> <a href="#">公司地址</a> <h4>下载链接：文件 .exe 或者 zip</4> <a href="压缩文件.zip">下载文件</a> <h4>网页元素的链接：</h4> <a href="http://www.baidu.com"><img src="图片.jpg"</a> <h4>锚点连接：</h4> <a href="#123">123</a> <h3 id="123">123</h3> <a href="#top">回到顶部</a> </body> </html>
示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格标签</title> </head> <body> <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" heigh="250"> <tr> <!-- 表头单元格th，是表格的首行，一般会居中并加粗 --> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>刘德华</td> <td>男</td> <td>56</td> </tr> <tr> <td>刘德华</td> <td>男</td> <td>56</td> </tr> <tr> <td>刘德华</td> <td>男</td> <td>56</td> </tr> <tr> <td>刘德华</td> <td>男</td> <td>56</td> </tr> </table> </body> </html> 示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table align="center" border="1" cellpadding="20" cellspacing="0" > <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>↑</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>↑</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>↑</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr><tr> <td>1</td> <td>鬼吹灯</td> <td>↑</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr><tr> <td>1</td> <td>鬼吹灯</td> <td>↑</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr><tr> <td>1</td> <td>鬼吹灯</td> <td>↑</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr><tr> <td>1</td> <td>鬼吹灯</td> <td>↑</td> <td>456</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td> </tr> </table> </body> </html>
示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table width="500" height="249" border="1" cellspacing="0"> <tr> <td></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
效果如下： 无序、有序、自定义列表：
示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 无序列表 --> <!-- ul只能放li，li可以放任何东西 --> <h4>您喜欢的食物？</h4> <ul> <li>臭豆腐</li> <li>腐乳</li> <li>柠檬</li> </ul> <!-- 有序列表 --> <h4>粉丝排行榜</h4> <ol> <li>刘德华</li> <li>张学友</li> <li>章鱼哥</li> </ol> <!-- 自定义列表 --> <dl> <dt>关注我们</dt> <!--标题--> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>联系我们</dd> </dl> </body> </html>表单控件：
示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单标签</title> </head> <body> <form action="demo.php" method="POST" name="name1"> <!-- text文本框 --> <!-- 灰色默认值怎么实现 --> 用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br /> <!-- password 密码框 --> 密码：<input type="password" name="pwd"> <br /> <!-- radio 单选按钮 可以实现多选一 设置一个name即可，但是name要相同 --> 性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"> <br /> <!-- 单选按钮和复选框可以设置一个checked属性，当页面一打开到时候就默认选择 --> <!-- checkbox 复选按钮 --> 爱好：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby"> <br /> <!-- 点击了提交，就把表单域form的信息传给后台了 --> <input type="submit" value="免费注册"> <!-- 重置按钮可以还原表单元素的初始默认值 --> <input type="reset" value="重新填写"> <!-- 普通按钮 后期结合js 搭配使用--> <input type="button" value="获取短信验证码"> <br /> <!-- 文件域 使用场景 上传文件使用的 --> 上传头像：<input type="file"> <br/> <!-- lable标签 --> <label for="text">用户名：</label> <input type="text" id="text"> <br/> <input type="radio" name="sex" id="man"> <label for="man">男</label> <input type="radio" name="sex" id="woman"> <label for="woman">女</label> <br/> <!-- select下拉表单 --> 籍贯： <select> <option>广东</option> <option>北京</option> <option selected="selected">火星</option> </select> <br/> <!-- textrarea文本域 --> <form> 今日反馈：<br/> <textarea cols="50" rows="5">请输入</textarea> </form> </form> </body> </html>效果如下： 综合案例—注册页面
示例代码，仅供参考： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注册案例</title> </head> <body> <h4>青春不常在，抓紧谈恋爱</h4> <table width="500"> <!-- 性别 --> <tr> <td> 性别: </td> <td> <input type="radio" name="sex" id="man"> <label for="man">男</label> <input type="radio" name="sex" id="woman"> <label for="woman">女</label> </td> </tr> <!-- 生日 --> <tr> <td> 生日： </td> <td> <select> <option selected="selected">-请输入年-</option> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> </select> <select> <option selected="selected">-请输入月-</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> <select> <option selected="selected">-请输入日-</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </td> </tr> <!-- 所在地区 --> <tr> <td>所在地区：</td> <td> <input type="text" value="请填写"> </td> </tr> <!-- 婚姻状况 --> <tr> <td>婚姻状况</td> <td> <input type="radio" name="hy" id="wh"><label for="wh">未婚</label> <input type="radio" name="hy" id="yh"><label for="yh">已婚</label> <input type="radio" name="hy" id="lh"><label for="lh">离婚</label></td> </tr> <!-- 学历 --> <tr> <td>学历</td> <td><input type="text" value="请填写"></td> </tr> <!-- 喜欢的类型 --> <tr> <td>喜欢的类型</td> <td> <input type="checkbox" name="like">妩媚的 <input type="checkbox" name="like">可爱的 <input type="checkbox" name="like">小鲜肉 <input type="checkbox" name="like">老腊肉 <input type="checkbox" name="like">都喜欢 </td> </tr> <!-- 自我介绍 --> <tr> <td>自我介绍</td> <td> <textarea>请输入</textarea> </td> </tr> <!-- 免费注册 --> <tr> <td> </td> <td> <input type="submit" value="免费注册"> </td> </tr> <!-- 我同意注册 --> <tr> <td></td> <td> <input type="checkbox" name="zc">我同意注册条款和会员加入标准 </td> </tr> <!-- 我是会员 --> <tr> <td></td> <td> <a href="#">我是会员，立即登录</a> </td> </tr> <!-- 我承诺 --> <tr> <td></td> <td> <h3>我承诺</h3> <ul> <li>年满十八、单身</li> <li>抱着严肃的态度</li> <li>真诚寻找另一半</li> </ul> </td> </tr> </table> </body> </html>