「測試開發全棧-HTML」(19) select下拉表單和textarea

天是十一，祝大家十一快樂，偉大的國家建黨百年，萬歲萬歲萬歲！

之前講了input表單控件，今天繼續說下select下拉表單元素控件。使用場景:在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，可以使用<select>標簽控件定義。

我們來看下<select>表單元素的語法:

...

</select>

接下來看看實例:

可以看到這是一個下拉菜單，接著我們看看代碼實現

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

籍貫:

</select>

</body>

</html>

可以看到，代碼還是很簡單的。一般下拉控件都是在表單中的，所以需要加上

<form>標簽

看著沒什么變化，看看代碼:

<body>

<form>

籍貫:

</select>

</form>

</body>

<body>中增加了<form>表單

接著說下<select>里的一些規則:

<select>中至少包含一對<option>
在<option>中定義 <option selected = "selected">時，當前項即為默認選擇項。

可以看下效果，我們選擇山西作為默認選擇項。

看看代碼，就是添加了 selected屬性

接下來，我們看下表單元素中最后一個， textarea文本域元素

使用場景:

當用戶輸入內容較多的時候，就不能使用文本框表單了，需要使用 texttarea文本域 <textarea>標簽，用于定義多行文本輸入的控件。對應的語法為:

文本內容

</textarea>

</select>

我們來看下效果:

可以看到有一個可以輸入的框，一般在框中都有預先寫好的內容，比如請輸入反饋

對應代碼為:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<form>

今日反饋:

請輸入您寶貴的意見

</textarea>

</form>

</body>

</html>

做個小總結:

1. 通過<textarea>標簽可以輕松地創建多行文本輸入框

2. cols="每行中的字符數" rows="顯示的行數" 在實際開發中不會使用，一般都是用css來控制樣式

來看下實際效果:

可以看到漢字最多輸入10個，可以輸入多行，但是在數據框當前頁面展示了3行，如果是可以展示5行呢？

頁面展示5行了，這塊不要理解為只能顯示N行。

看下對應的代碼:

<form>

今日反饋:

<textarea cols="20" rows="5">請輸入您寶貴的意見

</textarea>

</form>

好的，今天就先到這里

更多好文章，可以關注微信公眾號 "蛋蛋雜談"

tml和css的關系：css是修飾HTML樣是的，HTML+css是構成網頁的基本頁面結構及樣式。

第一章：HTML5的介紹

1、標簽是由英文狀態下< >兩個尖括號構成的。

2、html中的標簽一般都是成對出現的，分開始標簽和結束標簽。結束標簽比開始標簽多了一個/。

3、標簽與標簽之間是可以嵌套的，但是先后順序必須保持一致。

4、HTML標簽不區分大小寫，一般采用小寫。

5、head標簽：head標簽為雙標簽，通常嵌套<meta>、<title>、<style>標簽使用。

6、body標簽：網頁中所展示的內容全部放在body標簽中。

第二章：HTML5語義化標簽

2-1語義化

明白每個標簽的用途（在什么情況下使用此標簽合理）比如，網頁上的文章的標題就可以用標題標簽，網頁上的各個欄目的欄目名稱也可以使用標題標簽。文章中內容的段落就得放在段落標簽中等等。

語義化標簽的好處：

1. 更容易被搜索引擎收錄。

2. 更容易讓屏幕閱讀器讀出網頁內容。

2-2段落標簽-p標簽

語法：<p>段落文本</p>

注意：在網頁上顯示文章，就把文章放在p標簽中。有多少個段落就放多少個p標簽。

2-3 自定義文字樣式-span標簽

語法：<span>文本</span>

注意：這個標簽是沒有語義的，它的作用就是設置單獨的樣式。

2-4標題標簽-hx標簽

語法：<hx>標題文本</hx>（x為1-6）

注意：標題標簽一共有6個，h1,h2,h3,h4,h5,h6,分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據重要性遞減。<h1>是最高的等級。因為h1標簽在網頁中比較重要，所以一般h1標簽被用在網站名稱上。

2-5 自定義塊-div標簽

語法：<div>......</div>

注意：在網頁中獨立的欄目板塊就是一個典型的邏輯部分，每個邏輯部分可以單獨放在div標簽中，div標簽相當于一個容器。

2-6在body中用<header>標簽來定義頭部；<footer>標簽來定義底部；<section>標簽用來定義正文的區域；<aside>標簽，定義一個側邊欄區域。

第三章：HTML5效果標簽

