day46 前端基礎HTML5+CSS3

時間 2019-12-20

標籤 day46 day 前端基礎 html5+css3 html css 欄目 HTML5 简体版

原文原文鏈接

編輯器

pycharm,sublime,hbuild,webstorm,atom

前端概念

廣義:用戶能看見而且交互的顯示頁面 狹義:運行在瀏覽器上的頁面

學習的語言

html5 => (h5架構 + css3佈局 + javasript邏輯)
網頁編寫 | 移動應用編寫 | (客戶端編寫)

先後臺分離 開發方式 => 經過接口完成數據交互 => 後臺能夠千千萬,前端就是h5

HTML(超文本標記語言)

學習html的目的:完成頁面結構的構建(何時用什麼標籤)
html屬於標記語言:標記語言非編程語言,不具有編程語言具有的邏輯
html三大組成:

標籤：被尖括號包裹，由字母開頭包含合法字符的，能夠被瀏覽器解析的標記。eg:系統標籤，自定義標籤
指令：被尖括號包裹，由!開頭的標記。eg:<!doctype html> <!-- -->,只有兩個:文檔類型,或註釋,文檔類型必須放在最開始的位置 轉義字符：被&與;包裹的特殊字母組合或#開頭的十進制數。eg:&#60; &#62; &nbsp; pycharm快捷鍵cmd+/,h5的註釋語言<!----h5註釋:瀏覽器會把全部空白字符(空格,製表符,回車等都解析成一個空格)> 若是要實現換行, => br 標籤 讓中文,呵呵不亂碼 => 設置字符編碼集 => meta(charset屬性) -->

1.標籤的概念 什麼是標籤(what) 被<>包裹,由字母開頭能夠結合合法字符(-或數字),能被瀏覽器解析的特殊符號 why 標籤具備特定的功能:換行,設置頁面字符編碼集,控制文字字體顏色大小,加載圖片和視頻 注意:標籤都有頭有尾,用/加標籤嗎來標識標籤的結束(用來標識尾)

頁面

一個html有且只有一個頁面模板,多了瀏覽器會只解析成一個,若是沒寫的話,瀏覽器會自動加一個頁面模板
<!-- html的註釋:一個html頁面有且只有一個頁面模板--> <!-- html的註釋: 一個html頁面有且只有一個頁面模板 --> <html> <head> <!-- 字符編碼 --> <meta charset="utf-8"> <!-- 頁面標籤的標題 --> <title>頁面</title> <!-- 內部或外部的css樣式 | js腳本 | 頁面其餘設置 --> </head> <body> <!-- 全部頁面顯示的內容: 文本 | 圖片 | 視頻 | 超連接 | 表格 | 表單 ... --> <!-- js腳本 --> </body> </html>

經常使用標籤

輸入標籤嗎,按tab,會自動建立<>和</>,這是一個插件實現的,emmet,
.body.name+.body.name以後按tab自動生成層級標籤 學習的目的:使用標籤的語義與功能,完成頁面架構的搭建(用div來完成) 1.div:'三無',無語義,無功能,無樣式,完成頁面的架構 2.h1:頁面總標題,表明頁面的'總體含義',出現一次便可 3.列表:ul>li*5 (無序列表) 4.p:段落標籤 5.img:圖片標籤,src(數據源),alt(資源加載失敗的文本提示) 6.a標籤:超連接標籤,href(超連接點擊後跳轉的地址),target(轉跳方式_self在當前頁面跳轉,_blank打開新頁面跳轉) 7.經常使用的文本類標籤:spam,i,b

CSS:樣式層級表

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

選擇器

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

CSS三種引入方式

# 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操做的樣式都是行間式