A, HTML entry cases (Nostalgia)
1 Overview
HTML: Hyper Text Markup Language HTML Hypertext: powerful than ordinary text function, can achieve different styles (such as bold, centered, italic) markup language: the language used on the label describing the contents.
2. Use the following tag to complete Nostalgia Case
1 2 3 4 5
<h1> </ h1> a title <b> </ b> bold <i> </ i> italic </br> linefeed <p> </ p> Paragraph
The main role of HTML base page design, HTML5
3.HBuilder commonly used shortcut keys mac version
ctrl + D line of the cursor delete command + shift + R to the next line to copy the current command + enter move the cursor to the next line (the current cursor if the original two parts in the middle of the line, will enter only the front row split into two lines, use this command to direct the cursor jumps to the next line without changing the contents of the current line, he made it very troublesome, for yourself, very simple) the command + the Shift + the Enter the current line on the insert row blank line tab enter the label automatically generated by the longitudinal tab and tab <>, good use of this command + left and right arrow keys to the current context is the line, the vertical line is the end-all command + / comment
4. Getting Started cases and basic grammar specification
1 2
strong: it is bold, but includes semantic search engine friendly em: is italicized, but includes semantic search engine friendly
5. Picture and path
6. ol ordered list and unordered list ul
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
<!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.超链接标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<!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>
表格的嵌套
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
<!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)第八部分:放置友情链接。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218
<!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> 大专栏 web前端知识day01_HTML s="line"> <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. 网站注册案例1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
<!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. 注册入门案例2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
<!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>