文本中需要換行的地方使用<br/>標簽，<br />標簽作用相當于word文檔中的回車；代表一個空格；<hr/>標簽代表水平分割線。 <hr />標簽和<br />標簽一樣也是一個空標簽，所以只有一個開始標簽，沒有結束標簽。

第四章：HTML5列表標簽

4-1無序列表-ul-li標簽

語法：<ul>

....................

</ul>

注意：ul-li是無序列表標簽，ul-li是沒有前后順序的，在網頁中默認每項li前顯示的是一個小圓點。

4-2 有序列表-ol-li標簽

語法：<ol>

....................

</ol>

注意：ol-li標簽是有序列表標簽，是用前后順序的，在網頁中默認每項li前從1開始顯示。

第五章：HTML5圖片，鏈接及表格標簽

5-1 添加圖片標簽-img標簽

語法：<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">

講解：

1、src：標識圖像的位置；

2、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；

3、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；

4、圖像可以是GIF，PNG，JPEG格式的圖像文件。

5-2添加超鏈接-a標簽

語法：<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>

5-3 a標簽target屬性，可選值為”_self和_blank”，默認值為_self，代表在當前頁面打開鏈接，_blank代表在新窗口打開鏈接。

5-4制作表格標簽-table標簽

講解：

創建表格的四個元素：table、tr、th、td

1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。

2、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。

3、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。

4、<th>…</th>：表格的頭部的一個單元格，表格表頭。

5、表格中列的個數，取決于一行中數據單元格的個數。

6、border屬性可以為表格添加邊框，屬性值為數字。

注意：

1、table標簽用來定義整個表格，為雙標簽，必須有結束標簽。

2、table標簽里面可以放caption標簽和tr標簽。

3、caption標簽用來定義表格的標題。

4、tr標簽用來設置表格的行，tr里面只能放th或者td標簽，一組tr標簽代表一行。

5、th用來設置表格的標題，會加粗居中顯示。也就是th標簽中的文本默認為粗體并且居中顯示。

6、td同來設置表格的列，一組td標簽代表一列。

7、table表格在沒有添加border屬性之前, 在瀏覽器中顯示是沒有表格線的。

第六章：HTML5表單標簽，與瀏覽者交互。

6-1表單標簽-form標簽

表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。

語法：<form method="傳送方式" action="服務器文件">。

講解：

1.<form> ：<form>標簽是成對出現的，以<form>開始，以</form>結束。

2.action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。

3. method ：數據傳送的方式（get/post）。

注意：

1、所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在 <form></form> 標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）。

2、method : post/get 的區別這一部分內容屬于后端程序員考慮的問題。

6-2 用戶名和密碼-文本輸入框、密碼輸入框

語法：

<form>

</form>

1、type：

當type="text"時，輸入框為文本輸入框;

當type="password"時, 輸入框為密碼輸入框。

2、name：為文本框命名，以備后臺程序ASP 、PHP使用。

3、value：為文本輸入框設置默認值。(一般起到提示作用)。

6-3 input標簽的Placeholder屬性。

當需要提示用戶輸入框需要輸入框的內容，可以用到placeholder屬性。

1、placeholder屬性為輸入框占位符,里面可以放提示的輸入信息。

2、placeholder屬性的值可以任意填寫,當輸入框輸入內容時,占位符內容消失,輸入框無內容時,占位符內容顯示。

3、占位符內容不是輸入框真正的內容。

6-4數字輸入框

講解：

1、input的type屬性設置為number,則表示該輸入框的類型為數字。

2、數字框只能輸入數字，輸入其他字符無效。

3、數字框最右側會有一個加減符號,可以調整輸入數字的大小,不同瀏覽器表現不一致。

6-5網址輸入框

1、input的type屬性設置為url,則表示該輸入框的類型為網址。

2、數字框的值需以http://或者https://開頭,且后面必須有內容,否則表單提交的時候會報錯誤提示。

6-6郵箱輸入框

1、Input的type屬性設置為email,則表示該輸入框的類型為郵箱。

2、數字框的值必須包含@。

3、數字框的值@之后必須有內容,否則會報錯誤提示。

6-7 創建文本域-textarea標簽

當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。

語法：

這兩個屬性可用css樣式的width和height來代替：col用width、row用height來代替。

1、<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。

2、cols ：多行輸入域的列數。

3、rows ：多行輸入域的行數。

4、在<textarea></textarea>標簽之間可以輸入默認值。

6-8 lable標簽

label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。

語法：<label for="控件id名稱">

注意：標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。

