JavaWeb學習筆記之HTML&CSS
文章目錄
相關知識： https://blog.csdn.net/mokexfdgh/article/category/8092196
HTML
html：HyperText Markup Language->超文字標記語言->網頁語言
超文字->超出文字的範疇，可以對文字實現更多的操作
標記->html所有的操作都是通過標記實現，標記就是標籤，<標籤名稱>
例如：
<font size="S" color="red">這是我的第一個html程式!</font>
html的規範：
<html>
<head>
<title>這是一個標題</title>
</head>
<body>
<font size="S" color="red">這是我的第一個html程式!</font> <br/>
<hr/>
</body>
</html>
(1)一個html檔案具備開始的標籤和結束的標籤<html>…</html>
(2)html包含兩部分內容
<head>設定相關資訊</head>
<body>顯示在頁面上的內容都寫在body裡面</body>
(3)html的標籤有開始標籤，也要有結束標籤
<head></head>
(4)html的程式碼不區分大小寫
(5)有的標籤，沒有結束標籤
換行：<br/> 分割線：<hr/>
html的操作思想：
網頁中有很多資料，不用的而資料可能需要不同的顯示效果，這個時候需要使用標籤把要操作的資料封裝起來。通過修改標籤的屬性值實現標籤內資料樣式的變化。
一個標籤相當於一個容器，想要修改容器內資料的樣式，只需要改變容器的屬性值，就可以容器內資料樣式的變化
html中常用的標籤
1.文字標籤和註釋標籤
文字標籤：修改文字樣式
<font></font>
屬性：
size->文字的大小，取值範圍1-7，超過7還是7
color->文字的顏色，兩種表示方式：英文單詞，red,green,blue,black,white,yellow/十六進位制數表示，RGB
註釋標籤：
<!--這是一個註釋-->
2.標題標籤，水平線標籤和特殊字元
標題標籤：
<h1></h1> <h2></h2> <h3></h3>...<h6></h6>
<!-- 從h1到h6，大小依次變小，同時會自動換行 -->
水平線標籤
<hr size="S" color="bule"/>
<!-- 屬性：size:1-7 color:顏色 -->
特殊字元（轉義）
< : <
> : >
：
& : &
3.列表標籤
<dl>
<dt> 上層內容 </dt>
<dd> 下層內容 </dd>
<dd> 下層內容 </dd>
</dl>
顯示效果如下：
上層內容
下層內容
下層內容
有序列表
<ol>
<li> 內容1 </li>
<li> 內容2 </li>
<li> 內容3 </li>
</ol>
<!-- 屬性 type：設定排列方式，1(預設數字) a i -->
顯示效果如下：
1.內容1
2.內容2
3.內容3
無序列表
<ul type="disc">
<li> 內容1 </li>
<li> 內容2 </li>
<ul>
<!-- 屬性 type：設定特殊符號，空心圓circle，實心源disc(預設)，實心方塊square -->
顯示效果如下：
·內容1
·內容2
4.影象標籤
<img src="圖片的路徑" width="寬度" height="長度" alt="圖片上的文字"/>
補：路徑
絕對路徑：**
相對路徑（三種情況）：
圖片在同一路徑下，直接用過名稱使用：“name.jpg”
圖片在html的下層目錄（img資料夾中）：“img\name.jpg”
圖片在html的上層層目錄（img資料夾中）："…/name.jpg"
5.超連結標籤
連結資源
<a href="連結到資源的路徑"> 顯示在頁面上的內容 </a>
<!--
屬性：href:路徑，target:設定開啟方式（_blank:在一個新視窗開啟，_self:在當前頁開啟 預設）
當超連結不需要到任何地址時,href設定為"#",為空會跳出檔案選擇框
-->
定位資源
<!-- 定義一個位置 -->
<a name="top"> 頂部 </a>
<!-- 回到這個位置 -->
<a href="#top"> 回到頂部 </a>
原樣輸出標籤:<pre></pre>
6.表格標籤:可以對資料進行格式化,使資料顯示更加清晰
<table border="1" bordercolor="blue" cellspacing="0" whidth="200" height="150">
<!--
屬性: border-表格線粗細 bordercolor-表格線顏色 cellspacing-單元格之間的距離
width-表格的寬度 height-表格的高度
-->
<caption> 表格的標題 </caption>
<tr align="center"><!-- 表示一行,屬性: align-對齊方式(left center right) -->
<td> </td> <!-- td表示單元格 -->
<td> </td>
<td> </td>
</tr>
<tr>
<th> </th> <!-- th單元格實現劇中和加粗 -->
<th> </th>
<th> </th>
</tr>
</table>
上面表示為兩行,每行三個單元格的表格
合併單元格:跨行合併(rowspan)/跨列合併(colspan)
<td rowspan="3"> </td>
<td colspan="3"> </td>
<!-- 注意:跨行跨列時,其他相應的列或行應該相應的減少單元格 -->
7.表單標籤:將資料提交到伺服器
<form action="out.html" method="post">
<!-- form屬性
action:提交到的out.html地址,預設提交到當前頁面的位址列
method:表單提交方式,常用方式-get和post,預設是get
get:請求提交位址列會攜帶提交的資料(不安全,且資料大小有限制)
post:不會攜帶提交的資料,而是存在*請求體??*裡(資料大小沒有限制)
enctype:做檔案上傳時才需要設定這個屬性,詳見後文
-->
<!-- 輸入項:輸入內容或選擇內容,必須有name屬性 -->
<input type="text" name="phone"/><br/> <!-- 普通輸入項 -->
<input type="radio" name="sex" value="female" checked="checked"/>女 <input type="radio" name="sex" value="male"/>男<br/>
<input type="submit" value="註冊"/><br/>
<input type="image" src="圖片路徑"/>
<!--
input輸入項的type屬性
text:普通輸入項
password:密碼輸入項
radio:單選輸入項(裡面需要屬性name,屬性值必須要相同,還有value值,checked="checked"預設選擇)
checkbox:複選輸入項(可以多選)(裡面需要屬性name,屬性值必須要相同,還有value值)
file:檔案輸入項(可以實現檔案上傳)
hidden:隱藏項
submit:提交按鈕//當在各種輸入項寫入內容並提交後,資料會以鍵值對(name=輸入的值)提交到action的地址
image:按鈕變為圖片來進行提交(需要設定圖片路徑src)
reset:重置按鈕,使各個輸入項變為初始狀態(可帶value屬性)
button:普通按鈕,和js一起使用,能執行按鈕事件
-->
<!-- 下拉輸入項 -->
<select name="birth">
<option value="0">請選擇</option>
<option value="1997" selected="selected">1997</option> <!-- 預設選擇1997 -->
<option value="1998">1998</option>
</select>
<!-- 文字域 -->
<textaread cols="20" rows="5"></textaread>
</form>
其他常用標籤
字型加粗：<b></b>
下劃線：<u></u>
斜體：<i></i>
刪除線：<s></s>
原樣輸出：<pre></pre>
段落標籤：<p></p>//比br標籤多空一行
下標：<sub></sub>
上標：<sup></sup>
自動換行：<div></div>
在一行顯示：<span></span>
html的頭標籤的使用
title：瀏覽器標籤頁上顯示的內容
meta：提供有關頁面的基本資訊
<!-- 當前頁面3秒後自動跳轉至01-hello.html -->
<meta http-equiv="refresh" content="3;ur1=01-hello.html" />
base：設定超連結的基本設定
<!-- body中的超連結都被設定了target屬性，即開啟方式 -->
<base target="_blank" />
link：引入外部檔案（CSS）
框架標籤
<frameset></frameset>
屬性：rows->按照行進行劃分 cols：按照列進行劃分
<frameset rows="80,*">
<frameset cols="80,*">
<frame>
引入具體顯示的頁面
<frame name="lower_left" src="b.html">
注：使用框架標籤時，不能寫在body裡，且需要把body去掉
<frameset rows="80,*">//把頁面劃分成上下兩部分
<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>
實現點選左頁面的超連結後，使其在右頁面顯示，則需在b.html設定超連結屬性target=“lower_right”
CSS
CSS：層疊樣式表用來定義網頁的顯示效果（解決html程式碼對樣式定義的重複）
將網頁內容和顯示樣式進行分離，提高了顯示功能
CSS和html的四種結合方式
1.每個html標籤上都有一個style屬性
<div style="background-color:red;color:green;">這是演示語句</div>
2.使用html的<style>標籤，寫在head裡面
<head>
<style type="text/css">
div{<!-- 對body當中的所有div中的資料設定樣式，就是一個選擇器 -->
background-color:blue;<!-- 格式 屬性名:屬性值; -->
color:red;
}
</style>
</head>
3.在style標籤裡使用語句 @import url(css檔案的路徑)
<style type="text/css">
@import url(div.css);
</style>
<!--
div.css檔案中可以寫
div{
background-color:green;
color:red;
}
-->
4.使用頭標籤link，引入外部css檔案
<link rel="stylesheet" type="text/css" href="css檔案路徑" />
第三種結合方式，在某些瀏覽器不起作用，我們一般採用第四種方式
結合方式之間的優先順序:由上到下，由內到外，優先順序由低到高（即後加載優先順序高）
CSS的選擇器
1.三種基本選擇器
(1)使用標籤名作為選擇器的名稱
div{
background-color:blue;
color:red;
}
(2)class選擇器（每個標籤都有一個class屬性）
<div class="haha">演示1！</div>
<p class="haha">演示2！</p>
<!-- 選擇器 -->
div.haha{
backgrond-color:yellow;
}
.haha{<!-- 作用於所有class為haha的標籤 -->
backgrond-color:yellow;
}
(3)id選擇器（每個標籤都有一個屬性id）
<div id="hehe">演示！</div>
div#hehe{
background-color:green;
}
#hehe{}<!-- 作用於所有id為hehe的標籤 -->
三個選擇器的優先順序：style > id選擇器 > class選擇器 > 標籤選擇器
2.三種擴充套件選擇器
(1)關聯選擇器（單獨改變巢狀標籤的樣式）
<div><p>演示！</p></div>
div p{
background-color:green;
}
(2)組合選擇器（不同標籤設定相同的樣式）
<div>演示1</div>
<p>演示2</p>
div,p{
background-color:orenge;
}
(3)偽元素選擇器（css裡面提供了定義好的樣式，可以直接使用，詳見CSS文件）
例如：超連結的狀態（原始狀態link，滑鼠懸停狀態hover，點選狀態active，點選後狀態visted）
<style type="text/css">
a:link{
background-color:red;
}
a:hover{
background-color:green;
}
a:active{
background-color:blue;
}
a:visted{
background-color:orenge;
}
</style>
<a href="超連結地址">超連結</a>
CSS的盒子模型
在進行佈局前需要把資料封裝到一塊一塊的區域內
1.邊框:文字內容的邊框，border（可以統一設定，也可以分別設定border-top,border-bottom,border-left,boder-right）
div{
width:200px;
height:150px;
border:2px solid blue;<!-- 粗細 樣式 顏色 -->
}
2.內邊距：文字距邊框的距離，padding（padding-top,padding-bottom,padding-left,padding-right）
#div32{
border:2px solid blue;
padding:20px;
}
3.外邊距：邊框距外邊框的距離，margin（margin-top,margin-bottom,margin-left,margin-right）
#div33{
margin:30px;
}
CSS的佈局
1.佈局的漂浮，屬性float（屬性值：left,right）
<!-- div都是盒子封裝過的資料 -->
#div34{
float:left;<!-- 文字（div35）流向物件的右邊 -->
}
2.佈局的定位，屬性position（屬性值：static,absolute,relative）
#div36{
position:absolute;<!-- 將物件（div36）從文字流中脫出,div36疊在div37上面 -->
top:300px;
left:300px;
right:300px;
bottom:400px;<!-- 可以通過這些進行div36的定位 -->
}
#div36{
position:relative;<!-- 不會將物件從文字流中脫出（區別） -->
top:300px;
left:300px;
right:300px;
bottom:400px;<!-- 可以通過這些進行div36的定位 -->
}