第二天筆記

html更多解讀

• html只考慮標簽嵌套豌汇，跟tab和空格無關验游，無數(shù)個空格也只算一個充岛。

1. 圖片標簽<img src="相對路徑/絕對路徑"/>

• 相對路徑：以當前頁面為出發(fā)點查找；
  • 返回上一級即（./或不寫）
  • 返回上上級即（../）
• 絕對路徑：都是以http開頭耕蝉，利用極簡圖床轉換崔梗；
• 圖片屬性：src,alt,title;

2.a鏈接

• 常用屬性
  • href:要跳往的地址；
    • 作用
      1. 可以填寫絕對路徑赔硫，跳到相應的網(wǎng)頁
      2. 可以寫#：1）不確定地址的時候 2）簡單的回到頂部效果
      3. 利用錨點進行頁面切換
  • title:鼠標劃上時的提示文本炒俱；
  • target：打開方式（_self,_blank,_parent,_top）;
  • 這些屬性中title與target都可以省略。
• a鏈接的錨點使用
  • 本頁面各個模塊之間的相互跳轉

  <div id="div1"></div>
  <a href="#div1" >..</a>
  

  • 實現(xiàn)不同頁面之間爪膊，不同模塊的相互跳轉：相對路徑+#ID; (即點擊跳轉到detail.html文件中id=detail1的錨鏈)

  <a href="detail.html#detail1"></a>
  

• class來設置樣式权悟，id來獲取元素

3.列表

• 無序列表

 <ul>
    <li>..</li>
    <li>..</li>
 </ul>

• 有序列表

```
 <ol>
    <li>..</li>
    <li>..</li>
 </ol>
```

• 定義列表dl,dt,dd都是容器
  • dt:中t為title:列表題目；
  • dd:中d為detail(詳述):列表詳述推盛；

<dl>
    <dt>表頭</dt>
    <dd>詳情介紹</dd>   
</dl>

4.表單

• 表單用<form action="提交的服務器" method="提交方法"></form>
• 輸入文本框<input type="text" placeholder="默認提示文本"/>
• 輸入密碼框<input type="password" placeholder="默認提示文本"/>
• 單選框：單選按鈕組峦阁，一定要加上name，否則無法實現(xiàn)單選效果耘成；

   <input type="radio" name="sex"/>男
   <input type="radio" name="sex"/>女

• 多選框：checkbox榔昔，name值可以不同，選中用checked

   <input type="checkbox" name="meihao" />美好
   <input type="checkbox" name="tiankong" />天空
   <input type="checkbox" name="shijie" />世界

• 下拉列表:select,option雙標簽

   <select>
       <option value="bj" name="beijing">北京</option>
       <option value="sh" name="shanghai">上海</option>
       <option value="tj" name="tianjin">天津</option>
   </select>

注：1）name和value主要用于前端向后臺提交數(shù)據(jù)瘪菌；
2）id:第一用來設置樣式（不建議撒会，多實用class）
第二用來在JS階段獲取元素
第三，配合a鏈接师妙，進行錨點錨鏈設置诵肛；

• 文本域textarea:cols,rows

   <textarea cols="10" rows="20" >在里面輸入內(nèi)容</textarea>

• 按鈕
  • 普通按鈕type="button"
  • 提交按鈕type="submit"
  • 重置按鈕type="reset"
• label-for:(for的值為id的屬性值)

  <label for="mass">請輸入姓名:<input type="text" placeholder="名字" id="mass"/></label>

5.選擇器

• 標簽選擇器：div p h1-h6 a span ol ul dl li dt dd input select textarea img
• 類選擇器
• ID選擇器

6.設置容器里面的距離用padding，設置容器外面的距離用margin默穴；

7.知識積累

• 在一段文字中使用line-height來控制怔檩，行與行之間的間距褪秀；

第二天總結及掌握

• 必須熟練使用相對路徑和絕對路徑；
• 錨點:同一頁面不同模塊間的跳轉薛训； 不同頁面不同模塊間的跳轉媒吗；
• 列表：無序列表 有序列表 定義列表；
• 表單：表單實例能夠默寫下來乙埃；
• 以上是必須掌握的闸英，接下來，是提高的膊爪；
• 小項目練習：能夠熟練掌握自阱。