公司網(wǎng)站建設和推廣無代碼網(wǎng)站開發(fā)平臺
什么是WEB前端？
簡單來說就是網(wǎng)頁，只是這個網(wǎng)頁它是由多種技術參與制作的，用來向用戶展示的頁面。
-
HTML(超文本標簽語言)：它決定了網(wǎng)頁的結構。
-
CSS：網(wǎng)頁的裝飾器。
-
JavaScript：JavaScrip最初是因為校驗而產(chǎn)生的。（數(shù)據(jù)交互、網(wǎng)頁特效）
第一款瀏覽器MOSIAC
第一款商用的瀏覽器是netscape（網(wǎng)景）的navigator（導航者）
W3C制定了web的相關規(guī)范。
一、HTML的運行環(huán)境和開發(fā)環(huán)境
開發(fā)環(huán)境只需要一個記事本即可
運行環(huán)境只需要有瀏覽器即可
二、標簽的語法結構
結構：<標簽 屬性=“屬性值”>?? 內(nèi)容部分或稱區(qū)域?? </標簽結束>
1、標簽大多成對出現(xiàn)又開始<>和結束</>。（自結束標簽除外）
2、標簽內(nèi)可以有屬性，有屬性必有值。（布爾型屬性除外如muted）
3、開始和結束標簽之間包含的內(nèi)容被稱為區(qū)域。
4、標簽不區(qū)分大小寫。
三、頁面的分類
靜態(tài)頁面：是指不修改網(wǎng)頁源碼的前提下，無論何時何地去訪問都會得到同樣的結果。
動態(tài)頁面：網(wǎng)站會根據(jù)信息做出的實時反饋。例如注冊，論壇等等。
四、常用標簽
（一）head中常用標簽
1、<meta>標簽
charset屬性：用來設置頁面的編碼方式（常見編碼有GBK,UTF-8,BIG,bg2312）；
name屬性：可以有keyword，description，這兩個屬性可以影響到網(wǎng)頁的排名。
2、<title>標簽
用來定義頁面的主體，影響選項卡顯示的內(nèi)容。
（二）body中的常用標簽
| <b> | 加粗 | <div> | 塊標簽 |
| <strong> | 加粗 | <span> | 行內(nèi)標簽 |
| <i> | 斜體 | <pre> | 格式化標簽 |
| <em> | 斜體 | <sup> | 上標簽 |
| <u> | 下劃線 | <sub> | 下標簽 |
| <del> | 中劃線 | <hr> | 加一條灰線 |
| <br> | 換行 | <h1、h2、、、> | 逐漸變小的字體 |
| <p> | 段落 | <small> | 比前面的字體更小 |
（三）特殊符號
五、多媒體標簽
（一）圖片標簽
格式：<img? ?src="資源路徑"? alt=“資源不存在時顯示的內(nèi)容”>
（路徑填寫方式：絕對路徑、相對路徑、網(wǎng)絡路徑）
圖片的格式都有哪些
1、jpg：現(xiàn)在多為無損格式，并且它是不支持透明通道。
2、png：無損格式，并且它支持透明通道。
3、bmp：無損，支持透明，體積大。
4、gif：動圖，只支持256色
（二）視頻標簽
格式：<video? ? src="day1.mp4"? ? controls="controls">
屬性：
| controls | 顯示控制界面 |
| autoplay | 自動播放，但要在開啟mutde的前提下 |
| width=“800” | 設置寬度為800px |
| loop | 自動循環(huán)播放 |
| muted | 靜音 |
（三）音頻標簽
格式：<audio? ? ? src="./歌.mp3"? ? controls="controls" >
（屬性與視頻標簽一致）
六、表格標簽
表格標簽：是由table、tr、td三個標簽構成，同時可以使用語義化標簽thead、tbody、tfoot進行規(guī)劃。
（一）表格的合并
行合并：rowspan屬性用于進行表格的行合并
列合并：colspan屬性用于進行表格的列合并
（二）表格的背景
設圖片為背景：<table? background="圖片路徑”>
設置背景底色：<table? bgcolor=“#ccc”> (#ccc的背景為灰色）
七、超鏈接標簽
1、格式：<a? ?href="超鏈接"?>? ?顯示的內(nèi)容? ?</a>
2、屬性：
href：所需要跳轉(zhuǎn)的網(wǎng)頁鏈接
target：為_blank的時候 跳轉(zhuǎn)的網(wǎng)頁會新建選項卡
錨鏈接
<a? ?id="top"? href="#bottom">? ?跳到底部? </a>
<a?? id="bottom"??href="#top">? ?回到頂部? </a>
熱區(qū)超連接
一個圖片多個鏈接，可將分割出多個鏈接區(qū)域，每個區(qū)域叫一個熱區(qū)。
?<img src="images/china.jpg" usemap="#Map">?
? ? ? ? <map name="Map">?
? ? ? ? ? ? <area shape="rect" coords="456,251,485,319" href="shaanxi.html"> #矩形
? ? ? ? ? ??
? ? ? ? ? ? <area shape="circle" coords="402,299,23" href="shanxi.html"> #圓形
? ? ? ? ? ??
? ? ? ? ? ? <area shape="poly" coords="400,365,446,268,446,381" href="ningxia.html"> #多邊形
? ? ? ? </map>
八、相關練習
練習1：
練習1代碼：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>工商銀行匯款單</title></head><body><h2>工商銀行電子匯款單</h2><table border="1" witch=1000 cellpadding=0 cellspacing=0 ><thead><tr><td colspan="2"><b>回單類型</b></td><td >網(wǎng)上轉(zhuǎn)賬匯款</td><td colspan="2"><b>指令序號</b></td><td>HQH00000000000000013878172</td></tr></thead><tbody><tr><td rowspan="4"><b>收<br>款<br>人</b></td><td>戶名</td><td>老牟</td><td rowspan="4"><b>付<br>款<br>人</b></td><td>戶名</td><td>老劉</td></tr><tr><td><b>卡號</b></td><td>000000000001</td><td><b>卡號</b></td><td>000000000002</td></tr><tr><td>地區(qū)</td><td>南京</td><td>地區(qū)</td><td>杭州</td></tr><tr><td><b>網(wǎng)點</b></td><td>工商江蘇南京業(yè)務處理中心</td><td><b>網(wǎng)點</b></td><td>江蘇徐州業(yè)務中心</td></tr><tr><td colspan="2"><b>幣種</b></td><td>人民幣</td><td colspan="2"><b>鈔匯標志</b></td><td>鈔票</td></tr><tr><td colspan=2""><b>金額</b></td><td>1.00元</td><td colspan="2"><b>手續(xù)費</b></td><td>0.57元</td></tr><tr><td colspan="2"><b>合計</b></td><td colspan="4">人民幣（大寫）：壹圓整</td></tr></tbody><tfoot><tr><td colspan="2"><b>交易時間</b></td><td>2017年6月1日</td><td colspan="2"><b>時間戳</b></td><td>2017-06-01-13.00.00。00000</td></tr></tfoot></table>票據(jù)打印時間：2017-06-01 15:00:12<br><del>票據(jù)打印單位：江蘇徐州業(yè)務中心</del><br>操作員：大曾</body>
</html>練習2：
?練習2代碼：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>李白詩詞</title></head><body><h2>將進酒 <small> 君不見黃河之水天上來</small></h2><table><tr><td><img src="21.jpg" alt="李白"/></td><td><pre>
君不見，黃河之水天上來，奔流到海不復回。<br />
君不見，高堂明鏡悲白發(fā)，朝如青絲暮成雪。<br />
人生得意須盡歡，莫使金樽空對月。<br />
天生我材必有用，千金散盡還復來。<br />
烹羊宰牛且為樂，會須一飲三百杯。<br />
岑夫子，丹丘生，將進酒，杯莫停。<br />
與君歌一曲，請君為我傾耳聽。<br />
鐘鼓饌玉不足貴，但愿長醉不愿醒。<br />
古來圣賢皆寂寞，惟有飲者留其名。<br />
陳王昔時宴平樂，斗酒十千恣歡謔。<br />
主人何為言少錢，徑須沽取對君酌。<br />
五花馬，千金裘，<br />
呼兒將出換美酒，與爾同銷萬古愁。<br /></pre></td></tr></table></body>
</html>練習3：
?練習3代碼：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>熱門電影板塊</title></head><body><h3>熱門電影板塊</h3><hr><table width=800><tr><td width=150><b>最近熱門電影</b></td><td width=50>熱門</td><td width=50>最新</td><td width=80>豆瓣高分</td><td width=80>冷門佳片</td><td width=50>華語</td><td width=50>歐美</td><td width=50>韓國</td><td width=130>日本</td><td>更多>></td></tr></table><hr><table><tr><td><img src="31.jpg"/></td><td><img src="32.jpg"/></td><td><img src="33.jpg"/></td><td><img src="34.jpg"/></td></tr><tr><td>猜火車 8.1</td><td>貝爾科實驗 6.0</td><td>加州公路巡警 6.8</td><td>歌聲不絕 6.3</td></tr><tr><td><img src="35.jpg"/></td><td><img src="36.jpg"/></td><td><img src="37.jpg"/></td><td><img src="38.jpg"/></td></tr><tr><td>明日的我與昨日的我</td><td>速度與激情8</td><td>極速特工</td><td>金剛狼3：殊死一戰(zhàn)</td></tr></table></body>
</html>都看到這里了，創(chuàng)作不易，大家點個贊再走唄！！！- ??(?????)