html与css简单的学习记录
学习过程记录:
1.字体和图片的简单使用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>标题1</h1> <h3>标题3</h3> 普通文本 <!-- <hr/> 水平分割线 --> <hr /> <p>段落标签p</p> <hr /> <!-- font 字体标签 color：设置字体颜色 size： 范围：1-7 face：设置字体 b标签：加粗 i标签：斜体 --> 我要<font color="#00ff00" size="7" face="微软雅黑">回家！！！</font> <br /> 我要<font color="red" size="5" face="仿宋">设置成仿宋了！！！</font> <br /> <p></p> <!-- strong：加粗，跟b标签不同的是，语音播报时会强调--> <strong>带语义标签(strong),加粗效果,</strong> <br /> <!-- 图片的显示,img标签,常用属性： src：指定图片路径 输入".."会有资源文件提示 width：指定图片的宽度，不指定高度时，高度会自适应 height：图片高度 alt：文件加载失败的提示信息 ./ 代表的是当前路径 ../ 代表的是上一级路径 ../../ 上上一级路径--> <img src="img/ic_qsmy.jpg" width="150px" height="100px" alt="图片加载失败"/> <!-- 设置百分比，高度会根据图片比例自适应 --> <img src="img/ic_qsmy.jpg" width="80%" alt="图片加载可能有问题"/> <img src="img/ic_qsmy.jpg"/> <!-- 无序列表：ul li：列表项 type属性：小圆圈，小方块，默认小黑点--> <ul type="circle"> <li>列表第一项</li> <li>列表第二项</li> </ul> <!-- 有序列表：ol,带有标记 type属性：排序可以是数字、字母 start：设置从几开始，必须是数字--> <ol type="A" start="2"> <li>有序列表第一项</li> <li>有序列表第二项</li> </ol> <!-- 链接标签：a，常用属性： href：指定要跳转去的链接地址 target：以什么方式打开 _self：默认打开方式，在当前窗口打开 _blank：新起一个标签页打开--> <ul> <li> <a href="http://www.baidu.com" target="_self"> 百度 </a> </li> <li><a href="#">博客园</a></li> </ul> </body> </html>
效果图：
2.表格标签的使用：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>表格标签</title> </head> <body> <!-- 表格标签：table，常用属性： border：指定边框 width：宽度 height：高度 bgcolor：设置背景色 align：对其方式 tr：标签--> <table border="1px" width="400px" bgcolor="#ff0000" align="center"> <tr bgcolor="#00ff00" align="center"> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td bgcolor="#0000ff">2</td> <td>2</td> <td>2</td> </tr> <tr align="right"> <td>3</td> <td>3</td> <td>3</td> </tr> </table> <h1>表格的合并：</h1> <!-- 表格的合并 colspan：跨列 rowspan：跨行 跨行或者跨列后需要把占用的行或列删掉--> <table border="1px" width="400px"> <tr> <td colspan="2">11</td> <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td rowspan="2">23</td> </tr> <tr> <td>31</td> <td>32</td> </tr> </table> <br /> <h1>表格的嵌套：</h1> <table border="1px" width="400px"> <tr> <td colspan="2">11</td> <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td rowspan="2"> <!-- 嵌套 --> <table border="1px" width="100%" bgcolor="#ff0000"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> </table> </td> </tr> <tr> <td>31</td> <td>32</td> </tr> </table> </body> </html>
效果图:
3.输入标签的使用：
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 表单标签：将form里面的内容提交 action 提交的地址 method：get方式与post方式--> <form action="网站首页.html"> <!-- 文本输入框 --> 用户名：<input type="text" name="userName" placeholder="请输入账号"/> <br /> 密码：<input type="password" placeholder="请输入密码"/> <br /> 手机号码 <input type="tel" /> <br /> 照片：<input type="file" /> <br /> 性别：<input type="radio" name="性别"/> 男 <input type="radio" name="性别"/> 女 <br /> <!-- 多选 --> 爱好：<input type="checkbox" />抽烟 <input type="checkbox" />抽烟 <input type="checkbox" />抽烟 <br /> <!-- 编辑框 textarea cols控制宽度 rows控制高度--> 特殊说明：<textarea cols="40" rows="4"></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>
效果图：
4.frame标签的使用-划分布局，可扩大缩放比例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>百分比划分屏幕</title> </head> <!-- 使用fraeset标签需要将外部的body标签去掉 --> <!-- * 代表填充剩下的区间 cols 代表按列划分 rows 代表按行划分--> <frameset rows="10%,*"> <frame src="aaa.html" /> <frameset cols="20%,80%"> <frame src="bbb.html"/> <!-- 为frame标签设置name --> <frame src="ccc.html" name="right_ccc" /> </frameset> </frameset> </html>
效果图：
选择器：
1.元素选择器
<html> <head> <meta charset="utf-8"> <title>元素选择器</title> <style> div{ color: #ff0000; } </style> </head> <body> <!-- div默认占一行，自动换行 --> <div>第一行</div> <div>第二行</div> <!-- 内容显示在同一行 自动换行--> <span>第一行</span> <span>第二行</span> </body> </html>
效果图：
2. id选择器：
<html> <head> <meta charset="utf-8"> <title>元素选择器</title> <style> div{ color: #ff0000; } /** *id选择器的格式： #ID的名称{ 属性名称：属性的值; 属性名称：属性的值; } */ #tow{ color: #00ff00; font-size: 30px; padding: 20px; } </style> </head> <body> <!-- div默认占一行，自动换行 --> <div>第一行</div> <!-- 使用id‘tow’的选择器 --> <div id="tow">第二行</div> </body> </html>
效果图：
3.类选择器：
<html> <head> <meta charset="utf-8"> <title>类选择器</title> <style> /** *类选择器的格式： .类的名称{ 属性名称：属性的值; 属性名称：属性的值; } */ .aaa{ color: #0000ff; font-size: 30px; } </style> </head> <body> <!-- div默认占一行，自动换行 --> <div class="aaa">第一行</div> <div>第二行</div> <div class="aaa">第一行</div> <div class="aaa">第一行</div> </body> </html>
效果图：
4.CSS引入方式：
1.先定义样式文件
/* style1.css */ .aaa{ color: #0000ff; font-size: 30px; } .bbb{ color: #ff0000; font-size: 50px; }
2.使用上面的css样式：
<html> <head> <meta charset="utf-8"> <title>类选择器</title> <!-- 通过link标签引入外部的scc文件 --> <link rel="stylesheet" href="style1.css" /> </head> <body> <!-- div默认占一行，自动换行 --> <div class="aaa">第一行</div> <div>第二行</div> <div class="aaa">第一行</div> <div class="aaa">第一行</div> <div class="bbb">使用了外部样式的css</div> <div class="bbb" style="font-size: 20px;">使用了外部样式的css,并且在标签内修改某些属性</div> </body> </html>
效果图：
选择器的优先级：
浮动标签：
<html> <head> <meta charset="utf-8"> <title>类选择器</title> </head> <body> <!-- CSS浮动：浮动的元素会脱离正常的文档流，相当于与其他标签组合为帧布局了 float属性 属性值：左右对其 作用：缩放网页时，会自动缩放内容 clear属性：清除浮动 both: 两边都不允许浮动 left: 左边不允许浮动 right: 右边不允许浮动--> <div style="width: 200px; height: 100px; background-color: #FF0000; float: left;"></div> <div style="width: 200px; height: 100px; background-color: #0000FF; float: left;"></div> <div style="width: 200px; height: 100px; background-color: #00FF00; float: left;"></div> <div style="width: 200px; height: 100px; background-color: #FF0000; float: left;"></div> <div style="width: 200px; height: 100px; background-color: #0000FF; float: left;"></div> <div style="width: 200px; height: 100px; background-color: #00FF00; float: left;"></div> <div style="width: 200px; height: 100px; background-color: #FF0000; float: left;"></div> <div style="width: 200px; height: 100px; background-color: #0000FF; float: left;"></div> <div style="width: 200px; height: 100px; background-color: #00FF00; float: left;"></div> <div style="float: left;">当使用图片和文本时，浮动标签有起到作用了</div> </body> </html>
效果图：
清空左右浮动：
<html> <head> <meta charset="utf-8"> <title>类选择器</title> <style> .a{ float: left; border-width: 1px; border-style: solid; border-color: #ff0000; } </style> </head> <body> <div> <div class="a"> <img src="../img/timg%20(3).jpg" width="200px" height="150px"/> </div> <div class="a" style="line-height: 150px;">文本内容</div> </div> <!-- 清除浮动，下面的div就不会依附在上面div的右边 --> <div style="clear: both;"></div> <div> <div class="a"> <img src="../img/timg%20(3).jpg" width="200px" height="150px"/> </div> <div class="a" style="line-height: 150px;">文本内容</div> </div> </body> </html>
效果图：
绝对定位：
<html> <head> <meta charset="utf-8"> <title></title> <style> .a{ border: 1px solid #FF0000; } </style> </head> <body> <!-- 绝对定位 position: absolute top:100px;left:25%; 代表距离屏幕顶部与左边的距离--> <div class="a" style="position: absolute;top:100px;left:25%; width: 50%;height: 50%;"> </div> </body> </html>
