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