更新時間：2019-11-27有人說：學(xué)網(wǎng)頁制作先從PS制作效果圖學(xué)起，有人說從DW學(xué)起，眾說風(fēng)云！而我認為學(xué)習(xí)網(wǎng)頁制作一定要從html標(biāo)簽和CSS學(xué)起，因為網(wǎng)頁制作的核心就是html標(biāo)簽加上CSS，像dreamweaver只是一個開發(fā)工具，不建議一開始就先學(xué)習(xí)怎么去使用。只要你把核心學(xué)會了，利用記事本照樣也能寫網(wǎng)頁。想必大家都知道哪個更加重要了，那么要學(xué)習(xí)做網(wǎng)站要從哪些技術(shù)著手呢？
(一)html標(biāo)簽部分
我們都知道html標(biāo)簽大大小小有幾十個標(biāo)簽，而在我們實際開發(fā)中過程中，卻只用到有十多個標(biāo)簽。所以我建議先學(xué)習(xí)常用的一些標(biāo)簽，然后在逐漸深入學(xué)習(xí)其它標(biāo)簽。
比如：p標(biāo)簽--->表示一個段落
h標(biāo)簽--->標(biāo)題標(biāo)簽
網(wǎng)頁中一般只用：h1、h2、h3這個三個標(biāo)簽。并且h1標(biāo)簽在一個網(wǎng)頁中有且只有一個，一般用于網(wǎng)頁的標(biāo)題。
div標(biāo)簽--->可以理解為盒子容器
a標(biāo)簽--->鏈接標(biāo)簽
比如要跳轉(zhuǎn)到百度<a href="www.baidu.com">百度</a>
img標(biāo)簽--->在網(wǎng)頁中引用圖片
比如我要鏈接一張圖片：<img src="圖片地址" width="" height="" alt=""/>
注：假設(shè)有一張1.jpg的圖片，若該網(wǎng)頁和圖片在同一級目錄，那么地址為：src="1.jpg"。
如果在某個文件夾下，就在前面加該文件名稱，有多少層級加多少。依次類推。比如圖片在images文件夾下，那么地址就為：src="images/1.jpg"。
br標(biāo)簽--->換行
span標(biāo)簽--->行內(nèi)標(biāo)簽
strong標(biāo)簽--->加粗效果，強調(diào)定義的文本內(nèi)容很重要。
table--->表格標(biāo)簽
定義一個表格里面有tr標(biāo)簽（行）td標(biāo)簽（列）th標(biāo)簽（一般用于表格的標(biāo)題）
ul--->無序列表
ol--->有序列表
(二)CSS部分
CSS（層疊樣式表）可以理解成人穿的衣服。只要更換CSS，就相當(dāng)于給網(wǎng)頁換了一套漂亮衣服。在CSS部分，我覺得有以下幾個知識點需要注意：
(1)CSS語法
(2)CSS的幾種引用方式
1.行內(nèi)樣式
比如：<p style="width:120px;height:30px;border:1px solid red;"></p>
2.內(nèi)嵌樣式
比如：<style>
p{width:120px;height:30px;border:1px solid red;}
</style>
3.外部引用樣式
<link rel="stylesheet" type="text/css" href="樣式列表地址">
<style type="text/css">@import url("樣式列表地址");></style> 這種基本很少用
(3)CSS選擇器
1.標(biāo)簽選擇器
html標(biāo)簽：比如：P標(biāo)簽 div標(biāo)簽 span標(biāo)簽....
p{color:red;}
2.Class選擇器
以"."開頭的為Class選擇器 .p{color:red;}
3.ID選擇器
以"#"開頭的為ID選擇器，一般來說，一個ID選擇器在一個頁面中具有唯一性，有且只存在一次。
#p{color:red;}
(4)理解：浮動和清除浮動以及定位
其實我覺得在CSS中只有兩點需要重點去理解：一是：浮動和清除浮動。二是：定位。只要你深刻明白這點兩點了，我相信CSS部分應(yīng)該沒有多大難題。
為什么這么說呢？因為接觸很多新手朋友們，大多數(shù)都不理解為什么用了浮動后又要"清除浮動"，以及這清除浮動的含義是什么。
其實用清除浮動主要是為了防止網(wǎng)頁產(chǎn)生一些異常的小BUG，比如：網(wǎng)頁錯位。相信很多人新手朋友都遇到過這樣的問題：“為什么我的網(wǎng)頁會錯位啊，沒有按正常情況下布局擺放”。
其實這類情況，大多數(shù)都是為清除浮動產(chǎn)生的，由此可見“清除浮動的重要性”。
在定位方面：一定要理解三種定位的含義：相對定位（position:relative）絕對定位（position:absolute）還有position:fixed相對于瀏覽器定位。
其中我覺得最需要理解的是絕對定位，因為絕對定位是相對于某個元素來定位的。比如說：
<html>
<body>
<div id="box">
<p style="position:absolute;top:100px;left:200px;">我是絕對定位哦！</p>
</div>
</body>
</html>
思路：如果給一個元素絕對定位，那么它就會向外層一直尋找相對定位。如果找到有個地方用了相對定位，則相對于它定位。如果都沒有找到。則相對于瀏覽器來定位。由此可見P元素是相對于瀏覽器來定位的，因為他的父級DIV沒有相對定位。
（三）布局
其實布局，就是把一個個DIV模塊組合起來，利用CSS來布局。
（四）關(guān)于JS特效（javascript/jquery）
關(guān)于javascript和jquery的學(xué)習(xí)，我覺得前期新手沒必要去深入學(xué)習(xí)，只需要會使用這些特效就行。如果以后走web前端這塊發(fā)展的話，我建議去了解學(xué)習(xí)javascript，重點去學(xué)習(xí)jquery。因為jquery是基于javascript開發(fā)出來的一個類庫，比較容易上手，有良好的文檔和幫助手冊�？梢杂酶俚拇a，完成更多的功能。