6-9 單選框和復選框

兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。

語法：<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>

1、type:

當 type="radio" 時，控件為單選框

當 type="checkbox" 時，控件為復選框

2、value：提交數據到服務器的值（后臺程序PHP使用）

3、name：為控件命名，以備后臺程序 ASP、PHP 使用

4、checked：當設置 checked="checked" 時，該選項被默認選中

注意:同一組的單選按鈕，name 取值一定要一致

6-10 創建下拉菜單-select、option標簽

講解：

1、select和option標簽都是雙標簽，它總是成對出現的，需要首標簽和尾標簽。

2、select標簽里面只能放option標簽，表示下拉列表的選項。

3、option標簽放選項內容，不放置其他標簽。

4、value：<option value=”提交值”>選項</option>

5、selected="selected"：設置selected="selected"屬性，則該選項就被默認選中。

6-11 提交按鈕-submit

當用戶需要提交表單信息到服務器時，需要用到提交按鈕。

語法：<input type="submit" value="提交">

type：只有當type值設置為submit時，按鈕才有提交作用

value：按鈕上顯示的文字

6-12 重置按鈕-reset

當用戶需要重置表單信息到初始時的狀態時,可以設置reset按鈕。

語法：<input type="reset" value="重置">

type：只有當type值設置為reset時，按鈕才有重置作用

value：按鈕上顯示的文字

第七章：CSS3介紹，為網頁添加樣式

7-1 認識CSS樣式

CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網頁位置的文字有著統一的字體、字號或者顏色等。

7-2 CSS代碼語法

CSS樣式由選擇符和聲明組成，而聲明又由屬性和值組成。

選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素。

聲明：在英文大括號“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當有多條聲明時，中間可以英文分號“;”分隔。

7-3 CSS注釋代碼

注釋語句：就像在Html的注釋一樣，在CSS中也有注釋語句：用/*注釋語句*/來表明

7-4 內聯式CSS樣式

內聯式：就是把css代碼直接寫在現有的HTML標簽中，注意要寫在元素的開始標簽里，并且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號隔開。

例：<p style="color:red">這里文字是紅色。</p>

7-5 嵌入式CSS樣式

嵌入式：就是可以把css樣式代碼寫在<style type="text/css"></style>標簽之間。嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間。

例：<style type="text/css">

span{

color:red;

}

</style>

7-6 外部式CSS樣式

外部式：外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，在<head>內（不是在<style>標簽內）使用<link>標簽將css樣式文件鏈接到HTML文件內。

例：<link href="base.css" rel="stylesheet" type="text/css" />

注意：

1、css樣式文件名稱以有意義的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定寫法不可修改。

3、<link>標簽位置一般寫在<head>標簽之內。

7-7 三種連接方式的優先級

總結：他們的優先級：內聯式 > 嵌入式 > 外部式。但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面。采取就近原則，離被設置元素越近優先級別越高。

第八章：CSS3選擇器

8-1 什么是選擇器

css3每一條css樣式聲明（定義）由兩部分組成

選擇器{

樣式;

}

在{}之前的部分就是“選擇器”，“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。

8-2標簽選擇器

如編輯器中的<html>、<body>、<h1>、<p>、<img>，就是HTML代碼中的標簽

8-3 類選擇器

語法：.類選器名稱{css樣式代碼;}

注意：

1、英文圓點開頭

2、其中類選器名稱可以任意起名（但不要起中文噢）

8-4 ID選擇器

注意：

1、使用ID選擇器，必須給標簽添加上id屬性，為標簽設置id="ID名稱"，而不是class="類名稱"。

2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。

3、id屬性的值即為當前標簽的id，盡量見名思意，語義化。

8-5 類選擇器和ID選擇器的區別

相同點：可以應用于任何元素；

不同點：

1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。

2、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）。

8-6 的選擇器

即大于符號(>),用于選擇指定標簽元素的第一代子元素。

8-7 后代選擇器

包含選擇器，即加入空格,用于選擇指定標簽元素下的后輩元素。

注意：子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。

總結：>作用于元素的第一代后代，空格作用于元素的所有后代。

8-8 通用選擇器

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素。

8-9 偽類選擇器

它允許給html不存在的標簽（標簽的某種狀態）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態來設置字體顏色：比較常用的還是 a:hover 的組合。

8-10 分組選擇器

為html中多個標簽元素設置同一個樣式時，可以使用分組選擇符（，）。

第九章 CSS3的繼承，優先級和重要性

9-1 樣式的繼承

