html-css-js基本理解和簡單總結
目錄css
1、對於網頁的基本理解
一、網頁是一種數據展現和信息交互的載體
生活中，咱們經過各類各樣的方式獲取信息，網頁是目前被使用最頻繁的一種。
早年網頁的目的更多在於數據的展現，如今的網頁爲了提供更好的用戶體驗，在保持原有目的的基礎上，愈來愈關注：html
- 界面的美觀度
- 交互性的提高
- 性能的優化和傳輸效率的提高
二、網頁組成部分
- 網頁結構，關注網頁'長什麼樣'
結構提供了網頁骨架、佈局 - 網頁數據，關注網頁'提供了什麼內容'
數據是網頁承載的主要內容，完成了網頁的數據展現功能 - 網頁樣式，關注網頁'好很差看'
樣式是網頁的外觀，提供對用戶最直觀的感覺
樣式審美和總體風格也表明着隱式的數據表達 - 網頁動做，關注網頁'交互性'
動做提供了交互，良好的交互能夠提高用戶的體驗
動做優化了性能，良好的數據傳輸設計(如ajax)能夠增長傳輸效率
三、支撐一個網頁的技術模塊
- 結構:html
- 數據:web框架(數據處理)+數據庫(數據存儲)
- 樣式:css
- 動做:js
2、html的理解和技術筆記
一、html理解
就像造房子同樣，一棟房子有多個組成部分，html相似於房子的戶型，它設計了房子的總體架構、分區、佈局，並且還定義了每一個區塊的功能做用。html技術爲後續入住的數據事先搭建好了對應的空間。python
二、html技術筆記-html標籤
html 表明包含一個網頁文檔，是一個網頁的根元素(某些瀏覽器將body做爲根元素)
head 表明文檔的頭部，包含控制信息
meta 表明控制信息，經過標籤中的屬性來提供頁面控制，如:charset='UTF-8'控制編碼格式
title 表明網頁標題
link 外部文件連接，主要是css連接
body 表明文檔的主體，包含數據、主體骨架、佈局、樣式、行爲事件和回調函數等
script 表明一個js代碼的引用,包含內聯的js代碼或一個js文件地址
a 表明一個連接，包含一個去往某連接的文字說明
h1-6 表明文章主題，h1的字體最大
p 表明一個段落，包含段落中的內容
img 表明一個圖像，包含一個展現圖像
i 表明一個圖標，包含一個圖標
div 表明一個盒子模型，通常用於佈局
span 表明一個行內文本，通常用於須要特別處理的行內文本標記
hr/br 表明水平分隔符/換行符
button 表明一個按鈕，button在form中會默認type=submit
form 表明一個表單，能夠內含不少表單組件，通常用於用戶數據提交
input 表明一個表單組件，經過type來切換不一樣功能，通常用於數據的輸入
text 表明一個文本輸入框，通常用於輸入小段文本
email 表明一個email輸入框,會對輸入的郵件格式作格式判斷
password 表明一個密碼輸入框，輸入的密碼會被轉換成一個黑點或者星號
radio 表明一個單選框，多個相同name的單選框組成一個組，選項互斥
checkbox 表明一個複選框，多個項目name的複選框組成一個組
textarea 表明一個文本輸入域，通常用於輸入大段文本
select 表明一個下拉框，包含多個下拉選項
option 表明一個下拉選項
label 表明一個標記，通常用於指向對應的輸入框用於實現點擊label時輸入框產生焦點
file 表明一個文件上傳框
submit 表明提交表單，一旦點擊，所屬表單的全部組件值會被統一提交
table 表明一個表格，包含不少表格元素
thead 表明表格頭部，通常是一行
tr 表明一行
th 表明表格數據的名稱，即屬性名，如：名字、年齡、學校、工資等
tbody 表明表格數據主體
tr 同上
td 表明數據單元格，包含一個單元格的數據
ul/ol 表明一個無序/有序列表，包含列表項目
li 表明一個列表項目
3、css的理解和技術筆記
一、css理解
css相似於房子的裝修，裝修讓這棟房子看上去更加的美觀，裝修定義了每一塊牆面該粉刷成什麼顏色，地板應該如何規劃，是長方形仍是正方形。裝修應該從總體主題出發，依據優秀的審美素養規劃設計每個區域的樣式設計，總體裝修方案也表達了這棟房子的主題。web
二、css技術筆記
選擇器
選擇器的目的是爲了獲得對目標元素的引用，一旦獲得引用，就能夠在此引用上執行各種操做。一個元素有不少不一樣的表徵，這些均可以做爲尋找引用的依據。ajax
1. 基本查找方式:
id: id是一個標籤元素在html中的惟一標識，使用id能夠快速且惟一的尋找到元素引用
class: class表示了一個標籤元素所屬的類，類和標籤屬於多對多關係，一個類能夠有多個標籤，一個標籤也能夠屬於多個類，使用class會尋找到歸屬於此類的多個標籤元素
tagName: tagName是一個標籤的名稱，經過標籤名能夠找到文檔中全部同名標籤
優先級: 使用id > 使用class > 使用tagName
2. 高級查找方式:
div p: 表示文檔中，全部div子樹中的p都被抓取，不論p是div的兒子輩仍是孫子輩
div>p: 表示文檔中，全部div子樹中的直接後輩p都被抓取，即p必須是div的兒子輩
div#box1: 表示文檔中，全部id是box1的div(其實應該只有1個)，查詢結果等價於#box1
div.box1: 表示文檔中，全部class中含有box1的div
div, p, li: 表示組合，即對多個元素組合執行相同的操做
3. 屬性查找
[school]: 表示文檔中，全部含有school屬性的全部標籤
div[school]: 表示文檔中，含有school屬性的全部div
div[school='abc']: 表示文檔中，含有school屬性且值爲'abc'的全部div
div[school^='a']: 表示文檔中，含有school屬性且值以'a'開頭的全部div
div[school$='a']: 表示文檔中，含有school屬性且值以'a'結尾的全部div
4. 僞類選擇器
某元素:link 表示當此元素未被訪問時的樣式(即初始默認樣式)
某元素:hover 表示當鼠標移到此元素上時的樣式
某元素:active 表示當鼠標點擊瞬間(未釋放鼠標)時的樣式
某元素:visited 表示當此元素被訪問過(釋放鼠標後)時的樣式
以上4種僞類選擇器定義了當發生某些動做時的樣式改變，能夠用於提供簡單的界面交互
p:first-child 表示當p是某一個父元素的第一個子元素時被獲取
p:last-child 表示當p是某一個父元素的最後一個子元素時被獲取
p:nth-child(x) 表示當p是某一個父元素的指定第x個子元素時被獲取
p:nth-child(2n) 表示當p是某一個父元素的指定偶數個子元素時被獲取
以上4種僞類的理解容易發生誤差，且使用時容易出錯，產生意外結果
5. 僞元素選擇器
li:first-letter 表示此元素的第一個文本字符被獲取
li:before
li:after
以上2種通常配合content屬性使用，表示此元素的原有文本前/後增長對應內容,first-letter不能應用於a等行內元素
樣式
字體屬性
顏色屬性
文本屬性
背景屬性
元素分類:塊級、行內、行內塊級正則表達式
盒子模型
一個盒子模型能夠被認爲是一個操做單元，頁面的佈局由多個盒子組成數據庫
外邊距margin：表明盒子外邊界到邊框的距離
邊框border：表明盒子邊框，邊框能夠有必定的寬度
內邊距padding：表明盒子邊框到內容區的距離
內容區width/height：表明內容區的寬高編程
浮動
html文檔被瀏覽器所解析時，瀏覽器會將各元素按照標準文檔流放入頁面中。浮動的做用是將某個元素脫離文檔流，看上去就好像它懸浮在原有頁面上同樣。浮動使用float屬性設置，能夠選擇向左或者向右。
此外，浮動的元素會被看做是塊級元素，即一個行內元素一旦浮動，就可擁有width和height屬性浮動通常會配合盒子模型使用，將浮動元素包含在盒子中，再經過盒子完成頁面佈局。子元素的浮動通常會致使父元素的height塌陷至0，致使父元素盒子不可見，此時須要在父元素上完成清除浮動。後端
清除浮動
浮動能夠實現多個塊級元素並排在一行。浮動元素會提高層級，這會致使父元素高度塌陷。
父元素設置overflow便可將高度擴展至子元素中最大的高度。
多個浮動的元素在一行，經過clear 的left和right能夠取消並排效果，注意clear只應用於元素自身。數組
定位
相對定位: 不脫離標準流，原區域保留，無浮動效果
絕對定位: 脫離標準流，原區域不保留，浮動效果
固定定位: 脫離標準流,原區域不保留，浮動效果，將會固定在指定區域即便發生滾動
4、js的理解和技術筆記
一、js理解
js相似於房子裏的傢俱，傢俱提供了交互性功能，給用戶提供了更方便、快捷、簡單的方法用於處理各種事務：
之前咱們須要用鑰匙開門，如今有了智能鎖只須要指紋 之前咱們須要煙囪排煙，如今有了油煙機只須要打開開關 之前咱們須要燒水洗澡，如今有了熱水器 之前咱們須要將食物放到水裏保質，如今有了冰箱 之前咱們須要到社區大隊看電影，如今有了電視、電腦
傢俱提供了更優秀的用戶體驗，也提高了用戶完成某一件事的效率。
js是運行在客戶端上的編程語言，與後端語言本質上是同樣的，只是適用的場景不一樣而已。
js由瀏覽器負責解釋執行，js的使用能夠減輕服務器的壓力，好比使用js檢測輸入數據格式、局部數據刷新等等。
js是解釋型語言，瀏覽器會實時編譯，因此js和python文件同樣，都是直觀可見的文本類型源代碼。
二、js技術筆記-基本知識
語法
1. 駝峯式命名
2. ;號結尾
3. {}代碼塊
4. var 變量聲明
數據類型
Number
數字類型，數字類型有一個特殊值:NaN，表明當嘗試轉換成Number類型失敗時的值，如Number('abc')
String
字符串類型，js中的字符串也是不可變對象，即全部嘗試針對原字符串修改的操做都會返回一個新字符串
字符串可使用[]和charAt()訪問，也能夠經過for來遍歷
Boolean
布爾類型，true或者false，
注意Boolean('false')的值是true,
注意Boolean([])的值是true，
如下值的布爾值是false:
0,-0,'',NaN,undefined,null,false
其餘值都是true
Array
數組類型，js的數組類型也是動態的，不只長度可變，也能夠涵蓋多個不一樣類型的元素
注意，以下方式遍歷數組，將會獲得數組的元素下標
var arr = ['a','b',c'];
for(var i in arr){
console.log(i);
}
Date
時間類型，用於表示時間，初始值是當前時間。時間對象有不少關於時間操做的函數可使用。
Math
數學函數，使用Math.abs(x)獲取絕對值等
RegExp
正則類型，用於表示一個正則表達式，通常用於處理字符串
undefined和null
undefined表示聲明瞭，可是未定義值
null表示聲明瞭，可是定義了一個空值
流程控制
判斷
if [else if] else
分支判斷
switch(x) {
case 1:
break;
default:
//code
}
for循環
for(var i = 0, len = x.length; i < len; i++) {
//code
}
while循環
while(condition){
//code
}
do循環（至少執行一次）
do{
//code
}while(condition)
函數
函數聲明 --> 定義函數方法1
function f(args){
//code
}
函數表達式 --> 定義函數方法2
var f = function(args){
//code
}
自定義對象
字面量方式
var stu = {
name:'xiaoming',
age:26
};
構造函數方式
function Stu(stuName, stuAge){
this.stuName = stuName;
this.stuAge = stuAge;
}
var stu = new Stu('xiaoming', 26);
DOM
- 元素控制
一個html頁面能夠被當作是一棵樹，每一個節點都是html標籤。js能夠操做這棵樹，提供了不少操做方法。
使用js，能夠方便的增刪改查html元素，這爲咱們提供了控制html頁面結構的途徑。 - 屬性控制
js在獲取到相應的元素後，能夠控制此元素的屬性，除了html元素自身的屬性以外，還能夠經過style控制
元素的樣式屬性，這爲咱們提供了控制html頁面樣式的途徑。 - 事件控制
js還能夠控制元素的事件響應，註冊相應的事件並提供預約義的回調函數，一旦發生指望的事件便可以執行
回調函數。經過事件控制，js能夠快速的增長、刪除、修改元素的行爲，這爲咱們提供了控制html頁面行爲
的途徑。
BOM
js能夠經過某些對象來控制瀏覽器，如:
navigator
location
history
screen
window
- 1. Sift 理解簡單總結
- 2. spark基本概念（總結和理解）
- 3. Android中4種基本佈局簡單介紹和總結
- 4. JVM原理簡單總結
- 5. Maven和Solr簡單總結
- 6. http 和 https 簡單總結
- 7. Hibernate 註解簡單總結
- 8. 簡單總結Tomcat總體結構和工做原理
- 9. ES6簡單總結（搭配簡單的講解和小案例）
- 10. MyBatis基本原理總結
- 更多相關文章...
- • Lua 基本語法 - Lua 教程
- • C# 基本語法 - C#教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Sift 理解簡單總結
- 2. spark基本概念（總結和理解）
- 3. Android中4種基本佈局簡單介紹和總結
- 4. JVM原理簡單總結
- 5. Maven和Solr簡單總結
- 6. http 和 https 簡單總結
- 7. Hibernate 註解簡單總結
- 8. 簡單總結Tomcat總體結構和工做原理
- 9. ES6簡單總結（搭配簡單的講解和小案例）
- 10. MyBatis基本原理總結