一、HTML入门案例(静夜思)
1.概述
HTML：Hyper Text Markup Language 超文本标记语言
超文本：比普通文本功能强大，能实现不同样式(比如加粗，居中，斜体)
标记语言：使用标签对内容进行描述的语言。
2.使用下列标签完成静夜思案例
12345 | <h1></h1> 一级标题<b></b> 加粗<i></i> 斜体</br> 换行<p></p>段落 |
HTML的主要作用
设计网页的基础，HTML5
3.HBuilder常用快捷键mac版
ctrl + D 删除光标所在的行
command + shift + R 复制当前行到下一行
command + enter 将光标移动到下一行(如果原先光标在上一行的中间，只用enter会将当前行的前后两部分内容分开成两行，而使用这个命令可以直接将光标跳转到下一行而不改变当前行的内容，说得很麻烦，自己试试，很简单)
command + shift + enter 在当前行的上一行插入空行
tab 输入标签在按tab会自动生成前后标签和<>，这个很好用
command + 方向键 左右是到当前行的前后，上下是到所有行的首尾
command + / 注释
4.入门案例及基本语法规范
12 | strong:也是加粗，但是包含语义，搜索引擎友好em：也是斜体，但是包含语义，搜索引擎友好 |
5.图片及路径
6.有序列表ol和无序列表ul
123456789101112131415161718192021222324252627282930 | <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 无序列表ul li 列表项 type属性：默认黑点，可以是小圆圈，小方块 --> <ul type="square"> <li>百度</li> <li>新浪微博</li> <li>黑马进程员</li> </ul> <hr> <!-- 有序列表ol 常用属性： type：指定序号的类型 start：从几开始，必须得写数字 --> <ol type="I"> <li>百度</li> <li>新浪微博</li> <li>黑马进程员</li> </ol> </body></html> |
7.超链接标签
1234567891011121314151617 | <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 超链接标签a 常用属性： href：指定网址，要加上http协议，如果访问的是本网站的html文档，可以直接写文档路径 target：以什么方式打开 _blank:以新窗口打开 _self：当前窗口直接跳转 --> <body> <a href="https://www.baidu.com" target="_self">百度</a> </body></html> |
8.表格标签table
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 | <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <!-- table标签 tr：行 td：列，一般是tr嵌套td 常用属性： border：指定边框 width：宽度 height：高度 bgcolor:背景色 align:对齐方式 表格的合并 colspan：跨列合并 rowspan：跨行合并 --> <body> <table border="2px" width="400px" height="150px" bgcolor="antiquewhite" align="center"> <tr bgcolor="blue" align="center"> <td bgcolor="yellow">2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr bgcolor="red"> <td align="center">2</td> <td>2</td> <td colspan="2" rowspan="2" align="center">2</td> <td>2</td> </tr> <tr> <td colspan="2" align="center" >2</td> <td rowspan="2">2</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> </table> </body></html> |
表格的嵌套1234567891011121314151617181920212223242526272829303132
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 表格的嵌套 --> <body> <table border="2px" width="400px" align="center"> <tr> <td colspan="2" rowspan="2"> <table align="center" border="1px" width="100%"> <tr> <td align="center">11</td> <td>12</td> </tr> <tr> <td>21</td> <td>22</td> </tr> </table> </td> <td>13</td> <td>14</td> </tr> <tr> <td>23</td> <td>24</td> </tr> </table> </body></html>
练习
1.
做一个网页首页
步骤分析：
（1）创建一个8行1列的表格
（2）第一部分LOGO：嵌套一个1行3列的表格
（3）第二部分导航部分：放置五个超链接
（4）第三部分：轮播图
（5）第四部分：嵌套一个3行7列表格
（6）第五部分：直接放一张图片
（7）第六部分：同（5）
（8）第七部分：放一张图片
（9）第八部分：放置友情链接。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 做一个网页首页 步骤分析： （1）创建一个8行1列的表格 （2）第一部分LOGO：嵌套一个1行3列的表格 （3）第二部分导航部分：放置五个超链接 （4）第三部分：轮播图 （5）第四部分：嵌套一个3行7列表格 （6）第五部分：直接放一张图片 （7）第六部分：同（5） （8）第七部分：放一张图片 （9）第八部分：放置友情链接。 --> <body> <table width="100%" > <!-- 第一部分LOGO：嵌套一个1行3列的表格 --> <tr> <td> <table width="100%" > <tr> <td><img src="../img/logo2.png" alt="图片加载失败"></td> <td><img src="../img/header.jpg" alt="图片加载失败"></td> <td> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <!-- 第二部分导航部分：放置五个超链接 --> <tr bgcolor="black"> <td height="50px"> <a href="#"><font color="white">首页</font></a> <a href="#"><font color="white">手机数码</font></a> <a href="#"><font color="white">鞋靴箱包</font></a> <a href="#"><font color="white">电脑办公</font></a> <a href="#"><font color="white">香烟酒水</font></a> </td> </tr> <!-- 第三部分：轮播图 --> <tr> <td> <img src="../img/1.jpg" width="100%"> </td> </tr> <!-- 第四部分：嵌套一个3行7列表格 --> <tr> <td> <table width="100%" height="500px"> <tr> <td colspan="7"> <h3>最新商品<img src="../img/title2.jpg" ></h3> </td> </tr> <tr align="center"> <td rowspan="2" width="206px" height="475px"> <img src="../img/big01.jpg" > </td> <td colspan="3" height="240px"> <img src="../img/middle01.jpg" width="100%" height="100%" alt="图片加载失败"> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> </tr> <tr align="center"> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> </tr> </table> </td> </tr> <!-- 第五部分：直接放一张图片 --> <tr> <td> <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%"> </td> </tr> <!-- 第六部分：同（5） --> <tr> <td> <table width="100%" height="500px"> <tr> <td colspan="7"> <h3>热门商品<img src="../img/title2.jpg" ></h3> </td> </tr> <tr align="center"> <td rowspan="2" width="206px" height="475px"> <img src="../img/big01.jpg" > </td> <td colspan="3" height="240px"> <img src="../img/middle01.jpg" width="100%" height="100%" alt="图片加载失败"> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> </tr> <tr align="center"> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> <td> <img src="../img/small06.jpg" alt="图片加载失败"> <p>洗衣机</p> <p><font color="red">¥998</font></p> </td> </tr> </table> </td> </tr> <!-- 第七部分：放一张图片 --> <tr> <td> <img src="../img/footer.jpg" width="100%"> </td> </tr> <!-- 第八部分：放置友情链接。 --> <tr> <td align="center"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <br> Copyright@ </td> </tr> </table> </body></html>
2.
网站注册案例112345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 表单标签form 常用属性： action：提交的地址 method： get 方式 默认提交方式 会将参数拼接在链接后面，有大小限制，4k，也有1k的。 post 方式 会将参数封装在请求体中，没有这样的限制。 --> <form action="../04_网站首页/网站首页.html" method="get"> <!-- 隐藏域 主要是用来存放页面上的一些ID信息 --> <input type="hidden" name="uid" id="" value="sdfalsjflsj" /> <!-- 文本输入框 --> 用户名：<input type="text" name="username" placeholder="请输入用户名" /><br> 密码：<input type="password" placeholder="请输入密码"/><br> 照片：<input type="file"/><br> 性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br> 验证码：<input type="text" /><br> 爱好： <input type="checkbox" />抽烟 <input type="checkbox" />喝酒 <input type="checkbox" />烫头<br> 出生日期：<input type="datetime-local" /><br> 手机号码：<input type="number" /><br> 个人介绍： <textarea rows="4" cols="40"> </textarea><br> 籍贯： <select> <option>---请选择---</option> <option>湖北</option> <option>内蒙古</option> <option>火星</option> </select><br> <input type="submit" value="注册" /> <input type="button" value="普通按钮"> <input type="reset" value="重置" /> </form> </body></html>
3.
注册入门案例2123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 创建一个5行1列的表格 1.logo部分 2.导航栏 3.注册部分 4.页脚图片 5.网站声明信息 --> <table border="1px" width="100%"> <!-- 1.logo部分 --> <tr> <td> <table border="1px" width="100%" > <td><img src="../img/logo2.png" ></td> <td><img src="../img/header.jpg" ></td> <td> <a href="#">注册</a> <a href="#">登录</a> <a href="#">购物车</a> </td> </table> </td> </tr> <!-- 2.导航栏 --> <tr bgcolor="black"> <td> <a href="#"><font color="white">首页</font></a> <a href="#"><font color="white">手机数码</font></a> <a href="#"><font color="white">鞋靴箱包</font></a> <a href="#"><font color="white">电脑办公</font></a> <a href="#"><font color="white">香烟酒水</font></a> </td> </tr> <!-- 3.注册部分 --> <tr> <td background="../img/regist_bg.jpg" height="500px"> <table border="5px"width="60%" height="80%" align="center" bgcolor="white"> <tr> <td> <table width="60%" height="60%" align="center"> <tr> <td colspan="2"><font color="blue">会员注册</font>User REGISTER</td> </tr> <tr> <td>用户名：</td> <td> <input type="text" placeholder="请输入用户名"> </td> </tr> <tr> <td>密 码：</td> <td><input type="password" placeholder="请输入密码"/></td> </tr> <tr> <td>确认密码：</td> <td><input type="password" placeholder="请再次输入密码"/></td> </tr> <tr> <td>Email：</td> <td><input type="email" placeholder="请输入邮箱"/></td> </tr> <tr> <td>姓名：</td> <td><input type="text" placeholder="请输入真实姓名"></td> </tr> <tr> <td>性别：</td> <td><input type="radio" name="sex">男<input type="radio" name="sex" />女</td> </tr> <tr> <td>出生日期：</td> <td><input type="date" placeholder="请选择出生日期"/></td> </tr> <tr> <td>验证码：</td> <td><input type="text" /></td> </tr> <tr> <td></td> <td><input type="submit" value="注册"></td> </tr> </table> </td> </tr> </table> </td> </tr> <!-- 4.页脚图片 --> <tr> <td> <img src="../img/footer.jpg" > </td> </tr> <!-- 5.网站声明信息 --> <tr> <td align="center"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <br> Copyright@ </td> </tr> </table> </body></html>
来源：https://www.cnblogs.com/lijianming180/p/12014319.html