初識Html
HTML, 超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言涩惑。HTML是一種基礎(chǔ)技術(shù)，常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計賞心悅目的網(wǎng)頁胯陋、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面。網(wǎng)頁瀏覽器可以讀取HTML文件袱箱，并將其渲染成可視化網(wǎng)頁遏乔。HTML描述了一個網(wǎng)站的結(jié)構(gòu)語義隨著線索的呈現(xiàn)，使之成為一種標(biāo)記語言而非編程語言发笔。
基本結(jié)構(gòu)
<!DOCTYPE html> 聲明文件語言類型 H5文檔頭
<html> #### 包裹所有標(biāo)簽
<head> ### 頭部標(biāo)簽 包裹網(wǎng)頁相關(guān)信息
#### 設(shè)置字符集 中文 gb2312 GBK（早期的）UTF-8(全世界所有語言的字符集編碼)
<meta charset="UTF-8"/>
<title>這是我的第一個網(wǎng)頁</title>#### 設(shè)置網(wǎng)頁名字
</head>
<body>###包裹網(wǎng)頁內(nèi)容 肉眼看到的
</body>
</html>
基本元素屬性
| 標(biāo)簽 | 定義 |
|---|---|
| h1-h6 | 標(biāo)題標(biāo)簽 |
| a | 超鏈接標(biāo)簽 通過 href屬性控制跳轉(zhuǎn)地址 可以在新的頁面打開 也可以在當(dāng)前頁打開 |
| p | 段落標(biāo)簽 |
| b | 字體加粗 |
| u | 字體下劃線 |
| s | 字體刪除線 |
| i | 字體斜體 |
<hr/> |
橫線 |
<br/> |
換行 |
| div | 無意義標(biāo)簽 |
| span | 無意義標(biāo)簽 |
| img | 圖片一般通過src屬性給圖片路徑 可單獨設(shè)置寬高 |
行內(nèi)元素和塊級元素
獨占一行的是塊級標(biāo)簽（元素）行內(nèi)標(biāo)簽（元素）可以跟其他元素在同一行
列表
1.無序列表 ul+li
2.有序列表 ol+li
表格
使用table標(biāo)簽 包含tr標(biāo)簽（代表行）tr標(biāo)簽包含th（加粗）或者td
路徑
1.絕對路徑 相對于操作系統(tǒng)所處在的位置
2.相對路徑 相對于當(dāng)前文件 目標(biāo)文件所在的位置 ../(返回上一級)./(當(dāng)前目錄)
3.網(wǎng)絡(luò)路徑
初始CSS
什么是CSS
層疊樣式表（英語：Cascading Style Sheets盟萨，簡寫CSS），又稱串樣式列表了讨、級聯(lián)樣式表捻激、串接樣式表制轰、階層式樣式表，一種用來為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體铺罢、間距和顏色等）的計算機(jī)語言艇挨，由W3C定義和維護(hù)。當(dāng)前最新版本是CSS2.1韭赘，為W3C的推薦標(biāo)準(zhǔn)缩滨。CSS3現(xiàn)在已被大部分現(xiàn)代瀏覽器支持，而下一版的CSS4仍在開發(fā)中泉瞻。
CSS引入方式
1.將CSS語句寫在style標(biāo)簽中 style寫在head標(biāo)簽中
2.使用link標(biāo)簽將CSS文件引入
3.在標(biāo)簽的style屬性寫CSS語句
語法
1>標(biāo)簽選擇器
標(biāo)簽名{
屬性：值
}
2>class選擇器
.類名{
屬性：值
}
3>id選擇器
#類名{
屬性：值
}
4>通配符選擇器
*{
屬性：值
}
選擇器優(yōu)先級
通配符選擇器<標(biāo)簽選擇器<class選擇器<id選擇器<行內(nèi)樣式<!important
代碼注釋
html注釋 <!--這里寫注釋-->
css注釋 /*這里寫注釋*/
解決margin塌陷
在父級加上overflow：hidden
浮動布局
float(浮動):讓某個元素浮動起來 就是讓元素脫離標(biāo)準(zhǔn)文檔流
定位布局
相對定位
position:relative會保留原先位置
絕對定位position:absolute不會保留原先位置
注：想要挪動誰脉漏，就給絕對定位。同時觀察本身父級袖牙，如果父級沒有定位侧巨，就給父級相對定位。否則就不管鞭达。
兼容性
條件注釋法
<!--[if it IE6]>
中間的內(nèi)容在IE6中可以顯示司忱，其他的都不顯示。
<![endif]>
邊框常用屬性
border-width畴蹭；
border-style坦仍；
border-color；
顏色取值
red yellow green....
Rgb/rgba rgb(255,0,0,1)最后一個是透明度
二進(jìn)制 #a1b2c3
背景顏色
background ： 背景圖片地址 平鋪方式 背景定位 xy叨襟；
字體引用
fong-family：‘引入字體命名’繁扎；
src：url（）；
}
常用的字體屬性
font-size 大小
font-weight 權(quán)重（粗細(xì)）
font-family 字體樣式
文本處理
文本超出部分隱藏并且顯示三個點
text-overflow：ellipsis糊闽；
white-space：nowrap梳玫；
overflow：hidden；
line-height和text-align 實現(xiàn)字體水平垂直居中
text-decoration:none右犹；去除a鏈接字體下劃線
偽類選擇器
link 沒有單擊訪問時超鏈接樣式
visited 單機(jī)訪問之后超鏈接樣式
hover鼠標(biāo)放上去時候
active 鼠標(biāo)單擊未釋放
陰影
box-shadow
第一個值 在X軸上移動的距離
第二個值 在Y軸的距離
第三個值 距離物體的距離
第四個值 陰影大小
彈性盒模型
盒子模型
div 主要用于PC端提澎，浮動定位...
彈性和模型（flex）
主要針對移動端。容器：div念链。只對直系子元素有效虱朵。
開啟彈性布局
display：flex；//給父級
軸概念（默認(rèn)情況）
| 主軸 | 橫向為主軸X |
|---|---|
| 從軸 | 縱向為從軸Y |
元素在主軸的排序方式（父級）
justify-content:flex-start;//開始位置 默認(rèn)值
justify-content:flex-end;//針對主軸排到末尾
justify-content:space-around;//自適應(yīng)排列 兩邊有縫
justify-content:space-between;//兩邊對齊沒有縫
justify-content:flex-center;//針對主軸排到中間
設(shè)置主從軸
flex-direction:row;//默認(rèn)X軸
flex-direction:column;//Y軸為主軸
flex-direction:column-reverse;//Y軸翻轉(zhuǎn)
flex-direction:row-reverse;//X軸翻轉(zhuǎn)
元素在從軸的排序方式（父級）
align-items:center;//居中
align-items:baseline;//基線 按照內(nèi)容高度設(shè)置排列方式
元素操作（父級）
flex-wrap:wrap;//當(dāng)內(nèi)部子元素超出父容器 換行
flex-wrap:nowrap;//不換行
flex-wrap:nowrap-reverse;//換行反轉(zhuǎn)
操作子元素（子集）
align-self:center;//針對單個元素 讓他單獨對于從軸居中
align-self:flex-end;//針對單個元素 讓他單獨對于從軸尾部
order:1;//排序钓账，值越大越靠后 默認(rèn)為0
flex-grow:1;//控制元素拉伸比 撐滿
flex-shrink:.5;//控制元素的損失比 比例越大損失越多
H5
H5新增標(biāo)簽
textarea標(biāo)簽 輸入文字文本域
input type 新增標(biāo)簽
正常屬性input type=""
正常屬性可選值：
email 郵箱
parrern 寫正則表達(dá)式的
url內(nèi)容需要包含 http;// 或者 https://
color 取色版
search 搜索框 比text多一個X按鈕
number 數(shù)值類型
range 拖動條 特定值范圍的數(shù)值選擇器
其他屬性
parrern 寫正則表達(dá)式的
autofocus 自動獲取焦點
required 必須填入類容
placeholder 提示語
contenteditable 全局可編輯屬性
tabindex tab鍵跳轉(zhuǎn)順序
：before碴犬、：after 在某個元素前面或者后面加內(nèi)容 內(nèi)容寫在centent屬性后面，
也可以使用attr獲取當(dāng)前元素的某個屬性值
用于媒介播放的標(biāo)簽
video 視頻
controls 控制
autoplay 自動播放
loop 循環(huán)播放
relod 頁面加載時 進(jìn)行視頻加載
audio 音頻
CSS高級選擇器
first-child 找到其父級的第一個元素
last-child 找到其父級的最后一個元素
注意：元素本身的位置是父級的第幾個元素
nth-child（n） 找到其父級元素的第N個元素
Canvas
Canvas是H5提供的繪圖容器
繪制線段
var canvas = document.getElementById("canvas");
//創(chuàng)建2d畫布
var cxt = canvas.getContext("2d");
//線 圖形 圓 文字都可以畫....
cxt.beginPath();//設(shè)置開始
cxt.moveTo(50,100);//起點 X Y
cxt.lineTo(150,100);//終點 X Y
cxt.strokeStyle = "#ddd";//設(shè)置描邊顏色
cxt.lineWidth = "5";//設(shè)置寬度
cxt.stroke();//描邊
cxt.closePath();//設(shè)置結(jié)束
繪制三角形
var canvas = document.getElementById("canvas");
//創(chuàng)建2d畫布
var cxt = canvas.getContext("2d");
//線 圖形 圓 文字都可以畫....
cxt.beginPath();//設(shè)置開始
cxt.moveTo(50,50);//起點 X Y
cxt.lineTo(100,100);//中點 X Y
cxt.lineTo(200,50);//中點 X Y
cxt.lineTo(50,50);//終點 X Y
cxt.strokeStyle = "#ddd";//設(shè)置描邊顏色
cxt.fillStyle = "yellow";//設(shè)置填充顏色
cxt.fill()
cxt.lineWidth = "5";//設(shè)置寬度
cxt.stroke();//描邊 cxt.fill() 填充
cxt.closePath();//設(shè)置結(jié)束
或者 結(jié)束繪制之后再描邊 //只需要畫兩根線
cxt.beginPath();//設(shè)置開始
cxt.moveTo(50,50);//起點 X Y
cxt.lineTo(100,100);//中點 X Y
cxt.lineTo(200,50);//中點 X Y
cxt.strokeStyle = "#ddd";//設(shè)置描邊顏色
cxt.fillStyle = "yellow";//設(shè)置填充顏色
cxt.fill()
cxt.lineWidth = "5";//設(shè)置寬度
cxt.closePath();//設(shè)置結(jié)束
cxt.stroke();//描邊 cxt.fill() 填充
繪制統(tǒng)計圖
var cxt = canvas.getContext("2d");
//豎線和橫線 X Y 軸
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(50,350);
cxt.lineTo(451,350);
cxt.strokeStyle="red";
cxt.stroke();
cxt.closePath();
//Y軸刻度
for(var i=1;i<=6;i++){
cxt.beginPath();
cxt.moveTo(51,50*i);
cxt.lineTo(40,50*i);
cxt.strokeStyle="red";
cxt.stroke();
cxt.closePath();
}
//X軸刻度和矩形
for(var i=1;i<=7;i++){
cxt.save() // 保存 當(dāng)前的繪制狀態(tài)
cxt.beginPath()
// y 軸 刻度
cxt.translate(50,349) //平移 基點(重置 繪制基點)
cxt.moveTo(58*i,0)
cxt.lineTo(58*i,10) //當(dāng)前終點
cxt.stroke()
var offsetheight = Math.random()*160+40;
// 矩形
cxt.fillStyle = "red";
cxt.fillRect(58*(i-1)+5 ,0,50,-offsetheight)
cxt.closePath()
cxt.restore() // 初始化
}
屬性和方法
| 屬性 | 功能 |
|---|---|
| lineTo(x,y) | 線段的終點 |
| moveTo(x,y) | 線段的起點 |
| stroke() 方法 | 繪制梆暮、描邊 |
| strokeStyle="color"; | 設(shè)置描邊著色 |
| lineWidth="px"; | 設(shè)置當(dāng)前描邊顏色 |
| beginPath() 方法 | 起始路徑 |
| closePath() 方法 | 閉合路徑 |
| fill() 方法 | 填充形狀 |
| fillStyle="color" | 填充顏色 |
| translate(x,y) | 平移基點 |
| save( ) 方法 | 保存狀態(tài) |
| restore( ) 方法 | 撤銷保存的狀態(tài) |
| fillRect(x,y,width,height) | 填充矩形 |
| strokeRect(x,y,width,height) | 描邊矩形 |
| fillText("text",x,y,maxwidth) | 填充字體 |
| strokeText("text",x,y,maxwidth) | 描邊字體 |
| font="bold px 微軟雅黑" | 設(shè)置字體 必須有字體設(shè)置才生效 |
| textAlign="left/right/center" | 水平文本以基線對齊 |
| textBaseline="top/bottom/center" | 垂直文本以基線對齊 |
| rotate(deg) | 旋轉(zhuǎn)度數(shù) 括號內(nèi)不帶單位 |
