HTML 網頁構成 摘要說明 結構(HTML) HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。 表現(CSS) CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現 ...
| 說明 | |
|---|---|
| 結構(HTML) | HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。 |
| 表現(CSS) | CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。 |
| 行為(JavaScript / jQuery) | JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顏色改變。還有購物網站中圖片的輪換。可以這麼理解，有動畫的，有交互的一般都是用JavaScript來實現的 |
HTML文件結構
-
-
這裡<head>標簽用於定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script><style>、<link>、 <meta>等標簽。
-
在<body>和</body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽，在這裡的標簽中的內容會在瀏覽器中顯示出來。
標簽語法
-
-
html中的標簽一般都是成對出現的,分開始標簽和結束標簽。結束標簽比開始標簽多一個 / ,<title>..</title>;還有一些是自結束標簽，如：<br/>
-
標簽與標簽之間是可以嵌套的，但先後順序必須保持一致，如：<div>里嵌套<p>，那麼</p>必須放在</div>的前面。如： <div><p>..</p></div>
-
註釋是不可以嵌套的,如：<!-- <!-- 註釋部分 --> -->
-
HTML標簽不區分大小寫,<h1>和<H1>是一樣的,但萬維網聯盟（W3C）建議小寫。
| <h1>...</h1> | 標題 |
| <br /> | 換行 |
| <hr /> | 分割線 |
| <p>...</p> | 段落 |
| <span></span> | 行內 |
| <img src="" /> | 圖片 |
| <a href=""></a> | 超鏈接 |
| <ul>...</ul> | 無序列表 |
| <ol>...</ol> | 有序列表 |
| <li>...</li> | 列表項 |
| <table>...</table> | 表格 |
| <tr>...</tr> | 一行 |
| <td>...</td> | 一列 |
| <th>...</th> | 列標題 |
| <form>...</form> | 表單 |
| <input> | 輸入框 |
| <select>...</select> | 下拉列表 |
| <option>...</option> | 下拉選項 |
屬性
align="left" 【align="center"，align="right" 左中右】
style="background-color: red" 【樣式】
<img alt="載入失敗提示" src="../網路/本地路徑" border="邊框" width="100px" height="120" />【寬高只設置一項即可，另一項會自適應】
<a href="../網路/本地路徑" target="_self"> 【" target="_blank"在新視窗打開，預設原視窗打開】
列表
<ul type="square">
<li>...</li>
<li>...</li>
</ul>
在ul標簽中添加屬性 type="" circle 空心圓，disc 實心圓 (預設)，square 實心方塊
在ol標簽中添加屬性 type="1/a/A/i/I"
表格
<table>
<tr> 【行】
<th></th> 【標題列】
</tr>
<tr>
<td></td> 【列】
</tr>
</table>
table標簽中可以聲明的屬性
border="" 表格的邊框
width="" 表格的寬度
height="" 高度
align="" 表格的對其方式
bgcolor="" 背景顏色
td標簽內定義對齊方式的屬性
align="" 設置當前單元格水平對齊
valign="" 設置當前單元格垂直對齊
bgcolor="" 設置背景顏色
合併單元格
rowspan=" 合併單元格的個數 合併行
colspan=" 合併單元格的個數 合併列
表單
<form action="提交的路徑" method="get/post">
<input type="text" name="文本框" value="預設值"/>
<input type="password" name="密碼框" value="預設值"/>
<input type="radio" name="單選框" value="..." checked="預設選擇">
<input type="checkbox" name="覆選框" value="..." checked="預設選擇">
<select name="下拉列表">
<option value="china" selected="預設選擇">中國</option>
</select>
<input type="hidden" name="隱藏域" value="...">
<input type="button"name="button" value="普通按鈕">
<input type="reset" value="重置按鈕">
<input type="submit"name="提交按鈕" value="...">
</form>
-
-
post：將要提交的數據放在請求體中，在url表單裡面沒有任何數據
提交時以key:value形式，其中文本框、密碼框的key為name 值為提交數據
其中單選框、覆選框、隱藏域、提交按鈕key為name 值為value
下拉列表name在select標簽value在option標簽提交時同上key為name值為value
常規屬性
-
-
onclick: 滑鼠點擊
-
onbdclick: 雙擊
-
onmouseover: 滑鼠移動到元素上
CSS
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML元素（或內容）在瀏覽器內的顯示樣式
CSS樣式由選擇符(選擇器)和聲明組成，而聲明又由屬性和值組成
語法說明
-
-
多個聲明：如果要定義不止一個聲明，則需要用英文分號”;”將每個聲明分開。雖然最後一條聲明的最後可以不加分號，但儘量在每條聲明的末尾都加上分號
-
每行最好只描述一個屬性
-
CSS對大小寫不敏感，但建議使用小寫。不過存在一個例外：class 和 id 名稱對大小寫是敏感的。
-
CSS註釋：/* 註釋內容 */
方式一：寫在標簽的style屬性中
<p style=“font-size:30px”>字體大小用px表示</p>
方式二：寫在html頭的style標簽中(style標簽一般寫在head標簽與title標簽之間)
<style type="text/css"> p{ background-color: yellow; } </style>
方式三：寫在外部的css文件中，然後通過link標簽引入外部的css文件
<link rel="stylesheet" type="text/css" href="style.css">
優先順序按照上述講的三種方式依次降低
寬度：width：20px; 或 %20
高度：height：20px; 或 %20
背景顏色：background-color： #00F6DE
字體大小：font-size：20px;
文本居中：text-align：center;
div居中：margin-left：auto; margin-right：auto;
1px實線邊框：border：1px solid;
列表去修飾：ul{list-style：none;}
對於樣式暫時不考慮深入瞭解
