整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
學(xué)目標(biāo)：
1. 理解前端開發(fā)的基本概念和原理。
- 前端開發(fā)的定義和作用
- 前端開發(fā)的基本工具和環(huán)境
- 前端開發(fā)的職責(zé)和要求
2. 掌握HTML5標(biāo)記語(yǔ)言的基本語(yǔ)法、元素和屬性。
- HTML5的發(fā)展歷程和版本
- HTML5文檔結(jié)構(gòu)和基本語(yǔ)法規(guī)范
- HTML5常用的文本標(biāo)記、圖像標(biāo)記、表格標(biāo)記等
- HTML5的表單元素和相關(guān)屬性
3. 掌握CSS3的基本語(yǔ)法、選擇器和常用樣式屬性。
- CSS3的發(fā)展歷程和版本
- CSS3的基本語(yǔ)法和選擇器
- CSS3的盒模型、布局和浮動(dòng)
- CSS3的文本樣式、背景樣式和過(guò)渡動(dòng)畫
it學(xué)習(xí)
4. 理解JavaScript的基本語(yǔ)法、數(shù)據(jù)類型、條件語(yǔ)句和循環(huán)結(jié)構(gòu)。
- JavaScript的基本語(yǔ)法和變量定義
- JavaScript的數(shù)據(jù)類型和類型轉(zhuǎn)換
- JavaScript的條件語(yǔ)句和邏輯運(yùn)算
- JavaScript的循環(huán)結(jié)構(gòu)和數(shù)組操作
5. 掌握DOM操作，能夠使用JavaScript操作HTML文檔中的元素。
- DOM的概念和基本原理
- 使用JavaScript獲取和操作HTML元素
- 使用JavaScript創(chuàng)建、修改和刪除HTML元素
- DOM事件的處理和綁定
6. 理解響應(yīng)式設(shè)計(jì)的概念和基本原理。
- 響應(yīng)式設(shè)計(jì)的定義和作用
- 使用媒體查詢實(shí)現(xiàn)頁(yè)面布局的適應(yīng)性
- 使用流式布局和彈性盒子布局實(shí)現(xiàn)頁(yè)面適配
- 使用響應(yīng)式圖片等技術(shù)提升頁(yè)面響應(yīng)性
軟件開發(fā)
大綱精細(xì)化教學(xué)設(shè)計(jì)：
第一部分：前端開發(fā)基礎(chǔ)
1. 前端開發(fā)概述
1.1 什么是前端開發(fā)
1.2 前端開發(fā)的歷史和發(fā)展趨勢(shì)
1.3 前端開發(fā)的基本工具和環(huán)境
2. HTML5基礎(chǔ)
2.1 HTML5的簡(jiǎn)介和發(fā)展歷程
2.2 HTML5的文檔結(jié)構(gòu)和基本語(yǔ)法規(guī)范
2.3 HTML5常用的文本標(biāo)記、圖像標(biāo)記、鏈接標(biāo)記等
2.4 HTML5的表單元素和相關(guān)屬性
3. CSS3基礎(chǔ)
3.1 CSS3的簡(jiǎn)介和發(fā)展歷程
3.2 CSS3的基本語(yǔ)法和選擇器
3.3 CSS3的盒模型、布局和浮動(dòng)
3.4 CSS3的文本樣式、背景樣式和過(guò)渡動(dòng)畫
4. JavaScript基礎(chǔ)
4.1 JavaScript的簡(jiǎn)介和發(fā)展歷程
4.2 JavaScript的基本語(yǔ)法和變量定義
4.3 JavaScript的數(shù)據(jù)類型和類型轉(zhuǎn)換
4.4 JavaScript的條件語(yǔ)句和邏輯運(yùn)算
4.5 JavaScript的循環(huán)結(jié)構(gòu)和數(shù)組操作
小程序開發(fā)
第二部分：網(wǎng)頁(yè)交互與動(dòng)態(tài)效果
1. DOM操作
1.1 DOM的概念和基本原理
1.2 使用JavaScript獲取和操作HTML元素
1.3 使用JavaScript創(chuàng)建、修改和刪除HTML元素
1.4 DOM事件的處理和綁定
2. 事件處理與表單驗(yàn)證
2.1 常見的DOM事件類型和觸發(fā)條件
2.2 使用JavaScript處理交互事件
2.3 表單驗(yàn)證的基本原理和實(shí)現(xiàn)方法
3. Ajax與數(shù)據(jù)交互
3.1 Ajax的簡(jiǎn)介和發(fā)展歷程
3.2 使用JavaScript發(fā)送異步請(qǐng)求
3.3 處理服務(wù)器返回的數(shù)據(jù)
第三部分：響應(yīng)式設(shè)計(jì)與跨平臺(tái)開發(fā)
1. 響應(yīng)式設(shè)計(jì)概述
1.1 響應(yīng)式設(shè)計(jì)的定義和作用
1.2 媒體查詢的基本語(yǔ)法和常用屬性
1.3 使用響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)網(wǎng)頁(yè)適配
2. 移動(dòng)端開發(fā)概述
2.1 移動(dòng)端開發(fā)的特點(diǎn)和挑戰(zhàn)
2.2 使用CSS3實(shí)現(xiàn)移動(dòng)端樣式效果
2.3 使用JavaScript處理移動(dòng)端交互
3. 跨平臺(tái)開發(fā)基礎(chǔ)
3.1 常見的跨平臺(tái)開發(fā)技術(shù)和框架
3.2 使用跨平臺(tái)開發(fā)工具搭建應(yīng)用
3.3 測(cè)試和發(fā)布跨平臺(tái)應(yīng)用
通過(guò)以上的教學(xué)目標(biāo)和大綱精細(xì)化教學(xué)設(shè)計(jì)，學(xué)習(xí)者將能夠全面掌握前端開發(fā)所需的HTML5、CSS3和JavaScript的基礎(chǔ)知識(shí)，并能夠應(yīng)用所學(xué)知識(shí)實(shí)現(xiàn)網(wǎng)頁(yè)交互和動(dòng)態(tài)效果，以及具備響應(yīng)式設(shè)計(jì)和跨平臺(tái)開發(fā)的能力。
他們是由W3C推薦的前端三件套，并且互相之間可以很好地配合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 關(guān)于網(wǎng)頁(yè)的一些屬性 -->
<!-- css樣式 -->
</head>
<body>
<!-- 主體內(nèi)容 -->
</body>
</html>
剛學(xué)半年web，只是寫個(gè)作業(yè)可以這么用吧(●’?’●)
前為名字，后為文件格式
項(xiàng)目名 文件夾
images 文件夾
css 文件夾
網(wǎng)站名1.css
...
html 文件夾 也可以直接把每個(gè)網(wǎng)站卸載更外面一層
網(wǎng)站名1.thml
...
html的內(nèi)容由一個(gè)個(gè)標(biāo)簽 嵌套或并列 組成
標(biāo)簽用 <標(biāo)簽名>內(nèi)容</標(biāo)簽名> 或者 <標(biāo)簽名/>
文字可以直接輸入，標(biāo)簽只不過(guò)是用來(lái)控制他們的 位置和顯示效果 的
通用的標(biāo)簽主要
前者較為普遍；后者教為特殊
主要用來(lái)定一個(gè)區(qū)域來(lái) 劃分更小的區(qū)域或者直接寫入內(nèi)容。
使用時(shí)用前者。
有許多特殊的標(biāo)簽，他們沒有特別之處，只是特別拎出來(lái)以方便理解文件的整個(gè)結(jié)構(gòu)
如
英文 | 通常的內(nèi)容 |
header | 頁(yè)眉 |
nav | 導(dǎo)航欄 |
main | 主要內(nèi)容 |
article | 與上下文無(wú)關(guān)的獨(dú)立內(nèi)容 |
section | 其中一個(gè)區(qū)域 |
aside | 側(cè)欄或邊欄 |
footer | 頁(yè)腳 |
detail | 某個(gè)細(xì)節(jié)的描述 |
summary | detail的標(biāo)題 |
最后兩個(gè)detail和summary通常是相互配合的。
上面這些都是有著特殊用處的標(biāo)題，可以用下面的這些替代，但使用時(shí)相對(duì)復(fù)雜一些
主要用來(lái)直接寫入內(nèi)容。
使用時(shí)前后使用方法的皆有
空行之前的表示重要
用前者的有
英文 | 含義 |
h1 | 標(biāo)題，字體最大的標(biāo)題 |
中間部分 | 字體依次減小的標(biāo)題 |
h6 | 標(biāo)題，字體最小的標(biāo)題 |
p | 段落 |
br | 換行 |
- | - |
hr | 水平線 |
sub | 下標(biāo)文本 |
sup | 上標(biāo)文本 |
ins | 插入文本 |
del | 刪除文本 |
wbr | 此處適合換行 |
pre | 預(yù)格式文本 |
address | 表示地址 |
bdo | 文字方向 |
blockauote | 長(zhǎng)的引用語(yǔ) |
q | 短的引用語(yǔ) |
mark | 定義有記號(hào)的文本 |
table te td th是相互配合組成一個(gè)表格的,table>tr>td
表格 | |
table | 表格 |
tr | 行標(biāo)簽 |
td | 列標(biāo)簽 |
th | 標(biāo)題列 |
li必須在ol或ul內(nèi)。通常用ul li
列表 | |
ol | 有序列表 |
ul | 無(wú)序列表 |
li | 列表項(xiàng) |
表單可以用作問卷等
input屬性typr value
表單 | |
form | 表單 |
label | 點(diǎn)擊時(shí)自動(dòng)定位到里面的input |
input | 輸入 |
select | 多選 |
option | 多選的一個(gè)選項(xiàng) |
用后者的有
英文 | 含義 |
br | 換行 |
img | 引入圖片 |
video | 引入視頻 |
audio | 引入 |
abbr | 此處適合換行 |
img video audio使用時(shí)需要更多的屬性，比如URL路徑等
以video為例：<video src="路徑" autoplay="autoplay" controls="controls"/>
依次表示 URL路徑 自動(dòng)播放 顯示播放器控件
他們有各自的屬性
都必須有src屬性以表示路徑，img只需要src即可顯示
各自可以在屬性里選擇width和height以顯示寬度和高度（這兩個(gè)在css 屬性里介紹）
video和audio（他們有一樣的可選屬性）的其他可選屬性在下面顯示,一般一個(gè)只有一個(gè)可選擇的值，那個(gè)值就是名字自己(言下之意就是，只寫自己需要的屬性)
英文 | 作用 |
autoplay | 自動(dòng)播放 |
controls | 顯示控件 |
loop | 循環(huán)播放 |
poster | 定義視頻下載時(shí)需要的圖像，值用路徑表示 |
preload | autoplay時(shí)無(wú)效，定義文件預(yù)加載的時(shí)機(jī)，有3個(gè)值，具體在下面介紹 |
muted | 靜音 |
preload的值
auto：默認(rèn)值，直接加載 音頻/視頻
metadata：僅加載 音頻/視頻 元數(shù)據(jù)
none：不加載 音頻/視頻
用于標(biāo)簽的定義
class表示類，可以用于很多類似的標(biāo)簽，以方便使用一樣的css樣式
id是唯一的，可以為獨(dú)特的標(biāo)簽單獨(dú)使用樣式
css一共有3段：選擇器{屬性:值;…}
樣式有3種添加的方法
常見的偽 選擇器/元素 | 表示方法 |
通用選擇器 | * |
標(biāo)簽選擇器 | 標(biāo)簽名 |
類選擇器 | .類名 前面是一個(gè)下點(diǎn) |
ID選擇器 | #ID號(hào) |
- | 以下選擇器用于分隔不同的選擇器 |
后代選擇器 | 一個(gè)空格，其實(shí)這不是個(gè)選擇器（但很像），可以選擇出所有的后代 |
分組選擇器 | , 逗號(hào) |
子元素選擇器 | > |
- | 以下選擇器均需緊跟在最上面的選擇器后 |
相鄰兄弟選擇器 | + |
不相鄰兄弟選擇器 | ~ |
屬性選擇器 | [屬性值] 詳細(xì)介紹 |
偽類選擇器 | :單詞 詳細(xì)介紹 |
偽屬性 | ::單詞 詳細(xì)介紹 |
后一個(gè)選擇器不一定是前一個(gè)的子元素，也可以通過(guò)一些符號(hào)進(jìn)行兄弟之間的變化 |
div>p
選中選中div中的p子元素（沒有中間層的關(guān)系）
div+p
選中跟在div后的p
div~p
選中前面有相同父元素的div 的p
| 屬性選擇器 | 介紹，有紅字是因?yàn)?/span>|豎線在編輯器里是特殊字符，在代碼塊內(nèi)才能正常顯示 |
|–|–|
| [屬性] | 具有該屬性的 |
|[屬性=某值]|屬性=某值的|
|[屬性~=某值]|屬性=用空格分隔的字詞列表，某值是其中一個(gè)值
|[屬性|=某值]|屬性=用|分隔的字詞列表，某值是其中一個(gè)值
|[屬性^=某值]|具有該屬性，以 某值 開頭
|[屬性$=某值]|具有該屬性，以 某值 結(jié)尾
|[屬性*=某值]|具有該屬性，包含 某值
這類選擇器全部按前面（一部分）選擇器的介紹，緊跟在后面，以":"(冒號(hào))為標(biāo)識(shí)符（即以它開頭，可以看成選擇器的一部分）
以下均不寫冒號(hào)
偽類選擇器 | 介紹 |
- | 下面定義的是應(yīng)用于超鏈接文本a的4種(鼠標(biāo)在該元素的)狀態(tài)， |
link | 正常狀態(tài)（未訪問） |
visited | 被訪問之后 |
hover | 經(jīng)過(guò)時(shí) |
active | 單機(jī)被激活時(shí) |
偽類選擇器也有一些分類，見下 | |
結(jié)構(gòu)偽類選擇器 | 介紹 |
– | – |
first-child | 第一個(gè)子元素 |
lastchild | 最后一個(gè)子元素 |
- | 注意以下4個(gè)帶()的，()內(nèi)可以是一個(gè)算式或數(shù)字，選中符合結(jié)果的(可以是多個(gè)) |
nth-child() | 正數(shù) 第()個(gè)子元素 |
nth-last-child() | 倒數(shù) 第()個(gè)子元素 |
nth-of-type() | 父元素的 第()個(gè)同類子元素 |
nth-last-of-type() | 父元素的 倒數(shù) 第()個(gè)同類子元素 |
first-of-type | 父元素的 第一個(gè)同類子元素 |
last-of-type | 父元素的 倒數(shù) 第一個(gè)同類子元素 |
only-child | 父元素的唯一的子元素，(當(dāng)然，)可能有很多子元素是唯一的 |
only-of-type | 父元素的唯一一個(gè)相同類型的子元素 |
empty | 沒有任何內(nèi)容的子元素 |
狀態(tài)偽類選擇器 | 介紹，UI元素一般指包含在form元素內(nèi)的表單元素 |
enabled | 范圍內(nèi)的所有可用UI元素 |
disabled | 范圍內(nèi)的所有不可用UI元素 |
checked | 范圍內(nèi)的所有可用UI元素 |
否定偽類選擇器 | |
not() | 不匹配該元素的選擇器，()里是一個(gè)選擇器的屬性，將選取 不符合該選擇器 的元素 |
目標(biāo)偽類選擇器 | |
target | 前面的匹配元素被相關(guān)URL指向，樣式效果才生效，是動(dòng)態(tài)選擇器 |
用法：緊跟在后面，用兩個(gè)":“作為標(biāo)識(shí)符（也可以只用一個(gè)，但兩個(gè)更好）。css樣式里需包含content屬性，值為帶引號(hào)的字符（當(dāng)然也可以什么都不寫）
如：div:after{content=”";}
偽元素 | 介紹 |
before | 在前面插入一段文字 |
after | 在后面插入一段文字 |
用途：廣泛
用法：有數(shù)字和單位組成：200px
當(dāng)數(shù)字為0時(shí)，單位可有可無(wú)
使用頻率：px最常用，其次em
單位有絕對(duì)和相對(duì)之分
相對(duì)單位 | 單位長(zhǎng)度的含義 |
px | 像素(Pixel) |
em | 相對(duì)于父元素字體大小的倍數(shù) |
ex | 相對(duì)于字符x的高度，通常為字體高度的一半 |
ch | 相對(duì)于數(shù)字0的寬度 |
rem | 相對(duì)于根元素(html)字體大小的倍數(shù)。若未被設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸（一般為16px） |
vw | 相對(duì)于視口的寬度（視口被均分為100vw） |
vh | 相對(duì)于視口的高度（視口被均分為100vw） |
xmin | 相對(duì)于視口的 高度或?qū)挾?中較小的那個(gè)（小的被均分為100vmin） |
vmax | 相對(duì)于視口的 高度或?qū)挾?中較大的那個(gè)（大的被均分為100vmax） |
– | – |
絕對(duì)單位 | 單位長(zhǎng)度的含義 |
pt | 點(diǎn)(point) |
pc | 派卡(pica)，=我國(guó)新四號(hào)鉛字的尺寸 |
in | 英寸(inch) |
cm | 厘米(centimeter) |
mm | mm(millimeter) |
用途：屬性transition(變化時(shí)間)
用法：數(shù)字+單位：200ms
使用頻率：都常用
單位 | 含義 |
s | 秒 |
ms | 毫秒 |
用途：
用法：數(shù)字+單位：120deg
使用頻率：第一個(gè)deg最常用
單位 | |
deg | 角度(degrees) ，一個(gè)圓 360° |
grad | 梯度(gradians)，一個(gè)圓 400梯度 |
rad | 弧度(radians)，一個(gè)圓 PI |
turn | 轉(zhuǎn)、圈(turns) |
用途：color，background(-color)
用法：值
使用頻率：2和-1最為常用，-1代表最后一個(gè)
值 | 描述 |
white | 白色 |
具體英文單詞↑ | 代表這個(gè)單詞指代的顏色 |
rgb(r,g,b) | RGB值，rgb分別代表紅綠藍(lán)，[0,255] |
rgba(r,g,b,a) | 見上↑.a代表透明度 [0,1] |
rgb(r%,g%,b%) | RGB值(255*x%)，三個(gè)值[0,100] ,最后即為0%-100% |
#rrggbb | RGB值，每個(gè)值用 兩位 16進(jìn)制數(shù) 表示（大小寫不敏感），最后值在0-255 |
hsl(h,s,l) | hsl分別代表 色相(hue,[0,360])/飽和度(saturation,[0%,100%])/亮度(lightness,[0%,100%]) |
hsla(h,s,l,a) | ↑ a代表透明度 |
只在屬性font-family中用到，定義字體類型
{font-family="微軟雅黑"}
也可以不用雙引號(hào)
{font-family=微軟雅黑}
長(zhǎng)度表示一欄：
1：值完全用長(zhǎng)度表示，下面不再具體介紹
其他值的類型：值不能用長(zhǎng)度表示，能用其他的較規(guī)范的表示表示
0：值不能用長(zhǎng)度表示，也無(wú)法用其他規(guī)范的值表示
＞1：有多個(gè)值，都用長(zhǎng)度表示（同時(shí)出現(xiàn)多個(gè)值：長(zhǎng)度可變）
屬性 | 含義 | 長(zhǎng)度表示 |
width | 寬度 | 1 |
height | 高度 | 1 |
position | 定位方式 | 字符 |
display | 顯示方式 | 字符 |
float | 浮動(dòng)方式 | 字符 |
clear | 清除部分浮動(dòng) | 字符 |
margin | 外邊距 | 1-4 |
border | 邊框 | 1-4 |
padding | 內(nèi)邊距 | 1-4 |
text-align | 字體左右的對(duì)齊方式 | 字符 |
text-indent | 文字之前空多少長(zhǎng) | 1 |
background | 背景，包括背景圖，背景色，是否重復(fù) | 0 |
line-heignt | 行高 | 1 |
font-family | 字體 | 字符 |
font-size | 字的大小 | 1 |
font-weight | 字的粗細(xì) | 1 |
color | 字的顏色 | 顏色 |
opacity | 透明度0-1 | 0 |
z-index | 離屏幕遠(yuǎn)近，越大越顯示在上面 | 0 |
transition | 狀態(tài)變化的時(shí)間 | 時(shí)間 |
animation | 動(dòng)畫 | 0 |
overflow | 溢出 | 字符 |
值 | 含義 |
absolute | 絕對(duì)定位，相對(duì)于最近的定位過(guò)的父元素偏移 |
relative | 相對(duì)定位，在文件流中，相對(duì)自生原本在的位置偏移 |
fixed | 絕對(duì)定位，相對(duì)視口偏移 |
這里提到了偏移，它相對(duì)于定位的位置進(jìn)行偏移 | |
relative在文件流中的意思是，在這個(gè)頁(yè)面中單獨(dú)占據(jù)一塊空間，原始位置不會(huì)與在文件流中的同級(jí)元素重疊 |
block，none，grid較為常用
值 | 含義 |
block | 塊狀元素 |
none | 不顯示 |
flex | flex布局 |
grid | grid布局 |
inline | 行內(nèi)元素 |
inline-block | 行內(nèi)塊元素 |
grid和flex可以去網(wǎng)上找資料學(xué)習(xí)
著重介紹一下grid布局
含義：可以方便地進(jìn)行網(wǎng)格狀的布局，而后可以隨意組合，分配給子元素
有許多屬性和它配合使用（前提：display:grid，至少與前3個(gè)一起使用，前4個(gè)可以更美觀地表示）
屬性 | 含義 | 用法與解釋 |
grid-template | 融合了下面上半部分的所有項(xiàng) | 較為復(fù)雜，不講 |
grid-template-rows | 每行的寬度（單獨(dú)設(shè)置） | 多個(gè) 長(zhǎng)度/auto/xfr 表示，有幾行寫幾個(gè)(空格分開) |
grid-template-colums | 每列的寬度（單獨(dú)設(shè)置） | ↑ 有幾列寫幾個(gè) |
grid-template-areas | 給每個(gè)格子命名，名字一樣則合并 | 每行一對(duì)雙引號(hào)，（適當(dāng)使用回車） |
grid-gap | 行間距和列間距（統(tǒng)一設(shè)置） | 行間距 列間距 |
grid-row-gap | 行間距（統(tǒng)一設(shè)置） | 長(zhǎng)度 |
grid-colum-gap | 列間距（統(tǒng)一設(shè)置） | 長(zhǎng)度 |
place-items | 內(nèi)容的 左右和上下 位置情況 | ↓ start/end/center/stretch |
align-items | 內(nèi)容的 左右 位置情況 | ↑ 開頭/末尾/中間/拉伸以盛滿 |
justify-items | 內(nèi)容的 上下 位置情況 | ↑ 對(duì)align來(lái)說(shuō)，左是開頭，右是末尾 |
place-content | 整個(gè)表格 左右和上下 位置情況 | ↑ 對(duì)juestify來(lái)說(shuō)，上是開頭，下是末尾 |
align-content | 整個(gè)表格的 左右 位置情況 | ↑有兩個(gè)值的(place)，用空格分開 |
justify-content | 整個(gè)表格的 上下 位置情況 | ↑ |
– | – | 以下都是子元素獲得父元素分配的某個(gè)空間的語(yǔ)句 |
grid-template-area | 用指定的名字獲取父類給這個(gè)名字的空間 | 字符串 |
– | – | 以下用 起始/末尾 的(間隔,即gap) 行/列 獲得空間 |
grid-area | 起始/末尾 的 行/列 | 起始行/起始列/末尾行/末尾列 |
grid-row | 起始/末尾 的行 | 起始行/末尾行 |
grid-row-start | 起始 行 | 起始行 |
grid-row-end | 末尾行 | 末尾列 |
grid-column | 起始/末尾 的列 | 起始列/末尾列 |
grid-column-start | 起始列 | 起始列 |
grid-column-end | 末尾列 | 末尾列 |
著重介紹一下flex布局
含義：可以方便地進(jìn)行彈性布局，尤其是垂直對(duì)齊的問題
有許多屬性和它配合使用（前提：display:flex）
| 屬性 | 含義
|–|–|–|
|flex-direction| 決定主軸的方向
| justify-content | 子元素在主軸方向上的分布方式
| align-items | 子元素在副軸方向上的分布方式
flex-direction的值 | 含義 |
row | 從上到下 |
row-reserve | 從下到上 |
column | 從左到右 |
column-reserve | 從右到左 |
justify-content的值 | 含義 |
flex-start | 主軸起始除處 |
flex-end | 主軸末尾處 |
center | 主軸中間 |
space-around | 元素兩邊留空隙，每個(gè)元素各占一份，不會(huì)像magin一樣重合 |
space-between | 元素之間留空隙，這意味著最邊上沒有空隙 |
align-items的值 | 含義 |
flex-start | 副軸起始除處 |
flex-end | 副軸末尾處 |
center | 副軸中間 |
stretch | 全部占滿 |
不設(shè)置這個(gè)屬性，它可能會(huì)在區(qū)域之外顯示
值 | 含義 |
auto | 超出長(zhǎng)度時(shí)，可滾動(dòng) |
hidden | 隱藏 |
其他 | - |
分別代表 外邊距/邊框/內(nèi)邊距
他們都可以用4個(gè)長(zhǎng)度值表示，分別代表 上右下左 的長(zhǎng)度
也可以有auto值，即自動(dòng)，它會(huì)使兩邊相等
如 margin:0 auto;
它的左右兩邊是相等的
后面的值可以省略，但至少有第一個(gè)值
第4個(gè)值（左）省略，則=第2個(gè)值（右）
第3個(gè)值（下）省略，則=第1個(gè)值（上）
第2個(gè)值（右）省略，則=第1個(gè)值（上）
他們的四個(gè)值可以單獨(dú)設(shè)置，以margin為例子
margin-top，margin-right，margin-bottom，margin-left
值 | 含義（浮動(dòng)方向/對(duì)齊方向） |
left | 左 |
center | 中 |
right | 右 |
先清除上一個(gè)區(qū)域來(lái)的浮動(dòng)（float），而后可以設(shè)置自己的浮動(dòng)
值 | 清除浮動(dòng) |
left | 左 |
right | 右 |
both | 左右 |
屬性自由書寫,其中的屬性可以缺少一些或調(diào)換順序
下面是兩個(gè)較頻繁使用的格式
有多個(gè)子屬性
子屬性 | 含義 | 值 |
background-image | 圖片鏈接 | url(“路徑”) |
background-repeat | 是否重復(fù) | repeat/no-repeat |
background-position | 背景圖的起始位置 | |
background-position-x | 離左邊距離 | 長(zhǎng)度/x% |
background-position-y | 離上邊距離 | 長(zhǎng)度/y% |
background-color | 背景色 | 顏色 |
background-size | 背景大小 | 長(zhǎng)度 長(zhǎng)度 |
background-attachment | 是否隨著滾動(dòng)而滾動(dòng) | scroll(默認(rèn))/fixed(不會(huì))/local(會(huì)) |
<script type="text/javascript">
變量及賦值
計(jì)算語(yǔ)句
函數(shù)
事件
</script>
一定有事件，因?yàn)闆]有事件，js就沒有什么意義
所有類型的變量 都用 var 變量名=值; 來(lái)定義
數(shù)據(jù)類型 | 含義 | 值 |
Undefined | 定義但未賦值 | undefined |
Null | 未定義，由Undefined衍生而來(lái)，值==undef | null |
Boolean | 布爾類型 | true false |
Number | 數(shù)字，正數(shù)，浮點(diǎn)數(shù)等， | 數(shù)字 |
String | 字符串，用單引號(hào)或雙引號(hào)都可 | 字符串 |
Object | 項(xiàng)目，上面有屬性，如{name:“myname”,age:18} | |
Array | 數(shù)組可以混雜其他類型，如[1,“myname”] | |
DOM對(duì)象 | 一個(gè)具體的標(biāo)簽，如window, document,element |
可用數(shù)據(jù)類型 | 數(shù)據(jù)類型相關(guān)函數(shù) | 目的類型 | 含義與用法 |
Boolean Number | toString() | String | 變換成字符串 |
- | 下面兩個(gè) String轉(zhuǎn)Number 的函數(shù) | - | 下面的都把源操作數(shù)放()里 |
String | praseInt() | 整數(shù)(Number) | 字符串變整數(shù) |
String | praseFloat() | 浮點(diǎn)數(shù)(Number) | 字符串變浮點(diǎn)數(shù) |
- | 下面的是三種強(qiáng)制類型轉(zhuǎn)換 | - | |
所有 | Boolean() | Boolean | 空字符串 0 undefined null 值為false，其他的true |
所有 | Number() | Number | 匹配整個(gè)數(shù)，fasle null為0，true為1 |
所有 | String() | String | 強(qiáng)制類型轉(zhuǎn)換，變成字符串 |
isNaN | 判斷是不是數(shù) |
賦值符 | 含義 |
= | 右邊賦給左邊 |
– | – |
運(yùn)算符 | |
+ | 加 |
- | 減 |
* | 乘 |
/ | 除 |
% | 余 |
++ | 自增，放在數(shù)的 前/后 不一樣 |
? : | 三目運(yùn)算符 |
( ) | 提高優(yōu)先級(jí)，左括號(hào)，右括號(hào) |
- | - |
判斷符 | |
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 值相等 |
!= | 值不相等 |
=== | 值和類型 都相等 |
!== | 值和類型 都不相等 |
- | - |
運(yùn)算賦值符 | 左邊的值加上右邊的值，再賦值給左邊 |
+= | |
-= | |
*= | |
\= | |
%= |
語(yǔ)句 | 使用 |
定義及賦值 | var i=3;也可以單獨(dú)定義/賦值，定義統(tǒng)一用var |
選擇(分支) | if-else或switch–case-default-break |
循環(huán) | for或while或do-while |
跳出 | break或continue |
返回 | return |
一個(gè)事件只能綁定一個(gè)函數(shù)，如果一個(gè)事件要做多件事情，都放到一個(gè)函數(shù)里
表達(dá)形式：(被觸發(fā))對(duì)象.事件屬性=…
不只是a有事件屬性，其他的標(biāo)簽都有事件屬性
事件屬性有很多，根據(jù)可以觸發(fā)者（比如鼠標(biāo)，鍵盤，窗口）的不同分類
只列舉常用的
鼠標(biāo)觸發(fā)：onclick（點(diǎn)擊），onmouseover（鼠標(biāo)再其上，和選擇器hover有點(diǎn)像，但有不同）
窗口觸發(fā)（被觸發(fā)對(duì)象必須是window）：onload（窗口完成后）
動(dòng)態(tài)綁定
寫在js樣式里，被包含在其他的事件的函數(shù)中綁定
對(duì)象需要給出
參照函數(shù)的三種綁定方式
靜態(tài)綁定
直接在標(biāo)簽里綁定，這時(shí)候?qū)ο缶褪亲约哼@個(gè)標(biāo)簽
參照函數(shù)的第2種
比如 <p onclick="函數(shù)名(參數(shù))">
函數(shù)里的組成與js的組成成分一致
函數(shù)定義的3種方式
參數(shù)可以有多個(gè)，定義時(shí)不需要聲明類型，只需要參數(shù)名即可
第2種定義方式可以讓定義在標(biāo)簽內(nèi)的事件連結(jié)到這個(gè)函數(shù)
事件綁定
前兩種定義方式
不需要 (參數(shù))
需要用到匿名函數(shù)
直接用 事件=函數(shù)名(參數(shù)); 的結(jié)果
是 直接觸發(fā)事件
第3種定義方式一般直接賦給內(nèi)部的事件，即 事件=function (){函數(shù)體}
下是針對(duì)高級(jí)前端工程師的HTML相關(guān)面試題：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
