HTML和CSS

時間 2019-11-17

標籤 html css 欄目 HTML 简体版

原文原文鏈接

前端概念：
　　廣義：用戶能看見而且交互的展現界面
　　狹義：運行在瀏覽器上的頁面css

學習的語言：
　　HTML5 =>（h5架構 + CSS佈局 + JavaScript邏輯）
　　網頁編寫 | 移動端編寫 | （客戶端編寫）
　　先後臺分離開發方式 =>經過接口完成數據交互 => 後臺能夠千千萬，前端就是h5html

一：HTML：超文本標記語言前端

學習HTML的目的：完成頁面結構的搭建（何時用什麼標籤）
HTML屬於標記語言：標記語言爲非編程語言，不具有編程語言具有的程序邏輯

HTML三大組成：
標籤：被尖括號包裹，由字母開頭包含合法字符的，能夠被瀏覽器解析的標記
    eg：系統標籤，自定義標籤
指令：被尖括號包裹，由！開頭的標記。
    eg:<!doctype html> <!-- -->
轉義字符：被&與;包裹的特殊字母組合或#開頭的的十進制數。
    eg:&#60; &#62; &nbsp;

　　1.1標籤編程

標籤的概念：被<>包裹由字母開頭，能夠結合合法字符（-|數字），能被瀏覽器解析的特殊符號
標籤具備特定的功能：換行 | 設置頁面字符編碼集 | 控制文本字體顏色與大小 | 加載圖片與視頻
注意：標籤都有頭有尾，用/來標識標籤的結束（用來標識尾）

　　1.2頁面瀏覽器

<!-- html的註釋: 一個html頁面有且只有一個頁面模板 -->
<html>
    <head>
        <!-- 字符編碼 -->
        <meta charset="utf-8">
        <!-- 頁面標籤的標題 -->
        <title>頁面</title>
        <!-- 內部或外部的css樣式 | js腳本 | 頁面其餘設置 -->
    </head>
    <body>
        <!-- 全部頁面顯示的內容: 文本 | 圖片 | 視頻 | 超連接 | 表格 | 表單 ... -->
        <!-- js腳本 -->
    </body>
</html>

　　1.3經常使用標籤架構

目的：使用標籤的語義與功能 | 完成頁面架構的搭建（div）
1.div：「三無」，無語義，無功能，無樣式，完成頁面架構的搭建
2.h1：頁面總標題，表明頁面「總體含義」，出現一次便可
3.列表：ul>li*5
4.p:段落標籤
5.img：圖片標籤，src（數據源），alt（資源加載失敗的文本提示）
6.a：超連接標籤，href（超連接地址），target（跳轉方式_self | _blank:_self是在本頁面跳轉，_blank是跳轉打開新頁面），錨點
7.經常使用的文本類標籤：span ,i (斜體), b （加粗）

二：CSS層級樣式表編程語言

學習CSS的目的：完成頁面佈局（還原設計稿）
三大組成部分：
    選擇器：由標籤、類、ID 單獨或組合出現
    做用域：一組大括號包含的區域
    樣式塊：知足CSS鏈接語法的衆多樣式

　　2.1選擇器佈局

  用來將CSS與HTML創建關聯的橋樑，稱之爲CSS選擇器
  將原來出如今標籤內部的樣式分離開來，能夠用一個個選擇器加以管理，達到頁面與樣式的解耦合目的，從而提升代碼的複用性與開發效率
  本質：就是頁面標籤的各類名字

　　2.2CSS三種引入方式學習

1.行間式
    i)寫在標籤的style屬性中
    ii)屬性與屬性值間用：賦值
    iii)屬性與屬性之間用;隔開
2.內聯式
    i)寫在style標籤中（style標籤通常出如今head標籤中）
    ii)用選擇器與HTML創建鏈接
    iii)樣式塊書寫在做用域內
3.外聯式
    i)CSS樣式徹底與HTML文件脫稿，造成單獨的.css文件，樣式書寫在.css文件中
    ii)用選擇器與HTML創建鏈接
    iii)樣式塊書寫在做用域內
    iv)要將.css文件與.html文件創建關聯 => <link rel="stylesheet" href="css文件的相對路徑">

注：選擇器的應用場景在內聯式與外聯式

總結：
開發：最經常使用的是外聯式，內聯與行間輔助樣式佈局
測試：內聯式，可讀性最強，且解耦有複用性
行間的應用場景：最簡單粗暴，js操做的樣式都是行間式

1. Day6:html和css
2. Day2:html和css
3. html和css
4. Day3:html和css
5. 1、HTML和CSS
6. HTML和xhtml，CSS
7. HTML和CSS
8. Day7:html和css
9. Day5:html和css
10. [HTML & CSS] HTML和CSS基礎知識
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• IntelliJ IDEA 代碼格式化配置和快捷鍵
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

html+css+javascript+html

html+css+mysql+php

html&&css&&javascript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。