任務四
課程筆記及作業
一、編輯器
1、下載chorme和sublime
2、sublime的使用
sublime的命令視窗ctrl+shift+p ,輸入install可以安裝外掛
二、網頁是什麼
網頁由html+css+js組成
html是水泥,磚頭;css是裝修;js是功能,電梯,水電之類
三、網頁構成簡介
1.文件宣告,告訴瀏覽器遵守哪個規範。<!DOCTYPE html>
嚴格模式和混雜模式:不加即混雜模式;加上即嚴格模式
ps:嚴格模式是瀏覽器根據規範去顯示頁面;混雜模式是以一種向後相容的方式去顯示
2.標籤中包含meta標籤
頁面上只有英文可以不寫,如果有除英文外的其他語言,比如中文,是需要按照UTF-8編碼標準進行解析。需要儲存那種編碼方式,寫在meta裡即可,一般寫為<meta charset="UTF-8"/>
中文編碼方式gbk
utf國際標準
不設定會出現亂碼,因為瀏覽器一般預設的解碼方式是國際標準
<meta http-equiv="" content="">告訴瀏覽器以最新的核心渲染頁面,比如content是ie則用最新版本
<title>標題</title>是在網址欄上方顯示的
四、顏色的寫法
1、css中常見顏色可用英文字母表示: color:red
2、顏色也可用十六進位制(十六進位制:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f分別表示0-15,即f代表15)表示為#ffffff(前兩個字母表示紅色,是乘積關係,比如ff是255)
3、顏色表示也可用rgb(255,255,255)
rgba(255,0,0,0)a表示透明度,1是完全不透明,0是完成透明
五、常見的瀏覽器有哪些 什麼核心
1、IE瀏覽器和QQ瀏覽器 核心是IE
2、chorme瀏覽器 核心是Webkit
3、火狐瀏覽器 核心是Gecko
4、Safair瀏覽器 核心是 Webkit
5、opera瀏覽器 核心是Presto
第二部分 作業
一、網頁亂碼的問題是如何產生的?,以及如何解決
亂碼產生的原因就是編輯器儲存檔案所使用的編碼方式與瀏覽器的解碼方式不相同,不是同一個標準,如果不設定,則瀏覽器自動匹配。而utf被稱為萬國碼,支援大多數國家的文字編譯,為使內容正常顯示,一般在head設定<meta charset="UTF-8"/>,就可正常顯示。
如果網頁在瀏覽器開啟的時候出現亂碼。在網頁的html檔案中宣告<meta charset="">,並且保證正確,在瀏覽器中找到轉換編碼的選單調整為網頁宣告的編碼方式一致
二 、顏色有幾種寫法, 紅色、 綠色、藍色、白色、黑色如何表示? 透明黑色如何表示?#ccc的顏色,#eee的顏色?#333的顏色?
顏色的表示方法有三種:
1、css中常見顏色可用英文字母表示。紅色 color:red ;綠色 color:green;藍色color:blue;白色color:white;黑色color:black。
2、顏色也可用十六進位制(十六進位制:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f分別表示0-15,即f代表15)表示為#ffffff(前兩個字母表示紅色,是乘積關係,比如ff是255)
紅色 color:#ff0000 ;綠色 color:#00ff00;藍色color:#0000ff;白色color:#ffffff;黑色color:#000000。
3、顏色表示也可用rgb(255,255,255,1)紅色 color:rgba(255,0,0,1) ;綠色 color:rgba(0,255,0,1);藍色color:rgba(0,0,255,1);白色color:rgba(255,255,255,1);黑色color:rgba(0,0,0,1)。
rgba(255,0,0,0)a表示透明度,1是完全不透明,0是完成透明
透明黑色color:rgba(0,0,0,0)
#ccc,#eee,#333是十六進位制的表示一種簡寫,分別等同於#cccccc,#eeeeee,#333333.十六進位制兩個是一個值,只要值一樣,所表示的就是灰色,白色和黑色之間的顏色嗎,根據取值越大,越接近白色,上述顏色中都是灰色,只是#333,#ccc,#eee顏色依次變淺。
三、<!DOCTYPE html>的作用是什麼
文件宣告,告訴瀏覽器遵守哪個規範
四、嚴格模式和混雜模式指什麼
嚴格模式和混雜模式:不加文件宣告,即為混雜模式;加上即嚴格模式
嚴格模式是瀏覽器根據規範去顯示頁面;混雜模式是以一種向後相容的方式去顯示
五、meta有什麼作用,常見的值有哪些
1、避免出現亂碼。需要儲存那種編碼方式,寫在meta裡即可,一般寫為<meta charset="UTF-8"/>
2、告訴瀏覽器以最新的核心渲染頁面,比如<meat http-equiv="" content="">content是ie則用最新版本
3、為搜尋引擎提供關鍵字和內容,增加搜尋引擎檢索到的概率<meta keywords="" content=""><meta description="" content=">
六、常見的瀏覽器有哪些,什麼核心
1、IE瀏覽器和QQ瀏覽器 核心是IE
2、chorme瀏覽器 核心是Webkit
3、火狐瀏覽器 核心是Gecko
4、Safair瀏覽器 核心是 Webkit
5、opera瀏覽器 核心是Presto
七 、HTML、XML、XHTML有什麼區別
HTML(HyperText Markup Language)超文字標記語言,是一種語法較為鬆散,不嚴格的語言;
XML(Extensible Markup Language)可擴充套件標記語言,是一種類似HTML的語言,XML是用來描述資料的,主要用於儲存和傳輸資料,而非顯示資料
XHTML(Extensible HyperText Markup Language)可擴充套件超文字標記語言,基於XML,語法類似於HTML,更嚴謹
八、怎麼理解HTML語義化
HTML語義化是編寫HTML的一種方式,選擇合適的標籤(程式碼語義化),使用合理的程式碼結構(內容語義化),使閱讀者更易閱讀程式碼,使爬蟲和瀏覽器更好的解析
語義化的好處:
- 假如在沒有CSS的情況下,頁面依然能呈現出很好地內容結構、程式碼結構
- 增加使用者體驗,如在使用img標籤時使用alt標籤,一般瀏覽器正常顯示時,根本顯示不出來alt的內容,但是當瀏覽器出現問題不能正常顯示圖片時,會出現alt的內容
- 有利於搜尋引擎優化:使爬蟲和瀏覽器更好的解析
- 方便其他裝置解析(如螢幕閱讀器、盲人閱讀器、移動裝置)來渲染網頁;
九、怎麼樣理解內容和樣式分離
內容和樣式分離就是讓內容歸HTML,樣式歸CSS,不能混著用。
寫 HTML 的時候先不管樣式, 重點放在HTML的結構和語義化上,讓 HTML 能體現頁面結構或者內容。之後再去寫樣式。
寫 JS 的時候,儘量不要用 JS 去直接操作樣式,而是通過給元素新增刪除class來控制樣式變化
這樣程式碼會簡潔,後期的維護會變得相對簡單,如只寫一個clss就可以改變所有應用這個class的元素都改變
十、常見的標籤
- 頁面結構標籤 head body
-標題標籤 h1 h2 h3 h4 h5 h6
- 表格元素 table td tr th
- 表單元素 form input
- 列表元素 ul ol dl li
- 其他 a img p span strong em
)
相關文章
- 前端學習任務四前端
- 實驗任務四:登入介面、實驗任務五:猜數字
- Datawhale-MySQL-任務四(表聯結)MySql
- 第四項任務——測試計劃
- 任務佇列,巨集任務與微任務佇列
- swoole學習手記(四)非同步任務task非同步
- 巨集任務和微任務
- linux基礎(四)——任務排程cron和anacronLinux
- JavaScript巨集任務和微任務JavaScript
- 任務
- Event Loop、 巨集任務和微任務OOP
- JavaScript的巨集任務與微任務JavaScript
- 技術管理之路四、任務管理:如何跟蹤執行?
- 四大元件之 Activity_任務和返回棧元件
- SpringBoot與非同步任務、定時任務、郵件任務Spring Boot非同步
- 微任務、巨集任務與Event-LoopOOP
- js中的巨集任務和微任務JS
- 任務系統之Jenkins子任務Jenkins
- macrotask 巨集任務 + microtask 微任務區別Mac
- 任務池
- 任務05
- crontab任務
- 近日任務
- 任務。1
- 任務1
- 任務4
- 任務一
- Activiti 學習筆記四:流程例項、任務的執行筆記
- UI 阻塞行為:微任務與宏任務UI
- 資料探勘實踐(金融風控)-第四次任務
- laravel框架任務排程(定時執行任務)Laravel框架
- 微任務和巨集任務哪個先執行
- 同步任務與非同步任務執行順序非同步
- 專案任務與運維任務的衝突運維
- 基於Hyperf開發的任務排程系統.支援任務投遞,DAG任務編排(多個任務使用同一個事務).
- go 任務池Go
- 任務規則
- 後臺任務