html学习
0索引
标签常用属性
- color: 颜色
- size : 改变字体大小 范围:1~7
- face : 字体
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>网站信息页面</title> </head> <body> <h1> 标题1 </h1> <h2> 标题2 </h2> <hr /><!--水平分割线--> 我要<font color="red" size="1">回家 !!!</font> <br /> <p> <strong>黑马程序员</strong>的学员多为大学毕业后，<em>有理想、有梦想，</em>想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。 </p> </body> </html>
- 基本属性
src:指定图片的路径
width: 宽度
height: 高度
alt:图片加载错误时的提示信息。
- 相对路径:
./代表的是当前路径
../代表的上一级路径
../../代表的上上-级路径
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--在网页中显示图片--> <img src="../img/logo2.png" width="30%"/> <img src="../image/header.jpg" width="30%" /> <img src="../img/美女22.jpg" width="500px" alt="这张图片可能加载问题" /> </body> </html>
- ul:无序列表
- type:
- ol有序列表:
- type:样式
- start:起始索引
- li:列表项
- a超链接标签
- href:要坊何的讎接地址. 指定要跳转去的链接地址需要加上http协议,如果访问的是本网站的html文件可以直接写文 target:网站首页打幵方式:
- _blank: 新起一个标签页打开页面
- _self: 默认打开方式在当前窗口打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <!--无序列表 ul li 列表项 type属性 . 小圆圈, 小方块, 默认小黑点 --> <ul type="circle"> <li>百度</li> <li>新浪</li> </ul> <hr /> <!-- 有序列表ol 常用属性: type : 指定序号的类型 start : 从几开始,必须得写数字 --> <ol type="1" start="2"> <li>百度</li> <li>新浪</li> </ol> </body> </html>
- table标签:
- border:指定边框
- width:宽度
- height:高度
- bgcolor:背景颜色
- align:对齐方式
- tr标签
- td标签:
- colspan:跨列操作
- rowspan:跨行操作
- 表格单元格的合并
- 表格的嵌套
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 描述：表格基本属性表设置 --> <table border="1px" width="400px" align="center" > <tr align="center"> <td bgcolor="antiquewhite">1</td> <td>1</td> </tr> <tr align="center"> <td>1</td> <td>1</td> </tr> <tr align="center"> <td>1</td> <td>1</td> </tr> </table> <hr /> <!-- 描述：表格的设置 --> <table border="1px" width="400px" align="center"> <tr align="center"> <td colspan="2" rowspan="2">1</td> <td>1</td> </tr> <tr align="center"> <td>1</td> </tr> <tr align="center"> <td>1</td> <td>1</td> <td>1</td> </tr> <tr align="center" > <td>1</td> <td>1</td> <td rowspan="2">1</td> </tr> <tr align="center"> <td>1</td> <td>1</td> </tr> </table> </body> </html>
1表单标签<from></from>
- action : 直接提交的地址
- method :
- get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
- post 方式 会将参数封装在请求体中, 没有这样的限制
2输入标签
input :
- type: 指定输入项的类型:
- text : 文本
- password : 密码框
- radio : 单选按钮
- checkbox : 复选框
- file : 上传文件
- submit : 提交按钮
- button : 普通按钮
- reset : 重置按钮
- hidden : 隐藏域
- select : 下拉列表
option : 选择项
-
- date : 日期类型
- tel : 手机号（在手机上才能看到效果
- number : 只允许输入数字
- placeholder : 指定默认的提示信息
- name : 在表单提交的时候,当作参数的名称
- id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
- textarea : 文本域, 可以输入一段文本
- cols : 指定宽度
- rows : 指定的是高度
- 用form标签来包裹要提交的内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--用form标签来包裹要提交的内容--> <form action="table.html" > <!--使用method="post"时因为链接中有中文，所以要在文件家中使用浏览器打开 --> <!--隐藏域 主要是用来存放页面上一些ID信息 --> <input type="hidden" value="sadfaldsfkjl@o3214813278" name="uid"/> <!--文本输入框--> 用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" /><br /> 密码：<input type="password" placeholder="请输入密码"/> <br /> 确认密码：<input type="password" /><br /> 邮箱：<input type ="text" /><br /> 手机号码：<input type="tel" /><br /> <!--使用number时在点击注册时会显示只能输入数字，tel在手机上会弹出一个数字键盘 --> 照片：<input type="file" /><br /> 性别：<input type="radio" name="sex"/>男<!--加上相同的名字保证其是单选而不是多选 --> <input type="radio" name="sex" />女<br /> 爱好 ：<input type= "checkbox"/> 阅读 <input type= "checkbox"/> 画画 <input type= "checkbox"/> 代码<br /> 理想与追求：<textarea cols="3"></textarea><br /><!-- --> 籍贯： <select > <option>--请选择--</option><!--要加上这句话否则下拉框无法完全显示 --> <option value="安徽"></option> <option value="江苏"></option> <option value="关东"></option> </select><br /> 出生日期：<input type="datetime-local" /><br /> <!-- --> 校验码：<input type="text" /> <input type="submit" value="注册"/> <input type="button" value="普通按钮"/> <input type="reset" value="重置按钮"/> </form> </body> </html>
使用frameset 需要将body标签取掉
- cols : 按列划分页面
- rows : 按行划分页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!-- 如果使用frameset 需要将body标签取掉 cols : 按列划分页面 rows : 按行划分页面 --> <frameset rows="10%,30%,*"> <frame src="aaa.html" /> <frame src="bbb.html" /> <frame src="ccc.html" /> </frameset> </html>
网站后台:(QQ邮箱)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <frameset rows="15%,*"> <frame src="aaa.html" /> <frameset cols="15%,*"> <frame src="bbb.html"/> <frame src="ccc.html" name="rightFrame"/> </frameset> </frameset> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body bgcolor="pink"> <a href="data.html" target="rightFrame">收件箱</a><br /> <a href="#">发送箱</a><br /> <a href="#">垃圾箱</a><br /> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 创建一个5行一列的表格 1. logo部分 2. 导航栏 3. 注册部分 4. 页脚图片 5. 网站声明信息 --> <table border="1px" width="100%"> <!-- logo部分--> <tr> <td> <table width="100%"> <tr> <td> <img src="../img/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> <!----> <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 background="../image/regist_bg.jpg" height="500px"> <table border="5px" width="60%" height="80%" bgcolor="white" align="center" > <tr> <td> <form action="注册入门案例.html"> <table width="60%" align="center"> <tr> <td colspan="2"><font color="blue" size="5">会员注册</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="text" 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" /> 女 <input type="radio" name="sex" /> 妖 </td> </tr> <tr> <td>出生日期:</td> <td> <input type="date" /> </td> </tr> <tr> <td>验证码:</td> <td> <input type="text" /> </td> </tr> <tr> <td></td> <td> <input type="submit" value="注册" /> </td> </tr> </table> </form> </td> </tr> </table> </td> </tr> <tr> <td> <img src="../image/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 © 2005-2016 传智商城 版权所有 </td> </tr> </table> </body> </html>
