前端（二）

時間 2019-11-08

標籤前端简体版

原文原文鏈接

一前言

上一篇講解了html的組成，標籤和屬性的語法，html的結構，標籤的分類，圖片標籤和超連接標籤等，這一篇咱們繼續學習標籤。php

二列表標籤

2.1無序列表

無序列表<ul>，無序列表中的每一項是<li> 英文單詞解釋以下： ul：unordered list，「無序列表」的意思。 li：list item，「列表項」的意思。如：css

<ul>
	<li>默認1</li>
	<li>默認2</li>
	<li>默認3</li>
</ul>複製代碼

tips：html

li不能單獨存在，必須包裹在ul裏面；反過來講，ul的「兒子」不能是別的東西，只能有li。
咱們這裏再次強調，ul的做用，並非給文字增長小圓點的，而是增長無序列表的「語義」的。
li又是一個塊級容器標籤，能夠聽任何標籤，包括ul。

<ul>、<li>都有屬性type。屬性值能夠選： disc(實心原點，默認)，square(實心方點)，circle(空心圓)。而且項目符號能夠是圖片，須要用css去設置（css中講）瀏覽器

2.2有序列表

有序列表<ol>，裏面的每一項是<li> 英文單詞解釋以下：Ordered List，有序列表的意思。 li：list item，「列表項」的意思。如
bash

<ol >
	<li>呵呵噠1</li>
	<li>呵呵噠2</li>
	<li>呵呵噠3</li>
</ol>複製代碼

tips：ol和ul就是語義不同，怎麼使用都是同樣的。 ol裏面只能有li，li必須被ol包裹。li是塊級容器標籤服務器

屬性：type="屬性值"。屬性值能夠是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始框架

2.3定義列表

定義列表<dl>,裏邊的每一項是<dt><dd>。英文單詞以下：definition list。沒有屬性。post

<dt>：definition title 列表的標題，這個標籤是必須的
<dd>：definition description 列表的列表項，若是不須要它，能夠不加

tips：學習

dt、dd只能在dl裏面；dl裏面只能有dt、dd。
dt、dd都是塊級容器標籤，想放什麼均可以。

三表格標籤

表格標籤用<table>表示。一個表格<table>是由每行<tr>組成的，每行是由每一個單元格<td>組成的。因此咱們要記住，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。在之前，要想固定標籤的位置，惟一的方法就是表格。如今能夠經過CSS定位的功能來實現。可是如今在作頁面的時候，表格做用仍是有一些的。
ui

<table>
		<tr>
			<td>生命壹號</td>
			<td>23</td>
			<td>男</td>
			<td>黃岡</td>
		</tr>

		<tr>
			<td>許嵩</td>
			<td>29</td>
			<td>男</td>
			<td>安徽</td>
		</tr>

		<tr>
			<td>鄧紫棋</td>
			<td>23</td>
			<td>女</td>
			<td>香港</td>
		</tr>

	</table>複製代碼

<table>屬性：

border：指的是表邊線和每一個單元格線寬度
style="border-collapse:collapse;"：相鄰線之間合併爲一條樣式
width：整個表的寬度
height：整個表的高度，通常不設置，而是設置每一行的高度
bordercolor：指的是表邊線和每一個單元格線的顏色
align：整個表的對齊方式。屬性值能夠填：left right center。
bgcolor="#99cc66"：整個表的背景顏色
background="路徑src/..."：背景圖片。背景圖片的優先級大於背景顏色。
dir：公有屬性，單元格內容的排列方式(direction)。能夠取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）既然說dir是共有屬性，若是把這個屬性放在任意標籤中，那代表這個標籤的位置可能會從右開始排列。

<tr>屬性

dir：公有屬性，同上
bgcolor：設置這一行的單元格的背景色。注：沒有background屬性，即：沒法設置這一行的背景圖片，若是非要設置，能夠用css實現。
height：一行的高度
align="center"：一行單元格內容水平居中顯示，取值：left、center、right。默認是left
valign="center"：一行單元格內容垂直居中，取值：top、middle、bottom。默認是middle

<td>屬性

bgcolor：設置單元格的背景色。

align="center"：單元格內容水平居中顯示，取值：left、center、right。默認是left
valign="center"：單元格內容垂直居中，取值：top、middle、bottom。默認是middle

background="路徑src/..."：單元格背景圖片。
widt：單元格寬度
height：單元格的高度
rowspan：當前單元格垂直方向佔據兩個位置
colspan：當前單元格在水平方向佔據兩個位置

其餘標籤：

<th>標籤至關於<td> + <b>+align="center"

<caption>標籤標題標籤，和tr並列。屬性：align相對於整個表的位置。

<thead>標籤、<tbody>標籤、<tfoot>標籤。若是寫了，那麼這三個部分的代碼順序能夠任意，瀏覽器顯示的時候仍是按照thead、tbody、tfoot的順序依次來顯示內容。若是不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示錶格內容的時候是從按照代碼的從上到下的順序來顯示。

四框架標籤(瞭解)