樣式的繼承：CSS的某些樣式是具有繼承性的，繼承是一種規則，它允許樣式不僅應用于某個特定html標簽元素，而且應用于其后代。

9-2 選擇器的優先級

講解：

1、如果一個元素使用了多個選擇器,則會按照選擇器的優先級來給定樣式。

2、選擇器的優先級依次是: 內聯樣式 > id選擇器 > 類選擇器 > 標簽選擇器 > 通配符選擇器。

9-3 權值計算-特殊性

標簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。

9-4 選擇器的最高層級!important

!important要寫在分號前面。

當網頁制作者不設置css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁，瀏覽器默認的樣式 < 網頁制作者樣式 < 用戶自己設置的樣式，請記住!important優先級樣式是個例外，權值高于用戶自己設置的樣式。

第十章 CSS3字體樣式

10-1 字體的樣式

font-family：設置字體的類型

例：body{font-family:"Microsoft Yahei";}

font-size:設置字體的大小

例：body{font-size:12px;}

font-weight:設置字體的粗細

例：p span{font-weight:bold;}

font-style：設置字體的斜體樣式

1、font-style可以設置字體樣式，并且有種3設置方式。

2、正常字體為normal,也是font-style的默認值。

3、italic為設置字體為斜體，用于字體本身就有傾斜的樣式。

4、oblique為設置傾斜的字體，強制將字體傾斜。

10-2 字體顏色

1、color屬性可以設置字體顏色。

2、color的值有3種設置方式：

英文命令顏色

例：p{color:red;}

RGB顏色

這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。

例：p{color:rgb(133,45,200);}

每一項的值可以是 0~255 之間的整數，也可以是 0%~100% 的百分數。

例：p{color:rgb(20%,33%,25%);}

十六進制顏色

這種顏色設置方法是現在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。

例：p{color:#00ffff;}

第十一章 CSS3文本樣式

11-1添加文本修飾-text-decoration

1、text-decoration可以設置添加到文本的修飾。

2、text-decoration默認值為none, 定義標準的文本。

3、text-decoration的值為underline為定義文本下的一條線。

4、text-decoration的值為overline為定義文本上的一條線。

5、text-decoration的值為line-through為定義穿過文本下的一條線，一般用于商品折扣價。

11-2 文本添加首行縮進-text-indent

為文本添加首行縮進，2em的意思就是文字的2倍大小。

例：p{text-indent:2em;}

11-3 為文字設置行間間距-line-height

例：p{line-height:1.5em;}

11-4 增加或減少字符間的空白

letter-spacing:設置文字間隔或者字母間隔

注意：這個樣式使用在英文單詞時，是設置字母與字母之間的間距。

word-spacing:設置單詞與單詞之間的距離。

11-5 設置對齊方式-text-align

例：h1{

text-align:center;

}

<h1>了不起的蓋茨比</h1>

11-6 長度值

長度單位：常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。

第十二章CSS3盒模型

12-1 元素分類

分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

常用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>....

常用的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>.....

常用的內聯塊狀元素有：

<img>、<input>.....

12-2 塊級元素

display:block就是將元素顯示為塊級元素

例：將內聯元素a轉換為塊狀元素，從而使a元素具有塊狀元素特點。

a{display:block;}

塊級元素特點：

1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設置。

3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

12-3 內聯元素

display:inline將元素設置為內聯元素

例： div{

display:inline;

}

......

<div>我要變成內聯元素</div>

內聯元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度及頂部和底部邊距不可設置；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

12-4 內聯塊狀元素

display:inline-block就是將元素設置為內聯塊狀元素

內聯塊狀元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高以及頂和底邊距都可設置。

12-5盒模型的寬度和高度

css內定義的寬（width）和高（height），指的是填充以里的內容范圍。

一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

12-6盒模型的背景

網頁中的標簽不論是行內元素還是塊狀元素都可以給它設置一個背景色。

為標簽設置背景顏色可以使background-color:顏色值來實現。

12-7盒模型的邊框

盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。

講解:

1、border-style（邊框樣式）常見樣式有：

dashed（虛線）| dotted（點線）| solid（實線）。

2、border-color（邊框顏色）中的顏色可設置為十六進制顏色，如:

border-color:#888;//前面的井號不要忘掉。

3、border-width（邊框寬度）中的寬度也可以設置為：

thin | medium | thick（但不是很常用），最常還是用像素（px）。

12-8 設置圓角邊框-border-radius

例：div{border-radius: 20px 10px 15px 30px;}

12-9 設置內邊距-padding

元素內容與邊框之間是可以設置距離的，稱之為“內邊距（填充）”。

填充也可分為上、右、下、左(順時針)

12-10 設置外邊距-margin

元素與其它元素之間的距離可以使用邊界（margin）來設置。邊界也是可分為上、右、下、左。

總結一下：padding和margin的區別，padding在邊框里，margin在邊框外。

第十三章：CSS3布局模型

在網頁中，元素有三種布局模型：

1、流動模型（Flow）

2、浮動模型 (Float)

3、層模型（Layer）

13-1 流動模型

流動模型，流動（Flow）是默認的網頁布局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的。

特征：

1、塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據位置。

2、在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。（內聯元素可不像塊狀元素這么霸道獨占一行）。

13-2 浮動模型

浮動模型：任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動

例：實現兩個 div 元素一行顯示。

div{

width:200px;

height:200px;

border:2px red solid;

float:left;

}

例：同時設置兩個元素右浮動也可以實現一行顯示。

div{

width:200px;

height:200px;

border:2px red solid;

float:right;

}

例：設置兩個元素一左一右可以實現一行顯示

div{

width:200px;

height:200px;

border:2px red solid;

}

#div1{float:left;}

#div2{float:right;}

13-3 層模型

層模型有三種形式：

1、絕對定位(position: absolute)

2、相對定位(position: relative)

3、固定定位(position: fixed)

13-4 絕對定位：position:absolute

需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。

例：實現div元素相對于瀏覽器窗口向右移動100px，向下移動50px。

div{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

}

13-5 相對定位：position:relative

需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

例：實現相對于以前位置向下移動50px，向右移動100px;

#div1{

width:200px;

height:200px;

border:2px red solid;

position:relative;

left:100px;

top:50px;

}

