對(duì)于前端的學(xué)習(xí)要先了解一下瀏覽器和html的發(fā)展史
其次看看這篇文章：https://kb.cnblogs.com/page/129756/#chapter1
我讀到這句話時(shí)候感覺到了科技這個(gè)東西有很多時(shí)候并不是一家獨(dú)大的。
而現(xiàn)實(shí)生活中是需要互相學(xué)習(xí)的
奇怪的是，并沒有哪個(gè)正式公布的規(guī)范對(duì)用戶界面做出規(guī)定，這些是多年來各瀏覽器廠商之間相互模仿和不斷改進(jìn)的結(jié)果。
HTML 網(wǎng)頁結(jié)構(gòu)：html經(jīng)過瀏覽器 渲染以后 展現(xiàn)出來的頁面
渲染：渲染在電腦繪圖中是指用軟件從模型生成圖像的過程。
模型：是用嚴(yán)格定義的語言或者數(shù)據(jù)結(jié)構(gòu)對(duì)于三維物體的描述，
它包括幾何、視點(diǎn)、紋理以及照明信息
編碼：通過代碼的形式，把想要展現(xiàn)的頁面，寫在html文檔中
相關(guān)的語言有html+css+javascript
html+css可以寫出來網(wǎng)頁的樣式
javascript頁面的行為
標(biāo)簽<a>一般是成對(duì)出現(xiàn)的 也有單標(biāo)簽<br> <br/>(可以省略)
屬性：在元素中添加的 附加的信息<標(biāo)簽 name="value">
自定義標(biāo)簽
HTML 標(biāo)簽指示瀏覽器做出的相應(yīng)的顯示
1.html 從上到下解析
2.元素可以互相嵌套
<!DOCTYPE html>文檔類型 聲明用哪個(gè)版本的HTML
<html lang="zh">根元素 語言中文
<head>
配置
<title></title>網(wǎng)頁上面標(biāo)題
<meta charset="UTF-8">
</head>
<body style="css"> css的內(nèi)容
網(wǎng)頁內(nèi)容
</body>
<p>段落<\p>
<h1>標(biāo)題<h1>
<br>換行
&npsb；空格
文本格式化標(biāo)簽
<strong>
<em>斜體
<del>刪除線
<span style="">
圖片
<img src="路徑" alt="可替換文本" title="圖片上顯示字">
格式：jpg 有損壓縮 影響畫質(zhì) 小 不支持透明通道
png,無損壓縮支持透明通道
gif
網(wǎng)絡(luò)圖片<img src="網(wǎng)絡(luò)路徑">
本地圖片
絕對(duì)路徑比如（C:sytem\s\）
相對(duì)路徑 "../img/"
超鏈接：<a href="http//" target=“-black>
<img src="" alt="">跳到圖片
</a>
書記標(biāo)記：錨點(diǎn)
設(shè)置個(gè)錨點(diǎn)<a id="maodian">
點(diǎn)擊跳到這個(gè)錨點(diǎn) <a href="#idmaodian">
圖片的映射
<body>
<img src="圖片路徑" alt="" usemap="#01圖片">
<map name="01這張圖片">
<area shape="circle" coords="中心（X,Y），半徑" href="" alt="一鏈接">
<area shape="rect" coords="" href="左上方的坐標(biāo)（X,Y），右下角點(diǎn)的坐標(biāo)（X,Y）" alt="二鏈接">
</map>
列表
無序列表 ul+li 無順序關(guān)系
有序列表 ol+li 有順序關(guān)系
自定義列表 內(nèi)容標(biāo)題+內(nèi)容 列表 dl+dt+dd
<ul type="" \style="">改變前面的東西
<li></li>
</ul>
<ol>
<li></li>
</ol>
<dl>
<dt><dt>
<dl>
</body>
表格是由若干行組成的
<body>
<table>表格
<tr>行
<th></th>標(biāo)題
<td></td>內(nèi)容
</tr>
</body>
porder="1"表格的邊框
colspan 單元格可橫跨的列數(shù)
rowspan 單元格可橫跨的行數(shù)
表單
收集 用戶輸入 發(fā)送或者 提交給服務(wù)器
用戶輸入：
文本：普通 密碼
單選框
多選框
下拉框
提交：提交按鈕
http 超文本傳輸協(xié)議 瀏覽器和服務(wù)器的通訊
模式：請(qǐng)求-應(yīng)答 瀏覽器主動(dòng)發(fā)起請(qǐng)求-》服務(wù)器接收-》自生做處理-》結(jié)果返回瀏覽器-》瀏覽器根據(jù)結(jié)果展示出來
GET POST -->
<from action="" method="GET">action提交的頁面 GET放在瀏覽器的頭里默認(rèn)method不變化
<input type="text" name="usr">用戶的
<input type="password" name="pwd">
單選框 性別：<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女
復(fù)選框 興趣: <input type="checkbox" name="" >籃球
<input type="checkbox" name="" >足球
<input type="checkbox" name="" >排球
下拉框 城市: <select name="city">
<option value="">上海<\option>
<option value="">北京<\option>
</from>
布局
<body>
一般來說布局是先按功能分成好多小塊 排列好
<div > 容器 用來裝東西
</div>
布局div+css
table
frameset:管理后臺(tái)
iframe: 嵌套頁面
百度頁面：<iframe src="" frameborder="0" width="100%"></iframe >
騰訊頁面：<iframe src="" frameborder="0" width="100%"></iframe >
frameset:
</body>
可以實(shí)現(xiàn)局部刷新
<frameset rows="15%,85%">和body同級(jí)標(biāo)簽
<frame src=frame1.html>
<frameset cols="20%,80%">和body同級(jí)標(biāo)簽
<frame src=frame2.html>
<frame src=frame3.html>
<frame src=frame1.html>
</frameset>
嵌套規(guī)則
塊元素：獨(dú)立成一行 可以設(shè)置寬高 默認(rèn)寬高100%
{
文字類塊元素：p h1-h5
容器類塊元素：div table from ul li
}
行元素：不獨(dú)立成一行,不可以設(shè)置寬高 由內(nèi)容決定寬高
{ a img input strong em span del}
特殊字符：文字 br
嵌套規(guī)則
1.塊元素可以嵌套行元素
eg <div ><a href=""> 塊嵌套行</a></div>
2行元素可以嵌套行元素
< span ><strong>行嵌套行</ span ></strong>
3.行元素不可以嵌套塊元素
4.文字類元素不可以嵌套塊元素
5.容器類塊元素 可以嵌套塊元素
浙公網(wǎng)安備 33010602011771號(hào)