框架標籤不能放在<body>標籤裏面，由於<body>標籤表明的只是一個頁面，而框架標籤表明的是多個頁面。因而：<frameset>和<body>只能二選一。

框架的集合用<frameset>表示，而後在<frameset>集合裏放入一個一個的框架<frame>

<frameset>標籤屬性有

rows：水平分割，將框架分爲上下部分。寫法有兩種：一、絕對值寫法：rows="200,*" 其中*表明剩餘的。這裏其實包含了兩個框架：上面的框架佔200個像素，下面的框架佔剩下的部分。二、相對值寫法：rows="30%,*" 其中*表明剩餘的。這裏其實包含了兩個框架：上面的框架佔30%，下面的框架佔70%。注：若是你想將框架分紅不少行，在屬性值裏用逗號隔開就好了。
cols：垂直分割，將框架分爲左右部分。寫法有兩種：一、絕對值寫法：cols="200,*" 其中*表明剩餘的。這裏其實包含了兩個框架：左邊的框架佔200個像素，右邊的框架佔剩下的部分。二、相對值寫法：cols="30%,*" 其中*表明剩餘的。這裏其實包含了兩個框架：左邊的框架佔30%，右邊的框架佔70%。注：若是你想將框架分紅不少列，在屬性值裏用逗號隔開就好了。

<frame>標籤顯示每一個頁面，屬性有：

scrolling="no"：是否須要滾動條。默認值是true。
noresize：不能夠改變框架大小。默認狀況下，單個框架的邊界是能夠拖動的，這樣的話，框架大小就不固定了。若是用了這個屬性值，框架大小將固定。

bordercolor="#00FF00"：給框架的邊框定義顏色。這個屬性在框架集合<frameset>中一樣適用。顏色這個屬性在IE瀏覽器中生效，可是在google瀏覽器中無效，不知道爲啥。
frameborder="0"或frameborder="1"：隱藏或顯示邊框（框架線）。
name：給框架起一個名字。利用name這個屬性，咱們能夠在框架裏進行超鏈。

五內嵌標籤

src="subframe/the_second.html"：內嵌的那個頁面
width=800：寬度
height=「150：高度
scrolling="no"：是否須要滾動條。默認值是true。
name="mainFrame"：窗口名稱。公有屬性。
frameborder="0"或frameborder="1"：隱藏或顯示邊框（框架線）。

六表單標籤

<form>用於與服務器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。屬性有：

name：表單的名稱，用於JS來操做或控制表單時使用；
id：表單的名稱，用於JS來操做或控制表單時使用；
action：指定表單數據的處理程序，通常是PHP，如：action=「login.php」
method：表單數據的提交方式，通常取值：get(默認)和post

action屬性就是表示，表單將提交到哪裏。 method屬性表示用什麼HTTP方法提交，有get、post兩種。

<input>標籤

type="屬性值"：文本類型。屬性值能夠是：

text（默認）
password：密碼類型
radio：單選按鈕，名字相同的按鈕做爲一組進行單選。
checkbox：多選按鈕，名字相同的按鈕做爲一組進行選擇。
checked：將單選按鈕或多選按鈕默認處於選中狀態。屬性值也是checked，能夠省略。
hidden：隱藏框，在表單中包含不但願用戶看見的信息
button：普通按鈕，結合js代碼進行使用。
submit：提交按鈕，傳送當前表單的數據給服務器或其餘程序處理。這個按鈕不須要寫value自動就會有「提交」文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標籤的action屬性中指定的那個頁面中去。
reset：重置按鈕，清空當前表單的內容，並設置爲最初的默認值
image：圖片按鈕，和提交按鈕的功能徹底一致，只不過圖片按鈕能夠顯示圖片。
file：文件選擇框。提示：若是要限制上傳文件的類型，須要配合JS來實現驗證。

value="內容"：文本框裏的默認內容。

readonly：文本框只讀，不能編輯。沒有屬性值。

disabled：文本框只讀，不能編輯，光標點不進去。屬性值能夠不寫。

<select>標籤

下拉標籤，<select>標籤裏面的每一項用<option>表示。select就是「選擇」，option「選項」。他們都是成套出現的

<select>標籤的屬性：

multiple：能夠對下拉列表中的選項進行多選。沒有屬性值。
size="3"：若是屬性值大於1，則列表爲滾動視圖。默認屬性值爲1，即下拉視圖。

<option>標籤的屬性：

selected：預選中。沒有屬性值。

<textare>標籤多行文本輸入，屬性：

value：提交給服務器的值。
rows="4"：指定文本區域的行數。
cols="20"：指定文本區域的列數。
readonly：只讀。

tips：textarea是個標籤對兒。對兒裏面不用寫東西。若是寫的話，就是這個框的默認文本複製代碼

<lable>標籤

對於上面這樣的單選框，咱們只有點擊那個單選框（小圓圈）才能夠選中，點擊「男」、「女」這兩個文字時是沒法選中的；因而，label標籤派上了用場。

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>複製代碼

tips：標籤只負責語義，樣式由css去控制。複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。