產品經理提出項目需求

UI出設計稿

前端人員負責開發靜態頁面(跟前端同步的后臺人員在準備數據)

前后臺的交互

測試

產品上線(后期項目維護)

當用戶在瀏覽器輸入網址的時候，就會發送到對應的服務器，請求該網址對應的網頁信息

服務器會把該網址對應的網頁資源，都下載到你電腦的臨時文件夾

臨時文件夾中的資源，通過瀏覽器顯示出來(所以，我們第二次請求網站的時候，速度會快很多)

行內元素：一行中有n多個行內元素，行內元素不能設置寬和高

塊元素：一個塊元素，獨自占一行；

行內塊元素：一行中可以有多個行內塊元素，但是可以設置寬和高

!DOCTYPE..文檔聲明頭(html5,html4.01,XHTML)

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

strict 嚴謹的

transitional 普通的

frameset 框架

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

head

meta（charset:UTF-8,GB2312）

meta name= description content= 要描述的內容 /

meta name= keywords content= 關鍵字，關鍵詞 /
(以上兩個meta都是為了SEO優化)

title 頁面的標題 /title

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;}

選擇器：

標簽選擇器：div,h,p,a,img,span

class選擇器:.xinxi
(千萬不要用漢字和數字開頭做為class名，一定要用英文)

html只考慮標簽嵌套，跟tab和空格無關，無數個空格，也只算作一個

圖片標簽 img src= 相對路徑/絕對路徑 /

相對路徑：以當前頁面為出發點查找的；(./ 或 不寫,找到父級../)

絕對路徑：都是以http開頭的；例如：

圖片標簽上有兩個常用屬性，src屬性：引入圖片地址; alt標簽：圖片無法正常加載時，用來替代的文字；(alt也可以省略)

a鏈接常用的屬性

href: 要跳往的地址 ,href的作用

可以填寫絕對路徑，跳到直到的網頁

可以寫#：1）不確定地址的時候 2)簡單的回到頂部效果

利用錨點進行頁面切換

title:鼠標以上時的提示

target:打開方式(默認的_self當前頁面打開; _blank新頁面打開)

這些屬性中，title和target都可以省略；

a鏈接的錨點使用

本頁面各個模塊之間的相互跳轉
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：

設置樣式(不建議)

在JS階段，用來獲取元素

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圖標放到文件夾的 根目錄 ；

在html頁面中加入： link rel= icon href= favicon2.ico type= image/x-icon ／

以上就是HTML+CSS 知識點匯總的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。