13-6 固定定位：position:fixed

fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。

13-7 Relative與Absolute組合使用

1、參照定位的元素必須是相對定位元素的前輩元素：

<div id="box2">相對參照元素進行定位</div>

</div>

從上面代碼可以看出box1是box2的父元素（父元素當然也是前輩元素了）。

2、參照定位的元素必須加入position:relative;

#box1{

width:200px;

height:200px;

position:relative;

}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。

#box2{

position:absolute;

top:20px;

left:30px;

}

這樣box2就可以相對于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設置了）。

第十四章：flex彈性盒模型

14-1彈性盒模型之flex屬性

技術點的解釋：

1、設置display: flex屬性可以把塊級元素在一排顯示。

2、flex需要添加在父元素上，改變子元素的排列順序。

3、默認為從左往右依次排列,且和父元素左邊沒有間隙。

14-2使用justify-content屬性設置橫軸排列方式

本屬性定義了項目在主軸上的對齊方式

屬性值分別為：justify-content: flex-start（交叉軸的起點對齊） | flex-end（右對齊） | center（居中） | space-between（兩端對齊，項目之間的間隔都相等。） | space-around（每個項目兩側的間隔相等）;

14-3 使用align-items屬性設置縱軸排列方式

本屬性定義了項目在交叉軸上的對齊方式

屬性值分別為：

align-items: flex-start（左對齊） | flex-end（交叉軸的終點對齊） | center（交叉軸的中點對齊） | baseline（項目的第一行文字的基線對齊） | stretch（如果項目未設置高度或設為auto，將占滿整個容器的高度。）;

14-4 給子元素設置flex占比

1、給子元素設置flex屬性,可以設置子元素相對于父元素的占比。

2、flex屬性的值只能是正整數,表示占比多少。

3、給子元素設置了flex之后,其寬度屬性會失效。

第十五章：CSS樣式設置小技巧

15-1 水平居中行內元素

如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。

例：<body>

<div class="txtCenter">我想要在父容器中水平居中顯示。</div>

</body>

css代碼

<style>

.txtCenter{

text-align:center;

}

</style>

15-2 水平居中設置-定寬塊狀元素

定寬塊狀元素：塊狀元素的寬度width為固定值。

滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。注意：元素的“上下 margin” 是可以隨意設置的。

例：

html代碼：

<body>

<div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>

</body>

css代碼：

<style>

div{

border:1px solid red;/*為了顯示居中效果明顯為 div 設置了邊框*/

width:200px;/*定寬*/

margin:20px auto;/* margin-left 與 margin-right 設置為 auto */

}

</style>

15-3 已知寬高實現盒子水平垂直居中

已知寬高實現盒子水平垂直居中。通常使用定位完成

例：

