今日笔记
一.分区
1.行内分区-逻辑分区
| <span></span> |
作用:给一行文字分区,让某些文字的显示效果不同,在同一行显示
ex:
| <p>苦瓜<span style="color:red;">很甜</span>甜瓜<span style="color:yellow;">很苦</span></p> |
2.块分区
| <div></div> |
ex:
| <body> <div style="width:1000px;height:200px;background:red;"></div> <div style="width:1000px;height:800px;background:yellow;"></div> <div style="width:1000px;height:200px;background:red;" ></div> </body> |
二.元素的分类
1.行级元素,可以和其它行级元素公用一行
| <i>苦瓜</i><b>很甜</b>很甜<span style="color:red;">甜瓜</span>很苦 |
i b span em u del s strong
2.块级元素,自己独占一行,自带回车
| <p>苦瓜很甜甜瓜很苦</p><p>苦瓜很甜甜瓜很苦</p> |
div p hn
总结:如果想让元素和其它行级元素共用一行,使用span
如果想让元素自己独占一行,使用div分区
三.图像和链接
1.图像
<img src="图片资源路径">
1.使用网络资源图片
绝对路径:把路径写完整
协议+计算机地址+文件夹结构+文件名称
| 1.打开tmooc.cn,按f12打开chrome的开发者模式 |
优点:节省自己服务器的存储空间
缺点:资源不稳定
2.使用自己服务器的资源
相对路径:根据图片与.html的结构关系写路径
参照物:写img标签的.html文件
1..html和图片同级,直接写图片名称(兄弟)
| <img src=" 07.png" > |
2.html文件和图片的父级同级别
| <img src="image/07.png" > |
3.html文件的父级和图片是 同级
| <img src="../09.png" > |
4.html的父级和图片的父级是同级
| <img src="../image/06.png" > |
小复习:
1.绝对路径:把路径写全
使用网络资源的时候用
协议+计算机地址+文件夹的结构+文件名
2.相对路径--项目中主流
相对于html文件的层级关系写路径
3.img其它属性
src 应用图片资源路径 (url)
width="数字px"
height="数字px"
为了防止图片失真,一般情况下,
img标签width和height只设置一个.
另外一个属性自动匹配,自适应!
title="文字" 公有属性
alt="文字"
| <body style="color:red;"> <img src="http://cdn.tmooc.cn/tmooc-web/imgad/2018/7/19//8D05152D9C604E388F8C8C7A05707DEE.jpg"> <img src="08.png" > <img src="image/07.png" > <img src="../109.png" alt="我是谁,我在哪,何去何从"> <img src="../image/06.png" height="20px" > <img src="d://08.png" title="俺是一个兵,来自老百姓!"> </body> |
2.超链接
<a>苦瓜很甜甜瓜很苦</a>
属性:
href="指定链接的路径"
title="文字"
target="_self" 默认,在当前页面打开新网页
_blank 在新的标签页中打开网页
a标签的功能
1.打卡新的网页
2.下载资源 href="资源的url"
3.打开电子邮件
4.返回页面顶部
| <a href="http://www.tmooc.cn/" title="欢迎来到万寿路" >苦瓜很甜甜瓜很苦</a> <a href="05.zip">下载资源</a> <a href="mailto:[email protected]">发送邮件</a> <a href="#">返回页面顶部</a> |
3.行级元素的空格折叠现象
在行级元素中,不管多少个空格和回车,显示的效果,
都只有一个空格
<br>回车
空格
< <
> >
© ©
¥ ¥
三.列表,显得有条理
1.有序列表
<ol>
<li></li>
<li></li>
...
</ol>
属性:
ol -->type="" a 1 A I i 列表编号类型
start="" 编号开始的数字
| <p>把大象装冰箱,一共分几步</p> <ol type="I" start="3"> <li>把冰箱门打开</li> <li>把大象装冰箱里</li> <li>把冰箱门带上</li> </ol> |
总结:ol和li配合使用
有序列表项目中使用较少
ol li是块级元素
2.无序列表
<ul>
<li></li>
<li></li>
....
</ul>
| <p>好看的恐怖电影</p> <ul> <li>电锯惊魂1~8</li> <li>死神来了1~5</li> <li>咒怨</li> <li>寂静岭</li> <li>午夜凶铃</li> </ul> |
3.嵌套
| <ol> <li>美国 <ul> <li>超人</li> <li>蚁人</li> <li>美队</li> </ul>
</li> <li>日本 <ul> <li>鸣人</li> <li>路飞</li> <li>凹凸曼</li> </ul> </li> <li>中国</li> </ol> |
4.ul一般用在布局