- 了解并體驗(yàn)代碼實(shí)現(xiàn)原理
- 便于團(tuán)隊(duì)溝通甸私，配合
- 學(xué)會(huì)簡(jiǎn)單頁(yè)面的制作
- 初識(shí)Dreamweaver
初識(shí)HTML
HTML：Hyppertext Marked Language,超文本標(biāo)記語(yǔ)言
CSS：Cascading Style SHEETS 層疊樣式表
JS：Java Scrip 腳本語(yǔ)言酒甸。
常用開(kāi)發(fā)工具
- 記事本（過(guò)于簡(jiǎn)單，效率低和慢）
- Dreamweaver（所見(jiàn)即所得）
- sublime text
- 其他..
要改變一些字體大小或顏色等等的參數(shù)慌植，在首選參數(shù)里面修改。
HTML基本結(jié)構(gòu)
下面這些都是基本結(jié)構(gòu)，是必須要有的部分~
如果沒(méi)有編碼格式葛超，打開(kāi)之后會(huì)是一堆亂碼瓢姻，國(guó)際形式（utf-8）
注意：代碼寫(xiě)好之后祝蝠，保存的時(shí)候不能亂保存，所以保存之前先做一個(gè)準(zhǔn)備工作幻碱，建立一個(gè)文件夾起好名字绎狭。將自己寫(xiě)好的代碼保存的時(shí)候，要起英文的名字褥傍，比如首頁(yè)的代碼保存的時(shí)候應(yīng)該命名為：index.html
注意事項(xiàng)：
- 不區(qū)分大小寫(xiě)儡嘶，建議用小寫(xiě)
- 屬性值建議加雙引號(hào)
- 標(biāo)簽可以嵌套使用，按<Tab>
- 注釋
- 擴(kuò)展名：.html
常用標(biāo)簽
雙標(biāo)簽
- <p> 段落里面的內(nèi)容寫(xiě)在這里 </p>
- <h1> 文章內(nèi)容的一級(jí)標(biāo)題寫(xiě)在這里 </h1>
- <h2> 文章內(nèi)容的二級(jí)級(jí)標(biāo)題寫(xiě)在這里 </h2>
- <h3> 文章內(nèi)容的三級(jí)標(biāo)題寫(xiě)在這里 </h3>
- 以此類(lèi)推....
-
換行恍风，這里是個(gè)單標(biāo)簽 - <img>圖片蹦狂，這里是個(gè)單標(biāo)簽
在建好的文件夾里，再建一個(gè)名字為images的文件件朋贬，專(zhuān)門(mén)放圖片（所有圖片都要用英文來(lái)命名凯楔，其實(shí)所有的有關(guān)文件都要用英文命名）
-
<img>圖像
<img src=“images/圖片英文名稱.jpg” width=“圖片寬度" height=“400” alt=“UI課堂logo”/> alt后面跟的中文，起到一個(gè)說(shuō)明的作用锦募，比如在圖片沒(méi)有加載出來(lái)之前摆屯，會(huì)顯示這個(gè)文字，能讓用戶提前知道這個(gè)將要加載出來(lái)的圖片
- <ul>
<li>無(wú)序列表</li>
</ul>
<ol>
<li>有序列表</li>
</ol>
<a></a>超鏈接
<colgroup><col style="width: 168px;"><col style="width: 147px;"></colgroup>
比如：<a href=“需要跳轉(zhuǎn)的網(wǎng)頁(yè)名" > 可點(diǎn)擊的文字</a>
錨點(diǎn)鏈接
應(yīng)用：長(zhǎng)頁(yè)面（如：百度百科糠亩、單頁(yè)網(wǎng)站）
方法：
- 建立錨點(diǎn)<a name=“l(fā)ink1”>目標(biāo)位置</a>
- 制作鏈接<a href=“#link1”>點(diǎn)擊文本</a>
其實(shí)就是簡(jiǎn)歷一個(gè)快速引導(dǎo)鸥拧，當(dāng)頁(yè)面比較長(zhǎng)的時(shí)候使用的党远。
CSS樣式基礎(chǔ)
內(nèi)嵌樣式 加載head區(qū) <style>…..</style>
<colgroup><col style="width: 130px;"><col style="width: 130px;"><col style="width: 130px;"></colgroup>
表示顏色的方法：
- h1{color:#096CFF;}
- h1{color:red;} h1{color:blue;}
- h1{color:rgb（200，30富弦，10;}
- h1{color:reba（200沟娱，30，10腕柜，0.5;} 注意：a是不透明度济似，值在0~1之間。
-
標(biāo)題標(biāo)簽內(nèi)的字體都是默認(rèn)加粗的
圖片.png
<colgroup><col style="width: 148px;"><col style="width: 184px;"></colgroup>
鼠標(biāo)懸停時(shí)候的效果：下面設(shè)置了顏色和下劃線
text-decoration:none;/去除鏈接文本中的下劃線/
CSS中注釋?zhuān)?注釋內(nèi)容/
