第59節:Java中的html和css語言
歡迎到我的簡書檢視我的文集
前言:
HTML 英文: HyperText Markup Language內容
html是超文字標記語言,是網頁語言的基礎知識,html是通過標籤來定義的語言,所有程式碼都是由標籤所組成的,在html程式碼中不用區分大小寫.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <body> </body> </html>
html程式碼是由<html>開始的,並且由</html>結束的,包含頭部分<head></head>和體部分<body></body>兩部分組成.
頭部分是用來給html頁面新增屬性資訊的,頭部分是最先載入的內容,而體部分是頁面資料儲存的地方.
在html程式碼中,多數標籤都是有開始標籤和結束標籤的，其中有個別標籤因為只有單一功能,所以沒有開始標籤和結束標籤這樣.
這種個別標籤: <br />, 要建議使用 "/", 這是規範要求.
html為超文字標記語言,標記語言,要對標籤進行修飾,新增豐富的內容操作,可以對屬性值進行改變,增強效果,也可以增強使用者體驗感.
屬性與屬性值之間用“=”連線.
文字尾部 ".txt" 改副檔名 為 ".html".
開啟時預設關聯開啟瀏覽器.
格式：
// 超文字標記
<標籤名 屬性名='屬性值' />
<標籤名 屬性名='屬性值'> 資料內容 </標籤名>在html中,程式碼都是由標籤所組成的,程式碼邏輯相當低.
// 頭和體 <html> <head> <title></title> </head> // 網頁的屬性資訊 <body> </body> // 網頁的資料內容 </html>
html是網頁的最基本語言,為了操作資料,需要對資料進行不同標籤的封裝並通過標籤中的屬性可以對封裝的資料進行操作.
字型標籤
字型標籤為: <font>
例如: <font size="10px" color="red">達叔小生</font>
複雜顏色用16進製表示，表現形式#FF0000兩個數為一組，按紅，綠，藍排列，如：#00FF00表示綠色.
標題標籤: <h1><h2>...<h6>
數字越大越小來著.
列表標籤
<dt>為上層專案
<dd>為下層專案例項:
<dl>
<dt>名稱</dt>
<dd>達叔小生</dd>
<dd>dashucoding</dd>
<dt>部門名稱</dt>
<dd>技術部</dd>
<dd>研究部</dd>
</dl><ol>為數字標籤,<ul>為符號標籤,<li>為具體專案內容標籤
影象標籤
<img>
// 例項
<img src=”1.jpg” align=”middle” border=”3” alt=”圖片說明文字”/>
// align時屬性定義圖片的排列方式
// border是用來設定影象的邊框地圖 <map>
<img src="dashucoding.jpg" alt="圖片說明文字" usemap="#Map" />
<map >
<area shape="rect" coords="40,50,100,104" href="1.html" />
<area shape="circle" coords="118,203,40" href="2.html" />
</map>表格標籤
<table>
標題標籤為<caption>,是表格的標題
表頭標籤:<th>
行標籤:<tr>
單元格標籤:<td>例項:
// width值為百分比,讓表格的寬度隨瀏覽器視窗的大小變化
<table border="1" width=”40%”>
<caption>表格標題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr algin=”center”>
<td>達叔小生</td>
<td>dashucoding</td>
</tr>
</table>例項2:
// 表頭標籤:<th>
// colspan：th標籤佔兩列
<table border="1" width="40%">
<tr>
<tr>
<th colspan="2">
個人資訊
</th>
</tr>
<tr align="center">
<td>達叔小生</td>
<td>dashucoding</td>
</tr>
</tr>
</table><tbody></tbody>表格體超連結
<a>標籤
1. 超連結<a href=””>
<a href=”http://www...cn” target=”_blank”>達叔</a>
2. 定位標記<a name=””>
<a name=”標記”>標記位置</a>
<a href=”#標記”>返回標記位置</a>框架
<frameset rows="20%,*>
// 上部分
<frameset cols="28%,*>
</frameset>
</frameset>// <frameset>
框架標籤會到<head>和<body>之間
例子:
<frameset>
</frameset>畫中畫標籤：<iframe>
<iframe src=”1.html” >
</iframe>表單
表單標籤：<form>
輸入標籤 input
文字框 text
密碼框 password
單選框 radio
複選框 checkbox
隱藏欄位 hidden
提交按鈕 submit
重置按鈕 reset
按鈕 button
按鈕 button
影象 image
選擇標籤 <select>
子項標籤 <option>
多行文字框 <textarea>
表單提交：明確提交方式,指定method屬性值,預設為get,form表單中的action屬性值,是指定表單資料提交的目的地.
get和post
get提交的資料會顯示在位址列中,而post不會,使用get會對敏感資訊不安全.
get的提交資料體積有限,而post可以提交大體積的資料.
get將提交資料封裝到了http訊息頭的第一行,而post將提交的資料封裝到訊息頭後
提交表單建議使用
post
頭標籤
頭標籤放在<head></head>頭部分之間
<title>用於顯示瀏覽器的標題欄內容
<base> href 屬性和 target 屬性
<meta>用於網頁的描述資訊,是搜尋引擎的關鍵字進行搜尋
<link>
rel (目標文件與當前文件的關係)屬性
type (文件型別)屬性
media (在哪種裝置上起作用)屬性
XHTML(可擴充套件的超文字標記語言)
Extensible HyperText Markup Language
XML(可擴充套件標記語言) -> 對資料資訊的描述
Extensible Markup Language
HTML-> 資料顯示的描述
public class Server{
public static void main(String[] args) throws Exception {
ServerSocket ss = new ServerSocket(90);
Socket s = ss.accept();
System.out.println(s.getInetAddress().getHostAddress());
InputStream in = s.getInputStream();
byte[] buf=new byte[1024];
int len = in.read(buf);
String text = new String(buf,0,len);
System.out.println(text);
PrintWriter out = new PrintWriter(s.getOutputStream(),true);
out.println();
}
}meta標籤
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" /-->
<title>Insert title here</title>
</head>
<body>
你好
</body>
</html><i>一下</i>
<u>其他</u>
<strong>標籤</strong>
X<sub>2</sub> X<sup>2</sup>
<pre>程式碼格式</pre>Java中css的學習
css是用來實現網頁的頁面效果,層疊樣式表(Cascading Style Sheets),css將頁面的內容和顯示樣式進行了分離,提高了顯示功能.
四種方式:
- style屬性方式
<p style="";></p>- style內嵌方式
<style type=”text/css”>
</style>- 匯入方式
@import url(css_1.css);- 連結方式
<link rel="stylesheet" type="text/css" href="css_1.css" media="screen" />樣式優先順序是由上到下，由外到內
css選擇器共有三種：
html標籤名選擇器class選擇器 -> 標籤名.class值id選擇器 ->#id值
i. 關聯選擇器
p b { color:#fff;}ii. 組合選擇器
p,div { color:#fff;}iii. 偽元素選擇器
a:link 超連結未點選狀態。
a:visited 被訪問後的狀態。
a:hover 游標移到超連結上的狀態（未點選）。
a:active 點選超連結時的狀態。
@import
達叔小生：往後餘生，唯獨有你
You and me, we are family !
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書部落格： 達叔小生
https://www.jianshu.com/u/c785ece603d1
結語
- 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
- 小禮物走一走 or 點贊