HTML/CSS 知識點01

整個前端開發的工作流程

1. 產品經理提出項目需求
2. UI出設計稿
3. 前端人員負責開發靜態頁面(跟前端同步的後臺人員在準備數據)
4. 前後臺的交互
5. 測試
6. 產品上線(後期項目維護)

互聯網原理

1. 當用戶在瀏覽器輸入網址的時候，就會發送到對應的伺服器，請求該網址對應的網頁信息
2. 伺服器會把該網址對應的網頁資源，都下載到你電腦的臨時文件夾
3. 臨時文件夾中的資源，通過瀏覽器顯示出來(所以，我們第二次請求網站的時候，速度會快很多)

元素

• 行內元素：一行中有n多個行內元素，行內元素不能設置寬和高
• 塊元素：一個塊元素，獨自占一行；
• 行內塊元素：一行中可以有多個行內塊元素，但是可以設置寬和高

html骨架結構

• !DOCTYPE..文檔聲明頭(html5,html4.01,XHTML)
• 在html4.01和XHTML中各有3個小規範

1. strict 嚴謹的
2. transitional 普通的
3. frameset 框架

• html：超文本標記語言；裡面用的都是"標簽對兒"

1. head
   • meta（charset:UTF-8,GB2312）
   • <meta name="description" content="要描述的內容"/>
   • <meta name="keywords" content="關鍵字，關鍵詞"/>
     (以上兩個meta都是為了SEO優化)
   • <title>頁面的標題</title>
2. body
   • 標題<h1></h1><h2></h2>
   • 段落 p:雖然p是塊元素，但是他裡面放的也是圖片，文字；
   • span:裡面用來放文本：圖片，文字；
   • a鏈接<a href="要跳往的地址">
   • 圖片<img src="相對地址/絕對地址"

• css：寫在 裡面

  • 樣式的基本語法：
    選擇器(div){
    key:value
    }

    p{
    height:40px;
    line-height:40px;
    background-color:red;
    }

  • 選擇器：
  1. 標簽選擇器：div,h,p,a,img,span
  2. class選擇器:.xinxi
     (千萬不要用漢字和數字開頭做為class名，一定要用英文)

html更多解讀

• html只考慮標簽嵌套，跟tab和空格無關，無數個空格，也只算作一個
  
• 圖片標簽<img src="相對路徑/絕對路徑"/>
  
• 相對路徑：以當前頁面為出發點查找的；(./ 或 不寫,找到父級../)
• 絕對路徑：都是以http開頭的；例如：http://i1.piimg.com/567571/f3f79e8903424ea4.jpg
• 圖片標簽上有兩個常用屬性，src屬性：引入圖片地址; alt標簽：圖片無法正常載入時，用來替代的文字；(alt也可以省略)
• a鏈接常用的屬性

1. href:'要跳往的地址',href的作用
   • 可以填寫絕對路徑，跳到直到的網頁
   • 可以寫#：1）不確定地址的時候 2)簡單的回到頂部效果
   • 利用錨點進行頁面切換
2. title:滑鼠以上時的提示
3. target:打開方式(預設的_self當前頁面打開; _blank新頁面打開)
4. 這些屬性中，title和target都可以省略；

• a鏈接的錨點使用

1. 本頁面各個模塊之間的相互跳轉
   <div id="#div1"></div> <a href="#div1"></a>
   2 實現不同頁面之間，不同模塊的相互跳轉
   <a href="detail.html#detail1"></a>

列表

• 無序列表:無序列表中的li也是容器；

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

• 有序列表

  <ol>
  <li></li>
  <li></li>
  </ol>

• 定義列表：dl,dt,dd都是容器

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

表單

• 表單用
• 輸入文本框 <input type="text" placeholder="預設提示"/>
• 輸入密碼 <input type="password" placeholder="預設提示"/>

• 單選按鈕：單選按鈕組，一定要加上name，否則無法實現單選效果；

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

• 多選框 <input type="checkbox" checked/>

• 下拉單

  <select>
  <option name="city" value="bj">北京</option>
  <option name="city" value="sh">上海</option>
  <option name="city" value="sz">深圳</option>
  <select>

• name和value主要用於前端向後臺提交數據；
• id：

1. 設置樣式(不建議)
2. 在JS階段，用來獲取元素
3. id配合a鏈接，進行錨點設置；

• 留言框：<textarea name="" value="" cols="" rows=""></textarea>

按鈕

• 普通按鈕 type=button
• 提交按鈕 type=submit
• 重置按鈕 type=reset

選擇器

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

添加一個小icon的步驟：

• 到官網上去取圖片（以京東為例）：

1. https://www.jd.com/favicon.ico
2. 把以上圖片另存為，存到電腦中
3. 註意：把icon圖標放到文件夾的"根目錄"；
4. 在html頁面中加入：<link rel="icon" href="favicon2.ico" type="image/x-icon"／>