day02

回顾

• HTML标签： 格式排版

  p  段落   双
  br 换行 单
  hr 分隔线   单
  h1~h6   标题   双
  pre   原样格式化输出 双
  div

   

• HTML标签 ：文本

  <em>  强调   倾斜  双
  <ruby></ruby> 加拼音  
  <rt></rt>   
  <strong> 加粗 强调 双
  <mark></mark> 标记 选中 双
  <sub></sub> 下标
  <sup></sup> 上标
  <ins></ins> 插入的内容
  <del></del> 删除的内容

   

• CSS： 在html中的使用

  link 外部css   单    href    type     rel
  <style> 双
  style属性

   

• CSS选择器以及优先级

  #id
  .className
  tagName
  * 
  ​
  组合 空格 后代   selector1 selectoer2 后代元素
  组合 大于号 子元素 selectoer1>selectoer2 子元素
  组合 点 并集   p.item 并集 标签是p而且class是item的 标签在前class在后
  ​
  群组 逗号   selectoer1,selecoter2 一块儿设置
  ​
  and   p.item .item.first-item   p#nav   <div class="item first-item">
  ​

  id > class > tagName

   

 

• CSS属性： 字体 文本 颜色

  font:[bold|style] size family
  font-family:
  font-size:
  font-weight   bold
  font-style italic  
  font-variant: small-caps

  color

  word-spacing
  letter-spacing
  text-align left/right/center
  vertical-align: middle/top/bottom
  line-height 
  word-wrap: break-word / overflow-wrap
  white-space: pre / pre-wrap
  text-decoration: underline / overline / line-through / none
  text-indent

   

• CSS颜色和长度

  # 颜色
  colorName
  rgb() rgb()
  #十六进制
  ​
  # 长度
  px
  em 
  百分比
  ​

 

1 CSS 属性/尺寸/边框/内边距/背景

尺寸

• width max-width min-width 后面还会在讲 先用width

• height max-height min-height

边框

• border-style 边框风格 solid / dotted / dashed / double / none

• border-width 边框宽度

• border-color 边框颜色

• border 复合属性 border: 1px solid #ccc

 

内边距 边框与文字的距离

• padding-left

• padding-top

• padding-right

• padding-bottom

• padding

  padding: 值; 上下左右
  padding: 值1 值2；   值1：上下 值2：左右
  padding: 值1 值2 值3; 值1：上 值2：左右 值3:下
  padding: 值2 值2 值3 值4； 值1：上 值2：右 值3：下 值4：左

 

背景属性

• background-color 背景颜色 transparent 默认透明色

• background-image 背景图片 url()

• background-repeat 背景图片平铺 repeat no-repeat repeat-x repeat-y

• background-position 背景图片位置 像素或者方位

• background-attachment 背景图片固定 scroll / fixed

• background 复合属性

  background: color image repeat postion attachment

 

CSS Sprite 精灵图 雪碧图

• 利用 background-position 设置背景图片的位置

• 把不少小的图片 集成到一张大图上

• 好处： 减小网络请求数量

 

 

2 超级连接

2.1 a 元素

属性

• href 要跳转的连接

• target _blank / _self 在新的一页打开 默认在原窗口打开

• title 鼠标划上去后，显示的信息

• download H5新增的

特殊用法 调用系统的应用 若是没有对应的功能点了也没用

• 跳转网页 href="http://www.oldboy.cn"

• 发短信 href="mailto:fuming@oldboy.com"

• 打电话 href="tel:10086" 电脑没打电话功能

• 发邮件 href="sms:10086

2.2 路径

• 相对路径 ./ ../

• 绝对路径 URL http://www.biadu.com/index.html

• 特殊的相对路径 /lesson/path/index.html

 

2.3 cursor css属性

cursor: pointer; move  wait no-drop 手 十字 转圈 禁止访问

 

2.4 锚点

设置锚点

第一种方式
<a name="锚点名字"></a>   例子：<a name="jieshao"></a>
​
找到锚点的方式：
<a href="#锚点名字">同志介绍</a>  
<a href="#">返回顶部</a>
​
第二种方式
随便一个元素
<tagname id="锚点的名字"></tagname> 例子：<div style="height:600px" id="nihao">

跳转到指定锚点

<a href="#锚点名"></a>
​
​

 

2.5 完整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

 

3图 片

img元素

属性

• src 图片位置

• title 鼠标移动上去的提示信息

• alt 图像的替代文字 假如图像源没了

• usemap 图片映射

图片映射

map元素

• name 起名 和usemap关联起来

• id 和上面同样

area元素

• shape rect 左上点+右上点 circle 圆心+半径 poly 几对点就是几边形

• coords 根据shape指定的形状 肯定坐标

• target _blank _self 是否在本窗口打开新的连接

• href 要跳转的地址

• title 提示信息

 

 

做业

• 完成图片映射 和 锚点的联系

• css sprites 练习

• 读取md转成html