因爲是第一次寫博客，而之前慕課網關於【HTML+CSS】的課程已經看了一部分，所以就一次性寫在該博客下。
-----------------------------------------------------------------------分割線--------------------------------------------------------------------------------------
web前端開發基礎技術需要掌握：HTML、css、JavsScript語言。
1.HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的語言，可以包含文字、圖片、視頻等。
2.CSS樣式是表現，就像網頁的外衣。比如標題字體、顏色變化，或爲標題加入背景圖片邊框等、所有這些用來改變內容外觀的東西稱之爲表現。
3.JavaScript是用來實現網頁上的特效效果。
一.認識HTML標籤
平常所說的上網就是瀏覽各種各式各樣的網頁，這些網頁都是由HTML標籤組成。
標籤的語法
1.標籤：由英文尖括號<和>括起來
2.html中的標籤一般都是成對出現的，分開始標籤和結束標籤。結束標籤比開始標籤多了一個/
如<p></p> <div></div>
3.標籤與標籤之間 是可以嵌套的，但先後順序必須一致。如<div>裏嵌套<p>，那麼</p>必須放在</div>前。
如<div><p>...</p></div>
4.HTML標籤不區分大小寫，但建議小寫。
二.認識HTML文件基本結構
1.一個html文件是有自己固定的結構的
如： <html>
<head></head>
<body></body>
</html>
2.代碼講解：
⑴<html></html>稱爲根標籤，所有的網頁標籤都在<html></html>中。
⑵<head>標籤用於文檔的頭部，它是所有頭部元素的容器。頭部元素有<title><script><style><link><meat>等標籤。
⑶在<body>和</body>標籤之間的內容是網頁的主要內容。如<h1><p><a><img>等網頁的內容標籤，在這裏的標籤中的內容會在瀏覽器中顯示出來。
三.認識head標籤
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等，絕大多數文檔包含的數據都不會真正作爲內容顯示出來。
1.以下這些標籤可以用到head部分·：
<head>
<title>...</title>
<meat>
<link>
<style>...</style>
<script>...</script>
</head>
2.<title>標籤：<title>和</title>標籤之間的內容是網頁的標題信息。它會出現在瀏覽器的標題欄中。網頁的title標籤用於告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
三.代碼註釋
代碼註釋的作用是幫助程序員標註代碼的用途。代碼註釋不僅方便程序員自己回憶起以前的代碼的用途，還可以幫助其他人很快的讀懂其編寫程序的功能，方便多人合作開發網頁代碼。
語法：<!------註釋文字------->
注意：註釋代碼是不會在結果窗口中顯示出來的。
四.語義化，讓你的網頁更好的被搜索引擎理解
重點：1.標籤的用途 ：明白每個標籤的用途，也就是在什麼樣的情況下使用哪些標籤纔是合理的。比如文章的標題就可以用標題標籤去實現，文章中段落的內容就得放在段落標籤中。
2.標籤在瀏覽器中的默認樣式：明白每個標籤的用途（在什麼情況下用到什麼標籤），比如文章的標題就要用到標題標籤，文章中的段落就要放在段落標籤裏。
五.Body標籤---網頁上顯示的內容放在這裏
在網頁 上展示出來的頁面內容一定要放在body標籤裏。
語法：<body>...</body>
六.<p>標籤---添加段落標籤
如果想在網頁上顯示文章，這時就需要<p>標籤，把文章的段落放在p標籤裏。
語法：<p>段落文本</p>
注意：一個段落一個p標籤。
p標籤默認樣式：段前段後都會有空白。
七.<hx>標籤----標題標籤
使用<hx>標籤來製作文章的標題
標題標籤一共有6個：h1,h2,h3,h4,h5,h6。分別爲一到六級標題，並且依據重要性遞減，h1是最高等級。
語法：<hx>...</hx>(x爲1到6)
注意：標題標籤默認樣式是加粗的，1的字號最大。
八.加強語氣標籤,
如果要對某幾個文字需要強調，就結餘用到<strong>/<s>或<em>/<i>標籤
區別：strong/s默認加粗，em/I默認傾斜
九使用span標籤爲文字設置單獨樣式
可以用<span>單獨設置樣式。
語法：<span>文本</span>
十.<q>標籤----短文本引用
如果要在網頁中引用別人的語言，就要用到<q>標籤。
語法：<q>引用文本</q>
注意：.要引用的文本不用加雙引號，瀏覽器會對q標籤自動添加雙引號。
十一.<block quote>----長文本引用
語法：<block quote>引用文本</block quote>
注：瀏覽器對<block quote>標籤的解析是縮進樣式。
十二..爲網頁添加空格
語法：
注：在HTML代碼中輸入空格是不起作用的。
十三.br標籤---分行顯示文本
在需要換行的地方輸入<br />。
語法：<br />
注意：1.br標籤是空標籤，標籤中沒有內容的標籤就是空標籤。空標籤只需要寫一個開始標籤。
2.HTML中是忽略回車的，換行必須用br標籤。
十四.hr標籤---添加水平橫線
加用於分隔的橫線，會使文章看起來更加整齊。
語法:<hr />
注意：1.hr標籤也是空標籤，只有開始標籤、
2.默認樣式：線條較粗，顏色爲灰色。
十五.address標籤---爲網頁加入地址信息
一般網頁中聯繫地址用<address>標籤。
語法：<address>聯繫地址信息</address>
注意：默認樣式爲斜體。
十六.code標籤---加入一行代碼
如果要在網站上展示一行代碼，可以用到<code>標籤。
語法：<code>代碼語言</code>
注意：只能用於一行代碼
十七.pre標籤---加入一段代碼
當網頁需要大量代碼時，可以用到<pre>標籤。
語法:<pre>...</pre>
特性：被包圍在pre元素中的文本通常會保留空格和換行符。
十八.使用ul標籤----無序標籤
語法：<ul>
<li>信息</li>
<li>信息</li>
</ul>
特性：1.ul是沒有前後順序的列表，稱爲無序列表
2.默認樣式：每項前自帶一個圓點。
3.共三種樣式:<ul type="disc(實心圓點) square（實心方塊) circle(空心圓)">
十九.使用ol標籤-----有序標籤
語法：<ol>
<li>信息</li>
<li>信息</li>
</ol>
特性：1.ol是有順序排列的，稱爲有序列表
2.默認樣式：每項li前自帶序號，默認從1開始。
3.共五種樣式：<ol type="1|a|A|i|I" start="X(只能是數字)">
二十.使用dl標籤---自定義標籤
語法：<dl>
<dt>
<dd></dd>
</dt>
</dl>
注意：1.dt是定義列表項使用，dd是對列表項的描述。
二十一.認識div在排版中的作用
在網頁製作過程中，可以把一些獨立的邏輯部分劃出來，放在一個div標籤中，這個div標籤的作用就相當於一個容器。
語法:<div>...</div>
邏輯部分：頁面上相互關聯的一組元素，如網頁中獨立的欄目模塊，就是一個獨立的邏輯部分。
二十二.給div命名，使邏輯更加清晰
爲了使邏輯更加清晰，可以爲一個獨立的邏輯部分設置一個名稱，用id屬性來爲div提供唯一的名稱
語法:<div id="模塊名稱">..</div>
二十三.table標籤----網頁上的表格
1.要素:table,tr,th,td
2.特性：表格的標籤均爲雙標記標籤
⑴<table>：整個表格以<table>開始，</table>結束
⑵<tr>：表示表格中的一行
⑶<td>:表示一行中的一個單元格
⑷<tbody>:等表格內容全部下載完顯示
⑸<th>:表格表頭，默認粗體並居中。
3.表格中用到的一些屬性標籤
⑴邊框 ：border邊框線（單位：數字）bordercolor=“邊框線顏色”
⑵高和寬：高height寬width。兩種值百分比%和像素px
⑶水平位置：align="center居中left靠左right靠右"
⑷垂直位置：默認居中。valign="top上bottom靠下"
⑸背景：bgcolor背景顏色 background背景圖片
⑹合併：cellspan合併行中的單元格rowspan合併列中的單元格。最少爲2個單元格。
⑺間距：cellspacing外間距（單元格與單元格之間的距離）cellpadding內間距（單元格與文字的距離）
⑻默認：外間距默認2px，邊框線默認1px
二十四.爲表格添加表格和摘要
1.摘要：不會在瀏覽器中顯示出來。作用是增加表格的可讀化。
語法:<table summary="表格輸入文本">
2.標題：用以描述表格的內容
⑴位置：默認文本位置爲表格上方。默認水平位置爲居中
⑵語法：<table>
<caption>標題文本</caption>
二十五.Img標籤---爲網頁插入圖片
1.語法：<img src="圖片地址" alt="圖片下載失敗的替換文本" title="提示文本">
2.講解：
⑴src:標示圖像的位置。
⑵alt:當圖片下載失敗時，可看到該屬性指定文本
⑶title：鼠標滑過圖片時顯示的文本
3.圖片常用格式：jpg,gif,png,jpeg
4.圖片邊框：border
5.插入分層路徑的圖片：文件夾名/圖像地址
6.插入不同路徑（不同盤）的圖片：.../文件夾名/圖像地址（分幾個文件夾，就需要輸入../，一個../表示返回上一層路徑）