【2018-10-17】【web前端學習】【day1】
- Html：超文字標記語言
- Html的五個規範：
- 一個HTML檔案開始和結束的標籤。<html></html>
- HTML包含：<head></head> <body></body>
- HTML要有開始標籤，也要有結束標籤。
- HTML的程式碼不區分大小寫。
- 有些標籤沒有結束標籤，例如：換行<br/> 水平線<hr/>
- HTML操作思想*
網頁中有很多資料，不同的資料可能需要不同的顯示效果，這個時候需要用標籤把要操作的資料包起來，通過修改標籤屬性來實現標籤內資料樣式的變化。
一個標籤相當於一個容器，想要修改容器內資料的樣式，只需要改變容器的屬性值，就可以實現容器內資料樣式的變化。
- HTML中常用的標籤。
- 文字標籤和註釋標籤：
·文字：修改文字的樣式。
-<font></font>
-屬性：
·size：文字大小 （1-7）超出7還是預設7.
·color：顏色（十六進位制數）# （RGB）
·註釋：<!—文字-->（！是英文的感嘆號）
- 標題標籤：（自動換行）<h1></h1>
- 水平線標籤：<hr size=””/>
-屬性：size（水平線粗細） color
- 特殊字元 尖括號等特殊字元進行轉義：
< <
> >
空格
& &
- 列表標籤
<dl></dl>：列表的範圍
<dt></dt>：上層內容
<dd></dd>：下層內容（縮排）
如：
<dl>
<dt>科目</dt>
<dd>數學</dd>
<dd>語文</dd>
</dl>
有序列表：
<ol></ol>：範圍【屬性：type：1（預設） a i（羅馬數字）】
<li>具體內容</li>
<ul></ul>：無序列表的範圍
屬性：type：空心圓circle、實心圓disc、實心方塊square，預設是disc
Ul裡面 <li></li>
- 影象標籤
<img src=””/>
屬性：
·src：路徑
·width：寬度
·height：高度
·alt：圖片上顯示的文字（滑鼠移動到圖片上顯示）【相容性很差】
- 路徑
分類：
·絕對路徑（如：c:\…… http：\\）
·相對路徑：一個檔案相對於另外一個檔案的位置。
（1.圖片和html檔案在一個路徑下，可以直接寫檔名稱。
2.下層目錄裡：在html中使用img檔案中的a.jpg檔案：img\a.jpg
3.上層目錄裡：圖片和html檔案的關係：圖片在html所在目錄的上層目錄 ../c.png
4.上層的上層：../../）
- 超連結標籤
·超連結資源
<a href=””>文字</a>
target：設定開啟方式（預設是當前頁面開啟）：_blank、_self
<a href=”#”></a>（當超連結不需要到任何的地址時）
·定位資源
<a name=”top”>頂部</a>【先定義一個位置】
<a href=”#top”>回到頂部</a>
<pre></pre>原樣輸出【就是帶有縮排的那些】
【2018-10】
- 表格標籤
對資料進行格式化，使資料顯示更加清晰。
<table></table>：表格的範圍
table 裡面<tr></tr>(代表幾行)
tr裡面<td></td>（單元格[列]）
例：
cellspacing（單元格間隔）
<table border = “1” bordercolor=”white” cellspacing=”0” width=”400”height=”150”>
<tr align=”center”>
<td align=”right”>性別</td>
<td>年齡</td>
</tr>
<tr>
<td>女</td>
<td>18</td>
</tr>
</table>
th可以居中和加粗。
表格標題：<caption></caption>
- 合併單元格
rowsoan：跨行
<td rowspan=”3”>人員資訊</td>
colspan：跨列
<td colspan=”3”>人員資訊</td>
- 表單標籤【非常重要】（可以提交資料）
<form action=”路徑”></form>：定義一個表單的範圍
action是指提交到什麼頁面。
method表單提交方式：（常用兩種）get，post（預設get）
【get post區別：get請求位址列會攜帶提交的資料，post不會攜帶（請求體裡面。）
get請求安全級別較低，post較高。
get請求資料大小的限制，post沒有限制。】
·enctype：一般請求下不需要這個屬性，做檔案上傳的時候需要設定。
·輸入項：<input type=”輸入項的型別”/>
·普通：<input type=”text”/>
·密碼：<input type=”password”/>
·單選輸入項：<input type=”radio”name=”sex”/>女<input type=”radio”name=”sex”/>男
【屬性：checked=”checked” 表示預設選擇】
【屬性：name（屬性值要一樣）】
·複選輸入項：<input type=”checkbox”/>
·檔案輸入項：<input type=”file”/>
·下拉輸入項（不是在input裡）
<select name=”birth”>
<option value=”1991”select=”selected”>請選擇</option>
<option value=”1991”>1991</option>
</select>
·文字域：
<textarea cols=”10” rows=”10”></textarea>
·隱藏項：
<input type=”hidden”/>
·提交按鈕：
<input type=”submit” value=”註冊”/>
【輸入項裡需要一個name屬性，單選裡需要一個values來判斷是什麼內容】
·使用圖片提交按鈕：<input type=”image” src=”a.jpg”/>
·重置按鈕
<input type=”reset” value=”重置”/>
·普通按鈕
<input type=”button”/>
- 其他
b：加粗
s：刪除線
u：下劃線
i：斜體
pre：原樣輸出
sub：上標 例如：3<sub>100</sub>
sup：下標
p：段落（比br標籤多一行）
div：【自動換行】
span：【一行顯示】
- html頭標籤
head裡的標籤。
·title
·meta標籤：設定頁面相關內容。
·base標籤：設定超連結基本屬性。
例如：<base target=”_blank”/>
·link：引入外部檔案。
- 框架標籤
<frameset rows=”80,*”>（劃分為上下兩部分）
<frame name=”lower_left” src=”a,html”>
框架標籤不能寫在body標籤裡。
案例：（點選2中的內容，在1中會產生相應的頁面）
<frameset rows=”8,*”><!--把頁面劃分為上下兩部分-->
<frame name=”top” src=”a.html”><!--上下頁面-->
<frameset cols=”150,*”><!--把下面的部分劃分為左右-->
<frame name=”lower_left”src=”b.html”><!--左邊的頁面-->
<frame name=”lower_right”src=”c.html”><!--右邊的頁面-->
</frameset>
</frameset><frameset rows=”8,*”>//把頁面劃分為上下兩部分
<frame name=”top” src=”a.html”>//上下頁面
<frameset cols=”150,*”>//把下面的部分劃分為左右
<frame name=”lower_left”src=”b.html”>//左邊的頁面
<frame name=”lower_right”src=”c.html”>//右邊的頁面
</frameset>
</frameset>
·要實現點選2中的超連結在1中展示出來，要在超連結的標籤里加入：<a harf =”a.html” target=”right”>