HTML
1. HTML概述
HTML:Hyper Text Markup Language：超文本标记语言
超文本：比普通文本功能更加强大，可以添加各种样式
标记语言：通过一组标签来对内容进行描述<关键字>
HTML的主要作用：网页设计的基础
<!DOCTYPE html> <!-- 1. 上面是一个文档的申明 2. 根标签html 3. html文件主要包含两个部分：头部分和尾部分 头部分：主要是用来防止一些页面信息 体部分：主要用来防止html的页面内容 4. 通过标签来对内容进行描述，标签通常都是由开始标签和结束标签组成 5. 标签不区分大小写，但是官方建议使用小写 --> <html> <head> <!-- meta 网站的配置信息 --> <!-- 指定浏览器打开页面的编码方法 --> <meta charset="UTF-8"> <!-- 指定网站的标题 --> <title>小静子</title> </head> <body> <h1>静夜诗</h1> <b>-----李白</b> <br/> <!-- <b></b>:加粗 --> <p>床前明月光，</p> <!-- <p></p>:会在行前和行后都添加一个换行 --> <p>疑是地上霜。</p> <p>举头望明月,</p> <p>低头思故乡.</p> </body> </html>
图片：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 常用属性： src:指定图片的路径 width:指定图片的路径 height: 指定图片的高度 alt:文件加载失败时的提示信息 --> <!-- 路径问题 ./代表当前路径 。。/代表上一级的路径 --> <img src = "../imgs/bx.jpg" width = "500px" height = "200px" alt = "图片加载失败"/> <img src = "../abc.jpg" width = "500px" height = "200px" alt = "图片加载失败"/> </body> </html>
网站案例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站信息页面</title> </head> <body> <!-- <h1></h1>:标题，h后面的数字取值范围是1-6 --> <!-- <hr />:水平分割线 --> <!-- <p></p>:段落标签 --> <!-- font标签： color:颜色 size:改变字体的大小,范围是1-7 face:改变字体 我要<font color = "red" size = "2" face = "仿宋">回家</font> <标签 属性的名称 = "熟悉的名称">内容<标签> --> <!-- <b></b>:字体加粗 --> <!-- <i></i>:斜体 --> <!-- strong:加粗，带语义标签，建议使用 --> <!-- em:斜体，带语义 ，建议使用--> <h3>小说简介</h3> <hr /> <p> 小说，<font color = "red">以刻画人物形象为中心</font>，通过<b><i>完整的故事情节和环境描写</i></b>来反映社会生活的文学体裁。 </p> <p>人物、情节、环境是小说的三要素。情节一般包括<b>开端、发展、高潮、结局</b>四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、科幻、公案、传奇、武侠、言情、同人、官宦、耽美等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。 </p> </body> </html>
友情链接：显示友商公司的网站链接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>友情链接</title> </head> <body> <!-- 无序列表 <ul> <li>列表项</li> </ul> ul的属性： type属性: disc:小圆点（默认） square:小方块 --> <!-- 超链接标签:<a href = "网址" target = "打开方式">名称</a> target:以什么方式打开 _self:默认在当前窗口打开 _blank:新起一个标签页打开页面 --> <ul type = "square"> <li><a href = "http://www.baidu.com" target = "_blank">百度</a></li> <li>新浪微博</li> <li>黑马程序员</li> </ul> <hr /> <!-- 有序列表 <ol> <li>列表项</li> </ol> ol 属性： type:标记类型 默认123 'a':显示abcd... start:从哪儿开始，必须写数字 '2':从2开始计数 --> <ol> <li>百度</li> <li>新浪微博</li> <li>黑马程序员</li> </ol> </body> </html>
表格标签：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <!-- 表格标签 <table> 常用属性： border:指定边框 width:宽度 height:高度 bgcolor:背景色 align:对齐方式 <tr></tr> 行标签 <td></td> 列标签 </table> --> <table border = "1px" width = "400px" bgcolor = "yellow" align = "center"> <!-- 表格在页面上居中 --> <tr bgcolor = "red" align = "center"> <!-- 行内容居中 --> <td>人物</td> <td>环境</td> <td>情节</td> </tr> <tr> <td>开端</td> <td bgcolor = "pink" align = "center">发展</td> <!-- 单格内容居中 --> <td align = "right">高潮</td> </tr> </table> </body> </html>
表格的合并和嵌套
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 表格的合并： colspan:跨列 rowspan:跨行 --> <table border = "1px" width = "400px"> <tr> <td colspan = "2">11</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>21</td> <td colspan = "2" rowspan = "2"> <table border = "1px" width = "100%"> <!-- 表格的嵌套 --> <tr> <td>2211</td> <td>2212</td> </tr> <tr> <td>2221</td> <td>2222</td> </tr> </table> </td> <td>24</td> <td>25</td> </tr> <tr> <td>31</td> <td>34</td> <td rowspan = "2">35</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> </tr> </table> </body> </html>
网站首页代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 1. 创建一个八行一列的表格 2. 第一部分：LOGO：嵌套一个一行三列的表格 3. 第二部分：导航栏部分：放置五个超链接 4. 第三部分：轮播图 5. 第四部分：嵌套一个三行七列的表格 6. 第五部分：直接放一个图片 7. 第六部分：抄第四部分 8. 第七部分：放置一张图片 9. 第八部分：放一些超链接 --> <table width = "100%"> <!-- 第一部分：LOGO：嵌套一个一行三列的表格 --> <tr> <td> <table width = "100%"> <tr> <td> <img src = "../imgs/logo2.png" /> </td> <td> <img src = "../imgs/header.jpg" /> </td> <td> <a href = "#">登陆</a> <a href = "#">注册</a> <a href = "#">购物车</a> </td> </tr> </table> </td> </tr> <!-- 第二部分：导航栏部分：放置五个超链接 --> <tr bgcolor = "black" height = "50px"> <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> <!-- 第三部分：轮播图 --> <tr> <td> <img src = "../imgs/1.jpg" width = "100%"/> </td> </tr> <!-- 第四部分：嵌套一个三行七列的表格 --> <tr> <td> <table width = "100%" height = "500px"> <tr> <td colspan = "7"> <h3>最新商品<img src = "../imgs/title2.jpg" /></h3> </td> </tr> <tr align = "center"> <td rowspan = "2" width = "206px" height = "480px"> <img src = "../products/hao/big01.jpg" /> </td> <td colspan = "3" width = "100%" height = "240px"> <img src = "../products/hao/middle01.jpg" /> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> </tr> <tr align = "center"> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> </tr> </table> </td> </tr> <!-- 第五部分：直接放一个图片 --> <tr> <td width = "100%"> <img src = "../products/hao/ad.jpg" /> </td> </tr> <!-- 第六部分：抄第四部分 --> <tr> <td> <table width = "100%" height = "500px"> <tr> <td colspan = "7"> <h3>热门商品<img src = "../imgs/title2.jpg" /></h3> </td> </tr> <tr align = "center"> <td rowspan = "2" width = "206px" height = "480px"> <img src = "../products/hao/big01.jpg" /> </td> <td colspan = "3" width = "100%" height = "240px"> <img src = "../products/hao/middle01.jpg" /> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> </tr> <tr align = "center"> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> <td> <img src = "../products/hao/small06.jpg" /> <p>洗衣机</p> <p><font color = "red">$998</font></p> </td> </tr> </table> </td> </tr> <!-- 第七部分：放置一张图片 --> <tr> <td width = "100%"> <img src = "../image/footer.jpg" /> </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 @ 2005-2016 GGGG 版权所有 </td> </tr> </table> </body> </html>
注册案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册案例</title> </head> <body> <!-- 表单标签 action: 提交的地址 method: get 方式:默认提交方式,会将参数拼接在链接后面，有大小限制，4K post 方式:不会将name拼接，没有大小限制 input: type:指定输入项的类型 text: 文本 password: 密码框 radio: 单选按钮 checkbox: f复选框 file: 选择文件 submit: 提交按钮 button: 普通按钮 reset: 重置按钮 hidden: 隐藏区域 date: 日期 tel: 手机号 number: 只允许输入数字 placeholder: 默认的提示信息 name:在表单提交的时候，当作参数的名称 id:给输入项取名，以便于后期找到并操作 <textarea></textarea>:文本域 cols: 指定宽度 rows:指定高度 <select>: 下拉列表 <option></option>: 子标签 </select> --> <form action = "网站首页.html"> <!-- 隐藏域 用来存放页面的一些id信息 --> <input type = "hidden" value = "jlskdjflk" name = "uid"/> <!-- 文本输入框 --> 用户名:<input type = "text" name = "username" id = "username" placeholder = "请输入用户名" /> <br /> <!-- username变成参数 --> <!-- 密码框 --> 密码: <input type = "password" placeholder = "请输入密码" /> <br /> 确认密码: <input type = "password" /> <br /> 邮箱: <input type = "text" /> <br /> 出生日期: <input type = "datetime-local" /><br /> <!-- input type = "date" 年月日 type = "datetime-local 年月日时分 --> 手机号码: <input type = "number" /> <br /> <!-- type = "number" 只能输入数字 type = "tel" 手机端可以弹出输入框？ --> 照片: <input type = "file" /> <br /> 验证码: <input type = "text" /> <br /> 性别: <input type = "radio" name = "sex"/>男<input type = "radio" name = "sex"/>女 <br /> <!-- name属性确保只能单选 --> 爱好: <input type = "checkbox" />吃 <input type = "checkbox" />喝 <input type = "checkbox" />玩 <input type = "checkbox" />乐 择偶要求: <textarea cols = "40" rows = "5"></textarea> <br /> 籍贯: <select> <option>请选择</option> <option>湖北</option> <option>武汉</option> </select> <br /> <input type = "submit" value = "注册" /> <input type = "button" value = "普通按钮" /> <input type = "reset" value = "重置按钮" /> </form> </body> </html>
网页注册：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站注册</title> </head> <body> <!-- 创建一个五行一列的表格： 1. logo部分 2. 导航栏 3. 注册部分 4. 页脚图片 5. 网站申明信息 --> <table border = "1px" width = "100%"> <!-- 1. logo部分 --> <tr> <td> <table border = "1px" width = "100%"> <tr> <td> <img src = "../imgs/logo2.png" /> </td> <td> <img src = "../image/header.jpg" /> </td> <td> <a href = "#">登陆</a> <a href = "#">注册</a> <a href = "#">购物车</a> </td> </tr> </table> </td> </tr> <!-- 2. 导航栏 --> <tr bgcolor = "black" height = "50px"> <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> <tr> <td background = "../image/regist_bg.jpg" height = "500px"> <table border = "5px" width = "60%" height = "60%" bgcolor = "white" align = "center"> <tr> <td colspan = "2"><font color = "blue" size = "5">用户会员注册 UserRegist</font></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> <!-- 4. 页脚图片 --> <tr> <td width = "100%"> <img src = "../image/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 @ 2005-2016 GGGG 版权所有 </td> </tr> </table> </body> </html>
网站后台界面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站后台</title> </head> <frameset rows = "15%, *"> <frame src = "top.html" /> <frameset cols = "15%, *"> <frame src = "left.html" /> <frame src = "right.html" name = "rightFrame" /> </frameset> </frameset> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>left</title> </head> <body bgcolor = "yellow"> <a href = "receiveback.html" target = "rightFrame">收件箱</a> <a href = "#">发送箱</a> <a href = "#">回收站</a> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>right</title> </head> <body bgcolor = "pink"> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>receiveback</title> </head> <body> 这里是收件箱 </body> </html>
