HTML/CSS 知識點

来源:https://www.cnblogs.com/shenxianhui/archive/2018/02/26/8476383.html
-Advertisement-
Play Games

整個前端開發的工作流程 1. 產品經理提出項目需求 2. UI出設計稿 3. 前端人員負責開發靜態頁面(跟前端同步的後臺人員在準備數據) 4. 前後臺的交互 5. 測試 6. 產品上線(後期項目維護) 互聯網原理 1. 當用戶在瀏覽器輸入網址的時候，就會發送到對應的伺服器，請求該網址對應的網頁信息 ...


整個前端開發的工作流程

  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和空格無關，無數個空格，也只算作一個
  • 圖片標簽[圖片上傳失敗...(image-fd7aaf-1518537900016)]
  • 相對路徑：以當前頁面為出發點查找的；(./ 或 不寫,找到父級../)
  • 絕對路徑：都是以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"／>

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

  • html：超文本標記語言
    • 通過語義化標簽，搭建頁面"結構"
  • css:層疊樣式表
    • 負責頁面"樣式"，美化頁面的
  • js:輕量級的腳本語言；交互指的是兩個地方（行為）
    • 前端自己在頁面上寫的"動效"
    • 前後臺的"數據交互"
      結構，樣式，和行為三者相結合

css的引入方式

  1. 嵌入式；(內嵌式)

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

  2. 行內樣式

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

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

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

區分偽類和偽元素

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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android 音視頻深入 十四 FFmpeg與OpenSL ES 播放mp3音樂，能暫停（附源碼下載）
    項目地址https://github.com/979451341/FFmpegOpenslES 這次說的是FFmpeg解碼mp3，數據給OpenSL ES播放，並且能夠暫停。 1.創建引擎 2.創建混音器 3.FFmpeg解碼mp3準備工作 4.緩存隊列設置 最後還要給這個緩存回調函數賦予參數，這個 ...
  • html讓圖片居中顯示
    <div align=center><img............></div> ...
  • CSS佈局(一) 盒子模型
    一、盒子模型 標準盒子模型 從下圖可以看到標準 w3c 盒子模型的範圍包括 content、padding、border、margin，並且 content 部分不包含其他部分。 怪異盒子模型 從下圖可以看到 ie 盒子模型的範圍也包括 margin、border、padding、content，和 ...
  • vscode常用設置
    前面的話 本文是vscode使用中遇到問題的解決辦法總結 CPU100% 有時，vscode會出現CPU利用率100%的情況，兩個rg.exe占用了全部的CPU。解決辦法如下 文件>首選項>設置, 搜索設置 "search.followSymlinks" ：false； emmet 若想在jsx中使 ...
  • ajax跨域問題解決思路
    ajax跨域問題的解決思路主要分為3種： 1.瀏覽器限制解決思路：不讓瀏覽器做出限制解決方法：通過指定參數，讓瀏覽器不做跨域校驗評價：價值不大，需要每個人都做改動，而且改動是客戶端的改動 2.XHR請求解決思路：不使用XHR解決方法：JSONP缺點：無法滿足現有的開發要求 3.跨域（重要）解決思路： ...
  • CSS預處理器之Less詳解
    本文最初發表於 "博客園" ，併在 "GitHub" 上持續更新 前端的系列文章 。歡迎在GitHub上關註我，一起入門和進階前端。 以下是正文。 CSS 預處理器 為什麼要有 CSS 預處理器 CSS基本上是設計師的工具，不是程式員的工具 。在程式員的眼裡，CSS是很頭痛的事情，它並不像其它程式語 ...
  • 深入理解ES6箭頭函數中的this
    簡要介紹：箭頭函數中的this，指向與一般function定義的函數不同，箭頭函數this的定義：箭頭函數中的this是在定義函數的時候綁定，而不是在執行函數的時候綁定。 （1）一般函數this指向在執行是綁定 當運行obj.say()時候，this指向的是obj這個對象。 （2）所謂的定義時候綁定 ...
  • JavaScript 知識點
    JS基礎 頁面由三部分組成： + html：超文本標記語言，負責頁面結構 + css：層疊樣式表，負責頁面樣式 + js：輕量級的腳本語言，負責頁面的動效和數據交互 小總結：結構，樣式和行為，三者相分離 + 在html頁面中寫結構 + 通過 link標簽的href屬性，引入css樣式 + 通過scr ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類