HTML+CSS 知識點數匯總

整個前端開發的工作流程

1. 產品經理提出專案需求

2. #UI出設計稿

4. #UI出設計稿

5. #前端人員負責開發靜態頁面(跟前端同步的後台人員在準備資料)

6. #前後台的互動

##測試

產品上線(後製專案維護)
#網路原則
當使用者在瀏覽器輸入網址的時候，就會傳送到對應的伺服器，請求該網址對應的網頁資訊
伺服器會把該網址對應的網頁資源，都下載到你電腦的暫存文件夾

臨時資料夾中的資源，透過瀏覽器顯示出來(所以，我們第二次請求網站的時候，速度會快很多)
#元素
行內元素：一行中有n多個行內元素，行內元素無法設定寬與高
區塊元素：一個區塊元素，獨自佔一行；

#行內區塊元素：一行中可以有多個行內區塊元素，但是可以設定寬和高
html骨架結構
!DOCTYPE..文件宣告標頭(html5,html4.01,XHTML)

1. 在html4.01和XHTML中各有3個小規範

strict 嚴謹的
transitional 普通的

• frameset 框架

1. html：超文本標記語言；裡面用的都是"標籤對兒"

• head

• meta（charset:UTF-8,GB2312）

• #<meta name="description" content="要描述的內容"/>
  

• (以上兩個meta都是為了SEO優化)

• body

#標題

• ##段落p:雖然p是塊元素，但是他裡面放的也是圖片，文字；
  #########span:裡面用來放文字：圖片，文字；###########a連結###############圖片###

• 樣式的基本語法：
  選擇器(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="相對路徑/絕對路徑"/><br> </li> <li>## 相對路徑：以當前頁面為出發點查找的；(./ 或不寫,找到父級../)<p></p> </li> <li>#絕對路徑：都是以http開頭的；例如：<p></p> </li> <li>#圖片標籤上有兩個常用屬性，src屬性：引入圖片位址; alt標籤：圖片無法正常載入時，用來取代的文字；(alt也可以省略)<p></p> </li> <li>#a連結常用的屬性<p></p> </li> </ul> <ol class=" list-paddingleft-2"><li>href:'要跳往的位址',href的作用<p></p> </li></ol> <ul class=" list-paddingleft-2"> <li>#可以填入絕對路徑，跳到直到的網頁<p></p> </li> <li>可以寫#：1）不確定地址的時候2)簡單的回到頂部效果<p></p> </li> <li>利用錨點進行頁面切換<p></p> </li> </ul> <li>title:滑鼠以上時的提示<p></p> </li> <li>target:開啟方式(預設的_self目前頁面開啟; _blank新頁面開啟)<p></p> </li> <li>這些屬性中，title和target都可以省略；<p></p> </li> <ul class=" list-paddingleft-2"><li>a連結的錨點使用<p></p> </li></ul> <ol class=" list-paddingleft-2"> <li>本頁面各個模組之間的相互跳轉<p><br><div id="#div1"></div>   <a href="#div1"></a><code>2 實現不同頁面之間，不同模組的相互跳躍
  
  

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

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

有序列表

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

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

• <dl>
  <dt>表头</dt>
  <dd>详情介绍</dd>
  </dl>

表單
#表單用
輸入文字方塊
輸入密碼
單選按鈕：單選按鈕組，一定要加上name，否則無法實現單選效果；

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

多重選取框
下拉單

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

2. name和value主要用於前端向後台提交資料；

3. id：

• #設定樣式(不建議)

在JS階段，用來取得元素
id配合a鏈接，進行錨點設定；

• 留言框：

按鈕
普通按鈕type=button
#提交按鈕type=submit
重設按鈕type=reset
選擇器

1. #標籤選擇器：div h1~h6 p span a img ul li ol dl dt dd input select
   

2. 加入一個小icon的步驟：

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

####把以上圖片另存為，存到電腦中###### ######注意：把icon圖示放到資料夾的"根目錄";#############在html頁面加入：###############

以上是HTML+CSS 知識點數匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！