HTML/CSS知識點

整個前端開發的工作流程

產品經理提出專案需求
UI出設計稿
前端人員負責開發靜態頁面(跟前端同步的後臺人員在準備資料)
前後臺的互動
測試
產品上線(後期專案維護)

網際網路原理

當使用者在瀏覽器輸入網址的時候，就會傳送到對應的伺服器，請求該網址對應的網頁資訊
伺服器會把該網址對應的網頁資源，都下載到你電腦的臨時資料夾
臨時資料夾中的資源，通過瀏覽器顯示出來(所以，我們第二次請求網站的時候，速度會快很多)

元素

行內元素：一行中有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>
1. body
- 標題<h1></h1><h2></h2>
- 段落 p:雖然p是塊元素，但是他裡面放的也是圖片，文字；
- span:裡面用來放文字：圖片，文字；
- a連結<a href="要跳往的地址"></a>
- 圖片<img src="相對地址/絕對地址"
css：寫在 <style></style> 裡面
- 樣式的基本語法：
  選擇器(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和空格無關，無數個空格，也只算作一個
圖片標籤[圖片上傳失敗...(image-fd7aaf-1518537900016)]
- 相對路徑：以當前頁面為出發點查詢的；(./ 或不寫,找到父級../)
- 絕對路徑：都是以http開頭的；例如：http://i1.piimg.com/567571/f3f79e8903424ea4.jpg
- 圖片標籤上有兩個常用屬性，src屬性：引入圖片地址; alt標籤：圖片無法正常載入時，用來替代的文字；(alt也可以省略)
a連結常用的屬性
1. href:`要跳往的地址`,href的作用
- 可以填寫絕對路徑，跳到直到的網頁
- 可以寫#：1）不確定地址的時候 2)簡單的回到頂部效果
- 利用錨點進行頁面切換
1. title:滑鼠移上時的提示
2. target:開啟方式(預設的_self當前頁面開啟; _blank新頁面開啟)
3. 這些屬性中，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>

表單

表單用<from action=”提交到哪裡”></from>
輸入文字框 <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"／>

一個完整的頁面由三部分構成：

html：超文字標記語言
- 通過語義化標籤，搭建頁面”結構”
css:層疊樣式表
- 負責頁面”樣式”，美化頁面的
js:輕量級的指令碼語言；互動指的是兩個地方（行為）
- 前端自己在頁面上寫的”動效”
- 前後臺的”資料互動”
  結構，樣式，和行為三者相結合

css的引入方式

嵌入式；(內嵌式)

<style>
        body{
            height:100%;
            background-color: red;
        }
</style>

行內樣式

<body style="height:100%; background: #333333">

外鏈式（真正的開發，用的都是外鏈）

<link rel="stylesheet" href="style.css"/>

css的優先順序

行內>內嵌>外鏈

css常見屬性和樣式

當設定錯誤的時候，在chrome的控制檯，會有黃色的歎號，進行提示
color：顏色值；顏色有三種表示方法
快捷鍵：c+tab
- 用英文：red
- rgb(255,0,0)
- #fff
font-size:字型大小
- 快捷鍵：fsz30->font-size:30px
  font:400 14px/28px "宋體";
background:新增背景
圖片預設是橫向重複和縱向重複
- 位置：
  - 橫向位置：left center right
  - 縱向位置：top center bottom
- 綜合寫法：background: url("images/bg2.png") no-repeat left center red;
  - background-image:url(“圖片地址”)
  - background-repeat:no-repeat; /repeat-x;/repeat-y
  - background-position:0 0
  - background-color:red
字型是否傾斜
- font-style:italic 傾斜／ normal 正常
下劃線和刪除線
- text-decoration: line-through; 刪除線
- text-decoration: none; 去除下劃線
- text-decoration: underline;新增下劃線

css中的選擇器：

1.標籤選擇器：div p ul li dt dd em i u del strong b input label from table
- 缺點：只能進行共性的操作，無法個性操作
2.class選擇器
3.id：
- .class名,同一個頁面能有無數個相同的class名
- #id名，同一個頁面只能有一個ID名；（ID名是不能重複的）
- 在真正的開發過程中，class是用來設定樣式的，id是用來獲取元素

<div class="div1 div2 div3" id="div1"></div>

4.後代選擇器：div p(把div容器下，子子孫孫的p元素都選擇上了)
5.子選擇器：div > p(選擇div容器下的兒子)；相容IE7+
6.交集選擇器: div.div1
7.並集選擇器：div,p
8.萬用字元*：代表所有的元素
9.序選擇器：相容IE8+
- div > p:first-child
- div > p:last-child
10.下一個兄弟選擇器 ul li+li{} 相容IE7+

開發常用的瀏覽器

chrome
IE7~11
firefox

CSS的繼承性和層疊性

以font開頭的屬性都能夠繼承；line-height
color可以繼承
text開頭的也可以繼承，比如text-align

css權重

!important權重無窮大；（少用為好）
id的權重大於class的權重

css盒子模型

css盒子模型由5部分：
- 內容的寬高+padding+border+margin
單行文字的居中：height = line-height
多行文字的居中，padding和line-height
padding：
- padding是內邊距
- padding的顏色和內容的顏色一致；background-color填充的是border以內的顏色
- padding是複合值
  padding:30px; ->pl30; pt30;pr30;pb30
  padding:20px 30px; ->上下為20px 左右30px
  padding:10px 20px 30px; -> 上10px 左右20px 下30px
  padding:10px 20px 30px 10px; 上右下左
  
  如果現設定padding:30px
  再設定padding-left:10px
  請問最後的值各是多少？
  左10px; 其他都是30px
margin：外邊框
border:
- border:1px solid #000;
- border-width
- border-style：solid（實體）,dashed（虛線）,dotted（點）
- border-color

行內元素和塊級元素

p標籤雖然是文字標籤，但是它可以當容器來使用，p標籤內一定不能放div; p段落也是塊元素，他獨佔一行
文字元素：p span a i em u b strong img
容器級：div li dt dd h級（不建議）
除了p，所有的文字元素，都是行內元素
所有容器級別的元素，都是塊元素
塊和行內元素的相互轉化
- display：inline; //行內
- display:inline-block;//行內塊
- display：block; //塊
關於定位：大部分情況，建議的是:父相子絕（父親：相對定位，兒子：絕對定位）
關於脫離文件流的方法
- 浮動 float:left; float:right;
- 絕對定位 position:absolute;
- 固定定位 position:fixed;
- 重點：1）父相子絕 2）行內元素一點脫離文件流，就可以設定寬高了；
- 注意：行內元素，一旦脫離文件流，雖然能設定寬高，但是，如果不設定寬的話，會預設跟內容一樣寬；而塊級元素，如果不設定寬度的話，預設跟父級一樣塊，沒有父級的話，預設跟螢幕一樣寬
清除浮動
- 固定高度height:xxxpx;
  缺點：如果作為產品列表的容器展示，我們無法知道容器的具體高度
- overflow:hidden
  1. 溢位隱藏
  2. 清除浮動
    缺點：如果父容器比較小，子容器比較大；父容器如果通過overflow:hidden來清除浮動的話，子容器就看不到了
- clear:both
  缺點：可以解決浮動引起的文件流錯亂問題，但是上面浮動元素的父容器該沒有高度還沒有高度
- 偽類清除浮動
```
ul::after{
    display: block;
    height:0;
    content: ``;
    clear: both;
}
```
透明度處理
- rgba() 背景透明，文字不透明；
- opacity:0 背景透明，文字也透明；
```
opacity:0.1;/*不相容IE7瀏覽器*/
filter:alpha(opacity=10);
```

最基本的開發，首先必須建立的專案結構

images資料夾：放切好的圖片
css資料夾：放置css檔案：index.css
index.html檔案

關於繼承

寬度繼承：如果沒有父級，塊元素的寬度預設跟可視區一樣寬；如果有父級的情況下，預設跟父級寬度一樣寬(寬度可以繼承，但高度無法繼承;)
font可以繼承
color可以繼承：當遇到a標籤的時候， color無效；
line-height可以繼承

當文字超度固定寬度的處理方法：

單行文字出超固定寬度出現省略號的寫法：

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis

英文不折行的問題處理： word-wrap:break-word;
出現滾動條的寫法overflow-y:scroll;

區分偽類和偽元素

偽元素：用:和::都可以，現在建議用::
偽類：給當前選擇器新增動效，只能用:

HTML/CSS知識點

整個前端開發的工作流程

網際網路原理

元素

html骨架結構

html更多解讀

列表

表單

按鈕

選擇器

新增一個小icon的步驟：

一個完整的頁面由三部分構成：

css的引入方式

css的優先順序

css常見屬性和樣式

css中的選擇器：

開發常用的瀏覽器

CSS的繼承性和層疊性

css權重

css盒子模型

行內元素和塊級元素

最基本的開發，首先必須建立的專案結構

關於繼承

當文字超度固定寬度的處理方法：

區分偽類和偽元素

相關文章