【B/S】HTML彙總（1）
準備長期寫下去，旨在腦海裏構建一系列的系統。php
HTML：超文本標記語言。html
其不是一種編程語言，而是一種標記語言，經過標記標籤，如<b>粗</b>來呈現不一樣樣式。java
HTML使用的是標記標籤來描述網頁內容web
知識概念的擴展：數據庫
（1）應用程序通常分爲兩種架構：編程
C/S架構：Client客戶端和Server服務器端架構，好比QQ、Foxmail等瀏覽器
B/S架構：瀏覽器/服務器架構，好比淘寶、京東、百度等；能直接經過瀏覽器使用的應用都是B/S架構安全
（2）動態網頁與靜態網頁：服務器
靜態網頁，html代碼和內容書寫完畢後，頁面的內容和顯示效果就基本上不會發生變化了——除非修改頁面代碼網絡
動態網頁，頁面代碼雖然沒變，但顯示的內容倒是能夠隨時間、環境或者數據庫的操做的結果而發生改變。動態網頁通常須要與後臺程序支撐（jsp,aspx,php）
PS：網頁中存在幻燈片效果，文字滾動效果等，若是內容自己沒有變化，那麼也屬於靜態網頁。
//------------------------------------
建立HTML（1）使用Eclipse，修改編碼
window->Perferences->General->Workspace 右側的Other：UTF-8
（2）建立項目
左側項目框點擊右鍵->New->Project->Web->Static Web Project
而後鍵入項目名稱就可用了
（3）項目中的WebContent
WebContent文件夾：web相關的內容，好比HTML+JS+CSS
（4）建立HTML頁面
在WebContent點右鍵->New->Other->Web->HTML File
HTML基本結構：
<!DOCTYPE html> <!-- DocumentType =文檔類型:html，位於文檔首航，告知瀏覽器文檔使用哪一種HTML或XHTML規範，讓瀏覽器經過正確的方式解析網頁，使網頁能正常顯示。-->
<html> <!-- 告知瀏覽器其自身是一個HTML文檔 -->
<head> <!-- 用於定義文檔的頭部（文檔的描述信息） -->
<meta charset="UTF-8"> <!-- 聲明文件的編碼是UTF-8的編碼，告訴瀏覽器，用什麼編碼去解析這個文件，若是是在中文環境下，默認使用GBK。 UTF-8：國際通用碼 GBK/GB2312：中文編碼 -->
<meta name="keywords" content="楓葉、Maple"> <!-- 提供給搜索引擎的關鍵字信息 -->
<!-- meta元素能夠提供有關頁面的元信息，好比針對搜索引擎和更新頻度的描述和關鍵詞等，讓瀏覽器；-->
<title></title> <!-- 文檔標題 -->
</hend>
<body> <!-- 用於定義文檔的主體（文檔的主體內容） -->
</body>
</html>
快捷鍵小技巧：Eclipse 中 ：
Alt+/ 可以智能提示
Ctrl+Shift+/ 可以快捷註釋
屬性介紹：
html標籤也能夠當作一個對象，既然是對象那麼就有屬性。屬性描述標籤的更多細節。
屬性值能夠加雙引號，也能夠加單引號，也能夠不加引號，建議使用雙引號
好比：字體標籤：<font size="5" color="red" face="宋體">楓櫺</font>
size這個屬性的值範圍：1~7
color這個屬性有三種表達方式：（1）英文單詞（顏色名稱）：如red，yellow
（2）顏色值（十六進制值）：#FF0000 每兩位表明一個顏色
（3）rgb代碼： rgb(255,0,0) 等同於red=FF green=00 black=00
face這個屬性指：字體規格，如微軟雅黑、宋體
特殊標籤標示
空格（小空格）
  空格（大空格，佔一箇中文位置）
