JavaWeb之HTML入門及常用標籤，javaweb入門標籤
HTML： HTML的概述及作用：
HTML全稱為HyperText Markup Language,譯為超文字標記語言 (HTML)，不是一種程式設計語言，是一種描述性的標記語言，用於描述超文本中內容的顯示方式。比如字型什麼顏色，大小等。
Html就是超文字標記語言 (HTML)的簡寫，是最基礎的網頁語言。
Html是通過標籤來定義的語言，代碼都是由標籤所組成。
<html> <head> 放置一些屬性資訊或者輔助性的資訊 <title></title> 引入外部的檔案 會先載入 </head> <body> 真正存放資料內容的地方 其他的標籤 </body></html>
A：通過觀察格式，發現
Html代碼由<html>開始</html>結束。裡面由頭部分<head></head>和體部分<body></body>兩部分組成。
頭部分是給Html頁面增加一些輔助或者屬性資訊，它裡面的內容會最先載入。
體部分是真正存放頁面資料的地方。
B:對格式的解釋
html:放在html檔案的開頭，但沒有實質性的功能，即使沒有這個標記，瀏覽器在碰到其他的html標記時也一樣會進行解析。
瀏覽器內建了html語言的解析器.
可以設定預設開啟瀏覽器:工具—檔案夾選項-檔案類型
head:頭標記，放置關於此html檔案的資訊，如提供索引，定義css等。
title:標題標記，包含在head標記內，它的作用是設定網頁的標題。
body:主體標記，網頁所需要顯示的內容都放在這個標記內。
* 以.html或者.htm來結尾
* 瀏覽器就可以解析HTML的檔案。
HTML的注意事項：
一般的標籤都有開始和結束，只有單一的功能，可以在標籤內部結束。
改變屬性，達到好的顯示效果
屬性值可以使用雙引號，單引號，或者不用引號，一般採用雙引號，或者根據公司的規範。
* MyEclipse
* 設定工作空間的編碼
* window-喜好設定-General-workspace-選擇UTF-8的編碼
* Window—preferences—MyEclipse—Files and Editors—HTML—修改成UTF-8的編碼
* Window—preferences—General—Editors—File Associations—選擇*.html—選擇MyEclipse HTML Editor—選擇default—選擇ok
* HTML的標籤
* 排版標籤
* 換列標籤<br/>（用的比較少）
* 水平線<hr/>
* 屬性：color：顏色
* 顏色的寫法：有兩種寫法：1）顏色的英文單詞2）RGB三原色(red green blue) #ffffff
* 屬性：width：寬度
* 值有兩種寫法：1）像素值（300px）2）百分比(30%)
* 區別：百分比會隨著瀏覽器大小而改變，像素不會。
* 空格：
* 段落標籤（用的相對較多）
* <p></p>
* 特點：在開始和結束的位置上，各產生一行空行。
* 屬性：align：對齊的方式
* <div></div>
* <span></span>
* 標籤非常的簡單，就是在瀏覽器上聲明一塊地區。
* 區別：div後面有換行，span沒有。
* 區塊層級元素和行內元素（瞭解）
* 字型標籤
<font></font>（重要的）
* color：顏色
* size：字型的大小
* 最大值和最小值最大值是7 最小值是1
* 預設值是3，size的寫法又提供了一種（+2）
* face：字型的類型
* 標題的標籤（用的比較少）
* <h1></h1>
...
* <h6></h6>
* 從1到6是逐漸縮小的。
* 粗體和斜體的標籤
<b></b>
<i></i>
* 標籤是可以嵌套的
<b><i></i></b>
* HTML的特殊字元
< : <
> : >
& : &
* 滾動字幕（忘了吧）
marquee
* 列表標籤
* 把資料進行格式化，指定的格式。
* 列表標籤
<dl>（用的較少）
<dt>上層項目</dt>
<dd>下層項目</dd>
<dd>下層項目</dd>
</dl>
* dd標籤的特點：預設縮排和自動對齊的。
* 有序列表和無序列表
有序：（也是比較多的）
<ol>
<li></li>
</ol>
* 屬性：type類型
start從哪開始
無序：（用的非常多）
<ul>
<li></li>
</ul>
* 屬性：type
* 不管是有序還是無序，中間資料的條目都使用<li></li>
* 圖片標籤（重要*****）
<img />
* 屬性：
* 屬性：src="圖片的地址"
* width圖片的顯示寬度
* height圖片顯示的高度
* alt圖片的解說文字
* 超連結的標籤（重要*****）
* <a>常值內容</a>
<a></a>
* 連結資源
* 屬性：href="指定連結的資源的地址"
* 注意：如果連結網路資源，需要協議寫上。如果沒有協議，預設file檔案協議。
* 注意：如果瀏覽器可以解析的檔案，直接就開啟了。
* 如果瀏覽器不可以解析的檔案，彈出下載視窗。
* 自訂的協議
* 如果瀏覽器解析不了的協議，會找作業系統上的應用程式。
* target：開啟的位置。
* 定位資源
* 專業的術語錨
* 屬性：name
* 表格標籤(*****)
表格標籤
<table>：聲明表格的範圍
* 屬性：border="1"
width：表格的寬度
height:高度
bgcolor：背景的顏色
cellpadding：內邊距
<caption>標題</caption>
<tr>：代表表格的行
* 屬性：align：文字的對齊
<td>：儲存格
屬性：width:寬度
height：高度
合併儲存格：
行合并：rowspan="2"
列合并：colspan="2"
</td>
</tr>
<tr>
<th></th>：儲存格
</tr>
</table>
* 注意：td與th的區別：th預設置中並且加粗的
* 表單標籤（重要**********）
<form>：封裝表單的範圍。
* 屬性：action="請求提交的路徑"
method="表單的提交方式"
* 面試題：表單的提交方式有哪些？
* 答：表單的提交方式有很多，常用的有兩種，get和post。
* get和post提交方式的區別：
* get方式提交時，會把資料顯示在地址欄上。
* post方式不會。
* get方式提交時，安全層級較低。
* post方式安全層級較高。
* get方式提交時，資料大小有限制。
* post方式不會。
* 輸入項的表單組件
<input />
* 非常重要的屬性：type，根據type值的不同，提供了不同的輸入項的組件。
* 列子：<input type="text" />
type=text文本輸入框
type=password密碼輸入框
type=radio選項按鈕
* 提供了屬性name（name的值是相同的）
* 預設被選中的：checked=checked或者true
type=checkbox多選按鈕
* 預設被選中的：checked=checked或者true
type=file檔案的選擇框
type=hidden隱藏組件
type=button按鈕（史上最難看的）
type=image和提交按鈕是相同的作用。
type=reset重設
type=submit提交資料
* 選擇框
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
* 文本域
<textarea rows="" cols=""></textarea>
</form>
* 注意：點擊了提交按鈕後，地址欄發送了變化（?sex=on）* ?username=haha&sex=on
* ?username=zhangsan&pwd=123&sex=nan&love=lq
* input標籤需要提供兩個屬性，一個屬性name，一個是value
(*****)name屬性必須要指定，value看情況指定。
* 架構標籤（用的比較少）
* 使用<frameset></frameset>：注意：不能在body標籤的內部和下面來使用該標籤。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
