HTML入门&CSS_hm
HTML语法规范
<!DOCTYPE html> <!-- 1. 上面是一个文档声明 2. 根标签 html 3. html文件主要包含两部分. 头部分和体部分 头部分 : 主要是用来放置一些页面信息 体部分 : 主要来放置我们的HTML页面内容 4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成 5. 标签不区分大小写, 官方建议使用小写 --> <html> <head> <!--meta 网站的配置信息--> <!--指定浏览器打开页面的编码方式--> <meta charset="utf-8" /> <!--指定网站标题--> <title>入门案例01</title> Hello world !指定浏览器打开页面的编码方式 </head> <body> Hello world !指定浏览器打开页面的编码方式 </body> </html>
标签
1、标题标签:<h1></h1>,范围:1~6,否则显示为普通文本
2、分割线标签:<hr/>
3、font标签:修改文字显示
font 标签常用属性 color: 颜色 size : 改变字体大小 范围:1~7 face : 字体 <标签 属性的名称="属性的值">
4、粗体标签<b></b> <strong></strong>带语义:
5、斜体:<i></i> <em></em>带语义:
6、图片标签:
1 <!-- 2 常用属性: 3 src : 指定图片路径 4 width : 指定图片宽度 5 height : 图片高度 6 alt : 文件加载失败时的提示信息 7 --> 8 <img src="../img/mv.jpg" width="500px" alt="这张图片可能加载问题" />
7、无序列表标签
1 <!--无序列表 2 ul 3 li 列表项 4 type属性 . 小圆圈, 小方块, 默认小黑点 5 --> 6 <ul type="square"> 7 <li>百度</li> 8 <li>新浪微博</li> 9 <li>黑马程序员</li> 10 </ul>
8、有序列表
1 <!-- 2 有序列表 3 常用属性: 4 type : 指定序号的类型 5 start : 从几开始,必须得写数字 6 --> 7 <ol type="a" start="2"> 8 <li>百度</li> 9 <li>新浪微博</li> 10 <li>黑马程序员</li> 11 </ol>
9、超链接标签:<a href="url路径" target="窗口打开方式">文字</a>
_self:默认打开方式,在当前窗口打开
_blank:新一个标签页打开页面
示例:友情链接
1 <ul> 2 <li style="display: inline;"><a href="http://www.baihe.com" target="_blank">百合网</a></li> 3 <li style="display: inline;"><a href="http://www.jiayuan.com">世纪家园</a></li> 4 <li style="display: inline;">珍爱网</li> 5 <li style="display: inline;">非诚勿扰</li> 6 </ul>
10、表格标签
<!-- table 常用属性: border : 指定边框 width : 宽度 height : 高度 bgcolor: 背景色 align : 对齐方式 tr 标签:行 td 标签:单元 -->
合并单元格
1 <!-- 2 表格的合并 3 colspan : 跨列 4 rowspan : 跨行 5 -->
示例:网站首页
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- 7 1. 创建一个8行一列的表格 8 2. 第一部份: LOGO部分: 嵌套一个一行三列的表格 9 3. 第二部分: 导航栏部分 : 放置5个超链接 10 4. 第三部分: 轮播图 11 5. 第四部分: 嵌套一个三行7列表格 12 6. 第五部分: 直接放一张图片 13 7. 第六部分: 抄第四部分的 14 8. 第七部分: 放置一张图片 15 9. 第八部分: 放一堆超链接 16 --> 17 </head> 18 <body> 19 <!--1. 创建一个8行一列的表格--> 20 <table width="100%"> 21 <!--2. 第一部份: LOGO部分: 嵌套一个一行三列的表格--> 22 <tr> 23 <td> 24 <table ="" cellspacing="" cellpadding="" width="100%"> 25 <tr> 26 <td><img src="img/logo2.png"/></td> 27 <td><img src="img/header.png"/></td> 28 <td> 29 <a href="#">登录</a> 30 <a href="#">注册</a> 31 <a href="#">购物车</a> 32 </td> 33 </tr> 34 </table> 35 </td> 36 </tr> 37 38 <!--3. 第二部分: 导航栏部分 : 放置5个超链接--> 39 <tr bgcolor="black"> 40 <td height="50px"> 41 <a href="#"><font color="white">首页</font></a> 42 <a href="#"><font color="white">手机数码</font></a> 43 <a href="#"><font color="white">电脑办公</font></a> 44 <a href="#"><font color="white">工程仪器</font></a> 45 <a href="#"><font color="white">只能家具</font></a> 46 <a href="#"><font color="white">工程仪器</font></a> 47 </td> 48 </tr> 49 50 <!--4. 第三部分: 轮播图 ?--> 51 <tr> 52 <td><img src="img/1.jpg" width="100%"/></td> 53 </tr> 54 55 <!--5. 第四部分: 嵌套一个三行7列表格--> 56 <tr> 57 <td> 58 <table ="" cellspacing="" cellpadding="" width="100%" height="500px"> 59 <tr> 60 <td colspan="7"><h3>最新商品<img src="img/title2.jpg"></h3></td> 61 </tr> 62 <tr align="center"> 63 <!--左边大图的--> 64 <td rowspan="2" width="206px" height="480px"> 65 <img src="products/hao/big01.jpg"/> 66 </td> 67 <td colspan="3" height="240px" width="125px"> 68 <img src="products/hao/middle01.jpg" width="100%" height="100%"/> 69 </td> 70 <!--<td> 71 <img src="" width="100%"/> 72 <p>洗衣机</p> 73 <p><font color="red">$998</font></p> 74 </td>--> 75 <td> 76 <img src="products/hao/small06.jpg" /> 77 <p>洗衣机</p> 78 <p><font color="red">$998</font></p> 79 </td> 80 <td> 81 <img src="products/hao/small06.jpg" /> 82 <p>洗衣机</p> 83 <p><font color="red">$998</font></p> 84 </td> 85 <td> 86 <img src="products/hao/small06.jpg" /> 87 <p>洗衣机</p> 88 <p><font color="red">$998</font></p> 89 </td> 90 </tr> 91 <tr align="center"> 92 <td> 93 <img src="products/hao/small06.jpg" /> 94 <p>洗衣机</p> 95 <p><font color="red">$998</font></p> 96 </td> 97 <td> 98 <img src="products/hao/small06.jpg" /> 99 <p>洗衣机</p> 100 <p><font color="red">$998</font></p> 101 </td> 102 <td> 103 <img src="products/hao/small06.jpg" /> 104 <p>洗衣机</p> 105 <p><font color="red">$998</font></p> 106 </td> 107 <td> 108 <img src="products/hao/small06.jpg" /> 109 <p>洗衣机</p> 110 <p><font color="red">$998</font></p> 111 </td> 112 <td> 113 <img src="products/hao/small06.jpg" /> 114 <p>洗衣机</p> 115 <p><font color="red">$998</font></p> 116 </td> 117 <td> 118 <img src="products/hao/small06.jpg" /> 119 <p>洗衣机</p> 120 <p><font color="red">$998</font></p> 121 </td> 122 </tr> 123 </table> 124 </td> 125 </tr> 126 127 <!--6. 第五部分: 直接放一张图片--> 128 <tr> 129 <td><img src="products/hao/ad.jpg" width="100%"/></td> 130 </tr> 131 132 <!--7. 第六部分: 抄第四部分的--> 133 <tr> 134 <td> 135 <table ="" cellspacing="" cellpadding="" width="100%" height="500px"> 136 <tr> 137 <td colspan="7"><h3>最热商品<img src="img/title2.jpg"></h3></td> 138 </tr> 139 <tr align="center"> 140 <!--左边大图的--> 141 <td rowspan="2" width="206px" height="480px"> 142 <img src="products/hao/big01.jpg"/> 143 </td> 144 <td colspan="3" height="240px" width="125px"> 145 <img src="products/hao/middle01.jpg" width="100%" height="100%"/> 146 </td> 147 <!--<td> 148 <img src="" width="100%"/> 149 <p>洗衣机</p> 150 <p><font color="red">$998</font></p> 151 </td>--> 152 <td> 153 <img src="products/hao/small06.jpg" /> 154 <p>洗衣机</p> 155 <p><font color="red">$998</font></p> 156 </td> 157 <td> 158 <img src="products/hao/small06.jpg" /> 159 <p>洗衣机</p> 160 <p><font color="red">$998</font></p> 161 </td> 162 <td> 163 <img src="products/hao/small06.jpg" /> 164 <p>洗衣机</p> 165 <p><font color="red">$998</font></p> 166 </td> 167 </tr> 168 <tr align="center"> 169 <td> 170 <img src="products/hao/small06.jpg" /> 171 <p>洗衣机</p> 172 <p><font color="red">$998</font></p> 173 </td> 174 <td> 175 <img src="products/hao/small06.jpg" /> 176 <p>洗衣机</p> 177 <p><font color="red">$998</font></p> 178 </td> 179 <td> 180 <img src="products/hao/small06.jpg" /> 181 <p>洗衣机</p> 182 <p><font color="red">$998</font></p> 183 </td> 184 <td> 185 <img src="products/hao/small06.jpg" /> 186 <p>洗衣机</p> 187 <p><font color="red">$998</font></p> 188 </td> 189 <td> 190 <img src="products/hao/small06.jpg" /> 191 <p>洗衣机</p> 192 <p><font color="red">$998</font></p> 193 </td> 194 <td> 195 <img src="products/hao/small06.jpg" /> 196 <p>洗衣机</p> 197 <p><font color="red">$998</font></p> 198 </td> 199 </tr> 200 </table> 201 </td> 202 </tr> 203 204 <!--8. 第七部分: 放置一张图片--> 205 <tr> 206 <td><img src="img/footer.jpg" width="100%"/></td> 207 </tr> 208 209 <!--9. 第八部分: 放一堆超链接--> 210 <tr align="center"> 211 <td> 212 <a href="#">关于我们</a> 213 <a href="#">联系我们</a> 214 <a href="#">招贤纳士</a> 215 <a href="#">法律声明</a> 216 <a href="#">友情链接</a> 217 <a href="#">支付方式</a> 218 <a href="#">配送方式</a> 219 <a href="#">服务声明</a> 220 <a href="#">广告声明</a> 221 <br /> 222 Copyright © 2005-2016 传智商城 版权所有 223 224 </td> 225 </tr> 226 </table> 227 </body> 228 </html>
表单标签
1 <!-- 2 表单标签 3 action : 直接提交的地址 4 5 method : 6 get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k 7 post 方式 会将参数封装在请求体中, 没有这样的限制 8 9 10 input : 11 type: 指定输入项的类型 12 text : 文本 13 password : 密码框 14 radio : 单选按钮 15 checkbox : 复选框 16 file : 上传文件 17 submit : 提交按钮 18 button : 普通按钮 19 reset : 重置按钮 20 hidden : 隐藏域 21 22 date : 日期类型 23 tel : 手机号 24 number : 只允许输入数字 25 26 placeholder : 指定默认的提示信息 27 name : 在表单提交的时候,当作参数的名称 28 id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它 29 30 textarea : 文本域, 可以输入一段文本 31 cols : 指定宽度 32 rows : 指定的是高度 33 34 select : 下拉列表 35 option : 选择项 36 -->
输入框提示文字
<!--文本输入框--> 用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" /><br />
单选标签
1 性别: <input type="radio" name="sex" />男 2 <input type="radio" name="sex" />女 3 <input type="radio" name="sex" />妖
多选标签
1 爱好: 2 <input type="checkbox" />抽烟 3 <input type="checkbox" />喝酒 4 <input type="checkbox" />烫头 5 <input type="checkbox" />撸代码 6 <input type="checkbox" />大宝剑 7
下拉列表标签
1 籍贯 : 2 <select> 3 <option>--请选择--</option> 4 <option>湖北</option> 5 <option>内蒙古</option> 6 <option>火星</option> 7 </select>
frameset标签
使用frameset标签,不要使用body标签
<frameset rows="15%,*"> <frame src="aaa.html" /> <frameset cols="15%,*"> <frame src="bbb.html"/> <frame src="ccc.html" name="rightFrame"/> </frameset> </frameset>
将制定的页面在rightFrame的位置打开 <a href="data.html" target="rightFrame">收件箱</a>
示例:注册页面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- 7 1. 创建一个8行一列的表格 8 2. 第一部份: LOGO部分: 嵌套一个一行三列的表格 9 3. 第二部分: 导航栏部分 : 放置5个超链接 10 4. 第三部分: 轮播图 11 5. 第四部分: 嵌套一个三行7列表格 12 6. 第五部分: 直接放一张图片 13 7. 第六部分: 抄第四部分的 14 8. 第七部分: 放置一张图片 15 9. 第八部分: 放一堆超链接 16 --> 17 </head> 18 <body> 19 <!--1. 创建一个8行一列的表格--> 20 <table width="100%"> 21 <!--2. 第一部份: LOGO部分: 嵌套一个一行三列的表格--> 22 <tr> 23 <td> 24 <table ="" cellspacing="" cellpadding="" width="100%"> 25 <tr> 26 <td><img src="img/logo2.png"/></td> 27 <td><img src="img/header.png"/></td> 28 <td> 29 <a href="#">登录</a> 30 <a href="#">注册</a> 31 <a href="#">购物车</a> 32 </td> 33 </tr> 34 </table> 35 </td> 36 </tr> 37 38 <!--3. 第二部分: 导航栏部分 : 放置5个超链接--> 39 <tr bgcolor="black"> 40 <td height="50px"> 41 <a href="#"><font color="white">首页</font></a> 42 <a href="#"><font color="white">手机数码</font></a> 43 <a href="#"><font color="white">电脑办公</font></a> 44 <a href="#"><font color="white">工程仪器</font></a> 45 <a href="#"><font color="white">只能家具</font></a> 46 <a href="#"><font color="white">工程仪器</font></a> 47 </td> 48 </tr> 49 50 51 52 <tr> 53 <td background="image/regist_bg.jpg" height="500px"> 54 <table border="" cellspacing="" cellpadding="" width="60%" height="80%" border="5px" bgcolor="white" align="center"> 55 <tr> 56 <td> 57 <form action="注册页面.html" method="post"> 58 <table width="60%" align="center"> 59 <tr> 60 <td colspan="2"><font color="blue" size="5">会员注册</font> USER REGISTER</td> 61 </tr> 62 <tr> 63 <td>用户名:</td> 64 <td> 65 <input type="text" placeholder="请输入用户名"/> 66 </td> 67 </tr> 68 <tr> 69 <td>密 码:</td> 70 <td> 71 <input type="password" placeholder="请输入密码" /> 72 </td> 73 </tr> 74 <tr> 75 <td>性 别:</td> 76 <td> 77 <input type="radio" name="gender" />男 78 <input type="radio" name="gender" />女 79 </td> 80 </tr> 81 <tr> 82 <td>地址:</td> 83 <td> 84 <select name="address"> 85 <option>-请选择-</option> 86 <option value="beijing">北京</option> 87 <option value="shanghai">上海</option> 88 </select> 89 </td> 90 <tr> 91 <td></td> 92 <td colspan=""> 93 <input type="submit" value="注册" /> 94 </td> 95 </tr> 96 </tr> 97 </table> 98 </form> 99 </td> 100 </tr> 101 </table> 102 </td> 103 </tr> 104 105 <!--8. 第七部分: 放置一张图片--> 106 <tr> 107 <td><img src="img/footer.jpg" width="100%"/></td> 108 </tr> 109 110 <!--9. 第八部分: 放一堆超链接--> 111 <tr align="center"> 112 <td> 113 <a href="#">关于我们</a> 114 <a href="#">联系我们</a> 115 <a href="#">招贤纳士</a> 116 <a href="#">法律声明</a> 117 <a href="#">友情链接</a> 118 <a href="#">支付方式</a> 119 <a href="#">配送方式</a> 120 <a href="#">服务声明</a> 121 <a href="#">广告声明</a> 122 <br /> 123 Copyright © 2005-2016 传智商城 版权所有 124 125 </td> 126 </tr> 127 </table> 128 </body> 129 </html>
示例:网站后台页面
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <frameset rows="15%,*"> <frame src="a.html"/> <frameset cols="15%,*"> <frame src="b.html" /> <frame src="c.html" name="tag"/> </frameset> </frameset> </html>
a.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h3>a.html页面</h3> </body> </html>
b.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="https://www.baidu.com" target="tag">百度</a><br /> <a href="https://www.hao123.com" target="tag">hao123</a><br /> <a href="https://www.xiaohua.com" target="tag">X</a><br /> </body> </html>
c.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h3>c.html页面</h3> </body> </html>
示例:网站首页使用CSS
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <!-- 8 1. 创一个最外层div 9 2. 第一部份: LOGO部分: 嵌套三个div 10 3. 第二部分: 导航栏部分 : 放置5个超链接 11 4. 第三部分: 轮播图 12 5. 第四部分: 13 6. 第五部分: 直接放一张图片 14 7. 第六部分: 抄第四部分的 15 8. 第七部分: 放置一张图片 16 9. 第八部分: 放一堆超链接 17 --> 18 <style type="text/css"> 19 .logo{ 20 float: left; 21 width: 33%; 22 height: 60px; 23 line-height: 60px; 24 border: 1px solid red; 25 /*border-width: 1px; 26 border-style: solid; 27 border-color: red;*/ 28 } 29 .amune{ 30 color: white; 31 text-decoration: none; 32 height: 50px; 33 line-height: 50px; 34 } 35 .product{ 36 float: left; 37 text-align: center; 38 width: 25%; 39 height: 240px; 40 } 41 </style> 42 </head> 43 44 <body> 45 <!--1. 创一个最外层div--> 46 <div id=""> 47 48 <!--2. 第一部份: LOGO部分: 嵌套三个div--> 49 <div> 50 <div class="logo"> 51 <img src="img/logo2.png"/> 52 </div> 53 <div class="logo"> 54 <img src="image/header.jpg"/> 55 </div class="logo"> 56 <div class="logo"> 57 <a href="#">登录</a> 58 <a href="#">注册</a> 59 <a href="#">购物车</a> 60 </div> 61 </div> 62 63 <!--清除浮动--> 64 <div style="clear: both;"></div> 65 66 <!--3. 第二部分: 导航栏部分 : 放置5个超链接--> 67 <div style="background-color: black;height: 50px;"> 68 <a href="#" class="amune">首页</a> 69 <a href="#" class="amune">手机数码</a> 70 <a href="#" class="amune">电脑办公</font></a> 71 <a href="#" class="amune">工程仪器</a> 72 <a href="#" class="amune">只能家具</a> 73 <a href="#" class="amune">工程仪器</a> 74 </div> 75 76 <!--4. 第三部分: 轮播图--> 77 <div> 78 <img src="img/1.jpg" width="100%"/> 79 </div> 80 81 <!--5. 第四部分:--> 82 <div> 83 <div><h2>最新商品<img src="img/title2.jpg"/></h2></div> 84 <div id="" style="width: 15%; height: 480px; float: left;"> 85 <img src="products/hao/big01.jpg" width="100%" height="100%" /> 86 </div> 87 <div id="" style="width: 84%; height: 480px; float: left;"> 88 <div style="height: 240px; width: 50%; float: left;"> 89 <img src="products/hao/middle01.jpg" height="100%" width="100%"/> 90 </div> 91 <div class="product"> 92 <img src="products/hao/small08.jpg"/> 93 <p>高压锅</p> 94 <p style="color: red;">¥998</p> 95 </div> 96 <div class="product"> 97 <img src="products/hao/small08.jpg"/> 98 <p>高压锅</p> 99 <p style="color: red;">¥998</p> 100 </div> 101 <div class="product"> 102 <img src="products/hao/small08.jpg"/> 103 <p>高压锅</p> 104 <p style="color: red;">¥998</p> 105 </div> 106 <div class="product"> 107 <img src="products/hao/small08.jpg"/> 108 <p>高压锅</p> 109 <p style="color: red;">¥998</p> 110 </div> 111 <div class="product"> 112 <img src="products/hao/small08.jpg"/> 113 <p>高压锅</p> 114 <p style="color: red;">¥998</p> 115 </div> 116 <div class="product"> 117 <img src="products/hao/small08.jpg"/> 118 <p>高压锅</p> 119 <p style="color: red;">¥998</p> 120 </div> 121 </div> 122 </div> 123 124 <!--6. 第五部分: 直接放一张图片--> 125 <div > 126 <img src="products/hao/ad.jpg" width="100%"/> 127 </div> 128 129 <!--7. 第六部分: 抄第四部分的--> 130 <div></div> 131 132 <!--8. 第七部分: 放置一张图片--> 133 <div> 134 <img src="image/footer.jpg" width="100%"/> 135 </div> 136 137 <!--9. 第八部分: 放一堆超链接--> 138 <div style="text-align: center;"> 139 <a href="#">关于我们</a> 140 <a href="#">联系我们</a> 141 <a href="#">招贤纳士</a> 142 <a href="#">法律声明</a> 143 <a href="#">友情链接</a> 144 <a href="#">支付方式</a> 145 <a href="#">配送方式</a> 146 <a href="#">服务声明</a> 147 <a href="#">广告声明</a> 148 149 <br /> 150 151 Copyright © 2005-2016 传智商城 版权所有 152 </div> 153 154 </div> 155 </body> 156 157 </html>
zwy

浙公网安备 33010602011771号