HTML/CSS知識點

小賢筆記發表於2017-06-23
HTMLCSS

整個前端開發的工作流程

  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>
    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的引入方式

  1. 嵌入式；(內嵌式)
<style>
        body{
            height:100%;
            background-color: red;
        }
</style>
  1. 行內樣式
<body style="height:100%; background: #333333">
  1. 外鏈式（真正的開發，用的都是外鏈）
<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;

區分偽類和偽元素

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


相關文章