1. 超级链接
1.1 a 元素
属性
- href 路径
- target _blank / _self _blank 为从新窗口打开 self为默认当前窗口
- title 提示信息
- download H5新增的 文件下载
<a href="http://www.taobao.com" title="淘宝" target="_blank" download>
下载的图片</a>
特殊用法
- 跳转网页
<a href="http://www.jiaoliu.com">交流网</a>
- 发邮件
<a href="mailto:[email protected]">发邮件</a>
- 打电话
<a href="tel:18613176338">打电话</a>
- 发短信
<a href="sms:18618156338">发短信</a>
1.2 路径
- 相对路径 ./ 同一级 ../ 上一级
- 绝对路径 URL http://www.biadu.com/index.html 网站链接
- 特殊的相对路径 /lesson/path/index.html html的路径 #section 锚点名字
1.3 锚点
设置锚点
第一种方式
<a name="锚点名字"></a>
第二种方式
随便一个元素
<tagname id="锚点的名字"></tagname>
跳转到指定锚点
<a href="#锚点名"></a>
<map name="mymap" id="mymap">
<area shape="rect" title="5折抄底" coords="0,51,117,83" href="#section01">
</map>
1.4 完整URL
URL(Uniform Resoure Locator)，统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
http://www.badiu.com/path/demo/contents/index.php?a=100&b=300#mao1
协议protocol http
主机名hostname www.baidu.com / IP
路径 path /path/demo/contents/
文件名filename index.php
查询内容query ?a=100&b=300
锚点 #mao1
2. 图 片
2.1 img元素
属性
- src 图片的路径
- title 光标移动到图片提示的信息
- alt 图片的名字
- usemap 指定map的name或id 的值
2.2 图片映射
2.2.1 map元素
- name 指定名字
- id 指定id
2.2.2 area元素
- shape 指定映射的形状
- coords 映射的图标
- target 是否建新窗口
- href 路径
- title 提示信息
<map name="mymap" id="mymap">
<!-- 设置rect矩形则需要左上以及右下两个位置，
-->
<area shape="rect" coords="245,168,311,220" title="鼻子" target="_blank" href="https://baike.baidu.com/item/%E9%BC%BB/13024143?fromtitle=%E9%BC%BB%E5%AD%90&fromid=3122">
<!-- 设置circle圆形则需要圆点坐标
以及半径大小 -->
<area shape="circle" coords="214,164,30" title="眼睛" href="https://baike.baidu.com/item/%E7%9C%BC%E7%9D%9B/362" target="_blank">
<!-- 设置poly多边形则需要多个角的坐标 -->
<area shape="poly" coords="242,280,362,253,317,301" title="下巴" target="_blank" href="https://baike.baidu.com/item/%E4%B8%8B%E5%B7%B4">
</map>
路径可以是锚点的名字或者特殊的文件路径
1 CSS 属性/尺寸/边框/背景
1.1尺寸
- height 高度
- min-height 最小高度
- max-height 最大高度
- width 宽度
- min-width 最小宽度
- max-width 最大宽度
1.2边框
- border-style 边框风格 solid 实线 / dotted 点线 / dashed 虚线 / double 双边线 / none
- border-width 边框宽度
- border-color 边框颜色 默认为透明色 无边框设为none
- border 复合属性 border: 1px solid #ccc
1.3内边距
- padding-left 左边距
- padding-top 上边距
- padding-right 右边距
- padding-bottom 下边距
- padding
padding: 值; 上下左右
padding: 值1 值2； 上下 左右
padding: 值1 值2 值3; 上 左右 下
padding: 值2 值2 值3 值4； 上 右 下 左
1.4背景属性
- background-color 背景颜色 transparent 为透明
- background-image 背景图片 url() 图片地址
- background-repeat 背景图片平铺 repeat平铺 no-repeat不平铺 repeat-x 水平平铺repeat-y垂直平铺
- background-position 背景图片位置 10px 10px 左 上
- background-attachment 背景图片固定 scroll / fixed fixed超过固定宽度才看不到图片
- background 复合属性
background: color image repeat postion attachment
1.5 CSS Sprite 精灵图 雪碧图
- 利用 background-position 设置背景图片的位置
- 把很多小的图片 集成到一张大图上
- 好处： 减少网络请求数量
.reg_btn {
/*设置按钮的宽高，就是显示出图标的大小*/
width:120px;
height:30px;
border: 1px solid #ccc;
background-image: url("../../dist/images_two/loginlist.png");
background-repeat: no-repeat;
/*通过往左上移动位置来显示图片的某一位置*/
background-position: -1px -43px;
1.6 cursor属性
鼠标属性
pointer / move / no-drop显示警告
h1 {
/*小手光标*/
cursor: pointer;
/*移动光标*/
cursor: move;
不准删除光标
cursor: no-drop;
}