要實現子元素相對于父元素垂直水平居中,我們只需要輸入以下代碼：

講解：

1、利用父元素設置相對定位,子元素設置絕對定位,那么子元素就是相對于父元素定位的特性。

2、子元素設置上和左偏移的值都為50%，是元素的左上角在父元素中心點的位置。效果：

3、然后再用margin給上和左都給負的自身寬高的一半,就能達到垂直水平居中的效果。

15-4 寬高不定實現盒子水平垂直居中

未知寬高實現盒子水平垂直居中，通常使用定位以及translate完成

例： <div class="box">

慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網

</div>

添加樣式：

.box {

border: 1px solid #00ee00;

height: 300px;

position: relative;

}

.box1 {

border: 1px solid red;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

效果圖：

技術點的解釋：

1、利用父元素設置相對定位,子元素設置絕對定位,那么子元素就是相對于父元素定位的特性。

2、子元素設置上和左偏移的值都為50%。

3、然后再用css3屬性translate位移,給上和左都位移-50%距離，就能達到垂直水平居中的效果。

TML的作用

HTML是用來開發網頁的，它是開發網頁的語言

HTML的定義

全稱HyperText Mark-up Language，超文本標記語言

標記就是標簽

<標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等，標簽大多數都是成對出現的。

超文本兩層含義：

因為網頁中還可以有圖片、視頻、音頻等內容（超越文本限制）
它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁鏈接（超鏈接文本）

HTML的基本結構

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
        網頁顯示內容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標簽是開發人員在告訴瀏覽器
整個網頁是從<html>這里開始的，到</html>結束
也就是html文檔的開始和結束標簽
<head>...</head>標簽用于定義文檔的頭部
是負責對網頁進行設置標題、編碼格式以及引入css和js文件的
<body>...</body>標簽是編寫網頁上顯示的內容

網頁文件的后綴是.html, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁

VS Code 安裝

VS Code全拼是 Visual Studio Code 是由微軟研發的一款免費、開源的跨平臺代碼編輯器
目前是前端(網頁)開發使用最多的一款軟件開發工具

下載網址: https://code.visualstudio.com/Download

選擇對應的安裝包進行下載:

安裝一切默認

VS Code 的插件安裝

Chinese(Simplified) Language Pack for VS Code 中文漢化包
open in browser 右擊在瀏覽器打開html

常用的HTML標簽

1 標簽不區分大小寫，但是推薦使用小寫
2 根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽 2.2 單標簽是一個標簽組成，沒有標簽內容，比如: img標簽

標簽的使用形式

成對出現的標簽
標簽的嵌套
單個出現的標簽
帶屬性的標簽

列表標簽

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

網頁效果

表格標簽

<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭

屬性設置
border: 1px solid black:設置邊框和顏色
border-collapse: collapse:設置邊框合并

網頁效果

表單標簽

表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器

<form>標簽表示表單標簽，定義整體的表單區域

一個表單中有很多信息組成,比如姓名,愛好,地址等,這些內容有很多其他標簽來承載

這些標簽稱為表單元素標簽

網頁效果

表單提交

表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器

action屬性設置表單數據提交地址
method屬性設置表單提交的方式，一般有“GET”方式和“POST”方式, 不區分大小寫

兩種方式的區別:

“GET”方式 : 沒有請求體
“POST”方式 : 有請求體

表單元素屬性設置

name: 表單元素的名稱，用于作為提交表單數據時的參數名
value: 表單元素的值，用于作為提交表單數據時參數名所對應的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>

點擊提交：

可以看到服務器收到了請求報文。

在線咨詢

上一篇：JavaScript 返回頂部實例
下一篇：干貨：網頁跳轉的寫法大全及其用途區別

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「測試開發全棧-HTML」(19) select下拉表單和textarea

第一章：HTML5的介紹

第二章：HTML5語義化標簽

第三章：HTML5效果標簽

第四章：HTML5列表標簽

第五章：HTML5圖片，鏈接及表格標簽

第六章：HTML5表單標簽，與瀏覽者交互。

第七章：CSS3介紹，為網頁添加樣式

第八章：CSS3選擇器

第九章 CSS3的繼承，優先級和重要性

第十章 CSS3字體樣式

第十二章CSS3盒模型

第十三章：CSS3布局模型

第十四章：flex彈性盒模型

第十五章：CSS樣式設置小技巧

TML的作用

HTML的定義

HTML的基本結構

VS Code 安裝

VS Code 的插件安裝

常用的HTML標簽

表單提交

您的項目需求