> 小於<
< 大於>
& &
經常使用基本標籤：
<i></i>斜體
<b></b>加粗
<u></u>下劃線
<p></p>段落（換行，默認狀況下和上下的內容之間有間距）
<br/>換行
<font></font>字體（屬性：size,color,face）
<h1></h1>標題（h1-h6從大到小的 換行 加粗，上下內容之間有距離，一個網頁裏面，建議只出現一個h1與h2）
<hr/>水平線
<pre></pre>預格式文本，被包圍在pre元素中的文本一般會保留空格和換行符，而文本也會呈現爲等寬字體。在各個瀏覽器存在兼容性問題，用處很少。
<span></span>
<div></div>
span div 兩個標籤沒有特殊的功能，它們只是做爲一個裝內容的容器，通常須要和CSS配合使用。CSS：控制標籤顯示樣式
DIV：快標籤（它會獨佔一行，寬度默認爲100%）
Span：行內標籤（不會獨佔一行，標籤多個並排一行，寬高爲內容大小）
超連接標籤：
<a></a>表明超連接，使多個頁面能夠連接起來。
屬性：href 連接的目標URL，打開頁面的地址
target 在何處打開目標URL，其中_blank：在新窗口中打開被連接文檔 _self：在本頁面打開（默認） _parent：在父「框架集」中打開被連接文檔 _top：在整個窗口中打開被連接文檔（最外層的頁面） framename：在指定的框架中打開被連接文檔或者給新窗口取一個名字
例如：<a href="http://www.baidu.com" target="_blank">百度</a>
URL絕對路徑與相對路徑
絕對路徑：以協議（http://、https://加密協議、file://文件）或者 以「/」做爲前綴
例如：<a href="file:///D:/Work/eclipse/for%20EE/workspace/Minecraft/WebContent/NewFile.html">新文件</a>
若是以「/」做爲前綴，那麼會自動把協議加到地址前面，（本地文件，網絡文件不行）
例如：<a href="/D:/Work/eclipse/for%20EE/workspace/Minecraft/WebContent/NewFile.html">新文件</a>
相對路徑：以文件自己爲參照路徑進行定位
當前頁面所在的文件夾下的文件路徑<a href="b.html">b網頁</a>（若是鏈接的文件和當前的文件在同一個目錄下面，直接寫文件名便可）
當前頁面所在的文件夾下的文件路徑<a href="./filehb/b.html">b網頁</a>（若是鏈接的文件和當前文件在同一個目錄下面，「./文件名」 ./：表明當前文件所在目錄，效果和上面同樣）
當前頁面所在文件夾的下級目錄中的文件路徑<a href="filec/c.html">c網頁</a>
當前頁面所在文件夾的下三級目錄中的文件路徑<a href="filec/filed/filee/e.html">e網頁</a>（若是鏈接當前目錄下面的filec目錄，的下面filed目錄，的下面filee目錄中的e.html，先寫目錄名，再寫文件名）
當前頁面所在的文件夾的上級目錄中的文件路徑：（..回到上一層）：<a href="../a.html">a網頁</a>
圖片標籤
<img src="" alt="裂空" width="280px" height="300" title="守望先鋒"></img>
src：圖片的url地址（絕對路徑和相對路徑）
alt：圖形沒法顯示時的替代文本
height：定義圖形的高度，百分比或像素
width：定義圖像的寬度，百分比或像素
注意：圖片的寬高咱們通常只須要設置一個便可，圖片會自動按比例進行縮放
title：提示信息（鼠標放在圖片會顯示相應的文字）
列表標籤ul，ol，dl
通常用做某項數據的列表或是導航
<ul> 無序列表
<li>個人世界</li> 列表項
<li>mojang</li>
</ul>
<ol> 有序列表
<li>個人世界</li> 列表項
<li>mojang</li>
</ol>
<dl> 定義列表（通常配合CSS完成某項功能）
<dt></dt>建立列表中的上層項目
<dd></dd>建立列表中的下層項目
<dl>
表格
table標籤：表明整個表格；注意，table標籤不要放與表格無關的標籤（好比：div,h1,form））
tr標籤：表明表格中一個行
td標籤：表明行中一個列（放數據）
th標籤：表明行中一個列（表頭數據）
caption標籤：表格標題
thead標籤：表格的頭部，用於裝表頭的tr（可用可不用，用處不大，僅僅用來分組）
tbody標籤：表格的主體，用於裝數據的tr（可用可不用，用處不大，僅僅用來分組）
tfoot標籤：表格的尾部，用於裝尾部的tr（可用可不用，用處不大，僅僅用來分組）
border屬性：表格邊框
width屬性：表格寬度
<table border="1" width="400px">
<!--表格標題-->
<caption>用戶列表</caption>
<!--定義表頭-->
<thead>
<tr>
<th>尾部</th>
<th>尾部</th>
</tr>
</thead>
<!--定義主體-->
<tbody>
<tr>
<td>萊因哈特</td>
<td>60</td>
</tr>
</tbody>
<!--定義尾部-->
<tfoot>
<tr>
<td>萊因哈特</td>
<td>60</td>
</tr>
</tfoot>
</table>
表格行列合併
colspan：跨列
rowspan：跨行
以下等價（colspan）
<tr>
<td colspan="2">0</td>
<td>1</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
以下等價（rowspan）
<tr>
<td rowspan="2">0</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
表單標籤form
表單主要用於收集用戶數據，而後經過提交咱們制定的服務端程序（java）進行處理
form標籤只是用來在網頁中配置表單的範圍，而具體的提交須要使用表單元素。
action：表明提交到後臺的服務器地址（服務器接受這個請求後，就會對這些數據進行處理）
method：提交到後臺的方法
（get默認：會把數據附加到路徑中即顯示在地址欄/明文傳輸不安全/有字符限制255byte）
（post：相對比get更安全/沒有字符限制）
input標籤：輸入框，用於蒐集用戶信息
（type：輸入框的類型，根據不一樣的type屬性值，功能也不同，輸入字段能夠是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。）
（name：輸入框必須寫這個屬性，表明控件的名稱，只有寫了這個屬性的表單元素，纔會提交到後臺）
（value：若是type爲text,password那麼就是默認值；若是type爲radio,checkbox那麼就是提交到後臺值）
（readonly：只讀屬性，一旦設置沒法輸入）
（disabled：禁用屬性，一旦設置，沒法選中也沒法輸入）
針對radio和checkbox的屬性：
checked="checked" 默認選中
<form action="#" method="get">
<!--type="text" 單行文本框--><!--name="username" 控件名稱--><!--value="abc" 默認值 --><!--readonly="readonly" 只讀,沒法輸入 -->
用戶名：<input type="text" name="username" value="abc" readonly="readonly"/><br/>
<!--type="password" 密碼框--><!--disabled="disabled" 禁用屬性-->
密 碼：<input type="password" name="userpsword" disabled="disabled"/><br/>
<!--type="submit"提交按鈕--><!--value="提交" 提交按鈕的文本-->
<input type="submit" value="提交"/>
<!--type="reset" 重置按鈕，重置表單爲默 認值-->
<input type="reset" value="重置"/>
<!--type="button"普通按鈕，通常與JS配合使用-->
<input type="button" value="按鈕"/>
<!--type="radio"單選框，注意：單選框同組必須設置相同的name屬性值-->
性&emsp別：男<input type="radio" name="sex" value="男"/>  女<input type="radio" name="sex" value="女"/>
<!--type="checkbox"複選框，注意：複選框同組必須設置相同的name屬性值-->
愛&emsp好：畫畫<input type="checkbox" name="love" value="畫畫"/>  看電影<input type="radio" name="love" value="看電影"/>
<!--type="file"文件選擇框，注意：複選框同組必須設置相同的name屬性值-->
頭&emsp像：<input type="file" name="headPic" />
<!--type="hidden"隱藏域選擇框：須要提交一個值，又不想被用戶看見，就須要使用隱藏域，隱藏域必須設值纔有意義-->
<input type="hidden" name="hid" value="250"/>
<!-- select下拉選擇框。name：提交到後臺的名字。option下拉選項。value：屬性提交的值。multiple：多選-->
部門<select name="dept" multiple="multiple">
<option value="1">開發部</option>
<option value="2">銷售部</option>
</select>
<!-- textarea多行輸入框，rows:多少行，cols:多少列，resize:none禁止拖動。<textarea>與</textarea>之間的內容就是輸入框的內容 -->
<textarea style="resize:none" rows="5" cols="10">輸入框的內容
</textarea>
</form>
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTML&CSS 彙總
- 2. html彙總
- 3. 【BS學習】BS總結
- 4. BS記錄1
- 5. HTML學習彙總
- 6. 【bs總結】
- 7. 【BS】總結
- 8. Bs總結
- 9. BS開發入門——Html
- 10. BUG彙總 1